Customizing Tabs

Support
#1

Wordpress Version 4.8.2

Version X Pro 1.1.1

Problem:

Hello,

I would like to change the color of my tabs. Change the entire tab to transparent, but have the text a white color. I would also like the active tab, for only the bottom the be white. Any ideas?

Thanks.

#2

Hi There,

Please provide the URL so we can take a closer look.

Thank you!

#3

website: https://fantasy-books.live

#4

Hi There,

Please provide the specific page where you have your tabs, I could not find it.

Thanks!

#5

I don’t have the tabs element up. I am planning to put it up though. It’s because the page is already active.

An example of a specific page is:

https://fantasy-books.live/index/the-yu-brothers-case-book/

When you click the novel image or the “Details” button, the synopsis and more pops up. I would like to have that information in a tabs element.

If you wish for me to create a dummy page, I can do that.

#6

Hi there,

It will be helpful if you add the tab element in a dummy page and give us the URL so that we will check the URL and try to suggest proper CSS code regarding your use case.

Thank you.

#7

Here is a link to a test page.

https://fantasy-books.live/test-page/

Thank you.

#8

Hi,

Thank you for creating the page.

To change the colors, you can add this in PRO > Launch > Theme Options > CSS


/* Tab Default */
.x-nav-tabs>li>a {    
    color: rgba(0, 0, 0, 0.325);
    background-color: #fff
}

/* Tab Hover */
.x-nav-tabs>li>a:hover {
    color: #333;
    background-color: #fff
}


/* Active Tab */
.x-nav-tabs>.active>a,
.x-nav-tabs>.active>a:hover {
    color: #333;
    background-color: #fff;    
}

Change the colors as you like.

Hope that helps.

#9

Is there a way to make sure the tabs do not collapse when the screen get’s smaller?

#10

Hi again,

Regretfully that might not be possible due to the structure of the tabs.

Thank you for understanding!

#11

I understand. Thanks for your help.

#12

You’re welcome!