Changing the sidebar widget look via child theme

  • Resolved flabeachbum

    (@flabeachbum)


    8 years, 8 months ago

    I currently am running a child theme for Customizr. My site is ZachKidd.com

    I want to change the look of the sidebar widgets, specifically, background, border, and buffer.

    They run together now, and really need defined areas.

    I found some code for widget look modification, but as soon as I added it, it bricked the site and I had to uninstall the child theme via FTP.

    I have since re-installed a new child theme, but figured it was better to ask for help.

    Also, while we’re at it, I would like to change the settings of the footer widget area too.

    Thanks in advance!

    Zach

Viewing 5 replies - 1 through 5 (of 5 total)
  • Thread Starter flabeachbum

    (@flabeachbum)

    Forgot to mention that the front page is full-page. Any other page should show the sidebars.

    OK, so start with:

    #right.widget-area {
    background-color: red;
    border: 4px solid black;
}
#footer {
    background-color: green !important;
}

    Do you mean padding (buffer)?

    Thread Starter flabeachbum

    (@flabeachbum)

    Yes, padding / buffer. If I can add a small shadow that would be great too.

    Also, I would prefer each widget to have the attributes, not just the entire sidebar. I’m trying to visually separate each element, if that makes sense.

    I have a subdomain running a different theme (Adventure).

    The sidebar / widget treatment there is a bit too much for my main site, but the separation is obvious.

    Pulling from that theme, I think this is the relevant code:

    /* The Sidebar / Widgets Area
------------------------------------------------------------------*/

aside {
	background: rgba(0,0, 0, .50);
	border:none;
	border-radius:2px;
	box-shadow:-1px -1px 2px #111;
    clear:right;
	color:rgb(204, 203, 196);
	float:right;
	font-size:.95em;
	margin:0 0 3em;
    padding:0% 2% 2%;
	text-align:left;
	text-shadow:0 0 1px #666;
	width:27%;}

    Footer is now perfect (changed to white). Thanks!

    Thread Starter flabeachbum

    (@flabeachbum)

    Google and I figured it out.

    For anyone else who may need it:

    aside {
	background: transparent;
	border: 2px;
	border-radius: 3px;
	-webkit-box-shadow: 0 3px 10px 0 rgba(199,199,199,1);
	-moz-box-shadow: 0 3px 10px 0 rgba(199,199,199,1);
	box-shadow: 0 3px 10px 0 rgba(199,199,199,1);
	clear: right;
	float: center;
	margin: 0 0 1em;
	padding: 3%;
	text-align: center;
}

    And if you want a real-time way to preview and generate the box shadow code, go to https://www.cssmatic.com/box-shadow.

    Just copy & paste your code into place. Easy.

    Great post!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Changing the sidebar widget look via child theme’ is closed to new replies.