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

Is it just me? Did I miss something? I've been known to do that and anounce a new socialgo feature after it had already been discontinued! haha.

The New Profile Designer

Well it's here.. the new Socialgo Profile designer. Now we can just throw in the towel and become mini myspace? SG Forbid! this thing allows you to tell your members what they can touch and not touch... which on my site there will only be a few options - cause i'm that way.

instal and configure

You will find the little doodad in your SG widget box on the right hand side of your Layout Manager as usual. You need to drag it to your "I" zone at the very bottom then double click (this feature doesn't seenm to work in the ne safari) or click the edit widget up top and you get this..

look at all those Options!

Now if you check all of them your members can do a beautiful page, effecting many parts such as the content boxes, the header font, color, background, nav, nav color, background image, and the list goes on. Just look at what your site will look like.. isn't it exciting! 

How it works

Once you configure your new shiney widget your members will see a new button on thier profile page right there with the other configure buttons.



Now, the widget kinda messes up your site when it opens, and it has a few bugs at the moment that I won't go into because I'm sure SG is busy fixing them as I write. you'll the drop down at the top of your page, and there you can select eather color or advanced.





Color takes care of Color;) and advanced is your background images.It's pretty straight forward. The changes happen as you change them, close the widget and your done. Here is what I did in my profile.

The point of this series is to effect just the elements of your blog posts. We want to control, at least a little, what your members insert into your blog. And, the one thing I can't stand is un-styled lists.

Ordered Lists

These things are ugly if left naked

These things are ugly if left naked. We're going to try to give our list a little pizzazz and make it compliment the design of our site. This site has a bit of a formal, classic design, so why not use roman numerals instead of numbers.

 

Here is the shameful list before, look at how it cowers in its nakedness:

We're going to go about it in the same way by parenting the .blog-entry to the ol, so it won't effect other ol's:

First a little padding, notice on the "right" padding there is allot more than the rest, this might only be particular to my site, because of overriding CSS somewhere else I had to compensate, so play with it.

.blog-entry ol{
	padding: 3px 19px 4px 0;
}

Next I'll give it a light yellow background, then compliment that with a ornate image I made in Photoshop, notice it's a PNG., they are great for doubling up on background color and imagery. The options are limitless. I also float the image to the right and knock it a bit out of the frame with the -20px.

.blog-entry ol{
	padding: 3px 19px 4px 0;
	background: #eaeecb url(../img/ornateborder.png) no-repeat right -20px;
}

Last for the OL is a nice complementary border.

.blog-entry ol{
	
	padding: 3px 19px 4px 0;
	background: #eaeecb url(../img/ornateborder.png) no-repeat right -20px;
	border: 1px solid #cdcd8e;
}

Now for the LI. I'm going to change the list style to lower-roman and place the list "INSIDE." the reason for this is that I want the BORDER-BOTTOM to spread across the entire box and this is the only way to do it. You could use padding to get the LIs inside your box, but the BORDER would be too.

.blog-entry ol li{
	
	list-style: lower-roman ;
    list-style-position: inside;
		
}

The rest is just your own preference. I chose to go for 100% for the reason that in my posts, OL lists will usually be longer as well as Bullets.

.blog-entry ol li{
	
	list-style: lower-roman ;
    list-style-position: inside;
	border-bottom: 1px dotted #cdcd8e;
	padding-left: 15px;
	width: 100%;
	color: #9a9c62;
		
}

 

And Here is the Result:

1. Look At my list
   
2. Aint it great
   
3. no more messing up my post with lists
   
4. Yepee

Unordered Lists

This is what we start off with (it should say unordered list): 

 

The UL is unstoppable. There is almost no end to what you can do with this property. I'm going to just box it like the OL, but there are many possibilities to explore on your side.

Take a look at the border color differences on opposing sides. This gives a slight 3-d effect.

.blog-entry ul{
	border: 1px dotted #dfdfdf;
	border-bottom-color: #a2a2a2 ;
	border-left-color: #a2a2a2 ;
	background-image: url(../img/ulbg.png);
}

And then just a very light gradient to finnish off the 3-d effect.

.blog-entry ul{
	border: 1px dotted #dfdfdf;
	border-bottom-color: #a2a2a2 ;
	border-left-color: #a2a2a2 ;
	background-image: url(../img/ulbg.png);
}

I want to drop the default bullets from the list first.

.blog-entry ul li{
	list-style:none;
}

Then make room for my new image bullet.

.blog-entry ul li{
	list-style:none;
	text-indent: 23px;
    margin-left: 10px;
	
}

I drop my image bullet into place and notice the top position of the image is set to %50. this is very necessary when the user has the ability to change size of text in the blog pane. At 50% it will always keep it aligned in the middle.It's a good idea to use EM and Percents anyway, at least as much as possible because you never know what size the user is displaying there fonts at on their browser.

.blog-entry ul li{
	list-style:none;
	text-indent: 23px;
    margin-left: 10px;
		background: url(../images/bullets2_03.jpg) no-repeat left 50%;
border-bottom: 1px dotted #dfdfdf;
	font-weight: bold;
	color: #949494;	
}

The rest is up to your imagination.

.blog-entry ul li{
	list-style:none;
	text-indent: 23px;
    margin-left: 10px;
		background: url(../images/bullets2_03.jpg) no-repeat left 50%;
border-bottom: 1px dotted #dfdfdf;
	font-weight: bold;
	color: #949494;	
}
 

Here is the Result:

• Look At my list
• Aint it great
• no more messing up my post with lists
• Yepee

<<Part 1 2 3 4

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.

You can do allot with CSS color and layout options, but the real power is the ability to put a image background on just about any element of your page.  We've talked a little about this with banners and logos and will continue to talk about it because it is that important to your design.  For now we will just look at the background property and it's various values. Keep your PSG cheat sheet handy for a visual guide. 

Broken down backgrounds 
I will show you each property and then I'll show you the shorthand for incorporating all properties into one statement. 

Background color

To effect the background color of any block element is a simple as:

#header  {

background-color: #454545;

}

Background Image

You can put a image in the background of any element with "URL" just place the image URL inside of the "()". I sometimes will upload images onto my SocialGo Network, right click on them.. and tada! I have my Image URL.

#header  {

background-image: url(www.mysite.com/image.gif);

}

Background Repeat

The most powerful thing about the background image is that you can tell it to repeat vertically horizontally or both directions... or not to at all. Let's look at the three options.  You see the little green line bellow. Well it's small when by itself but if I repeat it horizontally, it makes the button you see bellow.

One small image:



Makes this when repeated (repeat-x):



Repeat horizontal and vertical

#header  {

background-image: url(www.mysite.com/image.gif);
background-repeat: repeat;

}

Repeat horizontal

#header  {

background-image: url(www.mysite.com/image.gif);
background-repeat: repeat-x;

}

Repeat Vertical

#header  {

background-image: url(www.mysite.com/image.gif);
background-repeat: repeat-y;

}

Background Position

The background position property is great for lining things up. You can use it on X and Y and no-repeat, But, it's a little different with each of these values. For instance if we have a image that is repeating horizontally (repeat-x) we can tell it to move up or down, but when we tell it to move right or left, it will only change the starting place of where it repeats.

The many variations of position

You can position a background image by it's x and y values. we can do this with percent, or pixels or just telling it "center" or "right". We tell it both the X and the Y in the same CSS statement.

#header  {

background-image: url(www.mysite.com/image.gif);
background-position: center left;

}

Here are all the possibilities when using a pre-defined position. Remember you are stating BOTH the X and the Y in the same value (top left)

• top left
• top center
• top right
• center left
• center center
• center right
• bottom left
• bottom center
• bottom right

 

Using percentage

You will want to use percentage when something may change size but you want the position of the image to stay relative to it's parent's position. You might use this when you have a arrow background in your nav, that needs to be in the same 52% position no matter how long your nav button is. Here is a picture to show you how I used it on SG's template.


  

You see, the magazine button is wider than the home button, but the arrow stays right in the center no matter how wide the button is stretched. Here is the CSS i used.  

#header  {

background-image: url(www.mysite.com/image.gif);
background-position: 50% bottom;

}

Background Shorthand

Believe it or not, we can compress all of that junk above into one pretty CSS property. Study bellow and see how I've incorporated all properties in one.

#header  {

background: #dfdfdf url(www.mysite.com/image.gif) no-repeat %50 bottom;

}

With one slight of hand I've put a background color, Image, repeat state and position in that order. That's the way to do it.

Ya baby... all right there all the time.. check out this new toolbar we've been working on that tidys up all the waisted space and into a nice tight horizontal row. 

 


It covers your search bar, add list, managed account, My stuff (like my topics, my blogs etc..) and your mail inbox and all custom icons and graphics. sweeww all in about 33px height 0:



Does it work though? well.. i certainly hope so, i was hired to free up some side bar real-estate so we'll find out tomorrow when i start testing.

Things I hate about IE6? everything... for one it renders like a Picasso painting compared to compliant browsers. This is mainly because of the way IE6 translates the box model. For example If I declare my CSS like so:

Div#menubox {
Border: 1px solid red
Padding: 5 px
Width: 50px;
}

Modern browsers will see that as a box with a total calculated width of 62px, that makes sense to me, because I told the box to be 50px wide, then added padding on all sides, which does the math 5px (R side) + 5px (L side) = 10px. Then I added a 1px border which would be the same; 1px on each side. So the total should be 62px right?

IE6 tried to make it easier, but actually made it less intuitive in my opinion. And calculates the entire width as 50px, sticking the border and padding inside the box I believe. Another problem is margins, if you set up a margin-right: 10px; it will actually give you 20px! I don’t get this, and leave it for smarter people to figure out the reasoning.

There are many reasons it is the Picasso of browsers and I won’t go into them all here is a good site that delves a little deeper into the whole IE6 bug thing.

...I think of PNG... I touch myself

I will point out the one thing that really holds us back. That is the lack of support for 24bit PNGs. It does support 8bit, but if you could use a GIF why bother.

24bit PNGs are wondrous creatures great and small. With a PNG you can do Photoshop like transparencies with really smooth graduation. They really open up the box of the net, and allow for much more dynamic and interesting designs.

There is a great fix I use for PNGs in my other designs. But! It has to be loaded under the same domain, so no-go on socialgo. So what do we do if we want to use modern CSS and images in our Socaigo Designs? One thing that I often do is declaring a style sheet only IE6 can see. You can do this with other IE browsers too.

<!--[if IE 6]>
<link rel="stylesheet" 
type="text/css" 
href="IE-6-SPECIFIC.css" />
<![endif]-->

Here is the rule of thumb I went buy: Majority rules – Comply or get used to ugly.

Analytics – Show me the way!

Google Analytics has a feature that will show you what browsers your members and visitors are using. You can find it under visitors section in the left sidebar. You way you make decisions on IE6 is much like a Politian makes decisions when running for office. A Politian would not waste his or her or it’s resources on a minority UNLESS that minority was large enough to swing a vote.

Much like the Hispanics of America. At one time they were not considered in a campaign because their numbers were not great enough to impact the bottom line, plus, minorities of small numbers or less likely to vote. So when I decide whether to or not to support my friendly IE6 users, I use the political minority factor and I do so specifically as a CSS Republican because CSS Democrats still design for IE5 for Buda’s sake.

I use the political minority factor and I do so specifically as a CSS Republican because CSS Democrats still design for IE5 for Buda’s sake.

After tracking my hits for a few months in beta version I can get a good feel for how many users of my product, in our case “Social Networks” still rely on older browsers. With some of my sites, such as my Network Logic site, I see a good 20% still using IE6, and 2% using IE5. 20% is a big minority! They have the swing vote because they could bring significant amount of business.

So I go to their IE6 local donut shop and pinch their little baby’s faces because they could swing my vote easily. What I’ve found with my social networks is a consistent 1% usage of IE6, which to me is a minority not worth my time. I believe it is such a small number because those that Social Network are mostly younger users who are a little more savvy. But, if you run a geriatric dating site, you might find in your own statistics a larger number of IE6 users. In that case, if it hovers around 12%-20%, defiantly support their browser and declare an IE6 style sheet.

IE6 and especially IE5 users are used to ugly by now. They must think designers have gone to pot in the last few years. So don’t worry too much if a few people hit your site driving their classic browser they are not worth your time, and need to be forced into compliance, much like the people in the US that were still using rabbit ear antenna to watch TV. This year all of their stations shut down, and they were forced to face the future the live in.

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:

 

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": 

 

<div id="translate">
google code here
  </div>

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

<div id="translate">
<p>Translate to:</p> 
google code here
  </div>

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.

If your like me you have a mound of tools in your garage but know where everyone is and the reason you bought each one. My wife asks why i need another hammer when i have four in the garage, well, of course, it's because one is a tacker, another a roofer, a decker and a nut scratcher. Duh! I'm the same way with CSS inspectors, I have a bunch and they all help me in different ways and in different circumstances, and, of course they are all firefox plugins.



Firebug
This is my big ass deck hammer... You probably have heard of this one or have it. In it's most basic use, it allows you to analyze visually the html next to the CSS. f I use this allot when I can't seem to find a sneaky attribute or tag in dreamweaver or cssEdit. for some reason I always find it with this little bug. It does allot more too, like inspecting DOM, which has helped me a ton lately on finding how a certain effect is constructed on a site. But, overwhelmingly I use it at the very end of designing my network. After I've carefully coded my page design in a css editor I plop it in socialgo and low and behold my footer is shooting off 20 miles to the west. This is usually because I deleted a CSS declaration instead of replacing it, and now the socialgo template is trumping my selector. So, I pull it up in firefox, find the offending selector and fix it right there, copy and paste it into my CSS. (IMPORTANT! Remove the code line data!!! or your $%^&) So it's more like a de-bugger for me.



Css Veiwer
This is my tack hammer I use all over the house and is always in close reach. It is a very simple plugin and does it's job beautifully. Just hover over an  element   and you get a very easy to read style guide to that element. Ya firebug does this too, but this is for quickies when I'm on a site and I just want to see quickly and clearly how someone accomplished an effect. You don't have to go back and for to the firebug window pain, it just pops up on screen and you are enlightened and face a deep moral de-lima whether you will just swipe it and run, or actually learn something and do it yourself and escape the fires of web developer hell where you are force to view all your creations on IE5 (mac) on a 600x401 screen (it's that one extra pixel that kills you) for eternity.



EditCSS
Just recently turned on to this one and man it's cool. It's my big fat monkey roof hammer (that I know all too well). I can just pound away and always seem to hit something I'm supposed to. Once I have been working on my style sheets for a couple of weeks I can read them like Joseph smith (mormon founder) throu a funky hat, one selector at a time. So when I know it this well it's easy to open up EditCSS and make a few big changes on the fly. firebug doesn't allow you to add selectors (if I'm wrong please help) though you can add declarations. You can addanything with EditCSS and watch it change on the fly. This would be great for those of you that want the live preview but don't want to drop the dough on CSSEdit, or that other PC version that just slipped my mind.    


Web Developer 
This one is my scratcher hammer. I used to use it much more than I do today. the CSS editor is a steaming pie and some other functions also are useless in my book. I actually
said I liked this plug-in on a podcast, I think I was mixed up. But I do scratch with it every once in awhile and where it gets the itch is downloading style sheets for my network, keeps the format most of the time when I just copy and paste and of course you can just use the url it gives you.

 
I have a few others but they are just nostalgia. Enjoy, and let me know which one is your favorite hammer.