Color of tabs
Home › Forums › WordPress Themes – Premium › Lavish Pro › Color of tabs
- This topic has 8 replies, 2 voices, and was last updated 4 years, 4 months ago by
Bonnie.
-
AuthorPosts
-
October 28, 2018 at 10:12 am #60263
Bonnie
ParticipantHi,
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,
BonnieOctober 29, 2018 at 8:20 am #60264Bidur
ModeratorHello Bonnie,
Could you please share us your site url and specify the tab colours you want to change?
Best Regards,
BidurOctober 29, 2018 at 9:03 pm #60276Bonnie
ParticipantThis reply has been marked as private.October 30, 2018 at 8:25 am #60286Bidur
ModeratorHello 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,
BidurOctober 30, 2018 at 12:12 pm #60293Bonnie
ParticipantHi 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.October 31, 2018 at 7:10 am #60317Bidur
ModeratorHello 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!October 31, 2018 at 2:08 pm #60325Bonnie
ParticipantYes, 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?
November 1, 2018 at 6:59 am #60371Bidur
ModeratorHello 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!November 1, 2018 at 12:10 pm #60381Bonnie
ParticipantWonderful! This works. Thank you so much!
-
This reply was modified 4 years, 4 months ago by
-
AuthorPosts
- You must be logged in to reply to this topic.