How Do I Change Background Color and Widths for Content and Sidebar for Quattro?

[Neeznoodle]

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

[Victor Font]

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?

[Neeznoodle]

WP Rocket is now disabled.

[Erika]

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.

[Neeznoodle]

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?

[Erika]

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;
}

[Erika]

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;
}

[Neeznoodle]

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;
}

[Erika]

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

[Neeznoodle]

Oops! Yes, that worked. Thank you!

[Neeznoodle]

Will you please delete my website from the original post?

[Neeznoodle]

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

[Erika]

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 🙂

[Neeznoodle]

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

[Author]

Posts