Here's the CSS I currently have in place for the solutions section at metadrones.com/#solutions. But on desktop, I've had users complain they didn't realize there were four tabs. I think a border around each tab could help that.
So how do I add that? Thanks!
Currently, there's this:
.tabbed > ul li a { font-family: "Play"; font-size: 20px; padding: 30px; color: white; text-transform: uppercase; }
I tried adding `border: 2px solid #fff;` but that only added some top/bottom lines because I guess that styling is geared towards buttons, not tabs.
That worked great, Andrew! Thanks. I also added some margin to create more separation between the tabs, which is just what it needed.
Two follow up questions:
1) I have no idea what this code snippet does? Whether it's present or absent, the tab looks the same. (I know it's supposed to make the border color my accent color for the active tab, but that doesn't seem to be an issue; so what else does it do?
.tabbed > ul li a.active-tab { border-color: #4dffb8 !important; }
2) I see a lot of warning signs in the CSS sheet noting poor uses of `!important`. Is this something I should be concerned with? Is it not a best-practice?
When testing, I found that after I added the border to the last tab, when you click it, the border remains as shown below:
Adding the border seems to have overridden the active-tab class, so that prevented it from showing up like the rest when clicked:
The code basically reactivated the active-tab class.
As it relates to the use of !important, it's just used to override the default settings that came with the theme so you can have it the way you want. It basically gives your code a preference over what was previously written. You can ignore the warnings. Nothing to worry about.
I hope this explanation clears things up a bit.
Please feel free to contact us if you have any further questions.
Hi
Here's the CSS I currently have in place for the solutions section at metadrones.com/#solutions. But on desktop, I've had users complain they didn't realize there were four tabs. I think a border around each tab could help that.
So how do I add that? Thanks!
Currently, there's this:
.tabbed > ul li a {
font-family: "Play";
font-size: 20px;
padding: 30px;
color: white;
text-transform: uppercase;
}
I tried adding `border: 2px solid #fff;` but that only added some top/bottom lines because I guess that styling is geared towards buttons, not tabs.
Hey Again,
Seems like you got it working: http://prntscr.com/gplx26 .
Be.st
ThemeNectar Support Team
Almost, yes.
But you'll notice when either the far left tab is selected (which is default upon page load) that the far right tab is missing it's border.
What CSS am I overlooking to fix this? Currently, I have:
.tabbed > ul li a {
font-family: "Play";
font-size: 20px;
padding: 30px;
border: 5px solid #AAA !important;
color: #b7ffe2;
background-color: lightgray;
text-transform: uppercase;
}
Hey there,
Thanks for reaching in,
Please send a link to this page so we can help you figure out the most appropriate CSS.
Regards
Hey Andrew
Here you go (it was posted in original message below): www.metadrones.com/#solutions
Thanks!
Hi again,
Add this bit of CSS and your tabs should work just fine:
.tabbed >ul li:last-child a{
border-color: #AAA!important;
}
.tabbed > ul li a.active-tab{
border-color: #4dffb8!important;
}
Please feel free to contact us if you have any further questions.
Best Regards.
That worked great, Andrew! Thanks. I also added some margin to create more separation between the tabs, which is just what it needed.
Two follow up questions:
1) I have no idea what this code snippet does? Whether it's present or absent, the tab looks the same. (I know it's supposed to make the border color my accent color for the active tab, but that doesn't seem to be an issue; so what else does it do?
.tabbed > ul li a.active-tab {
border-color: #4dffb8 !important;
}
2) I see a lot of warning signs in the CSS sheet noting poor uses of `!important`. Is this something I should be concerned with? Is it not a best-practice?
Thanks!
Hi Kris,
When testing, I found that after I added the border to the last tab, when you click it, the border remains as shown below:
Adding the border seems to have overridden the active-tab class, so that prevented it from showing up like the rest when clicked:
The code basically reactivated the active-tab class.
As it relates to the use of !important, it's just used to override the default settings that came with the theme so you can have it the way you want. It basically gives your code a preference over what was previously written. You can ignore the warnings. Nothing to worry about.
I hope this explanation clears things up a bit.
Please feel free to contact us if you have any further questions.
Best Regards.
Ah! That makes a lot of sense. I didn't realize that at first. Thank you for explaining.