This is a blog tutorial that lays out the podcast #6.   We are going to create a rollover logo to replace the big ugly title in our Socialgo network, and also throw a repeating image in the header. 

FireBug: Find & Grab

We have other tutorials on firebug, look at podcast one and also this blog  which has firebug info and also other CSS editors and plugins you can use to do the same job.

Copy and paste H1 logo area css> First of all. Every thing we copy from fire bug will have a line number. You can see this in the style pane to the right. You will need to delete this number for it to work.

Open up firebug by right clicking on your page and selecting "Inspect Element." It will pop open a slide out tray from the bottom. Next click the inspect button in firebug, top left.

 

Now we will find our html elements by hovering over the page. If the inspect button is impressed than you will see a little blue outline as you hover over the elements of your page. Whatch the code in the fire bug window and hover over the header until you see a H1. This is your header HI where we will put the logo. Click it.



Now on the right side of firebug, you will see the CSS. If you don't see it, select the style tab. Now if you clicked on the header H1, you should see at the top of the CSS pain the header H1 statement. Copy and paste this into your style sheet. Header H1 a

   

Now we will copy the Header H1 a. this is where we will put the image it self, and the rollover image. Press inspect in firebug again, now scroll over the title of the page until you see the blue outline around the title. 



Click. you should now see bown in the style pane of fire bug, the div#Header H1 a. Copy and paste it.

Now you will have this:

Adding images

In the div#header H1 a, Add this attribute and value: Background: url(imeages/mylogo.jpg); Where you see my logo JPEG you should put the path to your own logo. If it is hoasted somewhere like Photobucket or on your social go, get the image URL by right clicking on it, and then place that URL in that place. Should Look Like this:

div#header h1 a {
        color: white;
         font-family: Arial;
         font-size: 35px;
         line-height: 113px;
        background: url(images/mylogo.jpg);
           }

 

Now, also add a Display:Block, and height: 145px; and text-indent: -2000px; the hight will depend on your logo image height. It will look like this:

div#header h1 a {
        color: white;
         font-family: Arial;
         font-size: 35px;
         line-height: 113px;
         background: url(img/images/shoe.png) no-repeat;
         display: block;
         height: 145px;
         text-indent: -2000px;
        
           }

Now you will copy the Header H1 a statement and paste it bellow then add ":hover" to the "a" or anchor to look like this:

 div#header h1 a:hover {
        
        }

Now you want to do is to add your rollover image. You will do this the same way as you added the first image, BUT, this time delete all other atributes to look like this:

  div#header h1 a:hover {
        
        background: url(images/mylogo_on.png) no-repeat;}

You will see your logo now in the header, but it's shooting over and over across the page. We need to tell it not to repeat. So in the original div#header H1 a, place this value in side of the background attribute: no-repeat. Now here is the final code:

div#header h1 a {
        color: white;
         font-family: Arial;
         font-size: 35px;
         line-height: 113px;
         background: url(img/images/shoe.png) no-repeat;
         display: block;
         height: 145px;
         text-indent: -2000px;
        
           }
           
           div#header h1 a:hover {
        
        background: url(img/images/shoe_on.png) ;}

Thats it on the header logo, shall return with the Header background.

Part one of Two