Support » Theme: Stitch » Changing color of sidebar/masthead

  • Hi. I want to change the dark color of the lefthand sidebar/menu of this wonderful theme to #183757.

    Can anyone provide me with the css code to do this?

    Thanks in advance.


Viewing 9 replies - 1 through 9 (of 9 total)
  • Looks like it’s here, and it uses an image (images/background.jpg) to create that colour:

    #masthead:before {
        background: url("images/background.jpg") repeat fixed 0 0 / 400px auto transparent;
        box-shadow: 1px 0 3px 0 rgba(0, 0, 0, 0.7);
        content: "";
        height: 100%;
        left: 0;
        padding: 1.8em;
        position: fixed;
        text-align: center;
        top: 0;
        width: 316px;
        z-index: -1;

    You would remove the background line and replace it with:

    background-color: #183757;

    But keep in mind two things! First, you’re going to lose that texture in the image. The alternate way to do this would be to download the image, adjust it in a graphics program like Photoshop so it’s the shade of colour you want, upload it again and overwrite the old one. With that method, you wouldn’t change the code at all.

    The second thing to remember is that if you make any changes to code, it’s best for safety’s sake to create a child theme first, or use a custom css editor. That way, if the Stitch theme gets updated in the future, you can update it without losing your changes.

    To keep the texture

    #masthead:before { opacity: 0.5; }
    #masthead { padding-right: 1.8em; background-color: #2f6ba8; }
    .main-navigation ul ul { background: #183757;}

    To not keep the texture

    #masthead:before { display: none; }
    #masthead { padding-right: 1.8em; background-color: #183757; }
    .main-navigation ul ul { background: #183757; }

    If the above doesn’t do it, then follow what lettergrade suggested, edit that background image in Photoshop.

    Thanks to both of you I’m well on my way to getting the color and texture I’m looking for .

    Yu can see an example at



    Please add height:100% to #masthead too, I wasn’t aware of that earlier. So for the #masthead, it will be this

    #masthead { padding-right: 1.8em; background-color: #2f6ba8; height: 100%; }

    Great, @dondemaio. Thanks, @paulwpxp!

    Agh, I just noticed that the above code doesn’t quite work. The sidebar color doesn’t quite go to the bottom of the page, even with height:100% added. Take a look:

    Any ideas how to get around that?



    It’s going all the way to the bottom of the page for me. Which browsers have you viewed it in?

    Hi, lettergrade. I think I found the problem. The line below in my custom css is the source of the problem, although I have no idea why.

    #masthead:before { opacity: 0.5;background-color: #f7f6f2;height;100%; }

    I’m trying to change the color of the sidebar. Any Advice?


    Hi Don! I can’t find the page now. Do you still need some help?

Viewing 9 replies - 1 through 9 (of 9 total)
  • The topic ‘Changing color of sidebar/masthead’ is closed to new replies.