Classic Tabs: CSS / Add an Image?

[j9berider]

Hi
3 questions:

1. I would like to remove the grey frame from the Classic Tabs and change the blue line at the top to green (see screenshot 1) Where and how do I have to specify this?

2. I would like to insert not only text but also an image in the Nav Tabs Content. See screenshot 2. Is that possible? If so, how?

3. Is there a useful alternative to Classic Tabs (with image and text) to display several categories next to each other or possibly below each other (accordions), so that the user only sees one content at a time?

Thanks

[jade]

Hello Janine,

@j9berider

I would like to remove the grey frame from the Classic Tabs and change the blue line at the top to green (see screenshot 1) Where and how do I have to specify this?

To do that, please add this code in X > Theme Options > CSS:

.x-nav-tabs,
.x-nav-tabs > li,
.x-nav-tabs > li > a {
    box-shadow: none;
    border: 0;
}

.x-tab-content {
    box-shadow: none;
}

@j9berider

I would like to insert not only text but also an image in the Nav Tabs Content. See screenshot 2. Is that possible? If so, how?

You may edit the text content to the HTML editor then you can add an image from there:

@j9berider

Is there a useful alternative to Classic Tabs (with image and text) to display several categories next to each other or possibly below each other (accordions), so that the user only sees one content at a time?

There is no element available that has all the features you mentioned. An elevated version of the Classic Tab Element is the V2 Tabs element or just Tabs which you can check out.

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.

[j9berider]

Hi Jade

Thank you very much. It worked.
Five more questions:

1. How can I place/change the image in the content exactly using CSS? (Screenshot3)

2. Did I do it right with the CSS directly on the page? Or do I have to nest it like you did in your example of global CSS? (Screenshot4)

3. How can I change the blue color at the top of the active tab?

4. How can I remove the thin grey frame around the Content Tab?

5. And I would like the tab to be in color when clicked. So that it is clear on the mobile (tabs below each other) which one is clicked (Sreenshot5).

[ruenel]

Hello Janine,

1.) You have inserted an image as an element. You cannot use custom CSS to replace the image. You have to place or insert the image manually using the Insert Media icon as pointed out in Jade’s screenshot.

2.) Since the tab element is on the page, you have done it right. Only add the custom css in Global CSS section if there are pages that have tab elements and you want them to have the same styling.

3.) You can change the border color of the tab headers by going to the tab element settings, Tabs > Individual Tabs > Border.

4.) Please remove the border and the box shadow of the tab panels in Tabs > Panels

5.) You can change that background color and even the text color of the tab header in Tabs > Individual Tabs.

To get to know the different controls over the Tabs element, please check this out: https://theme.co/docs/tabs#available-controls

Hope this helps.