Need CSS to change font size/alignment on Watson theme

• 

  eoh2014 · Member · Sep 11, 2015 at 1:41 pm

  • Copy link
  • Add topic to favorites

  Hi. I’d like to make some CSS changes to my site, http://edgeofhumanity.com/, which uses the Watson theme.
  I’m going to use one post to show you the examples: Here is a page to use as an example: http://edgeofhumanity.com/2015/08/25/underground/
  1) Change the size of the byline/date (By Edge of Humanity Magazine, August 25, 2015) under the post title.
  2) Increase the size of the feature photo caption (Brain to Another Dimension..)
  3) Increase the size of categories and next/previous arrows.
  4) CSS to make the menu on the left of the footer (content, usage, copyright) match the font color/size/weight of the links in the left footer (about, contact).

• 

  ehtis · Staff · Sep 11, 2015 at 11:23 pm

  • Copy link

  Hi there,

  Woah. This did take some time. :) Try the following code, the order of your questions is maintained plus I’ve added comments before each block to indicate what it does.

  /* Byline text size */
  header.post-title .post-byline {
      font-size: 13px;
  }
  
  /* Featured image's caption size */
  .feature figcaption {
      font-size: 15px;
  }
  
  /* Adjusts categories size */
  .post-footer .cat-links {
      font-size: 15px;
  }
  
  /* Adjusts size of next/previous arrows */
  footer.post-footer nav {
      font-size: 15px;
  }
  
  /* Size of left footer on home page */
  footer[role="contentinfo"] .footer-1 {
      font-size: 1.30353rem;
      font-weight: bold;
  }

• 

  thesacredpath · Member · Sep 11, 2015 at 11:30 pm

  • Copy link

  Hi there, and thanks for the link to the example post.

  1) Change the size of the byline/date (By Edge of Humanity Magazine, August 25, 2015) under the post title.

  header.post-title .post-byline {
      font-size: 0.82353rem;
  }

  2) Increase the size of the feature photo caption (Brain to Another Dimension..)

  .wp-caption-text, .feature figcaption, dd.wp-caption-dd {
      font-size: 0.82353rem;
  }

  3) Increase the size of categories and next/previous arrows.

  .cat-links {
      font-size: 1.0em;
  }
  footer.post-footer p {
      font-size: 1.0em;
  }

  4) CSS to make the menu on the left of the footer (content, usage, copyright) match the font color/size/weight of the links in the left footer (about, contact).

  I went ahead and added a declaration to turn it into all uppercase as well so that it would match. If you don’t want the uppercase, just remove that line from the below.

  .widget_nav_menu {
      font-size: large;
      font-weight: bold;
      text-transform: uppercase;
  }

• 

  ehtis · Staff · Sep 11, 2015 at 11:36 pm

  • Copy link

  @thesacredpath, you’re so active here it’s quite unreal. I see you here be it day or night! ;-)

• 

  thesacredpath · Member · Sep 12, 2015 at 5:56 am

  • Copy link

  Heh, I have to get a life @ehtis. :)

  I should have refreshed. I was 7 minutes late.

• 

  ehtis · Staff · Sep 12, 2015 at 7:29 am

  • Copy link

  No problem at all, great job you’re doing here!

  I better stop going further off-topic in this thread. Cheers. :)