WordPress.org

Ready to get started?Download WordPress

Forums

Stitch
Changing color of sidebar/masthead (10 posts)

  1. dondemaio
    Member
    Posted 11 months ago #

    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.

    Don

  2. lettergrade
    Member
    Posted 11 months ago #

    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.

  3. paulwpxp
    Font hero
    Posted 11 months ago #

    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.

  4. dondemaio
    Member
    Posted 11 months ago #

    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 http://dondemaio.com/wpme/

    Don

  5. paulwpxp
    Font hero
    Posted 11 months ago #

    @dondemaio

    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%; }
  6. lettergrade
    Member
    Posted 11 months ago #

    Great, @dondemaio. Thanks, @paulwpxp!

  7. dondemaio
    Member
    Posted 11 months ago #

    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:

    http://dondemaio.com/wpme/voices-home-page/

    Any ideas how to get around that?

    Thanks.

    Don

  8. lettergrade
    Member
    Posted 11 months ago #

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

  9. dondemaio
    Member
    Posted 11 months ago #

    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?

    Don

  10. lettergrade
    Member
    Posted 11 months ago #

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

Reply

You must log in to post.

About this Theme

About this Topic