CSS Signature Templates + Guide

These are templates I have made for people so they can make their own CSS signatures. The goal of this guide is for you to learn independently through experimentation, but I will be walking you through the beginning steps. Always remember, we do have a Preview Signature button.
This list is far from complete, and I'll try to update it as I go.

Color Backgrounds

Code: n/a
This is a very simple CSS template, it allows you to place text in front of a colored background. ( Text in front of pictures is in next section )
Changing the #000000 codes will alter the colors, there are a bunch of good Color Code Resources across the internet. I like this one the best.
---Signature Here---

HTML Code:
[css-div="width: 300px; height: 10px;"][css-div="padding: 2px 2px 2px 2px; border: dashed 1px #60B530; font-variant: small-caps; color: #60B530; background-color: [B]#ADFF2F[/B];"]---Signature Here---
[/css-div][/css-div]

Image Backgrounds

Code: n/a
Here is something that is very popular with image gurus. With this code, you can place text and images in front of a set background. You will have to adjust the Width and Height code to match the backgrounds width and height. Text align will of course adjust where the text goes, but I recommend using regular BB code inside of the space where you text will go.
---Signature here---

HTML Code:
[css-div=" color: white;cursor: crosshair; background-image:url("---Imgurl---"); width: 0px; height: 0px; font-size: 10px; text-align: right;"]---Signature here---[/css-div]

Opacity Pt.1 ( Firefox users only )

Code: opacity 0.0
Here we will be playing with Image Opacity. With Opacity you will be able to make an image see through, or make it darker. For example, When you have an image in front of an image, and you use the opacity code, the image in front will become see through. In the example below, you will see that the image has become more or less see through, but it won't be readily apparent due to the background theme your are using.
---Signature Here---

HTML Code:
[css-div="width: 300px; height: 10px;"][css-div="padding: 2px 2px 2px 2px; border: dashed 1px #60B530; font-variant: small-caps; color: #60B530; background-color: #ADFF2F; opacity: 0.6;"]---Signature Here---
[/css-div][/css-div]

Opacity Pt.2 ( Firefox users only )


Now in this, I will cover placing a box over an image, and make the box have some opacity.
As you can see from the example below, you can see that the box has become see through.
---Signature Here---

HTML Code:
[css-div=" color: white;cursor: crosshair; background-image:url("http://farm1.static.flickr.com/194/472097903_b781a0f4f8.jpg"); width: 300px; height: 100px; font-size: 10px; text-align: left;"][css-div="width: 300px; height: 10px;"][css-div="padding: 2px 2px 2px 2px; border: dashed 1px #60B530; font-variant: small-caps; color: #60B530; background-color: #ADFF2F; opacity: 0.6;"]---Signature Here---
[/css-div][/css-div][/css-div]

 


CSS Scrollbar


Code: overflow: auto;
A few people have asked me how to do this, so I've decided to show the people once and for all. This is actually a very neat trick when you have alot of text but not alot of space to work with. Remember this, the scrollbar will only work ( and appear for that matter ) when you have more text than the width and height of the image or space that you have defined can handle.
---Signature here---
---Signature here---
---Signature here---
---Signature here---
---Signature here---
---Signature here---
---Signature here---
---Signature here---
---Signature here---
---Signature here---
---Signature here---
---Signature here---
---Signature here---
---Signature here---
---Signature here---
HTML Code:
[css-div="background-image:url("---image url---"); width: 0px; height: 0px; overflow: auto;"]---Signature here---[/css-div]

Rounded Boxes

Code: -moz-border-radius-topleft: 0px; -moz-border-radius-topright: 0px; -moz-border-radius-bottomright: 0px; -moz-border-radius-bottomleft: 0px;

This is actually a neat little trick that not many people know how to do, so I thought I might as well show everyone how to do it. Basically, this will crurve the shape of any image or css box that you create. You can set how little or how far you want it to curve, and its actually very hip to use right now in signatures. 

 

HTML Code:
[css-div="-moz-border-radius-topleft: 15px; -moz-border-radius-topright: 15px; -moz-border-radius-bottomright: 15px; -moz-border-radius-bottomleft: 15px;"]siggeh][/css-div]

Other notes

Color Code Lists
Pokecommunity BB Codes
Again, I'll update this with more complicated stuff when I get around to making it.

Guide Written by Virtual Chatot at Pokecommunity

categories [ ]