299
Views
4
Comments
Solved
Not being able to change Tabs with CSS
Question

Hi,

I already tried some stuff and also tried some google stuff I found but without success.

I don´t know why but everything I do I cant change the tabs width, height, color, etc.

Any ideas?

Kind regards,

Pedro Boffa

2021-06-02 20-50-04
Márcio Carvalho
Solution

Tell me what doesn't work or works just sometimes.

First, you need to understand the styles that were used to create the widget, that way you will know what to do.

From watching the tabs header I can see the height and width it's done by giving a padding

Now I have changed the tab padding and it changes the height 


To change the styles for the active tab you just need to use the active class with the tab class


In that case, you just need to copy the class to the theme and you can change. But dont forget to see which styles already exists.

.tabs .tabs-header-tab.active{

//styles

}

Look what I just did.

What you want to change on the tabs?

Kind Regards,

Márcio

2021-06-02 20-50-04
Márcio Carvalho

Did you try to inspect the classes and CSS on the tab element in the developer tools?

I am not now in front of the PC, but I would do that and try to find the classes where I want to change something.

In case you want to create an exception, you want to use just that in some occasions, you need to create enclose inside of a container or use a block where it has a placeholder with the custom parent class that will do the exception.

(But focus first on how to inspect the tab widget on the developer tools. And find the class where you want to change the style)

Kind Regards,

Márcio

2022-01-25 15-06-08
Pedro Boffa

Hi @Márcio Carvalho,

Thank you for your answer.

I already did that, but sometimes doesnt work.

Must have another class that is not allowing me to change it, but cant find it.

kind regards,

Pedro Boffa


2021-06-02 20-50-04
Márcio Carvalho
Solution

Tell me what doesn't work or works just sometimes.

First, you need to understand the styles that were used to create the widget, that way you will know what to do.

From watching the tabs header I can see the height and width it's done by giving a padding

Now I have changed the tab padding and it changes the height 


To change the styles for the active tab you just need to use the active class with the tab class


In that case, you just need to copy the class to the theme and you can change. But dont forget to see which styles already exists.

.tabs .tabs-header-tab.active{

//styles

}

Look what I just did.

What you want to change on the tabs?

Kind Regards,

Márcio

2022-01-25 15-06-08
Pedro Boffa

Hi  Márcio Carvalho,

Thank you again for your time and help.

This answer was amazing. Now I understand how it works and how to override the active class and make it work. 

I just wanted to reduce this padding and some colors, nothing fency.

I tried here and it is working great, amazing.

Thank you very much for your time

Kind regards,

Pedro Boffa


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.