Use A Custom Logo With Reptile
Now that you have your Reptile skin one of the first things you may want to implement is a custom logo. Adding a logo is pretty easy and I will show you how in this tutorial.
Requirements
- Your custom logo or banner.
- Text Editor
- We recommend Notepad++ for Windows and TextMate for Mac OS X
The Instructions
The first step is to record the height and width of the image that you plan to use. Afterwards upload the image to your ./skins/(skin name)/custom/images folder. Once you are done, open the custom.css file in your text editor.
Reptile uses the id elements #header #site_name to define the site name in the header. Place the following code in your custom.css file to replace the site name with your image…
.custom #header #site_name a {
background: url('images/your_image_name.jpg') no-repeat;
display: block;
text-indent: -9999px;
height: (image height)px;
width: (image width)px;
}
As an example if I had a logo named wpbandit-logo.png with a width of 140px and a height of 50px, I would put the following in my custom.css file…
.custom #header #site_name a {
background: url('images/wpbandit-logo.png') no-repeat;
display: block;
text-indent: -9999px;
height: 140px;
width: 50px;
}