I am trying to format the .tabbed section on this page so that it is easier for users to notice the tabs and see that they are clickable. Here is how I want the tabs to be, but I have not been able to figure out how to accomplish this:
Background #8224e3 when active; the default background is fine when not active (though it would be great if we could make it a little more opaque).
Border: 2px, solid, white on every edge EXCLUDING the edge touching the title boxes underneath it (the bottom). I would like the white border to appear when the tab is inactive and disappear when the tab is active. (or just turn purple, so we can’t see it).
Can you please give me some CSS that would help me accomplish this?
From what I see on your page, it looks like you already have the tabs modeled to your preference (background color, white border). Do you still need assistance with this?
To make the tab change style when it's active/inactive, you can use this code:
ul.wpb_tabs_nav.ui-tabs-nav.clearfix li a:not(.active-tab) {
border: inherit !important;
}
ul.wpb_tabs_nav.ui-tabs-nav.clearfix li a.active-tab {
border: solid 2px white !important;
border-bottom: 0 !important;
}
As to make the background color to be more opaque, please add the following code:
.light .tabbed > ul li a:not(.active-tab) {
background-color: rgba(0,0,0,0.5) !important;
}
(modifying the last 0.5 to a higher number will make it more opaque).
I am still having problems with visitors noticing the tab element. In an effort to fix this again, I am trying to add a background behind the actual tabs, but not behind the content in the tabs. I've added this CSS to my page
though I am not sure if this is the best way to go about this, and I cannot get the background to extend to the edge of the screen on the left.
To clarify, I want the actual tabs to line up with the title boxes, but I want the background to be fullscreen, and #f9f7f5. I have attached an image of what the page looks like now.
In summation. How do I get the background behind the tabs to be full screen?
Hello and thanks for your help in advance!
I am trying to format the .tabbed section on this page so that it is easier for users to notice the tabs and see that they are clickable. Here is how I want the tabs to be, but I have not been able to figure out how to accomplish this:
Background #8224e3 when active; the default background is fine when not active (though it would be great if we could make it a little more opaque).
Border: 2px, solid, white on every edge EXCLUDING the edge touching the title boxes underneath it (the bottom). I would like the white border to appear when the tab is inactive and disappear when the tab is active. (or just turn purple, so we can’t see it).
Can you please give me some CSS that would help me accomplish this?
Thanks.
Hi Adam,
Thank you for contacting us.
From what I see on your page, it looks like you already have the tabs modeled to your preference (background color, white border). Do you still need assistance with this?
To make the tab change style when it's active/inactive, you can use this code:
ul.wpb_tabs_nav.ui-tabs-nav.clearfix li a:not(.active-tab) { border: inherit !important; } ul.wpb_tabs_nav.ui-tabs-nav.clearfix li a.active-tab { border: solid 2px white !important; border-bottom: 0 !important; }As to make the background color to be more opaque, please add the following code:
.light .tabbed > ul li a:not(.active-tab) { background-color: rgba(0,0,0,0.5) !important; }(modifying the last 0.5 to a higher number will make it more opaque).
Hope this helps,
Best regards.
This worked perfectly! Thank you very much!
Hello Again,
I am still having problems with visitors noticing the tab element. In an effort to fix this again, I am trying to add a background behind the actual tabs, but not behind the content in the tabs. I've added this CSS to my page
.tabbed >ul {
background:
#f9f7f5;
width: 100vw;
}
though I am not sure if this is the best way to go about this, and I cannot get the background to extend to the edge of the screen on the left.
To clarify, I want the actual tabs to line up with the title boxes, but I want the background to be fullscreen, and #f9f7f5. I have attached an image of what the page looks like now.
In summation. How do I get the background behind the tabs to be full screen?
Hey there,
Sorry for the delay. Please resend a link to your website so we can confirm and possibly send over some CSS to you.
Regards