Fandom

Community Central

Comments5

HTML Boxes

Iopl3887 December 6, 2013 User blog:Iopl3887

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.

Tutorial: How to make HTML boxes




The code for the default box that I use on my wiki is:

{| style="border:0.5em solid #FF0000; border-radius: 10px; background-repeat:no-repeat; background-position:1% 25%; width:100%; margin: 0.8em 0em"
|'''<div align="center">Text</div>'''
|}

Which gives:

Text


But it can easily be customized.

To make the box thinner, Replace the
border:0.5em
with
border:0.2em
.

Which gives us:

Text

To make it have a different color (it's obvious how, But some of you may not know) replace the hex with something different, For example: The current hex is #FF0000 which is red, But if you replace it with #000000 it turns into this:

Text
And if you want the edges more curvy, Replace
border-radius: 10px;
with
border-radius: 15px;

Which gives:


Original:

Text


After changing border radius:

Text


This shows how rather simple it is to make boxes!

Also on Fandom

Random Wiki