Docs

[MikeMobley2002]

Hey Guys,

On my site specifically (insurancefortexans.com) you’ll see below services there is a 5 tab box. We are going to go with this for our services so I wanted to achieve 2 things please for this site.

1. How can I add the icons I’m using above in the site to be placed before the word on each tab?

2. How can I make the color of the tab and content with it black?

Thank you! I’ll reply privately with credentials.

[MikeMobley2002]

This reply has been marked as private.

[MikeMobley2002]

Also with the black text, how can the “active tab” be bold? That way the user knows when they are on that tab.

[MikeMobley2002]

Also, how can I increase the font size of the tabs?

So in summary, it’s:

1. How can I add the icons I’m using above in the site to be placed before the word on each tab?

2. How can I make the color of the tab and content with it black?

3. How can I make the color of the current tab selected be bold?

4. How can I increase the font size of the tabs and tab content?

[MikeMobley2002]

And if there’s anyway to make them like this with the above request, That would be great!

Here’s a gif showing what I mean – http://www.insurancefortexans.com/wp-content/uploads/2016/10/JehvokC.gif

[Rue Nel]

Hello There,

Thanks for writing in! Just for future topics, self responding or bumping your post pushes it back in our Queue system so it takes longer to respond to.

1] By default, the tab names will only accept text. You cannot insert html tags and even a shortcode. To add an icon, we have to do it with custom css. Before you do that, make sure that you insert a custom class my-custom-tab to your tabbed element.
And then you can make sue of this code:

.my-custom-tab.x-nav-tabs>li>a[data-cs-tab-toggle="1"]:before {
    content: "#";
    display: inline-block;
    margin-right: 5px;
}

.my-custom-tab.x-nav-tabs>li>a[data-cs-tab-toggle="2"]:before {
    content: "#";
    display: inline-block;
    margin-right: 5px;
}

.my-custom-tab.x-nav-tabs>li>a[data-cs-tab-toggle="3"]:before {
    content: "#";
    display: inline-block;
    margin-right: 5px;
}

2] To change the colors of the tab and the tab content area, you can make use of this code:

.x-nav-tabs>.active>a, 
.x-nav-tabs>.active>a:hover {
    color: red;
    background-color: black;
    font-weight: bold;
}

.x-tab-content>.active {
    color: white;
    background-color: black;
    font-size: 16px;
}

3] Please refer to the code in #2.

4] Please refer to the code in #2

Feel free to change the colors, background color and font size.

[MikeMobley2002]

I have added those 2 codes and see don’t change on the site and I put in my-custom-tab for the class. Any help please?

[MikeMobley2002]

So how do I add the icon? I currently have it like this…

.my-custom-tab.x-nav-tabs>li>a[data-cs-tab-toggle=”1″]:before {
content: “[x_icon type=”anchor”]”;
display: inline-block;
margin-right: 5px;
}

.my-custom-tab.x-nav-tabs>li>a[data-cs-tab-toggle=”2″]:before {
content: “#”;
display: inline-block;
margin-right: 5px;
}

.my-custom-tab.x-nav-tabs>li>a[data-cs-tab-toggle=”3″]:before {
content: “#”;
display: inline-block;
margin-right: 5px;
}

.x-nav-tabs>.active>a,
.x-nav-tabs>.active>a:hover {
color: red;
background-color: #2E64A7;
font-weight: bold;
}

.x-tab-content>.active {
color: white;
background-color: #2E64A7;
font-size: 16px;
}

[MikeMobley2002]

And how do I change the background color from white to blue for the INACTIVE tabs?

[MikeMobley2002]

I think I got the colors right now. Now I just wasn’t sure how to add the icon where it matches the text when the text color/style is inactive, when it’s hovered, and when it’s active.

[Rad]

Hi there,

From what icon library? Let’s say it’s from X theme’s font awesome icons. Hence, let’s use this http://fontawesome.io/cheatsheet/ as a reference (eg. facebook icon fa-facebook-square [])

.my-custom-tab.x-nav-tabs>li>a[data-cs-tab-toggle="1"]:before {
content: "\f082";
display: inline-block;
margin-right: 5px;
font-family: "fontawesome";
}

Then you may implement the same change on other tabs.

Cheers!

[MikeMobley2002]

I just did that and it looks like I’m still seeing the “#” there instead. Could you guys check?

[MikeMobley2002]

Sorry it’s working..it just took time to update. Thank you!

[Nico]

Happy to hear that.

Feel free to ask us again.

Thanks.

[Author]

Posts