[resolved] Changing the menu background (6 posts)

  1. jrjohn
    Posted 2 years ago #

    Hi there,

    I run http://blog.copyjoint.com/.

    I'd like to change the background of the sidebar (i.e. the section on the left of the website that displays the widgets and the website description, the writer's photo, etc.).

    I do NOT want to change the website background, the option provided in the theme customizations.

  2. You can choose from six colour schemes that will in turn change the left sidebar colour, under Appearance > Customize > Theme Options:


    That will change the many instances of the sidebar colour that are used for other page elements as well.

    Let me know if one of those colour schemes does the trick for you.

  3. jrjohn
    Posted 2 years ago #

    Hi Kahtryn,

    Thank you for the answer, but I'm sorry, I wasn't being very specific.

    I'd like to change the sidebar into a completely different color than the options given inn the customize theme section

    JR John

  4. This bit of custom CSS should change just the sidebar colour:

    #masthead, body:after {
         background-color: #xxxxxx;

    Change xxxxxx to whatever colour code you prefer.

    Don't edit the theme files directly, otherwise your changes will be overwritten when the theme is updated.

    An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You'll then add your custom CSS in the new stylesheet editor that'll appear in your dashboard, under Appearance > Edit CSS.

    As alternatives, you could either install a standalone custom CSS plugin, or create a child theme.

  5. jrjohn
    Posted 2 years ago #

    Hi Kathryn,

    It worked -- absolutely fantastic, thank you.

    Just one thing though -- the color change is offset by the existing double-line separater between sidebar widgets, and by the color of the "Continue Reading" tag.

    Could you supply me with the CSS to change those two items as well?


    JR John

  6. Yes, there are many other elements linked to the sidebar colour. :-)

    In this post, I helped another person change the colour of the decorative double lines in the sidebar, so have a look:


    For the "Continue Reading" button, I used Firebug to select the element and find its class:

    .more-link {
         background-color: #xxxxxx;

    Learning how to target your site's CSS will help you make certain design changes. Here are some very helpful posts that will help you customize your site with CSS:




    You may want to look through the stylesheet to find all instances of the original sidebar colour, so you can be sure to find and change them all:


    Finally, just a big heads-up that since you've opted to edit the theme's stylesheet directly as opposed to using one of the recommended methods above, the next time you update the theme, all your changes will be overwritten. Please be careful. :-)

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic


No tags yet.