Jump to content
Sign in to follow this  
laurenp

How to change highlight bg colour for clones with CSS?

Recommended Posts

laurenp

Hi I want to change the highlight background colour depending on which highlight clone is selected. So I have setup 3 highlights and each has a different background that extends across the page. For the default one I use the style: #highlight .texture { background-color: #3aa7b7; padding: 0px; } however I can't figure out how to set the other two. I currently have the following, and have tried variations on this without success. #highlight .clone_2 .texture { background-color: #be3f25; padding: 0px; } #highlight .clone_3 .texture { background-color: #c2c1ba; padding: 0px; } Hope someone can help me see where I'm going wrong. cheers Lauren

Share this post


Link to post
Share on other sites
catrina
The selectors for the last two probably aren't .clone_2 and .clone_3 (this happens sometimes). Can you please post a link to your site?

Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
laurenp
Hi Catrina, Here tis - just a staging site. http://101.0.64.160/~engageco/ Second level pages have the highlight I'm wanting to change in place. Firebug shows the following:
Cheers! Lauren

Share this post


Link to post
Share on other sites
laurenp
No they are all there - just images - no text included: eg http://101.0.64.160/~engageco/about/our-philosophy/

Share this post


Link to post
Share on other sites
Danny
Hi Lauren, I think it's possible however from what I can see all you highlight images have the same background turquoise color. In my opinion the way you have it set-up now looks very nice. If you could provide an image what you want it to look like I will try to assist you.

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Jackey
I've been looking at this... Danny is brave! I don't think it is feasible because the background color to both sides section#features.container is defined outside the div#cycle. Can't see how to change that color in sync with the container. I would opt for a page-wide feature-slider. BTW the decoration line above the slider does not hold its position (it could)

Share this post


Link to post
Share on other sites
Danny
AH, I understand now, I assumed Lauren was referring to the highlight section and not the features! Yeah, this isn't possible I don't think and if it is, it's way beyond my skill level :(

Please search our forums, before posting!

Share this post


Link to post
Share on other sites
Jackey
Eye Danny... Maybe I had it backwards. I was talking features :(

Share this post


Link to post
Share on other sites
Jackey
Again: section#highlight.clone_3 div.texture { background: #3AA7B7; } section#highlight.clone_1 div.texture { background: #3AA7B7; } section#highlight.clone_2 div.texture { background: #3AA7B7; } Should do it. (sorry regarding the confusion I caused, my bad)

Share this post


Link to post
Share on other sites
laurenp
Thanks Jackey and Danny! It worked! I used the following slightly altered code based on your recommendation and you can see it in action in the about section (I need to properly setup all the other pages). #highlight .texture { background-color: #3aa7b7; padding: 0px; } #highlight.clone_3 div.texture { background: #c2c1ba; } #highlight.clone_2 div.texture { background: #be3f25; } Sorry for the initial confusion - I should have posted the exact pages rather than the homepage. Many thanks again. Now to finish the site... Lauren

Share this post


Link to post
Share on other sites
laurenp
Hi Jackey Re your comment... [i]"BTW the decoration line above the slider does not hold its position (it could)"[/i] If you can show me how I'd love to learn! cheers, Lauren

Share this post


Link to post
Share on other sites
Jackey
Since you use a gif background.... make it as wide as possible (2560, or even bigger since with GIF the file size won't change much anyway) and the height you want the line to be, center the image something like this: [IMG]http://i.imgur.com/2vPRz.gif[/IMG] Place the background, fixed in place no-repeats and stick it to the bottom. If you have placed it in the "Base Theme Settings": - Do Not Repeat - Vertical Position 100 - Horizontal position 50 - Background Attachement: Fixed Cheers!

Share this post


Link to post
Share on other sites
laurenp
Brilliant! That worked, thanks so much for all your help.

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  

×