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.