Color of tabs

[Bonnie]

Hi,

I can’t find a way to search the forum, so my apologies if this question has been posted before. I need to change the color of the tabs to a specific color instead of one pf the preset colors. How should I do this?

Thank you,
Bonnie

[Bidur]

Hello Bonnie,

Could you please share us your site url and specify the tab colours you want to change?

Best Regards,
Bidur

[Bonnie]

This reply has been marked as private.

[Bidur]

Hello Bonnie,

Please let us know which tabs you’re actually mentioning, Is it the main Navigation or the one in your sidebar or anywhere else? it’d be easier if you locate it with relavant screeenshot.
Also mention by color you mean the text color or background color or anything else.

Hearing from you,

Regards,
Bidur

[Bonnie]

Hi Bidur,

See the red block in the yellow circle in the attached printscreen. I used the tabs-snippet code for this, see the code of the lavish pro snippet below. This snippet uses preset colors only, it seams.

Thanks!

(Don’t know how to paste code, so you see the code)

<ul>
	<li><a href="#tabs-1">Tabs1 Heading</a></li>
	<li><a href="#tabs-2">Tabs2 Heading</a></li>
	<li><a href="#tabs-3">Tabs3 Heading</a></li>
	<li><a href="#tabs-4">Tabs4 Heading</a></li>
</ul>
Tab 1 Content Here
Tab 2 Content Here
Tab 3 Content Here
Tab 4 Content Here
</div>

• This reply was modified 4 years, 4 months ago by Bonnie.
• This reply was modified 4 years, 4 months ago by Bonnie.
• This reply was modified 4 years, 4 months ago by Bonnie.
• This reply was modified 4 years, 4 months ago by Bonnie.

Attachments:

You must be logged in to view attached files.

[Bidur]

Hello Bonnie,

You can find snippet for tabs inside your theme package i.e lavish-snippets.zip
Go to tabs.txt file where you can easily build your desired tab structure with varieties of color option you may choose of your own.

For instance;

*** Change Colors of Tab *** 
*** Color Orange ***
<div id="lavish_tabs_left">
<ul class="ss_tabs orange">
	<li><a href="#tabs-1">Tabs1 Heading</a></li>
	<li><a href="#tabs-2">Tabs2 Heading</a></li>
	<li><a href="#tabs-3">Tabs3 Heading</a></li>
	<li><a href="#tabs-4">Tabs4 Heading</a></li>
</ul>
<div id="tabs-1"><p>Tab 1 Content Here</p></div>
<div id="tabs-2"><p>Tab 2 Content Here</p></div>
<div id="tabs-3"><P>Tab 3 Content Here</p></div>
<div id="tabs-4"><P>Tab 4 Content Here</p></div>
</div>

*** You can choose Varieties of Colors ***
aqua                      aquamarine                      bisque
black                     blue                            bluevoilet 
brown                     burlywood                       cadetblue
chartreuse                chocolate                       coral
cornflowerblue            crimson                         cyan
darkblue                  darkcyan                        darkgoldenrod
darkorange                darkorchid                      darkred
darkseagreen              darkslateblue                   darkslategray
darkturquoise             darkviolet                      deeppink
deepskyblue               dimgray                         dodgerblue
firebrick                 forestgreen                     fuchsia
gainsboro                 ghostwhite                      gold
goldenrod                 gray                            green
greenyellow               hotpink                         indianred
Lavender                  lavenderblush                   lawngreen
lightblue                 lightgray                       lightgreen
lightpink                 lightsalmon                     lightseagreen
lightskyblue              lightslategray                  Lime
limegreen                 magenta                         maroon
mediumaquamarine          mediumblue                      mediumorchid
mediumpurple              mediumseagreen                  mediumslateblue
mediumspringgreen         mediumturquoise                 navy
olive                     olivedrab                       orange
orangered                 orchid                          peru
purple                    rebeccapurple                   red
rosybrown                 royalblue                       saddlebrown
salmon                    sandybrown                      seagreen
sienna                    silver                          skyblue
slateblue                 slategray                       springgreen
steelblue                 tan                             teal
thistle                   tomato                          turquoise
violet                    yellow                          yellowgreen
white

Let us know.
Thanks!

[Bonnie]

Yes, well, I happened not to paste the full code in this message, but that is the snippet I used.

Instead of the preset colors, I would like to use color #e8232a, so the tabs don’t look so off. How can I do this?

[Bidur]

Hello Bonnie,

You can create your custom color settings for the tabs just like the above structure, however, you need to add styles to make changes.
Here is a quick fix.
Add the following CSS inside the additional CSS section of your customizer and save the changes;

ul.ss_tabs.red .ui-tabs-active.ui-state-active {
	background-color: #e8232a !important;
	color: #ffffff !important;
}
#lavish_tabs_left.ui-tabs .ui-tabs-nav li.ui-tabs-active:after {
    border-left: 15px solid #e8232a!important;
}

Let us know.
Thanks!

[Bonnie]

Wonderful! This works. Thank you so much!

[Author]

Posts