Header – add clickable logo to title

Always make a backup copy of your css before you make changes.

Okay… I can’t remember exactly where I got this.  It’s from google and it worked for me.  I’m using a child of the  twenty ten theme.  I’m going through my css and documenting the changes I’ve made.  I’ll do better next time to make sure I credit the original poster.  If you do know the original poster, please leave their url.  I don’t know how to do all the ping back or rss stuff.  Still learning.

Find the following line in the css.  Make sure you’re using your child theme css.

 

/* =Header
-------------------------------------------------------------- */

 

Under this line of code add a couple line breaks and add the following code:

 

/* The main theme structure – reduce top margin to compensate for changes to Header*/
#wrapper {
margin-top: 5px;
}

/* =Header – add clickable logo to title */
#site-title a {
padding: 10px 10px 80px 100px; /* allow space for image */
background: url(images/lukeup-logo-105×105-dark-blue-small-U.png) no-repeat;
}

#header {
padding: 0px 0 0 0;
}
#site-title {
float: left;
font-size: 45px;
line-height: 136px;
margin: 0 0 18px 0;
width: 700px;
}

You will have to remove the exsisting site-title. I had to experiment with the line height and ‘site-title a’ padding.

Good Luck.

Leave a comment

© 2011-2024 Lukeup Solutions All Rights Reserved