Pro Socialgo > For web community software

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.