Adding a tagline with CSS

• 

  ninakaradzic · Member · Dec 17, 2014 at 8:31 am

  • Copy link
  • Add topic to favorites

  Hi there, I am new to this whole CSS thing. I am not really sure how to use it. All I want to do is add a tagline to my current blog. I am able to locate the CSS page, however I don’t know what code I am meant to put in the spreadsheet in order for the text to appear…
  Could someone give me a really step-by-step guide how to do it. I’ve looked at similar forum posts and unfortunately, none of them help me…Thank you.

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

• 

  staff-happychia · Staff · Dec 17, 2014 at 8:41 am

  • Copy link

  The Museum theme doesn’t display tagline.

  Please try the following CSS and let me know how it goes:

  h1.site-title:after {
  content: "This is my tagline";
  display: block;
  font-size: 20px;
  }

• 

  ninakaradzic · Member · Dec 17, 2014 at 8:47 am

  • Copy link

  It works! Thank you so much. Is there anyway to change the tagline to lowercase?

• 

  ninakaradzic · Member · Dec 17, 2014 at 8:48 am

  • Copy link

  And whether I can move the text slightly lower than it is placed?

• 

  staff-happychia · Staff · Dec 17, 2014 at 8:59 am

  • Copy link

  Surely :-)

  Add the following two properties besides what you already have:

  text-transform:none;
  padding: 10px;

  instead of none, you can also use lowercase or capitalize. Change them and use what’s close to your liking.

  You can also adjust 10px to whatever you would like to create your desired space between site title and tagline. Eg. 6px or 20 px or whatever :-)

• 

  staff-happychia · Staff · Dec 17, 2014 at 9:02 am

  • Copy link

  Btw, here are some starter CSS help pages:

  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
  CSS Basics
  Editing CSS.

  That’s heaps!