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.

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.

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.

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:

 

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.

How Should You Use Ads For Your Site?

The question of when and how to use ads in your web based business is such a tough one! I have struggled endlessly with it myself over the last few years. I have read what other blog owners have to say about the issue, and I've found that there are many schools of thought on this. After considering all the angles, it seems to me that nobody is really wrong. It really all depends on what works for you and for your site, and you can't figure that out until you try a few things, can you?

I have heard from people who think it's best to start with lots of ads, right from the very beginning.

Some readers don't mind that at all, realizing that the blog owner has to finance the blog somehow

Some readers don't mind that at all, realizing that the blog owner has to finance the blog somehow and that ads are a necessary part of that. Unfortunately, I have noticed that quite often these readers also have sometimes trained themselves to completely ignore the ads, and will certainly never click on them or consider a donation to the blog. 

Other website owners think that it is worth skipping the ads completely in the beginning because they are afraid of running customers off. Well, I do understand that way of thinking and it is quite true that some people will see one ad and run. However, if you begin with no ads at all and then suddenly put them on your site, it can drive customers away equally as quickly. Starting off with no ads will not work too well in my opinion, because after all we all need to make a living!

I have found that a good way to deal with the question of ads is to use them, but to do so wisely and at a measured pace. Of course plastering your site with ads from day one will be a bad idea, especially when you think about the fact that we all want our sites to be inviting and friendly. My favorite way to do this is to put just a few select ads on my site, choosing the more unobtrusive ones in the beginning. I have found that 
partnership ads, or "sponsor" ads, are a really good way to dip your toe into the blog ad pool without having to dive in all the way. You could even consider putting up a few reviews or slight inline links that your blog readers are well suited to.

Another way to get financial support for your site is a donation button, accompanied by brutal honesty. 
I think that a donation button that just says something like "Please help defray my costs with a financial contribution" is not the tone that most readers respond to. For one thing, it is a little boring. It is also not that personal, and as most site owners know, it is really important to have a connection to your readers. When your readers feel as if they are your friends, they are much more likely to offer financial support. Maybe a brightly colored donation button that says something along the lines of: "I need money to feed this blog - it has taken over my life!"

"I need money to feed this blog - it has taken over my life!"

Another great little trick to get some quick income is by making it relevant to your readers.
After all, they come to your blog for your unique content. Maybe you can tell readers that you will be able to provide more content and options if they contribute one dollar per month. I know, you are thinking it is not enough to really help. But, before you say that a dollar is not enough to accomplish anything, consider the volume of customers the web offers. A brick and mortar business may have 1000 customers who are regular buyers. With the Internet, that number is usually tripled or more. Those small donations can really add up when you are dealing with thousands of customers.

It can be a little bit tricky to determine exactly how to use ads with your site. I know that it took me a while, but I finally got there. If you can hit that middle ground, you will get the same results that I do: Happy customers who donate regularly, and a popular site.

Are you a Photoshop CS4 user thinking about upgrading to Dreamweaver CS4 for web design? If so, you will find that the new Photoshop CS4 features for the web will make your web developing task faster and easier. The most important thing to consider is time when you are developing, editing or updating a website. Time is of the essence. Inserting or changing CSS code can take a lot of time; if you have done any web design you know this is especially true if the style sheet is very large.

Photoshop Dreamweaver CS4 has a new and improved interface. Most of the previous features are still there, but they have added a wide selection of predefined workspace options. The new interface gives you more flexibility and control. You can personalize your workspace. 

The new Related Files and Code Navigation feature allows easy access to both the CCS source code and the parent page. This is done by using the Related Files bar. When you click a file in the Related Files bar you will see the CSS code in the Code View and the parent page in the Design View. This feature makes editing or adding code extremely easy. In the Design View you highlight the desired item that you want to edit or change, and Dreamweaver CS4 will search and locate the associated CSS source code and highlight it. You will see the results in the Code View. This is a powerful feature because you can make changes and examine them in the Design View. Manually searching for CSS source code can be timely, but this new feature eliminates that process. 


The Code Hinting feature for Javascript frameworks and AJAX will give code hints to help web developers. This makes the process much quicker, and errors are dramatically decreased.

The new Live View feature is a web developers dream come true. Previously, after editing code developers needed to click a shortcut key to view their changes in a web browser. The design view in Dreamweaver looked different than it would when displayed in a web browser. Developers needed to toggle back and forth while editing code. Now, with Live View web developers can see the changes within the Dreamweaver CS4 application as they will appear in a web browser while they are working. The changes made to any code is simultaneously updated in the design and displayed.

The In Context Editing feature is useful for web developers who would like to allow end users edit ability on particular parts of a web page. It is a web based service that enables the end user to access the service and update or change web page content.

Three of the best new features in Photoshop CS4

Content-Aware Scaling allows you to resize or change the image format from horizontal to vertical without bending pixels and distorting your image. It only scales low detail information, and this is done by removing pixel “seams” of unimportant areas. 

New 3D feature adds three-dimensional capabilities. Users can create 3D objects from scratch, change a 2D image to 3D object, and paint on 3D objects using an advanced 3D work area that has a full set of 3D tools. 

Vibrance Feature is used for adding saturation to weak colors, but it does not over saturate colors that are strong. The new “protect skin tones” feature is fantastic, although the Vibrance is changed there is very little, if any, changes made to skin tones.

The Photoshop CS4 new features and the new Dreamweaver CS4 features gives users a powerful suite of tools that will increase productivity, and save time.

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

<1 2 3 4

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.

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.