How to style the tab labels in the nested tabs module

How To
1

Hi, I am trying to change the background colors and font colors of the tabs and an encountering the following issues:
-I cannot change the default background colors (grey for the selected tab and white for the unselected tab.) When I change the background color of the div via styles > background, the background remains grey. (see attachment)

-I want the font color & background on the tabs to change once selected, but there is only one option for text color & background color for each tab, no way to differentiate between states. Please let me know if this is possible: I want the ā€œLatestā€ tab to have a white background, green border, and teal text when it is selected, with the ā€œpopularā€ tab having a green background and white text. Then when the ā€œpopularā€ tab is selected, the colors switch. Hope this makes sense! Thanks for your help!

2

Click the actual ā€˜tabs nestableā€™ element in the structure. Then the TITLE where you can set the normal and active background/text colors.

Screenshot 2023-05-15 at 22.40.57
Screenshot 2023-05-15 at 22.40.57596Ɨ1278 37.2 KB

1 Like
3

Thank you so much! Worked perfectly

4

what if the above somehow doesnā€™t work? could it be because Iā€™ve had to rearrange some of the nestable parts elsewhere in the page structure?

5

i found out: the ā€˜tab menuā€™ needs to be directly under ā€˜tabs nestableā€™ in the page structure (I had i in a div under the tabs nestable previously)

6

otherwise the layout settings of the tabs nestable donā€™t apply