FANDOM


BorderEdit

This code creates a border around a segment of code. These are possible the border types:
Solid
Dashed
Groove
Inset
Double
Dotted
Ridge
Outset
Basic code:
<div style="border:{{{Rim width as NUMBERpx}}} {{{Rim style}}} {{{Rim color}}};">{{{Content}}}</div>
Example Code: Example Code Result:
<div style="border:5px Ridge Purple;">
Some stuff
</div>

Some stuff



Corner roundingEdit

This code curves the corners of a border.
Basic code:
<div style="border-radius:{{{Curve of the corners as NUMBERex}}};">{{{Content}}}</div>
Example Code: Example Code Result:
<div style="border:3px Solid Purple;
border-radius:2ex;">
You must ALWAYS use this WITH a border, or it won't do anything.
</div>

You must ALWAYS use this WITH a border, or it won't do anything.



PaddingEdit

This code creates an area between the edge of the border and the beginning of it's contents. (Top and bottom padding are default; side padding is not.)
Basic code:
<div style="padding:{{{Padding width as NUMBERpx}}};">{{{Content}}}</div>
Example Code: Example Code Result:
<div style="border:3px Solid Purple;
padding:30px;">
A padding of 30px, with a simple border so you can see.
</div>

A padding of 30px, with a simple border so you can see.



MarginEdit

This code creates an area between the edge of the border and the space outside the border.
Basic code:
<div style="margin:{{{Margin width as NUMBERpx}}};">{{{Content}}}</div>
Example Code: Example Code Result:
<div style="border:3px Solid Purple;
margin:30px;">
A margin of 30px, with a simple border so you can see.
</div>

A margin of 30px, with a simple border so you can see.



Mix and matchEdit

Different sidesEdit

This code gives side details to only one side of the box. (Top, bottom, left, right.)
Basic code:
<div style="{{{Border/padding/margin}}}-{{{Top/bottom/left/right}}}:{{{Details}}};">{{{Content}}}</div>
Example Code: Example Code Result:
<div style="border-top:3px Solid Purple;
border-left:3px Dotted Purple;
padding-left:10px;
margin-right:50px;">
Look at all these various sides. Usually, you want to use this kind of code with more rhyme and reason.
</div>

Look at all these various sides. Usually, you want to use this kind of code with more rhyme and reason.



Different cornersEdit

This code gives corner details to only one corner of the box.
Basic code:
<div style="border-{{{top/bottom}}}-{{{left/right}}}-radius:{{{number}}}em;">{{{Content}}}</div>
Example Code: Example Code Result:
<div style="border:3px Solid Purple;
border-top-left-radius:3em;
border-top-right-radius:0em;
border-bottom-left-radius:0em;
border-bottom-right-radius:3em;">
When you're using this code, you usually want to do something like this, so it's symmetrical or something, and it's not just all crazy.
</div>

When you're using this code, you usually want to do something like this, so it's symmetrical or something, and it's not just all crazy.



TransformEdit

RotateEdit

This code rotates a box
Basic code:
<div style="transform:rotate({{{number}}}deg);">{{{Content}}}</div>
Example Code: Example Code Result:
<div style="border:3px Solid Purple;
transform:rotate(-10deg);">
Positive degrees tilt it clockwise, while negative degrees tilt it counterclockwise.
</div>

Positive degrees tilt it clockwise, while negative degrees tilt it counterclockwise.



Side skewEdit

This code makes a box slanted along the sides (the X axis).
Basic code:
<div style="transform:skewX({{{number}}}deg);">{{{Content}}}</div>
Example Code: Example Code Result:
<div style="border:3px Solid Purple;
transform:skewX(-20deg);">
Using positive degrees will skew it the other way.
</div>

Using positive degrees will skew it the other way.



Horizontal skewEdit

This code makes a box slanted along the top and bottom (the Y axis).
Basic code:
<div style="transform:skewY({{{number}}}deg);">{{{Content}}}</div>
Example Code: Example Code Result:
<div style="border:3px Solid Purple;
transform:skewY(-20deg);">
Using positive degrees will skew it the other way.
</div>

Using positive degrees will skew it the other way.



Both skewEdit

This code makes a box slanted along both axises.
Basic code:
<div style="transform:skew({{{X num}}}deg, {{{Y num}}}deg);">{{{Content}}}</div>
Example Code: Example Code Result:
<div style="border:3px Solid Purple;
transform:skew(-30deg, 10deg);">
Can you tell which number refers to which?
</div>

Can you tell which number refers to which?



Shadow/glowEdit

This code gives the area a glow.
  1. The first number refers to over what range it fuzzles out.
  2. The second number refers to how far it goes before it begins to fuzzle out.
Basic code:
div style="box-shadow:0 0 {{{NUMBERpx}}} {{{NUMBERpx}}} {{{Color}}};">{{{Content}}}</div>
Example Code: Example Code Result:
<div style="box-shadow:0 0 10px 3px Purple;">
A 0 0 10px 3px glow is very traditional.
</div>

A 0 0 10px 3px glow is very traditional.



Box sizeEdit

Box heightEdit

This code gives the box a set size.
Basic code:
<div style="overflow:auto; height:{{{NUMBERpx}}};">{{{Content}}}</div>
Example Code: Example Code Result:
<div style="overflow:auto; height:100px; border:3px Solid Purple;">
A simple border so you can see how big the box is.
</div>

A simple border so you can see how big the box is.



Box widthEdit

This code makes a box narrower than a full page width. (It can' also be used to make it wider, but then the sides cut it off and you can't see past the natural edge, so don't do that.)
Basic code:
<div style="width:{{{NUMBER% or NUMBERpx}}};">{{{Content}}}</div>
Example Code: Example Code Result:
<div style="width:60%; border:3px Solid Purple;">
60% means 60% of the available width. Here that's 60% of this example box it's in. Usually it's a full 60% of the page. With a simple border so you can see it.
</div>

60% means 60% of the available width. Here that's 60% of this example box it's in. Usually it's a full 60% of the page. With a simple border so you can see it.



AlignmentEdit

This code aligns text to the left, center, or right. (I mean, you could align it to the left, but since that's the default I'm not sure why you'd do that.)
Basic code:
<div style="text-align:{{{Left/center/right}}};">{{{Content}}}</div>
Example Code: Example Code Result:
<div style="text-align:Right;">
Right aligned text
</div>

Right aligned text


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.