[LearningParticipant]

I would like to change the font on the tab to the header font in on the attached image.

I would also like to remove the drop shadow effect around the entire tab box.

Thank you very much

[LearningParticipant]

This reply has been marked as private.

[FriechModerator]

Hi There,

Thanks for writing in! You mean the font-family? or the font-size? Either way you can add this under Custom > CSS in the Customizer.

.x-nav li.x-nav-tabs-item > a {
	font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 34.275px;
	font-style: normal;
	font-weight: normal;
}

Adjust the font-size value where you see it fits.

Hope it helps, Cheers!

[LearningParticipant]

That worked, but it changed every tab. Is there a way to only change certain tabs? I would also like to remove the drop shadow effect around the entire tab box.

I have attached an image of what I would like the tab box to look like.

Thank you very much for all your help

[RupokMember]

Hi there,

Thanks for writing back. You can select the Tab and give it a class name – http://prntscr.com/9bs7gc

Then update the CSS :

.x-nav.my-tab li.x-nav-tabs-item > a {
	font-family: Lato, 'Helvetica Neue', Helvetica, Arial, sans-serif;
	font-size: 34.275px;
	font-style: normal;
	font-weight: normal;
}

Make sure the class .my-tab is same on both place.

To remove the box shadow, you can use –

.x-nav-tabs, .x-tab-content {
  box-shadow: none;
}

Or for the specific Tab –

.my-tab {
  box-shadow: none !important;
}

Hope this helps.

Cheers!

[LearningParticipant]

Ok, that worked after I changed my tabs to a cornerstone tab element and not a cornerstone text element.

The font is fine, but I need to remove the lines as well around the tab element. I have attached another image to give you an example of what I’m looking for. This is also from a website using the X Theme

[FriechModerator]

Hi There,

You can add this under Custom > CSS in the Customizer.

#x-section-2 .x-tab-content {
    border-width: 0;
}

Hope it helps, Cheers!

[LearningParticipant]

Great that worked but what about adding the space in between them?

[Paul RModerator]

Hi,

Please add this code as well

#x-section-2 .x-nav-tabs {
    border-top:0;
}

#x-section-2 .x-nav-tabs.two-up li {
    width: 49%;
    margin-right:2%;
    border-top:1px solid rgba(0,0,0,0.15);
}

#x-section-2 .x-nav-tabs.two-up li:last-child {
    margin-right:0;
}

Hope that helps.

[Author]

Posts