Changing the size of fonts: menu, submenu, entries, pages…

• 

  sindicatosiep · Member · May 22, 2015 at 5:57 pm

  • Copy link
  • Add topic to favorites

  I work with Dynamic News Theme. I discovered in the forum that we can change the size of text in widgets with this code:
  .widget ul {
  font-size: .9em;
  }

  But how can I change the font size of the different texts appearing in the rest of my web: menu, submenu, pages, entries…? Which is the css code for that?

  Thank you very much

  The blog I need help with is: (visible only to logged in users)

• 

  lizthefair · Member · May 22, 2015 at 7:53 pm

  • Copy link

  But how can I change the font size of the different texts appearing in the rest of my web:

  Do you want to change all of the fonts in a similar way (like make them all bigger or smaller) or do you want to change each of them separately? The code is different depending on how specific the changes are.

• 

  sindicatosiep · Member · May 22, 2015 at 9:12 pm

  • Copy link

  I want to change each of them separately, but I’m interested in both solutions. Thank you

• 

  jeremeylduvall · Member · May 23, 2015 at 3:52 pm

  • Copy link

  It looks like you may have used CSS before as you have some current CSS blocks under Appearance -> Customize -> CSS. If not, we have some getting started tutorials here:

  An Intro to CSS, or How to Make Things Look Like You Like

  An Intro to CSS: Finding CSS Selectors

  Intro to CSS: Previewing Changes with the Matched Rule Pane

  To change all of the items, we’ll want to grab all of the selectors for the site. For example, you would want to get the paragraph elements, anchor (link) elements, etc. This code is a solid starting block:

  p, a, h1, h2, h3, h4, h5, h6 {
  	font-size: 110%;
  }

  That may still miss some elements. If so, we can get a bit specific. For example, I noticed it doesn’t change the menu items. That means we’ll need to get more specific with those selectors. To find the specific selector you’re looking for, right-click on the element and then click “Inspect Element” to bring up the browser tools like this:

  http://d.pr/i/15BAA

  The browser tools will pop-up with a bunch of applicable selectors at the bottom of the page:

  http://d.pr/i/1gQZU

  In this particular instance, you could find and use the following selector:

  ul#mainnav-menu.menu a {
  	font-size: 110%;
  }

  If we wanted to add that to the first list, we could just add it with a comma like this:

  p, a, h1, h2, h3, h4, h5, h6, ul#mainnav-menu.menu a {
  	font-size: 110%;
  }

  Otherwise, we could use it as a standalone selector if we want to just target that element. Finding the actual selectors can be just a bit of trial and error. Can you try setting this up? Let us know if you have trouble with any specific elements, and we’ll be happy to help!

• 

  sindicatosiep · Member · May 27, 2015 at 2:31 pm

  • Copy link

  Thank you very much. It works in most of the text of the web, but I have trouble with changing the size of some elements:

  -Titles of the widgets located in right sidebar.
  -The titles of the entries.
  -The text “posted on”, “by”, “editar entrada”, in every entry.

  Thank you for your help!

• 

  thatrobyn · Member · May 27, 2015 at 11:07 pm

  • Copy link

  Hello there!

  To make adjustments to these items, add the following below your existing CSS revisions in your customizer:

  .widgettitle {
  font-size: .9em;
  }

  .page-title, .post-title {
  font-size: .9em;
  }

  .postmeta {
  font-size: .9em;
  }

  That should do the trick! If I can help in any other way, please drop me a line. Cheers :)

• 

  sindicatosiep · Member · May 28, 2015 at 5:03 pm

  • Copy link

  Thank you very much!! It worked!!