[Andrea GParticipant]

Hi there,
I am trying to achieve the effect on this page… http://www.trektravel.com/trip/chianti-coast-bike-tour/#overview
where the tabs are styled more like buttons, they are separate from the tab content and there is no square chrome styling around the tab content. My current work looks like this: http://prntscr.com/33bp9o Can you help me?

Also is there a way to remove the white background of the Container – header, footer page?
I have wordpress, X and all plugins updated to last version.
Txs so much for your help with this

AGV

[ChristianModerator]

Hey Andrea,

Here are the CSS that affects the Tabbed Content shortcode. In the Customizer > Custom > CSS, please add the code below.

.x-nav-tabs, .x-nav-tabs > li {
	border: none;
}

/* Active Tab Menu */

.x-nav-tabs > .active > a {
	-webkit-box-shadow: none;
	box-shadow: none;
	background: skyblue;
	color: white;
}

/* Active Tab Menu Hover */

.x-nav-tabs > .active > a:hover {
	color: blue;
}

/* Inactive Tab Menus */

.x-nav-tabs > li > a {
	background: white;
	color: skyblue;
}

.x-nav-tabs > li > a:hover {
	color: blue;
}

/* Transparent Tab Content Background */

.x-tab-content {
	border: none;
	background: transparent;
}

Please modify them as per your needs.

You can enable the transparency in Integrity. Please see http://prntscr.com/33nka1

Hope that helps. 🙂

[Andrea GParticipant]

thanks, I really appreciate the fast response time, I work in customer service so I can notice the difference.

What I’m still having trouble with it the

.x-tab-content {
border: none;
background: transparent;
}

it is still showing a slight white border and I want it to be completely transparent.
Also, what is extremely frustrating is that, in trying to use the tabs to add content to the page, I notice that the visual composer does not show inside, so it is impossible to do complex layouts like multi-columns of pictures, ecc.
The idea of having tabs is so that they are a container for more complex layouts and for content which can be layout out simply and easily in a visual manner. Why is this not so, or is there something I am missing here?

txs again for your help.

[SupportMember]

Hi!

Please add this one:

.x-nav-tabs, .x-nav-tabs > li, .x-nav-tabs > .active > a, .x-nav-tabs > .active > a:hover, .x-tab-content, .x-tab-content {
box-shadow: none;
border: none;
}

.x-nav-tabs > li > a {
background: gray;
max-width: 150px;
margin: 0 auto;
}

This should remove the border and box-shadow on the tabs.

[Author]

Posts