Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Aaron Cohen
Aaron Cohen
342 Points

How do I change the background color for the #content area? It is in RGBA, and I do not know what to enter in style.css.

To further explicate, my website is Selflessenterprise.com and the area in question is in the middle and is gray. I tried making changes with the .container field, but it changed more than I bargained for.

2 Answers

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

Hi Aaron,

It is set with the #content selector in default.css around line 540:

#content {
  background: none repeat scroll 0 0 rgba(182, 182, 182, 0.8);
  border: 1px solid #aaa;
  color: #555;
  margin: 55px auto;
  padding-top: 15px;
}

If you are customizing this in style.css then you should be able to change it using the same selector.

You're probably having trouble with .container because there was at least one other element in there with a container class. So you would be targeting multiple elements with that selector.

Jason Anello
Jason Anello
Courses Plus Student 94,610 Points

There's a border too so you'll likely want to change that as well.

matsum0t0
matsum0t0
12,520 Points
matsum0t0
matsum0t0
12,520 Points

I was able to change the background by adding the -background-color: color;- line. It looks like it's in your bootstrap.min.css file.

  .col-mid-12 {

        background-color: pink;
}

I actually messed with that same column yesterday. I did a search/find for- .col-md-12 in the bootstrap.min.css and copied the first block that the finder found. It's grouped and defined with other .col-md-6, .col-sm-12, .col-lg-4 etc, etc.

.col-md-12{position:relative;min-height:1px;padding-right:15px;padding-left:15px;}

I copied the css block and pasted it right after the original and renamed it .col-md-012 then added color. A border-radius: will round off your corners if you like that sort of ting.

.col-md-012{position:relative;min-height:1px;padding-right:15px;padding-left:15px;background-color:pink;border-radius:5px 5px 5px 5px;}

You will then have to go to your front-page.php or home-page.php and look in the body for

 <div class="container col-md-12">

and rename it -012 or whatever you renamed it. Is this the proper way to do it? I dunno but it worked for me.