Archived

This topic is now archived and is closed to further replies.

  • 0

Content Box Bkg Color Outside Content Pad

Question

Posted · Report post

I am working on a new design for my homepage for when I go live with my membership training.  The page is temporarily published at http://runneracademy.com/testcss so it can be reviewed for this question.

 

I achieved an nice full screen effect for an image in a content box by making a gradient in photoshop in the photo and have it blend into a color for the container outside the content pad.  

 

Here is the example: http://screencast.com/t/guWyk3JB1p

 

Here is the css I implemented for this:

 

.page-id-3629 #contentbox {background-color: #585852; margin-top:30px;}

 

I have it only applied to this page so it is not site wide.  The issue is the color #585852 is appearing on my other content box outside the content pad at the bottom of the page just above the footer.  I have tried to isolate it but I think that since I selected #content box for the whole page it will show up on all content boxes.

 

Here is the example: http://screencast.com/t/psdw5PXn

 

How can I have this only be applied to the content box at the top of the page and have it removed and just white at the bottom of the page?  It seems I should be able to isolate it.  I already tried applying a custom css class to the content box but no luck, that only styles the content box within the content pad.  The only other thing I can think of is make another content box section and call it contentbox-2, but not sure how I would accomplish that.

 

Looking for some ideas to resolve this.

 

 

Share this post


Link to post
Share on other sites

2 answers to this question

Posted · Report post

Hi,

 

Every section has a class, use the class instead of the ID please.

 

Also, every time you clone a section is it given a unique class which can be used to target that section and not effect the other clones. Replace the code you're currently using with the code below.

 

.page-id-3629 .no_clone.section-contentbox {
background-color: #585852;
margin-top: 30px;
} 

As you can see, I have targeted the .no_clone, this class basically means that this is the original section and isn't a clone, all other clones will have something similar to this clone_2, clone_3 etc...

Share this post


Link to post
Share on other sites

Posted · Report post

Thanks Danny.  I knew it would be something simple, and for the explanation.  Looks great!

Share this post


Link to post
Share on other sites