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:

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.

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.

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;}

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) ;}

I've had allot of questions from other Socialgo'ers that smelled strangely of my early days and I want to scream stop! go back to go and collect $200. I decided to create a ground zero fundamentals series, and I hope it's helpful to those brand new to code, and those looking to sturdy their foundation.

A huge mistake I made, and still constantly make, is the lust for instant gratification at the expense of knowing what I'm consuming. Translated to XHTML and CSS this seemingly ambitious drive to get to the good stuff, causes what I call Rat's nest Code. Hey, but it does the trick right? Maybe, kinda like duck tape does the trick.

The problem with racing down the road with out knowing what all the road signs mean is you'll eventually collide head first with a pedestrian, and that pedestrian is usually one of your pissed off users, a client or a boss. How this happened to me, countless times, is I got the site going, looking good -- by the skin of my teeth. Then 4 months later, after I had done twenty more sites, tragedy struck. Something goes wrong, someone sneezed on your CSS or something and you got to go rescue the site. Well I would open up those four month old sites and nearly collapse. I didn't remember what I did, or how I did it. I had ripped most of the code from other sites and the rest ducked taped together with 20 different tutorials from 20 different versions of how to code. I can't tell you how many cuss words I learned back then, some of them would make the 18+ sights blush.

I've only been at socialgo for a short time, and I have already broken my sites, in a big way, accidentally. ( Usually   because if you have several networks, whenever you go to admin it still pops back to your first network on the list. well, I'd go in the wrong network and start deleting stuff and so on..)

The malfunction, for me at least, was simply that I didn't know what the hell I was doing and didn't want to admit it. I'd learned how to steel code and make it work, but I never learned how to write code and understand how it was supposed to work together.

I finally forced myself to re-read all those books on my shelf and pay attention to the 90% I skipped over.

(By the way, after my little sermon, my code is still ratty... I'm working on it)

This is the real beginning fundamentals, so if you know all this please skip to the next blog.

SIMPLE SELECTOR

A HTML page is made up of ELEMENTS and ELEMENTS are different structures like buildings.

Here is a

ELEMENT:

I talk to my dog because Farty the cat has bad breath

With a CSS SELECTOR, I can grab hold of a TAG by it's NAME Like this:

 p  {}

p is

's name. This is a SIMPLE SELECTOR because it's so damn simple. Now I can tell this p what to do with CSS.

ID SELECTOR

's in my network, what if I just want to grab hold of one element that talks about my dog's breath. Just like I my State ID refers to me in a broad term saying that I am a MALE- and then in a specific term, that I am EZRA. The element works the same. I just have to give it the specific name, we'll call it Hara because that's my dogs name.

 #hara {}

 = animal
 = dog
 = my dog

.cat {}

.cat {

 color: orange;

 }

 
.dog {

 color: blue;

 }


and i'll make my dog pink.


 #hara {

 color: pink;

 }