• 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

Widget Background Colour (Outreach Pro)

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 › Widget Background Colour (Outreach Pro)

This topic is: resolved

Tagged: background, outreach, widget

  • This topic has 8 replies, 2 voices, and was last updated 8 years, 3 months ago by Pixel Frau.
Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • December 3, 2014 at 10:04 am #133505
    Jack
    Member

    Hi,

    We are using the Outreach Pro child theme and have placed the slider in the home-top like in the demo. but instead of the site inner being the grey we changed it to white but this also made the background for the home-top widget white. as it didn't have a background. How do we give the home-top widget area a background colour.

    Any help is greatly Appreciated,

    Kind Regards,

    Pete.

    December 3, 2014 at 11:13 am #133510
    Pixel Frau
    Member

    You can do this by adding a short line of code to stylesheet.css. If you provide a link to the site, I can tell you what to add.

    December 4, 2014 at 5:06 am #133557
    Jack
    Member

    Hi

    Thanks for your response the address is:
    http://injuryactive.com/

    December 4, 2014 at 6:44 am #133562
    Pixel Frau
    Member

    The home-top widget area doesn't extend to either side of the slider, which is why the home-top background color you've added isn't showing. The slider is essentially covering up that background color.

    Since you only want this to be changed on the homepage, you could add this to your CSS. Replace "hexcode" with the actual hex code for the color you want to use.

    .home .site-inner {
    background-color: #hexcode;
    }
    December 4, 2014 at 7:04 am #133563
    Jack
    Member

    Thanks for your help it worked out great, one more question do you know how we would go about doing this at the bottom of the page with the new_home_widget area. we tried putting a background on just the widget but it didn't include the margin area.

    Many Thanks,

    Pete.

    December 4, 2014 at 7:10 am #133566
    Pixel Frau
    Member

    The best thing to do would be to add a wrap within the widget area. If you look at the source code for the other home widget areas, you'll see they all have a wrap.

    Then you can add the background color to the widget area.

    December 4, 2014 at 7:19 am #133570
    Jack
    Member

    Is this what you meant, sorry new to css. we also tried including the margin css into it and it didn't change anything either. any tips?

    .new_home_widget .wrap {
    	background color: #353535;
    }
    December 4, 2014 at 7:27 am #133574
    Jack
    Member

    This is the current code for the widget area

    .new_home_widget {
    	margin: 30px 10% 0 10%;
    }
    December 4, 2014 at 8:07 am #133579
    Pixel Frau
    Member

    You added the new_home_widget widget area to the theme, right? It looks like you didn't add a wrap when adding that widget area. Adding the wrap will solve the problem.

    Or change the margin to padding in your exisiting CSS, then add the background color.

  • Author
    Posts
Viewing 9 posts - 1 through 9 (of 9 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

© 2023 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