• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

How Can I Change the Sidebar Background Color?

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

Community Forums › Forums › Archived Forums › Design Tips and Tricks › How Can I Change the Sidebar Background Color?

This topic is: not resolved

Tagged: background color, Sidebar, Smart Passive Income

  • This topic has 10 replies, 2 voices, and was last updated 8 years ago by CleanPageDom.
Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • April 21, 2017 at 3:10 pm #205145
    Scott G.
    Member

    Does anyone know how to change the background color on the sidebar? I tried changing the color in ".sidebar-primary" but it only changes a few blocks between widgets. Is there a default widget background color? It would also be helpful to know how to change the page background color so I can play with the contrast between them.

    I am using the Smart Passive Income child theme.
    Website: InvestingGoldNow.com

    Thank you!

    Scott

    http://investinggoldnow.com
    April 25, 2017 at 4:26 am #205245
    CleanPageDom
    Participant

    As well as the .sidebar-primary, you need to alter the ".sidebar .widget" as this has a background-color set to #fff.

    There is also some additional styling going on on some of the widgets (such as Recent Posts) which you would need to account for.

    And you'll notice that if you add a color/remove the background color then your widget text sits right up against the side of the widgets, so you'd perhaps need to add some left/right padding to shift that in some. Such as .sidebar .widget { padding: 0 40px; padding: 0 4rem; }


    Let’s build a website together…

    April 26, 2017 at 8:31 am #205344
    Scott G.
    Member

    Awesome help CleanPageDom, thank you. With your help, I was able to get the whole "inner block" background color changed... that includes the widgets and in between the widgets.

    The remaining pieces are above the widgets (to the nav bar), below the widgets (to the footer), and to the right of the widgets (to the edge of the screen/page).

    April 26, 2017 at 12:34 pm #205372
    CleanPageDom
    Participant

    Hi Scott

    Great. Sorry, do you mean you need help with those last bits?

    Thanks
    Dom


    Let’s build a website together…

    April 26, 2017 at 1:06 pm #205377
    Scott G.
    Member

    Yes Dom, I'm still trying to figure that out. You have been a great help, and I thank you for that. If you know how to handle those last bits, I'd appreciate your help there too.

    Thanks!
    Scott

    April 26, 2017 at 1:20 pm #205379
    CleanPageDom
    Participant

    Hi Scott

    Where am I looking? There's just a bit of green left as I see it:

    https://ibb.co/fRBWMQ

    Thanks
    Dom


    Let’s build a website together…

    April 26, 2017 at 1:25 pm #205382
    CleanPageDom
    Participant

    Hi Scott

    Where am I looking? There's just some green left over as I see it.

    Sidebar

    Thanks
    Dom


    Let’s build a website together…

    April 26, 2017 at 1:59 pm #205385
    Scott G.
    Member

    Oh sorry, I did not leave the changes in place. I put it back. Thank you for checking it out.

    May 6, 2017 at 2:18 pm #206025
    Scott G.
    Member

    Hello... I'm reaching out again to see if anyone knows how to answer the question for this post. I'm trying to change the background color of the sidebar using the Smart Passive Income child theme.

    Any help is very much appreciated!

    I have been able to get part of the background color changed thanks to Dom's suggestions. There remains space at the top, bottom, and right of the sidebar where I have not yet been able to change the background color. Possibly to the left of the sidebar as well, but I am not sure because I do not know where the actual margin is.

    Here is an example of the page with a sidebar:
    http://investinggoldnow.com/blog

    May 6, 2017 at 2:23 pm #206031
    Scott G.
    Member

    Hello... I'm reaching out again to see if anyone knows how to answer the question for this post. I'm trying to change the background color of the sidebar using the Smart Passive Income child theme.

    Any help is very much appreciated!

    I have been able to get part of the background color changed thanks to Dom's suggestions. There remains space at the top, bottom, and right of the sidebar where I have not yet been able to change the background color. Possibly to the left of the sidebar as well, but I am not sure because I do not know where the actual margin is.

    Here is an example of the page with a sidebar:
    http://investinggoldnow.com/blog

    May 19, 2017 at 6:54 am #206690
    CleanPageDom
    Participant

    Hi Scott

    Sorry for not getting back to you. I don't seem to have received an email update.

    Anyway, I've managed to remove the backgrounds using Chrome's Inspect.

    For the top widget:
    .ck_form.ck_vertical { background: transparent; }

    For the recent posts:
    .sidebar .widget_recent_entries li a { background: transparent }

    You could combine those two rules as they're both doing the same thing.

    Let me know how you get on with that.

    Thanks
    Dom


    Let’s build a website together…

  • Author
    Posts
Viewing 11 posts - 1 through 11 (of 11 total)
  • The forum ‘Design Tips and Tricks’ is closed to new topics and replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2025 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble