product Categories widget font change

further to this with firebug ive identified from the widgets that

theme customisation body text size/heigh controls the product widget
theme customisation header text size/height controls other widgets?

seems the product categories ive added appear as body text not headings ,how can i change that?

means i cant get them all the same! any ideas?

• This reply was modified 6 years, 8 months ago by tomkbucks.

Try this custom css and adjust the values to your preference:

.et_pb_widget_area h4 {
  font-size: 18px !important;
  color: red;
}
.et_pb_bg_layout_light .et_pb_widget li a {
  font-size: 18px !important;
  line-height: 20px;
  color: blue !important;
}
.et_pb_bg_layout_light .et_pb_widget li ul {
  margin-top: 12px;
}	
.et_pb_bg_layout_light .et_pb_widget li ul li a {
  font-size: 18px !important;
  line-height: 20px;
  color: green !important;
}

The colours are there just so you can see which section is affecting which text.

Custom css can be entered at Appearance > Customize > Additional CSS

thanks ive added and now one widget shows blue title and green sub parts, sorry i dont have a clue with css ??

what does each section do? customisation on the theme seems to show that the some widgets are controlled by the body text and others by the header text – really annoying – can i make all widgets follow suit from the body text so i can control with the theme? want to be able to change the font and size/color

thanks for your help so far!

Adjust the font size in px to your preference.

To set the font family to your theme body text, you would add:
font-family: "Open Sans", Arial, sans-serif;
add to each section.

Finally, remove the color lines.

thanks , so would I just put the one font name i want ?
i see the css for exampe .et_pb_bg_layout_light .et_pb_widget li ul refers to one specific widget – how do i work out what widget is which file name? thanks for youur reply ??

See this:
https://www.w3schools.com/cssref/css_websafe_fonts.asp
for a list of web safe fonts. The idea is the first font in the list is the one you really want, but you provide one or more fall-back fonts in case the user hasn’t got the main one on their computer.

The colors were there in my first post so you could see which section was targeting which elements on the page. Leave the colors in until everything else is as you want it.

Have a run through the css tutorial. You’ll need to understand the principles if you like to control your site’s appearance.
https://www.w3schools.com/css/

Thanks will do , im just trying to work out how i see on the page which bit is controlling which bit…

inspecting the element on chrome i can see that one widget is .et_pb_bg_layout_light .et_pb_widget li a

but i cant see the other 3 using from the examples you posted? how do you (and how do i ) find what these are myself in future? eg

.et_pb_bg_layout_light .et_pb_widget li ul
.et_pb_bg_layout_light .et_pb_widget li ul li a

dead helpful thank you ??

• This reply was modified 6 years, 8 months ago by tomkbucks.
• This reply was modified 6 years, 8 months ago by tomkbucks.
• This reply was modified 6 years, 8 months ago by tomkbucks.

anyone able to answer my question above pretty please?