changing appearance of site title in twenty ten

I think you will have to manually enter in the name of your site in the header.php file.

Open header.php and find this:

<span>
  <a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
 </span>

And change the “bloginfo(‘name’)” to the name of your site, like this:

<span>
 <a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><span class="red">Amazing</span><span class="blue">blogname</span></a>
</span>

I’ve wrapped different parts of the word in different span tags, one labeled red and the other labeled blue. Then my CSS would look like this:

#site-title span.red{color:red;}
#site-title span.blue{color:blue}

Not tested, but it should work!

Good question – I’ll be interested in the answer! Where is the #site-title bit?

URL?

@nickwestwood, what do you mean?

If you are talking about the CSS, open the twentyten style.css file and search for “Site-title”. Then copy/paste the css above in there.

If you are asking where the actual site title is located, its in header.php. Just do a search for site-title again and you’ll find the code I mentioned above.

You could try this also:

Make a .png for the logo and put it in the images folder in the template.

Then add this to the CSS for “#site-title a”

#site-title a {
color: transparent;
font-weight: bold;
text-decoration: none;
background: url(images/logo.png) no-repeat;

You may have to change these to get all the image to show:

#site-title {
float: left;
font-size: 80px;
line-height: 76px;
margin: 0 0 18px 0;
width: 700px;

This way you can have any colors you want and it can be changed by downloading a different image.

I have only tried this in a test site so you may want to create a child theme and put it in there.

Michael

Thanks TMC909 – it didn’t work for me… it has succeeded in making the title a different colour when you go to click on it though!

Thanks Michael I’ll try that.

HI Michael,

I’ve made the logo.png and saved it in my images files on my host server, under wp-admin/images/logo.png

and added the code you said in the css:
this is what it looks like:
#site-title a {
color: transparent;
font-weight: normal;
font-variant: small-caps;
letter-spacing: 2.5px;
text-decoration: none;
background: url (images/colouredheader.png) no-repeat;

But the image isn’t showing up – have I put it in the wrong place or got the code wrong?

Thanks so much!!!

The images goes in the image folder that is in the theme folder.

You can use the full URL if you put it somewhere else, just so WordPress can find it.

You may need to change the numbers here to show all the image.

#site-title {
float: left;
font-size: 80px;
line-height: 76px;
margin: 0 0 18px 0;
width: 700px;

Michael

Not having much luck… only succeeding in making the title disappear so far – it’s not finding the image.

Them use the complete URL for the image in the background instead of images/colouredheader.png

Michael

#site-title a {
color: transparent;
font-weight: normal;
font-variant: small-caps;
letter-spacing: 2.5px;
text-decoration: none;
background: url (public_html/wp-content/themes/twentyten/images/colouredheader.png no-repeat;

That’s what the code looks like – does that look right to you?

Thanks so much for your help! I’m an idiot newbie…

No. The URL should be https://www.site.com/etc/etc

You should be able to put that in the browser and pull up the image.

Sorry – just not working for me! I’ll have to find another way…

Cheers for all the help.

Post the URL and I can take a look if you want.

Michael

Thanks so much Michael,

I don’t know whether I’m misunderstanding but this is what I did:

#site-title a {
color: transparent;
font-weight: normal;
font-variant: small-caps;
letter-spacing: 2.5px;
text-decoration: none;
background: url (https://www.sportsshare.org/public_html/wp-content/themes/twentyten/images/colouredheader.png) no-repeat;