Changing sidebar color

[Jackie H]

I’m looking to change the color for the sidebar to rgba(28, 125, 174, 1). Would I do this by changing the background-color for #sidebar in the style sheet?

[Bill Robbins]

Hi Jackie,

You can absolutely change that color. In the Appearance section of your WordPress dashboard, click on Theme Options and choose the Advanced tab. Scroll down to the Custom CSS box and add this:

body::before,
#content,
#mobile-header {
	background-color: rgba(28, 125, 174, 1);
}

@media only screen and (max-width: 767px) {
	
	#sidebar {
		background-color: rgba(28, 125, 174, 1);
	}

}

Save your changes and that should change the color for you. If you run into any trouble, let me know.

Thanks and have a great weekend,
Bill

[Jackie H]

Hi Bill! Thanks for your reply. I was able to change the color per your instructions but I’m having a problem with the opacity of the sidebar. I’m trying to mimic the black transparent sidebar of the original theme, but the code above gives me a solid blue sidebar. I attached a screenshot to show you what I’m seeing. Any chance you have something that will fix this?

Also, I was hoping I’d be able to change the main body background color to white (so I could have the text be in blue).

Sorry for all the questions, Bill! Thank you so much for your help!

Attachments:

1. 

   Screen-Shot-2016-06-10-at-5.16.10-PM.png
   

[Bill Robbins]

Questions are always welcome. We can do those things. Instead of the snippet above, use this instead:

#content {
	color: rgba(28, 125, 174, 1);
	background-color: rgba(255, 255, 255, .8);
}

body::before,
#mobile-header {
	background-color: rgba(28, 125, 174, .8);
}

@media only screen and (max-width: 767px) {
	
	#sidebar {
		background-color: rgba(28, 125, 174, .8);
	}

}

So here the top style is for the main content area. It should have a white background color and it uses the same blue from the sidebar as the text color. Feel free to change that to a different one if you’d like to.

The next two styles are for the sidebar. The .8 at the end of the rgba color is the opacity of the color. It’s on a scale from 0 to 1.0 with 0 being completely transparent and 1.0 being completely opaque. Feel free to experiment with that value to get the opacity you need. Often different colors need slightly different opacities to look just right.

Let me know if you run into any questions or trouble there,
Bill

[Jackie H]

Ah, thank you so much, Bill! Worked like a charm 🙂

One more question! I have a sample photo in place currently so I can get a feel of the slideshow background. I’d like this to show up on all of my pages, but currently it’s only showing on the Menu/Food page. What should I do to make sure it shows up on all the pages (Home Page, Services, Staff, etc).

[Bill Robbins]

Glad to hear that did the trick ?. You can set a default background for the slideshow. Go to the Appearance section in your dashboard and click on Theme Options. On the Background tab down below the timing, transition and other options, you’ll find uploaders for ten slides. You can add defaults here. They’ll be used in the event that a page does not have one set. Let me know if adding a slide there doesn’t do the trick for you.

Bill

[Jackie H]

I have one photo uploaded to Slide 1, and I think it used to show on all the pages when I initially uploaded it. I’m not sure why it only shows up in the Food/Menu section now. I’ve tried removing the photo and re-adding it but still no luck. Any ideas on what could be going on?

[Bill Robbins]

I’d be glad to take a look for you. What’s e URL to your site?

[Jackie H]

It’s http://flosfreshkreation.com/wordpress. Thanks, Bill!

[Jackie H]

Ah ha! I figured it out, Bill. I think the home page and the other pages that weren’t working were part of the demo. I replaced those with new pages, so everything works fine now. Thanks for all of your help! 🙂

[Bill Robbins]

Good Morning Jackie. Glad you resolved the missing background images. Sorry you beat me to it. If you need anything else, let me know.

Have a great week,
Bill

[Author]

Posts