You can view the podcast Prosocialgo here. 

  It is a good idea to learn to work from the provided socialgo CSS theme template. I grab that CSS with Html scout. Just load the page and click the style or CSS tab. Copy and paste it into your own CSS doc. But as I have used in this tutorial series, you can just copy and paste as you go using firefox plugins like firebug. Here is how you set up a CSS and HTML to use on your hard drive. After your done, you can either put the CSS on a server and link to it in your Header are of custom CSS area of Socialgo admin. Do this like so:

Now your Socialgo will read that CSS style sheet. This is cool cause you can update the style sheet then upload it, then ta-da, your whole site is updated, no going to the admin and copy and pasting css into the header again. Here is how you set up your CSS and HTML: I will be working from my own style sheet and HTML on on my hard drive. The way you do this, if you don't know, is to go to the page you want to work on. In the menu click "View," or something similar in all browsers. Select "View Page Source," Then copy and paste this into a html doc. Replace any info in the doc with this. Save it. Now create a blank CSS, save it in the same root folder. Now look for this code between the header of your HTML doc:

Replace the URL of the theme style sheet, in this example "38597-1238993918.css" with the url to your new style sheet in your root folder, it should look something like this mycss.css if you put it in the same folder as the HTML. Cool now when you change the css and save it will effect your html. you can keep your HTML open in a browser and just refresh to see the changes. If you are working in Dreamweaver or something similar, just delete the entire theme CSS and link to your own CSS through the CSS palette. In dreamweaver it is in the lower left hand of your pallet, a little chain icon.

Part one, two 

In this part two to Podcast number 6 we will look at placing images in the header. Why do this when we can do it in the Network designer? There are many reasons, but the best one is--control.  You can adjust sizes with CSS where this is limited in the designer, you can also adjust the actual placement of the image in side of the div. This is very helpful for lining up graphics for seamless Effects.There is also other elements that the designer dosn't let you have access to.

Firebug: grab CSS

In the same way that we grabbed the CSS for the Logo, we grab the CSS for the header. Click inspect in fire bug the hover over the banner until you see "header" in the HTML area. It may take a few clicks but you should find the Header-Inner css. Now you want the one with Header-inner and nothing else, on my theme CSS, it is about three or four statements down and should look like this:

Copy and paste this into your CSS. Now you want to grab two more CSS Statements, you can hover around on the header until you find these or use this:

div#wrapper-header-inner {
background-color:#8C8C8C;
}

div#wrapper-header {
        margin-top: 0px;
         margin-right: auto;
         margin-bottom: 60px;
         margin-left: auto;
         padding-top: 0px;
         padding-right: 5px;
         padding-bottom: 0px;
         padding-left: 5px;
         width: 975px;
         background: url(img/clear.png) no-repeat 250px;         
}

div#wrapper-header-outer {38597-12...93918.css (line 1)
background-color:#004995;
border-bottom-color:#003581;
border-top-color:#A5A5A5;
}

Using the background image technique in Part one, Place your image inside of one of these areas. Here is how each area works:

1. div#wrapper-header inner - Use this if you want a image to go across the entire scree. Let it repeat (it will do this automatically)  or you can have only one instance of it by adding the value - no-repeat to the Background property as seen in part one. Make sure the Artibute "Background" Does not say "Background-Image." Simply using "background" lets you use many values (or styles) inside of only one atribute (background: is a atribute. Anything inside of it like a color would be a value)
2. div#wrapper-header-outer - You might stay way from this for now. But it is under div#wrapper-header-inner, so you could put one image in the "inner" and then repeat an image in "outer" this will allow many effects. 
3. div#wrapper-header - This area spans only the size of the body. If you want a typical banner, put it here. You can adjust the height by changing the values of margin top and margin bottom which are included in this style statement. 

see it live on the podcast > part two > one, three

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