Home › Forums › WordPress Themes – Premium › Lavish Pro › Color of tabs
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
Hello Bonnie,
Could you please share us your site url and specify the tab colours you want to change?
Best Regards,
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
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>
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!
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?
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!
Wonderful! This works. Thank you so much!
With our premium themes, we offer access to site documentation, video tutorials and timely support. Even if you have just started on WordPress, our support staff have the patience to help you create appealing sites gracefully.
Company
Privacy & Cookies: This site uses cookies. By continuing to use this website, you agree to their use.To find out more, including how to control cookies, see here: Privacy Policy
© Copyright © 2023 Styled Themes. All Right Reserved.