Text Color on Extra Field Tabs

[JulieAndrus]

How do you change the text color on the Extra Field labels? I use 3-4 extra fields (Description, Dosage, Ingredients, Links) on my product listing page and the tabs that aren't active use a very light color (#ccc) so it makes them difficult to read. See any product at HolisticPetInfo.com and you'll see what I mean. I've looked at the CSS but can't seem to find where to change the color to something darker. Any suggestions?

[Pack Secure]

It seems like it would be done on the product page. I found two older posts that refer to changes there. https://forums.3dcart.com/forum/shop...om-field-label

https://forums.3dcart.com/forum/shop...-custom-fields

Hope this helps some.

[JulieAndrus]

Thanks -- I looked at the post above and it doesn't indicate how to make the font color change in the CSS. I've looked at the product listing page (Listing_0.html) but still don't see where I change the font color for the non-selected tabs. I'm pretty sure it would be in the CSS but I can't figure where....

[thecartdesigner]

JulieAndrus

You more than likely don't have the rules in your default css as they are held in layout.css.

So you will need to add the necessary rules and you will need to add 2 rules. 1 for the inactive tabs and 1 for the active tab. Reason being is that if you just add the inactive css it is related to the active tab and will change that one as well if the active tab css isn't specified independently.

Inactive tab CSS rule:

#listing0 .r-tabs .r-tabs-nav .r-tabs-anchor {
background: #222222 none repeat scroll 0 0;
color: #fff;
}

Active tab CSS rule:

#listing0 .r-tabs .r-tabs-nav .r-tabs-state-active .r-tabs-anchor {
background-color: #fff;
color: #222;
}

So just add those to your active css file and change the colors accordingly. Hope this helps

[JulieAndrus]

Thanks Cart Designer -- I added the two rules to the default_modified.css but nothing changed on the live site. I also tried adding the whole block of rules for r-tabs from the layout.css but again, nothing changed on the live site.

Here is what I added to the modified.css:

.r-tabs {
position: relative;
}
.r-tabs .r-tabs-nav {
border-bottom: 1px solid #ccc;
}
.r-tabs .r-tabs-nav .r-tabs-tab {
position: relative;
top: 1px;
}
.r-tabs .r-tabs-nav .r-tabs-anchor {
background: #FAFAFA;
margin-bottom: 3px;
padding: 10px 15px;
display: inline-block;
text-decoration: none;
color: #666;
font-weight: bold;
}
.r-tabs .r-tabs-nav .r-tabs-state-active {
background-color: #fff;
margin-bottom: -1px;
border-top: none;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
}
.r-tabs .r-tabs-nav .r-tabs-state-disabled {
opacity: 0.5;
}
.r-tabs .r-tabs-nav .r-tabs-state-active .r-tabs-anchor {
color: #000;
background-color: #fff;
border-top: 3px solid #000;
}
.r-tabs .r-tabs-panel {
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
margin-bottom: 3px;
min-height: 200px;
}
.r-tabs .r-tabs-accordion-title .r-tabs-anchor {
display: block;
padding: 10px;
background-color: #000;
color: #fff;
font-weight: bold;
text-decoration: none;
margin-bottom: 3px;
}
.r-tabs .r-tabs-accordion-title.r-tabs-state-disabled {
opacity: 0.5;
}
.r-tabs .r-tabs-accordion-title.r-tabs-state-active .r-tabs-anchor {
background-color: #fff;
color: #000;
border-top: 1px solid #ccc;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
margin-bottom: 0;
}
.r-tabs .r-tabs-nav {
margin: 0;
padding: 0;
}
.r-tabs .r-tabs-tab {
display: inline-block;
margin: 0;
list-style: none;
}
.r-tabs .r-tabs-panel {
background: #fff;
padding: 15px;
display: none;
}
.r-tabs .r-tabs-accordion-title {
display: none;
}
.r-tabs .r-tabs-panel.r-tabs-state-active {
display: block;

[Pack Secure]

Did you clear cache after you made the changes? Sometimes that is the issue with our site.

[thecartdesigner]

Did you clear cache after you made the changes? Sometimes that is the issue with our site.

JulieAndrus I double that. Be sure to clear your browser cache/store cache and refresh after you make the change to the css

No reason to add all the tab rules. Just the ones I specified previously.

[JulieAndrus]

I cleared the cache on the control panel and that didn't work. Once I cleared the browser cache, the changes appeared. Thanks for the suggestion and thanks to the Cart Designer for the code.

[Pack Secure]

You're Welcome.

[thecartdesigner]

JulieAndrus I agree yet again, you are welcome

[kelly]

JulieAndrus

You more than likely don't have the rules in your default css as they are held in layout.css.

So you will need to add the necessary rules and you will need to add 2 rules. 1 for the inactive tabs and 1 for the active tab. Reason being is that if you just add the inactive css it is related to the active tab and will change that one as well if the active tab css isn't specified independently.

Inactive tab CSS rule:

#listing0 .r-tabs .r-tabs-nav .r-tabs-anchor {
background: #222222 none repeat scroll 0 0;
color: #fff;
}

Active tab CSS rule:

#listing0 .r-tabs .r-tabs-nav .r-tabs-state-active .r-tabs-anchor {
background-color: #fff;
color: #222;
}

So just add those to your active css file and change the colors accordingly. Hope this helps

Thank you worked great!

[thecartdesigner]

kelly You are very welcome

[kelly]

kelly You are very welcome

Hey another question on the one page checkout I would like to change the wording of:

Yes!, I would like to be notified of product updates.

Remember me! Create my California Academy of Health account.

But I don't see it in Store language?

Clue?:D

[thecartdesigner]

kelly Still in Store Language. store language search area: joinmailinglist

[kelly]

kelly Still in Store Language. store language search area: joinmailinglist

Nope no joinmailinglist? Or under mailinglist:eek: