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 

Workshop tomorrow, see what a real Texan looks like.. ME

The socialgo workshop focusing on designing your network will be tomorrow, that is April 7 at 6 p.m. GMT (1 p.m. EST, 10 a.m. PDT). Take a look at the details here on owners socialgo and, yes, I will be making a appearance to talk about custom CSS. Hope to meet you there and say howdy.

Socialgo has done a good job in their HTML structure design. They have kept it very clean but also allowed us to grab, or hook as I say, to many of the elements on a page. But what if you want to hook something that has no unique tag to hook to? There are several places you will find this problem and the one you will probably find first is the Magazine Sidebar. For instance, If you want to create a drop down style menu for your categories like this site has (to the right), you will have to do it to all the elements  in that sidebar, not just the categories. Child elments to the rescue.. well sort of.

 

Such an odd child he was

You may know of Nth-child(2) and first-child CSS attributes, but if you've tried to use them,

you've found they are about as useful as hair on your hips.

you've found they are about as useful as hair on your hips; that is because they are not supported by most browsers out there. What these attributes allow you to do is select children of a parent. Let's say you have a div with 20 H1 tags in it. With nth-child you could grab say the 6th H1 and make it different than the rest. Or with nth-child(odd)you could grab every other h1 and make it pink. This is very cool, and absolutely a powerhouse when dealing with template HTML you have no control over.

 

Java Script nth

sometimes I just have to kiss the screen when I'm surffing "a list apart." In fact if you go over there, you might not ever come back to my site, well maybe because of my good looks. They have offered up to the public a ingenious little Java Script (offspring), and I mean little, that allows us to use the Child elements in CSS for most browsers that matter. What this Java script does is attach the class of "odd", "even", "nth" and so one to every tag on your page. Plus, it's quick. I did a speed test and could hardly see the difference, maybe a second and a half. I won't go into this further, I'll let A LIST APART pick it up from here. But, Please note, that the syntax is different for this JS trick than for the proper CSS. For one thing you don't use the ":" between the main attribute and "nth" property. You also use a dash "-" and then the "#" number, instead of the "()" with the nth properties. Take a look, and please come back, I'll try to be relevant!! :)

If you are designing your custom graphics for your social network with Photoshop, you have enviably run in to the "big mess" of layers and moving something in your header, then wishing you hadn't. 

Photoshop Play room

What if you could play around with different ideas for your layout without having to make a new file every time. What if all these versions could be saved in one file? Well you can do this with Layer Comps. Layer comps remember allot of the mundane things you do every day in photoshop. I remember back in the day saying to a client sitting at my desk, "do you like it this way?", then I went for 10min and turned off 20 layers, moved some stuff around, "Or this way?" Now with layer comps, I just move everything, and save it as a Comp.

Don't go hog wild

Comps are great for layouts, and also great for design but you need to use them differently for both.

They are also really great for slicing your site but back to the layouts and design. Comps do not remember everything. They remember mostly positioning and layer states, but this doesn't mean they are not good for comp'n design actions. Just do your designs as you would with separate documents - if you want to see the logo smaller and with shadows in one comp, and plain in the other, just make two logo states on different layers; turn them on and off and save as comps.

Slice and Dice the easy way

Where comps come in handy is slicing your design. Have you ever tried to slice up your design and had to move and change layers all through the process? Well here is a easier way.

1. Save a comp with the full image as it should be. Like here you see I have a comp named all:



2. Save a comp for each stage that you need to turn off layers or move something. Here I have logo. I want the background transparent for the logo because I'm making a PNG.




Of course you don't see my slices, I have set up slices already of all the elements. Continue doing this for every element that needs things moved, or layers adjusted.



You will then have a very organized process for  retooling your entire site and exporting it in min.

If you have not seen this plug in prepare to drop your jaw. Ok, in the screen shots it doesn't look like much. You have to see it in action. I will be returning to podcasting this week and will feature this plug in on a episode. 

View Source Chart

Yes it is a terrible name. View Source chart allows you to view Socialgo's or any web sites code structure in a beautifully simple way. I come to this plugin allot more than dreamweaver or other code editors, especially when I just want to get a handle on what's going on with the site structure in whole or just one element. See what makes this so cool is the collapsable tags. Each element or tag is color coded in a box, and you can collapse any tag or element in the site. This makes for easy study of a site. I used this allot when creating the drop down menu style categories on this blog page. Dreamweaver does this collapsing also and also has a tool for auto finding the end of a tag... But, as with many things with DW, it doesn't work well, sometimes not at all.

Bad News

The bad news is it only works in Firefox 2.0. this is not really a problem for those on the Mac because you can download older versions and run both of them 2.0 and 3.0. For PC?? I don't think so, but let me know if I'm wrong. So it's time to switch to mac.

I just wanted to show off our latest Socialgo template designed for a private community that wanted to connect. Stonewood Ranch, a private gated community, came to me looking for a web page. When I heard what they wanted, such as a blog, private membership, news etc.. of course Socialgo came to mind. 

The Design

I didn't want anything getting in the way of this site which would have daily use by many members; clean is the word. They wanted pictures of the houses in the header and I was like why?? Don't you see those houses everyday as you go to work, and your not trying to sell your community, so we went with a very minimal header for fast run time and clarity.

Because there would be a learning curve for many of these users who do not use social media, I placed a little custom HTML in the header which will eventually be a button to a tutorial video hosted on the site, with instructions on the site. You'll see it on top, it's a badge with a leaf behind it.

 

Because it is so clean and plain I wanted one element to really stand out and define the site; be something that gave it a striking atmosphere. I placed a tree branch in the left corner also using custom html. This branch looks different depending on what browser you use. In some browsers like IE, it just stays at the top, in others like firefox and safari, it is fixed, so as you scroll down it stays with you. I also adjusted the z-index so it would fall behind the sidebar.

 

Nth-child #

One of my favorite elements is the blog posts which has one post always highlighted; the first post. I styled the first post different, and once again you get the full effect in firefox and safari like browsers, with the dat real big and floated to the left, while all subsequent posts are boxed in a outline and have a smaller header. I did this using Nth-Child classes. Yes, nth-child does not work in most browsers, but you can remedy this with a little java script from "a list apart" which appends the class of nth-child to every element on your page, and actually is pretty speedy at doing it.



There are quiet a few little tricks on this site, but what is great is, you can't tell. It just looks very simple. Take a look around, if you want to see inside you can use this URL and User:  http://testserver.socialgo.com/

Custom widgets

We also added a few Java Script widgets. One, a "to do List" I found somewhere and forgive me I don't know where, but it is great for our members to keep their shopping list. It stores in the cookies, so it is dependent on your browser and computer, but for this application I think it will work well until Widget Laboratory gives us something better. It is simply the best simple todo list for our sidebar though. If you need the code email me. We also put a weather widget. These are a dime a dozen, just look around.



 

Last on the list

If your using an older browser like IE6 you will notice it looks like a frogs behind this is because of the PNG's I used. BUT.. I have a fix for this also, a little java-script to force my PNGs to be transparent in older browsers. I have not implemented this yet but when I do, I'll do a blog on how to do it.

When your done with your Lime Green styles, do the same, save it... and if it looks like crap or Saint paddies day is over, just revert. It's like having thousands of variation style sheets in one. 

 

Thats it.

Debugging with CSSedit 

By combining CSSedit's infinite undos you can also use this as your debugging method. 

Just think, you've put hours into making your blog post look like bling on a stick, only to find it totally screwed up your profile pages. Easy. Just save all your work in a milestone, and start hitting the control-z. Watch the preview page, and when you see one of the problems disappear, make not of that CSS declarations you just nixed with control-z. Keep doing this until you have the profile page looking good again, and a list of all the declarations that changed it for the better when you un-did them. 

Now go back to the milestone that contains all your Blog work, and simply search for those CSS tags. Now you can either paste in those old CSS attributes, or mess with the ones in that milestone... but at least you know which ones they are, and don't have to dig for hours. This little trick usually takes me about 1-2 min to scour through hours of CSS. 

As we talked about yesterday. sometimes the CSS work you do on your network can look a little different on other browsers. Even compliant modern browsers. I use browsershots which allows me to check my site design in many different browsers and OS-es. But its a pain in the %$#@. Now there seems to be a easier way using Xenocode. You download web applications to run different browsers from the web. Read more about it on Webappers. 

But, it doesn't work for the mac. 

ALERT: seems some folks ran into a trojan on download of these files, so proceed at your own risk.