Jump to content


Photo
- - - - -

How to change highlight bg colour for clones with CSS?


  • Please log in to reply
13 replies to this topic

#1 laurenp

laurenp

    Advanced Member

  • Members
  • 55 posts
  • Country: Country Flag

Posted 03 January 2012 - 01:11 AM

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

#2 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 03 January 2012 - 03:18 AM

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?

#3 laurenp

laurenp

    Advanced Member

  • Members
  • 55 posts
  • Country: Country Flag

Posted 06 January 2012 - 01:36 AM

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

#4 catrina

catrina

    Advocate

  • Members
  • 12345 posts
  • LocationCalifornia
  • Country: Country Flag

Posted 06 January 2012 - 03:18 AM

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

#5 laurenp

laurenp

    Advanced Member

  • Members
  • 55 posts
  • Country: Country Flag

Posted 06 January 2012 - 03:57 AM

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

Please Login or Register to see this Hidden Content



#6 Danny

Danny

    Is Awesome!

  • Moderators
  • 17600 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 06 January 2012 - 12:13 PM

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.

#7 Jackey

Jackey

    Advocate

  • Members


  • 685 posts
  • LocationHelmond
  • Country: Country Flag

Posted 06 January 2012 - 12:59 PM

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)

#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 17600 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 06 January 2012 - 01:03 PM

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

#9 Jackey

Jackey

    Advocate

  • Members


  • 685 posts
  • LocationHelmond
  • Country: Country Flag

Posted 06 January 2012 - 01:11 PM

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

#10 Jackey

Jackey

    Advocate

  • Members


  • 685 posts
  • LocationHelmond
  • Country: Country Flag

Posted 06 January 2012 - 01:17 PM

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)

#11 laurenp

laurenp

    Advanced Member

  • Members
  • 55 posts
  • Country: Country Flag

Posted 07 January 2012 - 02:52 AM

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

#12 laurenp

laurenp

    Advanced Member

  • Members
  • 55 posts
  • Country: Country Flag

Posted 07 January 2012 - 02:56 AM

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

#13 Jackey

Jackey

    Advocate

  • Members


  • 685 posts
  • LocationHelmond
  • Country: Country Flag

Posted 07 January 2012 - 07:59 AM

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:
Posted Image

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!

#14 laurenp

laurenp

    Advanced Member

  • Members
  • 55 posts
  • Country: Country Flag

Posted 09 January 2012 - 10:42 PM

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