Changing sidebar background color

Hello, I had the chance to look over your issue. Here are some changes to the css that you can add to help make those changes ??

I don’t recommend making these changes to your core template css. If you ever update it, then your changes will be overwritten. You can place this css into a custom css file or child theme css override; Basically in a css file or location that loads AFTER the core css. CSS inheritance rules will dictate that the following rules override core css. Alternatively in a pinch you can add the !important statement at the end of a css declaration if css changes you make don’t take effect due to some issue you can’t find. But this is to be avoided where ever possible. (eg: background:#000 !important; )

/* Remove grey boxes from around widget boxes */
.widget {
background-color: transparent;
}

/* Change link color of widget area links */
.widget a {
color: #E2A3E0;
}

/* Make sidebar background black  and move it so that it fills in sidebar area instead of appearing as a long box with white margins within the sidebar area */
.site-main .widget-area {
background: #000;
color: #fff;
margin: -40px -20px 0px 0px;
}

Thank you so much! That worked perfectly!

Awesome! Glad to help ??

I’m hoping you can help me out with something similar. Now that the sidebar is exactly how I want it, is there a way to add another sidebar on the left side that looks exactly the same?

From what i can see, it does look like it would be a major overhaul of the template. Being a mobile responsive template, to add another sidebar would involve some changes to the html of the template such that it might be easier to start with one that already has such capability. Some templates do have custom page layouts you can select for a post/page that include a two sidebar layout; one on each side of the the content area. Check to see if your template has that. If it does then you can choose that layout for your pages/posts. If not, one tip i uusually give to people when selecting a template. Don’t look for a template built for a niche, eg. a ‘restaurant’ template, a ‘real estate’ template. Look for a template that has the layouts you like and looks really good on mobiles; mobile menu works and looks good, things collapse as they should; built in hidden/display classes, etc. After that the colors and background images can be made to suit ANY purpose. One that I like is GeneratePress; free. It’s solid and has the page layout choice you need. You can see an example i did for a homecare office’s rewards program here – pinnaclebucks.com . As hard as it is to think of switching, it might be a better choice in the long run depending on how bad you need/want the extra sidebar. Also if you use a developer, Generatpress would be easy enough for them to mod. Some of the lower quality templates can become quite the nightmare. Speaking from experience ?? lol Hope this helps. Modding the current template so it has the extra sidebar and keeps the responsiveness on mobiles might be harder with the current template you have. Let me know if you have questions! Best regards ??

Oh, okay. Understandable. It’s not a big deal. I was just curious if it was easy to do. Thank you for responding!

It has been months since you helped me out, and I hope you are still available. If not, I hope someone else can see this and offer some assistance. So, my sidebar is black, which looks great! But, I noticed that when I go to my website on Firefox or Internet Explorer, it’s white, not black. It works fine on Safari. Any ideas on how I can fix that?

I had a quick look at the css. It looks almost like your site is caching versions of css causing weird issues. Perhaps you can look at where you pasted the css you used above to change the looks. Make sure you didn’t accidentally nest the css I gave you in a @media or @print or @whatever css declaration. These only use the css within them when the display conditions are met. From chrome the background was white, from ie and firefox it was black. When i inspect the css in chrome, it looks like the css block i gave you is nested within an @ block missing a closing }