Changing tab and drop down buttons colours when active


(Jon Norris) #1

Menus and suchlike have a colour change available for when an item is active or not.
I can’t see how to have the same effect with the actual tabs in Tabs or Drop down (Joe Workman Foundation stacks). Can it be done?


(Andrew Tavernor) #2

.tabs>li.tab-title.active>a{ background: red!important; color:yellow!important; }

etc

Remember this will target all tabs stacks on a page. If you only want to style one uniquely, put it in a CSSBox stack and give that a unique class that you can add to the start of the selector above, i.e.
.myCSSBox .tabs>li.tab-title.active>a{ ....etc

I’m not sure what you want to style in DropDown but it is just a case of looking in the browser inspector and grabbing the CSS selectors.


(Jon Norris) #3

Thanks very much. I’m never sure when to meddle and when it’s staring me in the face! It seemed odd not to have an active state for tabs or for dropdowns tabs. I used dropdown in place of tabs because a) it looked cooler and b) the tabs don’t look like tabs, just looks like a menu bar, no styling.


(Jon Norris) #4

If you have the time, (or I’ll start a new query topic), to avoid me asking more daft questions:

I have put your code in the Custom CSS Styles box in Site Styles.
Works a treat - thank you so much.
I guess that is preferable to using the CSS box in Page Inspector?

For future reference, I tried to find the class .tabs so that I could “grab the CSS Selectors” as you say.
I loaded the page in the browser.
I right clicked on the tab in question and "Inspect element"
Nowhere can I see the class .tabs

I am on the Elements tab of the Inspector on the correct line of code (or at least, one of them).
The right side of the Inspector is on Styles and Rules.


(Andrew Tavernor) #5

Firstly, if you want your CSS to be applied across your whole site then use the RW site-wide code entry area - click the spanner icon above the list of pages.

The site styles CSS area is fine, the RW page inspector is too if you only want to affect a single page - although at present the autocomplete and editing space is not great.


(Andrew Tavernor) #6


(Jon Norris) #7

Thank you.
So to budge the tabs in 2rem I need to add to the custom css (in your case above, tabs class) to target them

.tabs>ul.tabs.horiz {margin-left: 2rem}

As I can’t get them to budge…
I’ll go and learn css properly but you have shown me a) that I can avoid divs for now and b) avoid all the classes that refer to stacks_in_com.joe.workman etc etc. Just need to learn how to write css better

Thanks for your


(Andrew Tavernor) #8

There are two reasons why that is not working.

Firstly your selector is wrong. The > symbol selects direct decedents. You code actually says target a <ul> with classes of tabs and horiz that is directly within an element with the class tabs

In fact, the actual tabs are themselves the <ul> with the class of horiz when they are horizontal. So your selector, in full would be:
ul.tabs.horiz

Secondly, if you look in the inspector, you will see that the tabs class, already has a margin:0 set by the Foundation CSS. You will therefore need a !important on the end of your statement to force an over ride of the theme CSS - so
ul.tabs{ margin-left: 2rem!important }

This will move the tabs themselves (not the content) to the right by 2rem.

I would probably use padding in this situation rather than margin but it will work fine as it is.

The other thing to remember is that this code is going to affect every instance of Foundation horizontal tabs on your page (or site if the code is in the site-wide area). If you just want to target one instance and it does not have a custom class input in the stack settings then you will need to throw it is a CSSBox or similar stack. Give that a unique class name and then modify your selector appropriately, for example:

.myCSSBox ul.tabs{ margin-left: 2rem!important }


(Jon Norris) #9

Fantastic. Now I can also make buttons smaller (they come with a lot of internal padding) and tweak to my hearts content. Almost there! It’s been quite a journey, and you stopped me throwing the towel in. Mobile first is such a challenge!


(Andrew Tavernor) #10

Don’t forget that ButtonPlus allows you do a lot more sizing and styling than the default button. If you set the size to custom you can alter absolutely everything. You can even make it round if you want with just a font-awesome icon in it,

There is also a custom class selector like there is on all my stacks which saves using CSSBoxes all over the place and cluttering up edit mode.


(Jon Norris) #11

So you’re Mr Duck. Thank you. A fiver on its way tomorrow. Couple more things to sort and the site will be done, really quite exciting. Now exploring the options on your stacks. Cheers.


(Andrew Tavernor) #12

@jnorris235 Ha, my cover is blown :slight_smile:

Thanks very much for the donation.