StyledThemes

Color of tabs

Home Forums WordPress Themes – Premium Lavish Pro Color of tabs

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #60263
    Bonnie
    Participant

    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

    #60264
    Bidur
    Moderator

    Hello Bonnie,

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

    Best Regards,
    Bidur

    #60276
    Bonnie
    Participant

    Hi Bidur,

    The color I need is #e8232a.
    URL: http://www.wingsofabrighterfuture.nl/anbi/

    Thank you.

    #60286
    Bidur
    Moderator

    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

    #60293
    Bonnie
    Participant

    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, 10 months ago by Bonnie.
    • This reply was modified 4 years, 10 months ago by Bonnie.
    • This reply was modified 4 years, 10 months ago by Bonnie.
    • This reply was modified 4 years, 10 months ago by Bonnie.
    Attachments:
    You must be logged in to view attached files.
    #60317
    Bidur
    Moderator

    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!

    #60325
    Bonnie
    Participant

    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?

    #60371
    Bidur
    Moderator

    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!

    #60381
    Bonnie
    Participant

    Wonderful! This works. Thank you so much!

Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.