Classic tabs - styling

Support
#1

dear support,

i am trying to style the very light link text of the classic tab element:
.x-nav-tabs.top>.x-nav-tabs-item a {
font-weight: bold !important;
color: rgb(189, 37, 50) !important;
}
font-weight works in the preview but not on the final page. i bet my css can be improved! :wink:
also font-size: 20px does not work.

is there a style guide for the elements somewhere? or better use shortcuts for that purpose?

thanks a lot! kai

#2

Hi Kai,

I tried checking your site and the CSS you added seems to be working fine.

Please see the screenshot below:

You can just add the font size in the CSS declaration.

Hope this helps.

#3

hi jade,
i am sorry to say that it does not work.
the link text is not bold and the size i tried but removed it after it did not work.
could you please have another look?
thanks! kai

#4

Hello @iTurtle,

I checked the workshop page and font-weight: bold statement is working fine. As my colleague suggested you can try adding font size. You can add following CSS and see how it goes:

.x-nav-tabs.top>.x-nav-tabs-item a {font-weight: bold !important; color: rgb(189,37,50) !important; font-size: 18px;}

Thanks.

#5

dear prasant,
thanks for your reply! the font size does work now (i donā€™t really need it, though) but the bold still does not.
on the published page the font weight is not bold but ā€œnormalā€. i deleted wp and browser cache. restarted the browser, too.
your screenshot also does not show the bold weight of the font. in cornerstone it is clearly bold. i made a screenshot:

thanks again! kai
ps: is there a styling guide for elements around?
pps: your screenshots shows different text in the tabs and the grey bar on top. how come?

#6

thanks jade! the css is there but it does not show on the published page. also i canā€™t read your screenshot. it is too small :wink:

#7

Hi There,

The font family (ā€œOpen Sansā€) that you are using has no bold style.

Please use any other font family that has a bold style. You Can use ā€œLatoā€ font too that you are using for your heading font.

Hope this is clear now.

Thanks

#8

hi @basanta, thanks for your reply!
i canā€™t read your screenshots or make them any bigger. am i missing something?
if the classic tab element inherits the font from the body font settings in the typography options of the theme then the font does have a bold weight activated. it is based on a font template which has opens sans in four weights activated - including ā€œboldā€.
also in the preview it looks correct as you can see in my screenshot.
also i noticed that the hand cursor does not show when moving the pointer over one of the text-links in the tabs.
thanks again! kai

#9

Hello Kai,

I can see from Font templates the for Open Sans font you have also chosen bold. On Theme Options > Typography > you have set this Body Open Sans properly. The issue is when I check the font on the source code, 700 font weight is not loaded. See this: https://screencast-o-matic.com/watch/cbXrnX2TnO

Please try going to Appearance > Theme Options > Typography and disable Font Manager and re-enable it then save.

Let us know how this goes.

#10

hi lely,
thanks for your suggestion. i disabled the font manager. saved. i enabled it and saved again. but on changes. what to do next?
thanks, kai

#11

Hey Kai,

Sorry for the confusion. The reason why itā€™s not bold (or font-weight 700) is because your Body font-weight setting was set to 400.

The Tab title is part of the body.

Iā€™ve set the Body font-weight to 700 so you could see that it works.

Here are screenshots for comparison.

What font-weight you choose in the Typography setting will be the one loaded in the front-end. You should not confuse this with the font template where the font-weight you selected will only be available for selection but not loaded in the front-end.

If you choose 400 font-weight for you body then you could not make the tab title bold. Thereā€™s no font style option for the tab element unlike some V2 elements like the Headline.

Thanks.

#12

that is very important. can i activate the hand cursor?

#13

hi christian,
thanks for your explanation.
but of course i donā€™t want all the body text bold.
i just want the tab links bold. that is the whole point of this topic.
that must be possible. no?
i understand that the tab element inherits the body font settings. that makes sense. but i would like to style it some more.
i ask now for the 3rd time: is there a style guide somewhere on your website for elements?
and most important: the hand cursor is missing when hovering over the tap links. that must be a bug. no?
thanks again for helping out! kai
and if this all is not possible what alternatives for tabbed content does pro provide? can i do more with the shortcut? i think i have seen somewhere, a long time ago, a style guide for the shortcuts.

#14

Hi There,

The site loads the ā€œOpen Sansā€, ā€œbold/700ā€ now, did you resolve the issue? Or maybe turning off and on the Font Manager solved it?

https://vid.me/e/Mf92k

If you need an assurance that this font (open sans) and weight (bold/700) loads to your site, you can add this line on your child themeā€™s style.css file

@import url('https://fonts.googleapis.com/css?family=Open+Sans:700,700i');

Are you referring to the tab items title? That has been always the case, If you need the pointer cursor to show on the tab items title please add cursor: pointer; property on your custom CSS above.

Cheers!

#15

dear friech,
i am not sure if you read my last comment here. issue is not solved. font manager see above.
you and the others keep sending me videos (which is very nice and helpful) but the only show the css code or/and the preview in the builder. as i keep saying: the preview shows it fine on my computer, too.

but not on the saved and published page. the bold is missing there for whatever reason!

thanks a lot for the cursor css. it helped :slight_smile: but why wouldnā€™t it be a standard property? for ui reasons a link should always reveal itself with the hand cursor. no?

also: the mentiioned style guide???

thanks a million! kai

#16

Hi Kai,

I have checked again your site and the tab headings are showing in bold on the frontend of the site just fine.

This is what loads by default:

And this is when I disable the bold style through the code inspector:

I have asked two colleagues in different locations to check this and it loads as bold on their end as well so I am not really sure what is causing it not to display correctly on your end. I have tested this on Chrome and Firefox and they display with the same font weight.

You might want to try to load this in the functions.php file of the child theme to make sure that the bold font weight is loaded:

/**
 * Enqueue scripts and styles.
 */

add_action( 'wp_enqueue_scripts', 'add_scripts' ); 
 
function add_scripts() {	

	wp_enqueue_style( 'custom-google-font', 'https://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800' );
}

Then try setting the font weight to 700.

This makes sense. I have already added this in our request list for our developers to consider.

With style guide do you mean a list of selectors that you can use in the custom CSS? If so, we do not have this as this is something too broad to collate. What I can suggest is learning how to write CSS selectors so that you can target specific elements and style them through CSS accordingly. If you are using v2 elements, there is a less need to write custom CSS as v2 elements contains a lot of option that you can set and will generate the relevant CSS to the element automatically.

Hope this helps.

#17

hi jade,
thanks for your reply. that made me check in safari and firefox. and i am totally shocked to see that in both the text is bold! i am working otherwise in chrome and thought it would be flawlessā€¦ :wink: i also deleted all of chromes caches days ago to see if that was the problem. anyways, chrome still insists that the text is not bold but safari and firefox like it boldā€¦ i wonā€™t keep digging any deeper now. i am sorry i cost you so much time and probably nerves!
about the style guide. what you describe is what i mean. in the old x theme there was a small css guide with itā€™s own style system (for margins like this: man, mal, mas, etc.).
but i understand what you say. it is very broad and the new elements are more flexible. i am just missing things in the new elements which make me stick to the old ones. header for example does not have the nice grey line which fills the rest of the row anymore. text elements donā€™t take their fonts settings from global settings. just to mention the two most important to me.
so thanks so much for checking on the issue so often and all the best do you! kai

#18

Hello @iTurtle,

I believe what you are refering to is the CSS class index guide. Here is the link that can be used to refer:

Thanks.

#19

thanks prasant, that i was referring to :slight_smile:
would be nice to have this specific to each element, though. eg. the headers in the tabsā€¦
i also found this page in my bookmarks:
https://xthemeusers.com/resources/css-class-selectors/
is it still up to date for pro?

thanks again! kai
ps: linebreak did not work in this post. (shift-enter).?!

#20

Hi,

It would be better to use Chrome Inspect element to get the class of the element you want to modify.

Hope that helps.