Tagline Font Size Dyad Theme

• 

  chriswinn84 · Member · Dec 6, 2016 at 6:26 pm

  • Copy link
  • Add topic to favorites

  Hi,

  I’ve done as much research as I can, but still am stuck on not being able to change the Tagline font size for my site. Simple one I know, but I’d just love to have it smaller!

  Many thanks in advance!

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

• 

  thesacredpath · Member · Dec 7, 2016 at 1:19 am

  • Copy link

  Hi there, go to Customize > CSS, delete all the informational text in that window, and paste in the following custom CSS.

  .site-branding .site-description {
    font-size: 1.6rem;
  }
  #page .site-header::before {
    z-index: -1;
  }

  The first rule allows you to adjust the size of the font on the tagline. The second rule I added to make the transparent grey background recede one level so that the tagline would show up. It was actually behind the grey background so it was nearly invisible.

• 

  chriswinn84 · Member · Dec 9, 2016 at 10:42 pm

  • Copy link

  Thanks for the response. So I copied and pasted exactly what you had written, but no changes were seen. The tag line font still remains the same size Cleared the cache and did all that but it hasn’t made any difference?

• 

  thesacredpath · Member · Dec 12, 2016 at 6:55 pm

  • Copy link

  Hi there, looking at your custom CSS, I see you have changed the CSS selector to this, which doesn’t actually exist.
  .site-branding .tagline
  I also see that the font size is being overridden by the original font size, so let’s add the !important keyword. Replace what you have now with the following and adjust the font size as desired.

  .site-branding .site-description {
  	font-size:1.3rem !important;
  	display: block;
  }
  #page .site-header::before {
  	z-index:-1
  }

• 

  chriswinn84 · Member · Dec 12, 2016 at 11:47 pm

  • Copy link

  Thank you! That made some progress.

  However, I see the tagline is showing up twice now on the site. Upper left-hand corner under the header and also in the middle of the main picture.

  Can we please get rid of the bigger tagline in the middle of the picture?

  I’m way out of my depth at the moment and really appreciate the expert help on this.

• 

  thesacredpath · Member · Dec 13, 2016 at 6:45 pm

  • Copy link

  To hide the description that appears over the image, add the following to your custom CSS.

  .banner-description {
  	display: none;
  }

• 

  chriswinn84 · Member · Dec 14, 2016 at 2:12 am

  • Copy link

  Fantastic. All done. Thank you very much.

• 

  thesacredpath · Member · Dec 14, 2016 at 2:27 am

  • Copy link

  You are welcome.