I am trying to put some colour on the glyph (only on the glyph) of the tab title in the SpryTabbedPanels.

I tested adding style="color:red;" in
<ecttab title="Description" class="fa fa-align-left">
and also in <ecttab title="#xf036;   Description">

Nothing seems to work.
Thank you for help!

JPK

Hi Jean Pierre

Try this in your style.css - also bear in mind that if you are targetting more than one Font Awesome icon then only the last fa- entry does not have a closing comma prior to the color reference, as in my example

.fa-align-left, .fa-align-left {color:#9677CF}


-----------------------------------
Steve
Manchester UK

Make it as simple as possible, but not simpler.

Hi Steve,
Thank you for your reply.

I could get a colour change only if I placed the line in SpryTabbedPanels.css.
But it also changed the text colour which I would prefer not.

It didn't make any change when placed in style.css.

JPK

Hi Jean Pierre

quote:

---

It didn't make any change when placed in style.css.

---

One of the reasons this will happen is because your site style.css file comes before the other style sheets in your web pages. Styles are taken in the order they are declared and that is why we recommend making your site style sheet the last one declared in your web pages. Another way to force a declaration to take effect is using the "!important" directive but this should only be used as a last resort. This would be for instance...

.fa-align-left, .fa-align-left {color:#9677CF !important;}

One final point, sometimes when making changes to style sheets unless you force a refresh of the browser cache the changes won't take effect. To do that do a <Ctrl>+F5 when viewing the page.

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

Thank you for the info. I could move my style.css and get things right.

[quote]I could get a colour change only if I placed the line in SpryTabbedPanels.css.
But it also changed the text colour which I would prefer not.[/quote]
Do you have any clues on how to get my text black in the tabs heads.


JPK

Hi JPK
Could you let us know a link to the page as that helps to find the class that needs changing.

Vince

Click Here for Shopping Cart Software
Click Here to sign up for our newsletter
Click Here for the latest updater

Add color classes to your 'style.css' file (which needs to load last, after all other stylesheets, like Vince said). For example:

.red {color: #f90000}

Then change your Spry Tab code to read:

<ecttab title="Description" class="fa fa-align-left red">

Gary

Thank you for you reply.
This also changes the colour text following the glyph.
But never mind, I got used to it and now I like it this way :-)

JPK