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?
.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.
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.
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.
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.
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
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 }
1 Like
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!
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.
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.
