• 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 Do I Change Background Color and Widths for Content and Sidebar for Quattro?

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 Do I Change Background Color and Widths for Content and Sidebar for Quattro?

This topic is: resolved

Tagged: background, content, Quattro, Sidebar, Width

  • This topic has 13 replies, 3 voices, and was last updated 5 years, 7 months ago by Neeznoodle.
Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • August 23, 2017 at 10:03 am #210679
    Neeznoodle
    Member

    Hello,

    How can I do the following?

    1) Make content area wider and sidebar narrower?

    2) Change color of content background to white and remove pattern?

    Thank you

    http://halloweenaroo.com
    August 23, 2017 at 10:14 am #210681
    Victor Font
    Moderator

    You need to disable WP Rocket so we can see your CSS.


    Regards,

    Victor
    https://victorfont.com/
    Call us toll free: 844-VIC-FONT (842-3668)
    Have you requested your free website audit yet?

    August 23, 2017 at 10:21 am #210682
    Neeznoodle
    Member

    WP Rocket is now disabled.

    August 23, 2017 at 12:02 pm #210685
    Erika
    Participant

    Hi Neeznoo,

    In your CSS file, find this rule:

    .sidebar {
    display: inline;
    float: right;
    font-size: 14px;
    width: 320px;
    }

    Edit the piece that is in bold to control the width of the sidebar. For the width of the content, find this rule and edit the number property (higher makes it wider and smaller makes it narrow). Also add the piece I have in bold.

    .content-sidebar #content, .sidebar-content #content {
    width: 589px;
    background: #fff;
    }

    Did you want to remove the patterned background entirely or just from the content? The code above removes it just from the content.

    August 23, 2017 at 1:57 pm #210694
    Neeznoodle
    Member

    That's exactly what I wanted. But, now that I see it, I would like to try removing the background from the entire area, not just the content area. What is that code?

    August 23, 2017 at 2:09 pm #210695
    Erika
    Participant

    Find this code and delete the piece in bold. Then replace it with #fff or any color code you like. That should do it 🙂

    #wrap {
    -moz-box-shadow: 0 0 15px #000;
    -webkit-box-shadow: 0 0 15px #000;
    background: url(/wp-content/themes/quattro/images/wrap.png);
    border: 3px solid #ccc;
    box-shadow: 0 0 15px #000;
    margin: 25px auto 0;
    padding: 20px;
    width: 1100px;
    }

    August 23, 2017 at 2:13 pm #210696
    Erika
    Participant

    Also, I've noticed your search bar is extended past the sidebar. See if you can find this code and replace the bold part of it with what I have instead:

    .s {
    border: 1px solid #bbb;
    color: #777;
    margin: 0 -7px 0 0;
    padding: 7px 6px;
    width: 157px;
    }

    August 23, 2017 at 2:18 pm #210697
    Neeznoodle
    Member

    Hmm. That didn't change anything. The pattern is still there. Here is what I used:

    #wrap {
    -moz-box-shadow: 0 0 15px #000;
    -webkit-box-shadow: 0 0 15px #000;
    background: #fff
    border: 3px solid #ccc;
    box-shadow: 0 0 15px #000;
    margin: 25px auto 0;
    padding: 20px;
    width: 1100px;
    }

    August 23, 2017 at 2:59 pm #210700
    Erika
    Participant

    Close the #fff with a ; and see if that helps.

    August 23, 2017 at 3:02 pm #210701
    Neeznoodle
    Member

    Oops! Yes, that worked. Thank you!

    August 23, 2017 at 3:03 pm #210702
    Neeznoodle
    Member

    Will you please delete my website from the original post?

    August 23, 2017 at 3:05 pm #210703
    Neeznoodle
    Member

    Oh, I have one more question. Is there a way to make the theme responsive?

    August 23, 2017 at 3:27 pm #210704
    Erika
    Participant

    I'm just a volunteer and not an official moderator, so I can't remove your site. As for making your theme responsive, that's going to require a bit of extra coding work that can't be explained here. It's also pretty advanced for someone who doesn't know code and adding files.

    If in the future you wanted to switch themes, I create responsive themes for Genesis that can be found using my link below (shameless plug, but true!). I'll even help you customize any of them to look Halloweeny 🙂

    August 23, 2017 at 3:36 pm #210705
    Neeznoodle
    Member

    Thank you. I'll take a look at your link and contact you if I decide to get a custom theme.

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • The topic ‘How Do I Change Background Color and Widths for Content and Sidebar for Quattro?’ is closed to new 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