The new CSS3 will provide many features that were not available with CSS2 and older applications. While some of these features are still being developed, there are others that are working right now as well.

One of the new features is called "substring matching attribute selectors". There are three additional attribute selectors provided for matching substrings in the value of an attribute.

*[att^=val]
Represents an element with the att attribute whose value begins with the prefix "val". The selector does not represent anything if "val" is the empty string.

*[att$=val]
This will represent an element with the att attribute whose value ends with the suffix "val". Again if "val" is an empty string then the selector doesn't represent anything.

*[att*=val]
Represents an element with the att attribute whose value contains at least one instance of the substring "val". Just as in the other two, if "val" is the empty string then the selector does not represent anything.

Another feature of CSS3 is the ability to manipulate borders. You can play around with border color, border image, border radius, and box shadow applications to customize borders.

**Border-color
At the moment this is only available to those using Mozilla/Firefox browser. By using the CSS code available you can change the color of the border around a boxed set of text. Want the border around your message to be blue, just use the CSS code. Red,yellow, gray, or whatever color you want can now be used to give your borders more style.

**Border Image
This currently works in Firefox 3.1 and Safari. This feature is split into two categories which are border-corner-image and border-image. Instead of using the normal border of any element, you can now just use this feature to change the images around the border. You can change the corners or the whole box if you wish.

**Border Radius
This can be used on Safari 3 and Mozilla Firefox. This function allows the corners on a box to be rounded. You can choose to round off just one corner, or round off all corners of the box.

**Box Shadow 
This can be implemented in Firefox 3.1 and Safari 3+. Color is one attribute you can alter as well as three lengths that can be used. 
1. Horizontal offset of the shadow means that the shadow will be to the left of the box if using a negative offset, or will be to the right of the box when using a positive offset.
2. Vertical offset puts the shadow on the bottom of the box with a positive offset and the top of the box with a negative offset.
3. Blur Radius means how blurry you want the shadow to appear. A setting of zero will mean there is no blur and as your setting goes up the blurrier the shadow will be.

There are also other features for CSS3 that deal with colors. A feature that can be used with Mozilla, Konquerer, Safari 3 and Opera 9.5 is HSL colors. HSL stands for hue, saturation, and lightness. The colors and tunes are now available in a much wider spectrum than they were previously.

**Hue is a degree on the color wheel. The basic values are green is 120, blue is 240, and red is 0 or 360. Different shades are represented by the numbers in between.

**Saturation deals with a percentage value with 100 percent being the full color. 

**Lightness also deals with percentages, with black being zero percent and 100 percent being light. 

HSLA sets the opacity of an element and is currently only available for Firefox 3 beta and Safari 3.

There are also features you can use that apply to user interface. These include box sizing, resize and outline. 

**Box Sizing
Can be used with Firefox and Safari 3. Changes the behavior of the browser in calculating the width of an element. By using the border-box setting the browser will render the box with whatever height and width are specified while also adding the border and the padding within the box.

**Resize
Allows user to specify if a box can be resized. You can resize vertically, horizontally, or both.

**Outline
Currently works in Safari, Firefox and Opera. Offset can be rendered away from the specified element, and the outline will be another box surrounding the border. 

These are only some of the features available with the new CSS3. There are also newer features that are presently in the works as well. 

Hey I've been busy so this is just a reply to an email, I have not tested this in all browsers so will need to be tweaked for your particular site. Mabye someone that has done this can chime in. I also did not test "not logged in" but you would use the not logged in tag, which slips my mind at the moment to remedy this. 



with just a quick test this works but no bug testing and also you will have to adjust the sizes of zone-e (must have LM turned on or you would use a different tag I think it's #main-content would replace #zone-e ) My code is redundant, to show you what is happening. The commas important. 

THIS POST HAS BEEN UPDATED > I was asked this question which is related to our earlier blog on hiding birthdays. People will usually gauge how good a group is on the size of it's member base -- this is true online and in the real world, kind of like a new restaurant with no cars in front of it. So how do you get them to take a look inside your groups without judging them before they hit the door? You hide the membership! Here is how it's done -

Normal:


You have two options you can hide the entire statement of who the owner is and how many members it has, or you can just hide the owners name and the members number. 

Hide the author and members statement:



  For this we will use our trusty display none, but to make sure we don't effect other elements on other pages, we will let our CSS know it's only on the groups page:

     
#groups-list 
.search-listing 
.listing-questions li  
{
 display: none; }

Hide just member number and author name:

 
 
To hide just the member number and author name we will use the "Strong" tag.

     
#groups-list 
.search-listing 
.listing-questions li strong  
{
 display: none; }

You will notice that this changes your layout a bit, and it should because when you hide something it takes it out of the line, the space that it once held is gone. So if you want to keep the formating just the same you can also just change the color of this text to the color of your background like so:

     
#groups-list 
.search-listing 
.listing-questions li  
{
 color: black!important;        }

You could just effect the member OR the author, but this would get into javascript which is a little to expansive for this post

We will be styling a google translate tool like I have done on little prayer box.  

If you just want all the code and don't want to read all this, just skip to the bottom and follow instructions about changing your URL.



I'm seeing the google translate tool popping up every where on Socialgo Networks and I thought I'd offer up some CSS to style those puppies. 

Here is the full translation HTML code you will need for this exercise: translate code.  If you already have the code up ( take a look at mine to make sure it is the same google translate code) just ad a DIV that wraps all the code and give that div a ID of "translate": 

 

google code here
  

And if you want it to say "translate" insert this P element:

Translate to:
 
google code here
  

Note: the image resides on my server, so I can't promise it will always be there. you can replace it in the CSS coming up.

If you are using the google code I'm providing you will need to insert your URL where it says "yoursite.com." you can do this with a easy search and replace with most text editors. 

The CSS 
Here is the CSS you can add it to the head of your SG site in the custom HTML area. Make sure you put it between open and closing STYLE  tags. First the "translate" DIV we just added.  

Here we will set the position to fixed that way it does not scroll with the rest of the page:

#translate {
        position: fixed;        
}

We will also give it a enormous z-index, just because I don't know what z-indexes you are already using:

#translate {
        position: fixed;
        z-index: 2000;  
}

We will drop the width so to make our flags line up vertically:

#translate {
        position: fixed;
        z-index: 2000;
        width: 12px;    
}

Now we will add a image I made. It is a black PNG with the occupancy dropped to about 12%:

#translate {
        position: fixed;
        z-index: 2000;
        width: 12px;
background:  url(http://www.networklogic.net/widget/images/translatebg.png);
}

Here is the important part - the margin. As you can see on my little prayer box network, I wanted the translation tool to float just under my banner. You may want different and this "margin-top" is where you will adjust that:

#translate {
        position: fixed;
        z-index: 2000;
        width: 12px;
background:  url(http://www.networklogic.net/widget/images/translatebg.png);
        margin-top: 186px;
}

Next we will add a float... and I'll be honest, I don't know why I added this, it shouldn't matter. But we will add it for fun, you can mess with it:

#translate {
        position: fixed;
        z-index: 2000;
        width: 12px;
background:  url(http://www.networklogic.net/widget/images/translatebg.png);
        margin-top: 186px;
        float: right;   

}

Next I will just add some padding, take out the margin and then a small 1px border:

#translate {
        position: fixed;
        z-index: 2000;
        width: 12px;
background:  url(http://www.networklogic.net/widget/images/translatebg.png);
        margin-top: 186px;
        float: right;   
        
        border: 1px solid #666;
        padding: 10px;
        padding-left: 3px;
        margin-left: 0%;

}

Now I'm going to do my ocpancy roll over so the flags are slightly transparent.. You can add this if you want. First I set the opacity for the flags real low, then on the ":hover" state I bring it all the way up:

#translate a {
opacity: .2;

        
}

#translate a:hover {
opacity: 10;

        
}

Put it all together
Last I'm going to do a image replacement on the p tag. I've shown how to do this numerous times. You can look here for a start.

So here is the CSS in full. Just replace the image urls with your own if you want, and add it to your header area between style tags.

#translate {
        position: fixed;
        z-index: 2000;
        background:  url(http://www.networklogic.net/widget/images/translatebg.png);
        width: 12px;
                margin-top: 186px;
        border: 1px solid #666;
        padding: 10px;
        padding-left: 3px;
        margin-left: 0%;
        float: right;
        
        
}

#translate p {
        
        display: block;
        text-indent: -2000px;
        background: url(http://www.networklogic.net/widget/images/translate.png) no-repeat;
        height: 40px;
        margin-top: 0px;}

#translate a {
opacity: .2;

        
}

#translate a:hover {
opacity: 10;

}
Very Last add translate HTML code (with your URL replaced, or add the div and P tag as we talked about above) to your BODY area in the custom HTML section of your admin.

Remember you can adjust the Margin-Top on the #translate CSS  to move it up and down.

If you need a really easy fix and don't want to do all this then you can download this CSS and HTML txt file and dump it in to your body section. BUT! you will still have to replace all instances of "yoursite.com" with your URL.

When I get a private question that may be relevant to you I'll try to post the answer here on the blog so others can benefit. 

Sometimes you need to adjust where your header background image starts, to either align it better with the repeat function, or to align it better with your body content. Here is how you do that. This will push your background image (that was set to "FULL WIDTH" in the network designer header section) over to the left see pictures. We will use the #wrapper-header-outer, that is where Socialgo Network designer places the FULL WIDTH image: 

  This is what it looks like without doing anything:

div#wrapper-header-outer.has-full-header-image {
background-position: 200px 50%;
}

This is what it looks like moved over 200px:



Now, you can also tell the image not to repeat with this code:

div#wrapper-header-outer.has-full-header-image {
background-position: 200px 50%;
background-repeat: no-repeat;
}

And, this is what it looks like:

 

This has been a question going round and round since the beginning: how to hide the birthday. It's been answered in forums, but I thought I'd put it out there. Unless Socialgo has added another solution (if the have let me know) this is how I do it on this site. Place this code inside of your "header" inside of the custom html section of your admin:

div.bday {
        display: none!important;
}

Now of course your members can disable the birth date in the security settings, but for some networks, this is just not a viable option.

Sheww.. Just on the back end of designing the Widget Laboratory Socialgo Template. It was allot of fun, tried some new CSS tricks and Java Script. Take a look! I Hope to do a big long drawn out series either by blog or podcast to show the inner workings of WL. For now though...Here is a CSS cheat sheet I made for a friend that keeps all the important elements of CSS within reach. I hope it helps you out. I'm also doing one on XHTML and the big feat a map of Socialgo Classes and Id's, probably more of a booklet than a sheet. 
Enjoy!

 

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

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.

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.