Jump to content
Sign in to follow this  
illinimatt81

Content Box Bkg Color Outside Content Pad

Recommended Posts

illinimatt81    21
illinimatt81

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
Danny    1,327
Danny

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...


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
illinimatt81    21
illinimatt81

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×