Color Codes

Color Codesand other useful HTML/CSS tricks
Here are a few codes that were designed to make the forum prettier. Feel free to use them, or create your own (please do this only, when you are familiar with HTML/CSS and similar languages in order to keep the forum whole!).

Important: If you use HTML/CSS in the reply window always consider breaks and spaces, they can have a big impact on your design.


Color TagsEvery nation has it's own color tag, which can be used either as BBCode ( used with [ and ] ) or HTML (works as < and > ).
The HTML version also works as a class, in case you want to edit an already existing element.

[runeterra]This text will be displayed in runeterra-brown.[/runeterra]
[freljord]This text will be displayed in freljord-blue.[/freljord]
[demacia]This text will be displayed in demacia-silver.[/demacia]
[noxus]This text will be displayed in noxus-red.[/noxus]
[ionia]This text will be displayed in ionia-lightgreen.[/ionia]
[piltover]This text will be displayed in piltover-gold.[/piltover]
[zaun]This text will be displayed in zaun-bronze.[/zaun]
[shurima]This text will be displayed in shuriman-yellow.[/shurima]
[targon]This text will be displayed in targon-violet.[/targon]
[ixtal]This text will be displayed in ixtali-teal.[/ixtal]
[bilgewater]This text will be displayed in bilgewater-darkgreen.[/bilgewater]
[shadowisles]This text will be displayed in shadowisles-cyan.[/shadowisles]
[thevoid]This text will be displayed in void-purple.[/thevoid]
[bandlecity]This text will be displayed in bandlecity-orange.[/bandlecity]

Code:

<runeterra>This text will be displayed in runeterra-brown.</runeterra>
OR
<span class="runeterra">This text will be displayed in runeterra-brown.</span>

HeadlinesTo design your post and give it some structure you can use the headline elements. These are t1, t2, t3 and t4.
t1 and t2 usually go nicely together. While t4 is just a variation of t2, t3 can be used for sub-headlines which structure your post better (e.g. the "Headlines" sub-header is in t2 while the title of the post is t1 and t2).


This is a main headlinewith t2 being more of a supportive sub-headline.

Use this for sub-headlines within your post.

This can be used for short text underneath images.

Code:

<t1>This is a main headline</t1><t2>with t2 being more of a supportive sub-headline.</t2>

<t3>Use this for sub-headlines within your post.</t3>

<t4>This can be used for short text underneath images.</t4>

Basic HTML/CSS AttributesHere are some very basic attributes that can be used for further text-decorations. These can also be used as BBCodes.

Code:

<b></b> or [b][/b] - makes text bold
<i></i> or [i][/i] - makes text italic
<u></u> or [u][/u] - underlines text

InfoboxThe infobox can be used to highlight certain parts. This is, what the infobox looks like:

Here goes your text.

Code:

<infobox></infobox>

CitationThere is also a nice tag for citations, if needed. It simply works like this:

Place your citation here.

Code:

<citation>Place your citation here.</citation>

Floating ImagesUse the following code if you want to embed  your image into the text:

Code:

<div style="float:right; border: 1px solid  #C8AA6E; padding-left:10px; width: 200px;"><img src="URL" /></div>Add your text right next to the code, so i's floating in the text.

Replace URL with the hyperlink of your image that you want to add. Adjust the 200px value of the width attribute if you want to change the size of the image. Remove border: 1px solid #C8AA6E; if you don't want a border or exchange just  #C8AA6E with any other color code.