Docs

[rekluse]

Hello,

I am trying to stylize the tabbed content shortcode for my portfolio pages, basically eliminating the margin and adding a background color for inactive tabs. I was mostly able to get this working, as you can see here:

http://everyoneisright.com/course-item/okay-im-dead-now-what-practices-for-living-dying-and-living-again/

Just two small problems:

a) How can I get the active tab to stay transparent, like it is while hovering over it?

b) This code is killing the margins for tabbed content across the site. The code for the background color is being successfully limited to the portfolio section, however.

Can you help me get this right?

Here is the code I am using:

.single-x-portfolio .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: 0px;
}

.single-x-portfolio .x-nav-tabs > li > a {
background: #eee;
max-width: 99%;
margin: 0 auto;
}

Thank you!

[Thai]

Hi There,

Please update your custom CSS to this:

.single-x-portfolio .x-nav-tabs, .x-nav-tabs > li, 
.single-x-portfolio .x-nav-tabs > .active > a, 
.single-x-portfolio .x-nav-tabs > .active > a:hover, 
.single-x-portfolio .x-tab-content, .x-tab-content {
    box-shadow: none;
    border: 0px;
}
.single-x-portfolio .x-nav-tabs > li > a {
    background: #eee;
    max-width: 99%;
    margin: 0 auto;
}
.single-x-portfolio .x-nav-tabs > li.active > a {
    background: #fff;
}
.single-x-portfolio .x-tab-content .x-tab-pane {
    padding: 0;
}

Hope it helps 🙂

[rekluse]

Thank you for the response!

I just replaced the code, but it still seems to be killing my tabbed content border on non-portfolio pages.

See this page as an example:

http://everyoneisright.com/the-future-of-consciousness-culture-and-technology/

I am still getting the border around the actual tabs, which is great, but not around the rest of the content. When I remove the code altogether, the border comes back. Any suggestions?

Thanks for your time!

[Nico]

Hi There,

Would you mind sharing us your admin credentials so we could check your complete setup and customization.

Please also share us a screenshot with labels on what you want to remove so we would not get confuse.

Don’t forget to set it as private reply.

Thanks.

[rekluse]

This reply has been marked as private.

[Paul R]

Hi,

Kindly note that you can add a class to your tab element then use it to target in your css code.

eg. Add my-tab in the class field

You can then use it in your css code.

.my-tab .x-nav-tabs, .x-nav-tabs > li, 
.my-tab .x-nav-tabs > .active > a, 
.my-tab .x-nav-tabs > .active > a:hover, 
.my-tab .x-tab-content, .x-tab-content {
    box-shadow: none;
    border: 0px;
}
.my-tab .x-nav-tabs > li > a {
    background: #eee;
    max-width: 99%;
    margin: 0 auto;
}
.my-tab .x-nav-tabs > li.active > a {
    background: #fff;
}
.my-tab .x-tab-content .x-tab-pane {
    padding: 0;
}

That way it will only affect the tab element with that specific class.

Hope that helps.

[rekluse]

Hello, thank you for your response. I just tried this code, and am having two problems:

1) Strangely, this code is still causing the main content border to disappear in all tabbed-content sections across the site, regardless of if I am using the “my-tab” class or not. See here:

http://everyoneisright.com/the-future-of-consciousness-culture-and-technology/

and:

http://everyoneisright.com/course-item/loving-completely/

2) It doesn’t seem to work when I add the class like you showed in your screenshot. I added the code exactly as you sent it to the customizer, and then set the tabbed content classes to “my-tab” on both these pages:

via cornerstone:
http://everyoneisright.com/test/

via shortcode:
http://everyoneisright.com/course-item/okay-im-dead-now-what-practices-for-living-dying-and-living-again/

However, it DOES work if I add the class to the section, instead of the “Tabs” element. The problem is, I am creating these using shortcode, not Cornerstone, and I would prefer not to have to add content bands if I don’t need to. But I can if that is the only solution.

#1 is definitely most important =)

Thanks!

[rekluse]

BTW, for #2 I realize I can just wrap the tabbed content with a div class, so we can consider that one solved =)

So I just need to figure out why it is affecting the tabbed-content sections that are not using the new class, and why the black margin is appearing at the top of the content box on all my left-tab sections:

http://everyoneisright.com/the-future-of-consciousness-culture-and-technology/

[Rue Nel]

Hello There,

Thanks for the updates!

That is because you have added this custom css code:

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

Please update it and use this instead:

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

Hope this helps.

[rekluse]

That did the trick, thank you 🙂

I guess the final question is, do you have any idea why the black margin is appearing at the top of the content box on all my left-tab sections? It’s not doing this for top-tab sections.

http://everyoneisright.com/the-future-of-consciousness-culture-and-technology/

Thank you so much for your help!

[Rad]

Hi there,

Is it the black line? Please add this CSS as well.

.x-nav-tabs.left+.x-tab-content, .x-nav-tabs.right+.x-tab-content {
    border-top: 1px solid rgba(0,0,0,0.1);
}

Cheers!

[Author]

Posts