Fandom

Community Central

Comments5

HTML Boxes

Iopl3887 December 6, 2013 User blog:Iopl3887

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!

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.

Also on Fandom

Random Wiki