FANDOM


What this article is aboutEdit

This articles focus is mainly the styling of templates and signatures

A few basic thingsEdit

One of the most important things to remember is the front portion of the line. For example, many people are familiar with the line -moz-border-radius: 24; or something similar. The problem with this is the code will only work in Firefox and it worthless to Safari, Chrome, and Opera. They all have individual fronts here they are:

Line Browser
"-moz-" Firefox and Mozilla based browsers
"-webkit-" Safari, Chrome, and other webkit based browsers
nothing Opera; I recommend nothing the WC3 is trying to do away with the prefixes. More info see WC3 Stand Point

Little used CSSEdit

CSS "Builder"
Prefix Here Base Code Example Template/Page Example of What The Line Could Look Like
"-moz-","webkit", or "Nothing" box-shadow:10px 10px 20px #000 Featured Article Template -webkit-box-shadow:10px 10px 20px #100

Note: Do not write the word "nothing" for Opera literally write nothing.

Also Note: More Will be added.

WC3 Stand PointEdit

The WC3 the people that make the web standards are trying to get rid of these tag lines, they are still very important thou because without them none of the browsers excluding Opera will run the code properly.


Signature ConversionEdit

To convert you signature just do this. Look at any lines saying -moz- or one of the other prefixes. Then copy it twice. And Finally Change it so each code line has 3 different prefixed code lines. If you do not understand this than please take a look at the step by step below.

Base CodeEdit

This is a very stripped code and doesn't contain the linking code for purpose of red links.

<span style="background:#000000; border:3.999999999px outset White; -moz-border-radius: 1em; -moz-box-shadow: 10px 10px 20px #83F52C;"><font color="#83F52C">Your Name</font></span>

Step 1Edit

Copy "-moz-border-radius:1em;" twice so that there are three copies (provided you have it or one of the varients):

<span style="background:#000000; border:3.999999999px outset White; -moz-border-radius: 1em; -moz-border-radius: 1em;-moz-border-radius: 1em; -moz-box-shadow: 10px 10px 20px #83F52C;"><font color="#83F52C">Your Name</font></span>

Step 2Edit

Then do the same for the "-moz-boz-shadow: 10px 10px 20px" (provided you have it or one of the variants):

<span style="background:#000000; border:3.999999999px outset White; -moz-border-radius: 1em; -moz-border-radius: 1em;-moz-border-radius: 1em; -moz-box-shadow: 10px 10px 20px #83F52C; -moz-box-shadow: 10px 10px 20px #83F52C; -moz-box-shadow: 10px 10px 20px #83F52C;"><font color="#83F52C">Your Name</font></span>

Step 3Edit

Remove the prefixes on 2 of each like this

<span style="background:#000000; border:3.999999999px outset White; border-radius: 1em; border-radius: 1em;-moz-border-radius: 1em; box-shadow: 10px 10px 20px #83F52C; box-shadow: 10px 10px 20px #83F52C; -moz-box-shadow: 10px 10px 20px #83F52C;"><font color="#83F52C">Your Name</font></span>

Step 4Edit

To finish up in this case you would add -webkit- to the front on 1 of each and leave the other be so that you end up with this code:

<span style="background:#000000; border:3.999999999px outset White; -webkit-border-radius: 1em; border-radius: 1em;-moz-border-radius: 1em; -webkit-box-shadow: 10px 10px 20px #83F52C; box-shadow: 10px 10px 20px #83F52C; -moz-box-shadow: 10px 10px 20px #83F52C;"><font color="#83F52C">Your Name</font></span>

DoneEdit

And you would end up with this signature if you used this code:

Your Name

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.