Cant get rid of black bar left from title hide

It is this rule that is giving you the problem:

.page_content {
  background-color: #000000;
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  margin: 35px 0;
  overflow: hidden;
  padding: 0 0 20px;
  width: 824px;
}

You need to delete the background-color rule, so on the face of it you should finish up with:

.page_content {
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  margin: 35px 0;
  overflow: hidden;
  padding: 0 0 20px;
  width: 824px;
}

The problem is that this will mess up your other pages where you actually have some page content and therefore need the black background. So we need to restrict the scope of the new rule to the home page only. Fortunately, on the home page, the body tag has the home class. So you can create a new rule like this and use CSS specificity to override the existing rule:

body.home .page_content {
  background-color: transparent;
  box-shadow: 0;
  margin: 35px 0;
  overflow: hidden;
  padding: 0 0 20px;
  width: 824px;
}

Notice how we’ve also had to get rid of the box shadow.

Now, if at all possible, you really ought to be doing this in a child theme. If you are, the following rule in your child theme’s style.css file should be enough:

body.home .page_content {
  background-color: transparent;
  box-shadow: 0;
}

I’m not able to test this, of course, but it works OK in Firebug.

HTH

PAE

peredur,

Thank you so much! It worked perfectly, the only thing I had to change was the padding, it left a line around the box, so I changed 0, 0, 20px to 0, 0, 0px.

I haven’t been using a child theme, but now that I am editing the css of the current theme more heavily, I’ll go ahead and make one.

Thanks,

Jordan

Child theme complete!

Good on yer!

PAE