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.

Coming soon FATBABY! That's right a truly liquid Socialgo Template, and it's easy to customize, so that you can work your existing graphics into a liquid layout. In the first release there will be numerous color schemes to pick from. I'll continue adding designs and color schemes as time goes on. 

FatBABY Squished to 700px wide.



FatBABY stretched to 1290px wide. 
 
 

And That's not ALL 

As with all PSG templates you will be assigned a special group where you will find plenty of ActionCODE add-ons like this FATbaby picture controller which allows you to upload any size picture (at a reasonable size) and it will automatically resize your picture depending on how big your FATbaby is stretched or squished, AND it puts a nifty little frame around all your pictures too. 

PICTURE CONTROLLER  700px

 

PICTURE CONTROLER 1290px

 

Just a little sneak peak of the drawing table. We're working on a slimline, minimalist template series for the template store.  Ya PSG has been a little quiet lately... get ready to hear us roar ;) 

A few problems with labtabs have come to my attention (especially with my templates :0) But also with some "objects" that are added bellow the menu such as flash banners/ads. Not all the time, and I'm not sure why, but your lab tabs will show up behind your flash or OBJECT. A simple fix that I will be rolling out in my templates is this - z-index:

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.
 

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.

Links

Want your links on your posts to stand out, be a bit different than the rest of the links on your site? Well here we go...

I'm not going to do much because links are used in so many different ways.

Here it is:

Here is my link 

I'm not going to do much because links are used in so many different ways.

You want to be careful not to put any margin or padding on them, except for maybe the left, like I have done. for the reason that links are usually inline and that would push peoples paragraph’s all out of whack. I'm going to put a small image that I will use later to do a CSS pop up PREVIEW of where the link is pointed.

 

Here it is, there is nothing to it. I floated the image at 50% again and made room for the image with a little padding.

.blog-entry .entry-body a {
        background: url(../img/images/linkbullet.png) no-repeat left 50%;
        padding-left: 18px;
        border-bottom: 1px dotted #bbb;
        }

<1 2 3 4

if you want to style it and drop it in your social network, watch the podcast #4.

This is an accompanying post for the Pro Socialgo podcast #4. The podcast was a little rushed so I thought I’d post the information so you can follow along with the video. We will be creating a Dreamweaver CS3 Dropdown menu using the collapsible panel spry. This is a great way to add some meaningful content to your socialgo social network without taking up to much space. We will be dropping a Poll in our drop down, but the possibilities are endless with what you can put in these drop downs. This will show you how to create the drop down.

 

Step #1: Create Sprys

After creating a new document place your curser in between the body tags. You will notice a “Spry” tab on your jump menu. Press the tab to reveal the sprys available. Go to code view, there is no reason to have design view open.

 

We will be using four Collapsible Panels. So click the Collapsible Panel icon four times. It will populate your document with this code, in four different instances.

Tab
Content

Now save the document and click ok when it tells you it’s going to create two files. Collapsiblepanel.js & Collapsiblepanel.css

Step #2: Enter Content

Select the Entire row of the div with a ID of CollapsiblePanel#. there are for of them so they will be numbered  "CollapsiblePanel1, 2, 3, 4."

 

If your properties panel is not open, open it from "window" in your menu bar. Now you should see two choices. (you might have to refresh, if you don't see them, select the div again, in code or design view) The first is "display" the second is "Default State." they are both set to "open." Set the drop down to "closed for the "default State."

 

 

Step #3: Enter Content

Look for this div in each instance of your sprys. This is where you will enter your content. Be it a youtube video, a poll, chat room, iframe with embedded site… it’s all the same procces.

Content

your content

Step #4: Style the tabs

Now, to make it a horizontal menu, you will need to float the panels left. Open up your “files view from the “window” drop down, top right of Dreamweaver. Look for the collapsiblepanel.css, open it.

The first selector you will see will be .CollapsiblePanel {} Insert a attribute of Float: and a value of “left;”

.CollapsiblePanel {
margin: 0px;
padding: 0px;
border-left: solid 1px #CCC;
border-right: solid 1px #999;
border-top: solid 1px #999;
border-bottom: solid 1px #CCC;
        float: left;

Now insert the width you would like the tabs to be.

width: 160px;

And then a little margin.

margin-right: 10px;

And finaly find the selector “.CollapsiblePanelContent” and Clear: both; this will allow you to enter a very wide width, such as a iframe web site without it hanging up on the tab.

.CollapsiblePanelContent {
margin: 0px;
padding: 0px;
clear: both;
}

This is what you get. Now you can style it to look like your network and insert it into the proper html panel in your admin. There is allot more details in the podcast. Have fun.


Note: this will only work in the top package of socialgo networks because it uses Java Script. 

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.

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!

 

Our last podcast looked at placing our logo in the header and creating a rollover effect. If you recall we had  to change the "header h1 a" into a block element. I said I would write a blog on block elements, and true to my word 67% of the time,  here we go. 

Play with Display
If your new to CSS, you've probably stayed away from the "Display" property. Well you might be missing out on a powerful tool. It only has to values, or three things it can do, so it's easy to remember . 

1. display: inline;
2. display: block;
3. displa; none; 

All three of these values are extremely useful. Think of the display:none that we used in last weeks tip on hiding elements on a page, like the birthday element that so many ladies hate... display:none; You can even hide sorts of stuff you don't want on your page and is not yet an option in the layout manager.

Block and Inline are just as powerful. Lets say you want the background color of a DIV with a ad or image in it to automatically span the width of your text, so as not to worry about setting an exact pixel width. You would use the INLINE value to do this, because a DIV is a block element.

The difference between Block and Inline These are the most common elements that are blocks, and it's pretty easy to see this because they are usually designed visually as blocks.

A Block element starts on it's own line. Think of everything on your web page like the flowing of text a paragraph. Block elements are when you hit the enter key and go to a new line. So if you have say a Block element like a H1 under a inline element (think text) your block element will drop down like you hit the enter key.

Here are some inline elements:

The main difference between a block and a inline is hight and width, or those are at-least the most effective differences. A inline element's height and width, line hight, and top and bottom margins CAN NOT be changed. It will also span the width always of the image or text and can't be changed. It also begins on the same line.. so no enter key.

Useful Block

Blocks are very useful for image replacement. Like we put a image inside of a inline element the "a" element. If you don't turn that "a" element into a block, there is no adjusting it's hight or width, so more than likely, you will not see your full image. So simply put display: block; as a property, and your set, now you can fit the "a" around your image, and it will be linkable. I use this allot in SocialGo Design.

Useful Inline A good way to use the inline value is in setting a Block element, say a DIV, to be inline, giving it a background color, and allowing it to span the width of that inline element. See, a Inline element will just go and go until something stops it, so you can allow that background color to go the width of the text and you don't even have to specify a width. So that's about it. Inline is kind of useful, you will find places for it as you get deeper in CSS, but Block is very useful, and a must in many situations.