Styling Tab Content

dlukefinch · May 9, 2018, 12:19pm

I’ve recorded a 44 second video for you to watch explaining my issue; video link: https://cl.ly/rSjL

To check it out live visit: https://metcast.net (Scroll down a little!)

EDIT: Instead of having the tabs blended into the blue background I’d like it if they can have a transparent-ish background and then the main area can be blended in with white text…

basanta · May 9, 2018, 1:17pm

Hi There,

Thanks for writing in!

You can use custom CSS to make the content area transparent and the text white.
Please add this CSS to your theme option global CSS

.x-tab-content {
    background: transparent;
    color: #fff;
}

Hope this helps!

dlukefinch · May 9, 2018, 1:33pm

Thanks for your response. After posting I looked on your knowledge base and found some helpful guides.

This is the code I have so far: https://cl.ly/rS20

How do I get rid of the faint blue bottom line: https://cl.ly/rS4l

The padding seems a little thick, so how do I make that smaller?

basanta · May 9, 2018, 3:08pm

Hi There,

It appears you are working on the site. I am finding a different layout than previous and the screenshot you have posted.

Please confirm.

Thanks

dlukefinch · May 9, 2018, 3:28pm

Yes, I am! I’ve somehow worked it all out. Not sure how I did it

I do have a few things to run passed you though.

I have styled the homepage tab as I want it (more or less) now. But it seems to have styled all the other tabs (on other pages) which I do not want. How can I get the default style back for the other tabs? Please note I am not using the shortcodes but the built in tabs.
On tablet and mobile devices there’s a gap at the bottom. Can’t find the culprit on the classic elements tab backend. What could be the issue? Screenshot: https://cl.ly/rT3S
How do I get rid of the gap between tab menu and the line seen here: https://cl.ly/rTCV

That’s all for now

basanta · May 10, 2018, 2:13am

HI There,

The custom CSS you have written is for all the tab elements. Please assign a class name to the home page tab element and add the CSS to the custom class.

Hope this clear!

There is the margin in the tab content please remove it.
add this CSS to your theme option CSS

.x-tab-content {
     margin-bottom: 0px; 
}

Please add this CSS.

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

Hope this helps!

dlukefinch · May 9, 2018, 9:44pm

I’m not sure I follow you. Can you explain in some more detail? “Please assign a class name to the home page tab” Ok, I got that and have assigned .x-nav-tabs but I don’t get “add the CSS to the custom class.” how?

Code I’m currently using:

    border: none;
    box-shadow: none;
    background: transparent;
    color: white;
    
}

.x-nav-tabs {
    box-shadow: none;
    border: none;
    background: transparent; 
    text-decoration-color: white;
    border-bottom: 2px solid white;
}

.x-nav-tabs>li> {
    border: none;
    box-shadow: none;
    border-bottom: none;
    text-decoration-color: white;
    background: transparent; 
    border-bottom: 2px solid white;
}

.x-nav-tabs > .active > a, .x-nav-tabs > .active > a:hover {
    box-shadow: none;
    border: none; 
    text-decoration-color: black;
    border-bottom: 2px solid white;
    
    
}

.x-nav-tabs>li>a, .x-nav-tabs>li>a:hover {
    box-shadow: none;
    border: none;
    border-bottom: none;
    background-color: transparent;
    color: white;
}

dlukefinch · May 9, 2018, 10:39pm

I have added the custom class to the tabs element and to the CSS but it doesn’t work. I have temporarily put it back to before but heres the CSS I used along with the custom class.

Once this has been sorted please answer my other questions above.

.WXHeadline .x-tab-content {
    border: none;
    box-shadow: none;
    background: transparent;
    color: white;
    
}

.WXHeadline .x-nav-tabs {
    box-shadow: none;
    border: none;
    background: transparent; 
    text-decoration-color: white;
    border-bottom: 2px solid white;
}

.WXHeadlin .x-nav-tabs>li> {
    border: none;
    box-shadow: none;
    border-bottom: none;
    text-decoration-color: white;
    background: transparent; 
    border-bottom: 2px solid white;
}

.WXHeadline .x-nav-tabs >  .active > a, .x-nav-tabs > .active > a:hover {
    box-shadow: none;
    border: none; 
    text-decoration-color: black;
    
    
}

.WXHeadline .x-nav-tabs>li>a, .x-nav-tabs>li>a:hover {
    box-shadow: none;
    border: none;
    border-bottom: none;
    background-color: transparent;
    color: white;
}

Alaa · May 10, 2018, 12:33am

Hi @dfinch

When you add the custom class name to your elements, make sure to add it without the dot, I mean like this: WXHeadline not .WXHeadline.

Also, your CSS code should be like this:

.WXHeadline.x-tab-content {
    border: none;
    box-shadow: none;
    background: transparent;
    color: white;
    
}

.WXHeadline.x-nav-tabs {
    box-shadow: none;
    border: none;
    background: transparent; 
    text-decoration-color: white;
    border-bottom: 2px solid white;
}

.WXHeadlin.x-nav-tabs>li> {
    border: none;
    box-shadow: none;
    border-bottom: none;
    text-decoration-color: white;
    background: transparent; 
    border-bottom: 2px solid white;
}

There is no space between the two classes names like this .WXHeadline.x-tab-content.

Thanks.

dlukefinch · May 10, 2018, 2:02am

Great. Thank you. Now how about answering:

and this:

ruenel · May 10, 2018, 4:02am

Hello There,

Thanks for updating in!

1.) That is the default bottom margin of the tab element. If you want to eliminate it, please find this custom css:

.WXHeadline.x-tab-content {
    border: none;
    box-shadow: none;
    color: white;
    background: transparent;
}

And replace it with this code instead:

.WXHeadline.x-tab-content {
    border: none;
    box-shadow: none;
    color: white;
    background: transparent;
    margin-bottom: 0 !important;
}

2.) And to resolve this line gap, you can make use of this css code:

.WXHeadline.x-nav-tabs > .active > a, .x-nav-tabs > .active > a:hover {
    border-width: 2px !important;
}

.WXHeadline.x-nav-tabs>li>a, .x-nav-tabs>li>a:hover {
    border-bottom: solid 2px transparent;
}

We would loved to know if this has work for you. Thank you.

dlukefinch · May 10, 2018, 11:40am

Yay. It’s now exactly how I imagined it.

I have spotted that the default tab element I have at https://metcast.net/hub is still be effected by my custom tab element. If you scroll over the menu it behaves strange (i.e. white hover and background hover…)

This page is still under development so you will need to visit this URL https://metcast.net?bypass=themeco to bypass the maintenance page. You will then be able to visit metcast.net/hub. If this does not work I’ll need your IP address to allow you access.

paul.r · May 10, 2018, 2:00pm

Hi,

You can add this in Theme Options > CSS

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

Change the color as you like.

Hope that helps.

dlukefinch · May 10, 2018, 2:34pm

Ok, but why should I have to do that if all the code above is aimed at WXheadline custom class? Surely anything not assigned to that custom class should default to themeco standard styling?

EDIT: Here’s a little example https://cl.ly/rUm7

P.S The code didn’t make any difference.

rad · May 10, 2018, 4:48pm

Hi there,

It’s affected by other custom styling overriding the X default styling.

In your customization, the first set of CSS you applied is global, hence applied regardless of a tab. Then you only made specific styling by adding the custom class.

The hub page isn’t accessible, would you mind providing your admin login credentials in a secure note? I like to check it first.

Thanks!

dlukefinch · May 10, 2018, 5:01pm

Hi,

I have added the login details in the secure note

ruenel · May 10, 2018, 7:37pm

Hello There,

I have logged in but I could not find where you have added the custom css. To resolve this issue, just update the custom css. Please remove this css block first:

.WXHeadline.x-nav-tabs > .active > a, .x-nav-tabs > .active > a:hover {
    border-width: 2px !important;
}

.WXHeadline.x-nav-tabs>li>a, .x-nav-tabs>li>a:hover {
    border-bottom: solid 2px transparent;
}

And replace it with this custom css block instead:

.WXHeadline.x-nav-tabs > .active > a, .WXHeadline.x-nav-tabs > .active > a:hover {
    border-width: 2px !important;
}

.WXHeadline.x-nav-tabs>li>a, .WXHeadline.x-nav-tabs>li>a:hover {
    border-bottom: solid 2px transparent;
}

We would loved to know if this has work for you. Thank you.

dlukefinch · May 10, 2018, 9:06pm

Hi @RueNel,

The custom CSS was in global blocks CSS section. Sorted it now, I had to add the custom class to a few more places than you specified. Here’s the final code for anybody trying to attempt the same kind of thing.


.WXHeadline.x-tab-content {
    border: none;
    box-shadow: none;
    color: white;
    background: transparent;
    margin-bottom: 0 !important;
} 

.WXHeadline.x-nav-tabs >  .active > a, .WXHeadline.x-nav-tabs > .active > a:hover {
    box-shadow: none;
    text-decoration-color: white;  
    color: white;
    background: transparent;
    border-bottom: 2px solid white;
} 

.WXHeadline.x-nav-tabs>li>a, .WXHeadline.x-nav-tabs>li>a:hover {
    box-shadow: none;
    border: none;
    border-bottom: none;
    background: transparent;
    text-decoration-color: white; 
    color: white;
} 

..WXHeadline.x-nav-tabs > .active > a, .WXHeadline.x-nav-tabs > .active > a:hover {
    border-width: 2px !important;
}

.WXHeadline.x-nav-tabs>li>a, .WXHeadline.x-nav-tabs>li>a:hover {
    border-bottom: solid 2px transparent;
}

Thank you for your help guys and gals. You are amazing.

ruenel · May 10, 2018, 9:10pm

You’re welcome!
Thanks for letting us know that it has worked for you.

system · May 20, 2018, 9:10pm

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.