Varying fonts in site title header

• 

  lisarhode · Member · Feb 10, 2014 at 10:39 pm

  • Copy link
  • Add topic to favorites

  Can font size and line height vary in the .site-title? The goal is for the header to have different fonts, font-size and distance between the name and the caption coded together in the site title.

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

• 

  timethief · Member · Feb 10, 2014 at 10:50 pm

  • Copy link

  Here’s is the link to the stylesheet for the Sight theme so you can see if you can answer your own question by examining the selectors. https://wpcom-themes.svn.automattic.com/sight/style.css

• 

  designsimply · Member · Feb 10, 2014 at 11:07 pm

  • Copy link

  Can font size and line height vary in the .site-title?

  You can change the font size and line height for the site title all at once, but you can’t change those things separately for different words (if that makes sense).

  There might be some tricky workaround stuff you can do with the content property though. :) Here are a couple examples from a CSS tutorial:
  http://htmldog.com/reference/cssproperties/content/

  The goal is for the header to have different fonts, font-size and distance between the name and the caption coded together in the site title.

  I see that the current site title says “lisa rhode consulting.” So do you mean you want “lisa rhode” to have a different font and font size than “consulting” and you want to have more space between those two pieces?

• 

  lisarhode · Member · Feb 11, 2014 at 10:33 pm

  • Copy link

  Those are great links.
  I found some code that might be close to solving the problem arising from the inability to use html in Custom CSS, it is for making columns:
  h1.site-title{
  column-count: 2;
  -moz-column-count: 2;
  /* Firefox */
  -webkit-column-count: 2;
  /* Safari and Chrome */
  }

  Is there code like this for rows? What I want is to have additional text in the site title ie. Lisa Rhode Consulting with Leadership and Organizational Development under that; is there code similar?

  ASSESS. DESIGN. DELIVER. was at the bottom of the header input in the Custom CSS tagline, I would like to keep it there with Leadership and Organizational Development between the two.

• 

  designsimply · Member · Feb 12, 2014 at 7:51 am

  • Copy link

  Is there code like this for rows?

  No, but you can usually use line-height or margins or padding to adjust spacing between rows of things as a solution instead.

  For adding text using the “content” property, here’s a fun example you can try:

  .site-title a:after {
  	content: "Put your text here.";
  	display: block;
  	padding-top: 50px;
  	font-size: 30px;
  	font-style: italic;
  	text-transform: none;
  }

  Play around with the text and the padding and font size values until you get the look you want.

• 

  lisarhode · Member · Feb 12, 2014 at 8:17 pm

  • Copy link

  Great, that is what was necessary.