Tabs, Changing the whole look, size and color

[creatinglake]

Greetings,

I am wondering how I can change the size, shape, and color of tabbed sections of a Kleo site. For instance, I want to make these tabs much larger, with a colored backgroud and no border.

http://mosaic.social/index.php/test-page/

Thanks

[Radu]

Hi,

Which tabs ? vertical or horizontal ?

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[creatinglake]

Both please.

[Radu]

Sure,

COPY CODE

/* Horizontal Tabs Styles */
.kleo-tabs.tabbable ul.nav-tabs li a {
    border-radius: 5px !important;
    color: red !important;
    border-bottom-right-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
    background: lightgoldenrodyellow;
    font-size: 21px;
}

/*Horizontal Tabs Styles*/
.wpb_tour.tabbable .nav-tab li a {color: green !important;background: lightpink;font-size: 18px;border-radius: 10px;}
.wpb_tour.tabbable .nav-tab li.active a { background: red !important;}

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Ticket solution

What support service includes ? What not ?

[Radu]

The css will be added to wp-admin -> theme options -> general settings -> quick css

Also id you want to complete remove the border just add after ; border:0 !important;

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Ticket solution

What support service includes ? What not ?

[creatinglake]

Great, thanks for that, much appreciated. One last thing. Is there a way to make a set height for the tabbed content sections so that even though each tabbed section has different amount of content the height of the content area remains the same? This would mean there is more empty space in the content sections with less content but that is fine. I just don’t want the page shifting around as you click on the tabs. Thanks.

[Radu]

Hi,

You can fill with empty spaces…. if i give you a rule to be applied from example min-height:200px; on the mobile this will shown odd.

Let me know if it’s ok for you to fill that with empty spaces to match same height

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[DeniTT]

Hi @creatinglake

Sorry to hijack your topic. Radu, why i cant open any new tickets??? I spent hours and in any section of the forums i cannot open any new topic. Please help!

[Radu]

Hi,

Look at the menu click -> hover Get Support -> choose your theme -> and scroll down you will at the page bottom -> open a new ticket

Cheers
R.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

What support service includes ? What not ?

[Author]

Posts