Classic tabs - styling

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:

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

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

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.

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

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.

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

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.

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!

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

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.

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

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.

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).?!

Hi,

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

Hope that helps.

thanks paul! so the list is not up2date i gather from your reply? i already use that inspect element feature a lot but sometimes i am not sure what the correct css element is. thanks again. kai

Hi Kai,

It’s not up2date but most of itwill still work.

You just need to verify and test using inspect element.

Thanks

thanks paul!

You are welcome

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