WordPress.org

Support

Support » Themes and Templates » [Resolved] Changing the menu background

[Resolved] Changing the menu background

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • Moderator Kathryn

    @zoonini

    Automattic Happiness Engineer

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

    Customize Writr WordPress

    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.

    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

    Cheers,
    JR John

    Moderator Kathryn

    @zoonini

    Automattic Happiness Engineer

    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.

    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?

    THANK YOU!

    Cheers,
    JR John

    Moderator Kathryn

    @zoonini

    Automattic Happiness Engineer

    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:

    http://wordpress.org/support/topic/how-to-edit-lines-above-site-title?replies=5#post-5327923

    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:

    An Intro to CSS: Finding CSS Selectors

    An Intro to CSS, or How to Make Things Look Like You Like

    Intro to CSS: Previewing Changes with the Matched Rule Pane

    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:

    http://blog.copyjoint.com/wp-content/themes/writr/style.css

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘[Resolved] Changing the menu background’ is closed to new replies.