How do I change the font size of the site description and body text?

• 

  worldheritageuk · Member · Mar 31, 2015 at 9:59 pm

  • Copy link
  • Add topic to favorites

  Hi, I am struggling as a newbie to CSS.. how do I change the font size of the ‘site description’ element, and of the main blog text, which I assume is the ‘body’ element’?

  I have tried variations on “font-size: … @ but nothing changes?

  Thanks in advance

  Yours, confused!

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

• 

  thesacredpath · Member · Apr 1, 2015 at 3:12 pm

  • Copy link

  Hi there, I see you got the site description size adjusted. Nice job!

  I see the following in your custom CSS, to change the color and font size of the content.

  .entry-content p {
      color: #444;
      font-size: 1em;
  }

  You can adjust the font size by changing the 1em up or down as desired, and you can use decimal sizes for em units, like 0.5em or 1.5em.

• 

  worldheritageuk · Member · Apr 1, 2015 at 9:31 pm

  • Copy link

  Hi, and thanks, I worked this out in the end late last night, but many thanks indeed… to follow up, it seems that when I get to my EVENTS menu page, which is a ‘Category’ Menu type, not a ‘page’ type, I have some other small type which I want to change,… now I thought this was .taxonomy-description.. and changing the colour using that element has worked for one of the types, but not the rest, and I am also unable to change the font size for any of these.. any clues?

  Finally, is there any way of reducing the size of the space between the menu and the title of the page, which, on this theme, is a little larger than I would like.

  many thanks thesacredpath

• 

  thesacredpath · Member · Apr 2, 2015 at 1:45 am

  • Copy link

  Change your taxonomy description rule to the following.

  .taxonomy-description p {
      color: maroon;
      font-size: 1em;
  }

  1em would not increase the size. Make it 1.2 or 1.3 or something like that.

  For the link below the post titles you would need this.

  .cat-links a {
      color: maroon;
      font-size: 1.5em;
  }

  For the line with the date on it, this.

  .entry-meta a {
      color: maroon;
      font-size: 1.5em;
  }

  The site-header div has 80px of padding on the bottom of it. Add the following and adjust as desired.

  .site-header {
  padding-bottom: 80px;
  }

• 

  worldheritageuk · Member · Apr 2, 2015 at 8:13 pm

  • Copy link

  Thanks, this is all awesome. Dare I ask a final question, which is the code for changing menu size, then I will be quiet. Have a great day

• 

  thesacredpath · Member · Apr 3, 2015 at 7:14 pm

  • Copy link

  You most certainly can ask another question. :)

  Add this and then adjust as you desire to change the font size on the menu.

  .main-navigation a {
      font-size: 110%;
  }

• 

  worldheritageuk · Member · Apr 10, 2015 at 8:43 am

  • Copy link

  Thanks for all your help for now. Sam :)

• 

  worldheritageuk · Member · Apr 10, 2015 at 10:15 am

  • Copy link

  Hi there again

  I am now using forms in this template – I would like to reduce the size of the fonts and change the colours, but cannot work out how to do this. I have tried the following, but with no luck. Any suggestions?

  .grunion-field-label p {
  font-size: 0.5em;
  color: #444;
  }

  thanks

• 

  worldheritageuk · Member · Apr 10, 2015 at 12:33 pm

  • Copy link

  Hi – sorry to add the last message, I also need to change the colours and font sizes of lists and table contents as well as forms text. Please can you advise the correct CSS code.

  Many thanks

• 

  thesacredpath · Member · Apr 11, 2015 at 2:21 pm

  • Copy link

  Hi, to change the labels above the form fields in the contact form, you can use the following.

  .contact-form label, .contact-form label span {
      color: #444 !important;
      font-size: 0.5em;
  }

  For ordered and unordered lists in the content of your pages and posts, you can use the following.

  .entry-content li {
      font-size: 90%;
      color: #cc0000;
  }

  For tables, such as the one on the events page, there will be two rules, one for the content and one for the header entries.

  .entry-content td {
      color: #cc0000;
      font-size: 90%;
  }
  .entry-content th {
      color: #00dd11;
      font-size: 90%;
  }