Google Fonts in main menu

I tried creating a new, empty child theme, and again the same – in the menu, links to WooCommerce pages are in the chosen Google Font, but links to other pages, and the shop page, are in a web safe font (Arial Or Times New Roman, depending on the browser).

It’s like, for some reason, CSS doesn’tapply to all parts of the website.

• This reply was modified 6 years, 3 months ago by Cravat.

Which brings me to another question – are WooCommerce pages really styled completely separately? I just stumbled upon a post here concerning woocommerce-mod.css file. I’m trying to style the website, does that mean I have to do everything twice? For instance the look and feel of links, do I have to change it both in the woo css and in the theme css’

Hi,

yes. Right now I am trying to set the look and feel of the site, specifically the links. Let’s say I define a background color on link hover, using this:

a:hover {
background-color: #F8E8E9;
}

and the problem is it doesn’t display properly in browsers, even though I clear the cache, or it displays fine in one but not in the others. And certainly it doesn’t display properly in WooCommerce product pages. And then somehow, in one of the changes it does.

And when I want to set the style of the menu items on hover, using the code I found here, it applies partially – the background changes, but the font color doesn’t.

.main_menu a:hover,
.main_menu .current-menu-item a { /* this is the hover/current state */
color: #fff;
background-color: blue;
}

I can find answers to my questions in this forum fine, but the problem is it doesn’t really apply on my site – I thought it was the caching plugin, but it’s not. I have gone through great length to get great score on most of page speed tests, and I have a feeling that might be the isssue, something is blocking the css from being rendered properly, or instantly.

DISCLAIMER: I am a noob. And I have installed a separate browser, Vivaldi, using it out of the boy, just to make sure FF or Chrome are not the problem.

Yea, I thought so too. Also, besides the caching plugins, the problem was also the fact that I used both custom css file, Quick CSS and advanced styling, and I’m pretty sure that over time I entered values for certain objects in more than one of those places. So I created a third child theme and started all over and now everything is applied instantly.

Btw, can you tell me where do I find the css for widgets? Pages widget and text widget look totally different, even though I use a bulleted list in text widget, and the pages widget is also bulleted list.

Thanks a lot :)

Notice how, in the footer, pages and Product categories widgets don’t look the same, even though basically they have the same type of content – unordered list? Also, Interesting links widget has smaller font.

So, I want bigger line spacing on Pages widget, and then to set all other widgets to look the same like that one (with regards to font size, line spacing etc.).

(Again, I’m a noob so please excuse my stupid questions . And the poor site design :)

Thanks, I’ll try that.

How can I know, for future reference, the names of classes for certain parts of the theme (I presume .widget_product_categories is a class)?

For instance, now I have defined a background for a:hover, but I do not want it to apply to dropdown menu where you select product sorting, cause it looks weird. It feels kinda silly having to come here every time and basically ask the same question, only for different part of the theme/site.