Change font-size on tabs of tabbed content

Support
#1

I am having problems styling tabbed content for my website. Please take a look at my homepage in the section title 3 Steps. How do I get a larger font-size for the titles and a different background color for the tabs?

#2

Hi @eutaw,

You used the Tab shortcode to add the Tab section which represents the Classic Tab element. The new Tabs element has many options including the styling you want. Please use the Tabs element instead. For more information:

Thank you.

#3

Thank you. That is what I am looking for. However, I still have a couple questions. (1) How can I get the three tabs to be three equal sizes that expand the width of the container? (2) How can I get the background of a tab to change when I click it. I did not see a setting for this.

#4

Hi There @eutaw

To do that, first you need to assign a unique CSS class name to your tabs element (Tabs -> Customize). For example my-tabs.

Then you can add the following CSS rules into your page’s CSS area and change the values accordingly.

.my-tabs ul > li {
    width: 150px;
}
.my-tabs ul li .x-active {
    background: red !important;
}

Hope that helps.

#5

Thank you. I tried this but the three tabs are not the same size and do not expand the container. I initially set the width to 150px in .my-tabs and the tabs were all very short. I then set it to 300px and I don’t see the first tab on my homepage.

However, when I go to Cornerstone to edit my hompage, I see the message below for the element I have been working with. Please help!

This element could not render due to invalid template markup.

#6

Hi @eutaw,

That issue is happening because of a syntax error on your tab title markup.

<span style="color: #ac840a;>Step 1 - Choose a DESIGN</span>
<span style="color: #000000;">Step 2 - CHOOSE PAGES</span>
<span style="color: #ffffff;">Step 3 - CONTACT US</span>

You miss a quotation mark " in the Step 1 - Choose a DESIGN title, I did go ahead and resolve that. You should not be doing that markup in the first place because of all the options for styling the tabs is already provided by the element.

Now let’s go back to your original issues.

Inspect the Tab element, see Individual Tabs panel and turn on the Fill Space option.



On that same screenshot I provided above, see the Background Interaction color option.

Hope it helps,
Cheers!

#7

Thank you very much for explaining the correct way to accomplish this. Also, many thanks for correcting my error.

#8

You’re most welcome.

#9

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