Changing sidebar color

Support Area Forums Umami Changing sidebar color

This topic contains 10 replies, has 2 voices, and was last updated by  Bill Robbins 3 years, 2 months ago.

Viewing 11 posts - 1 through 11 (of 11 total)
URL to the page in question: http://
  • Author
    Posts
  • #37020

    Jackie H
    Participant

    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?

    #37024

    Bill Robbins
    Moderator

    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

    #37025

    Jackie H
    Participant

    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!

    #37029

    Bill Robbins
    Moderator

    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

    #37033

    Jackie H
    Participant

    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).

    #37034

    Bill Robbins
    Moderator

    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

    #37036

    Jackie H
    Participant

    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?

    #37037

    Bill Robbins
    Moderator

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

    #37038

    Jackie H
    Participant
    #37039

    Jackie H
    Participant

    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! 🙂

    #37042

    Bill Robbins
    Moderator

    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

Viewing 11 posts - 1 through 11 (of 11 total)

The topic ‘Changing sidebar color’ is closed to new replies.