Manipulating Site Title

• 

  kathrynboots · Member · Jun 30, 2014 at 11:35 pm

  • Copy link
  • Add topic to favorites

  Have never used CSS and trying to manipulate my site title. Right now it is three words next to each to each other all regular font. I want the first word on top of the other two, and the second word only to be italicized. How do I do this?

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

• 

  designsimply · Member · Jul 1, 2014 at 4:24 pm

  • Copy link

  That’s not actually something you can do with CSS only because there is not a way to target only certain words from one string in CSS.

  I think your best bet in this case would be to create the look you want for the site title as an image, then you could use Appearance > Customize > Header to add it as a header image like the one shown in the image at the top of this page: http://theme.wordpress.com/themes/chateau/

  Or you could use an image replacement technique in CSS to replace the text in the site title with an image instead. Here is an example you can add to your Appearance > Customize > CSS editor to try it out:

  #main-title #site-title a {
  	background: url(http://s.wordpress.org/about/images/wordpress-logo-notext-bg.png) no-repeat;
  	display: block;
  	width: 176px;
  	height: 145px;
  	text-indent: 100%;
  	white-space: nowrap;
  	overflow: hidden;
  }

  To use your own image instead, replace the url() value with a link to an image you have uploaded to your media library and then adjust the width and height to match your image.