13 replies to this topic

[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

[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?

[laurenp]

Hi Catrina, Here tis - just a staging site.

Please Login or Register to see this Hidden Content

Second level pages have the highlight I'm wanting to change in place. Firebug shows the following:

Cheers! Lauren

[catrina]

I don't see any highlights on any of the pages. Were they disabled?

[laurenp]

No they are all there - just images - no text included: eg

Please Login or Register to see this Hidden Content

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

[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)

[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

[jackey]

Eye Danny... Maybe I had it backwards. I was talking features

[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)

[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

[laurenp]

Hi Jackey

Re your comment...
"BTW the decoration line above the slider does not hold its position (it could)"

If you can show me how I'd love to learn!

cheers,

Lauren

[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:


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!

[laurenp]

Brilliant! That worked, thanks so much for all your help.