Users Groups Gifts Transactions Develop Settings

ItteBlox CSS documentation

(This is just tailwind. If you're familiar with tailwind, you'll know how to use this.)

No style alert

Yellow alert

Dark Yellow alert

Orange alert

Blue alert

Pink alert

CODE EXAMPLE:
<div class="w-full mt-4 mb-4 rounded border text-white p-3">
<span>No style alert</span>
</div>
<div class="w-full mt-4 mb-4 rounded bg-yellow-500 border border-yellow-500 text-white p-3">
<span>Yellow alert</span>
</div>
<div class="w-full mt-4 mb-4 rounded bg-yellow-700 border border-yellow-700 text-white p-3">
<span>Dark Yellow alert</span>
</div>
<div class="w-full mt-4 mb-4 rounded bg-orange-400 border border-yellow-700 text-white p-3">
<span>Orange alert</span>
</div>
<div class="w-full mt-4 mb-4 rounded bg-blue-400 border border-blue-400 text-white p-3">
<span>Blue alert</span>
</div>
<div class="w-full mt-4 mb-4 rounded bg-pink-400 border border-pink-400 text-white p-3">
<span>Pink alert</span>
</div>

Header 1

Header 1 Bold

Header 1 Italic

Header 1 Underline

Header 2

Header 2 Bold

Header 2 Italic

Header 2 Underline

Header 3

Header 3 Bold

Header 3 Italic

Header 3 Underline

CODE EXAMPLE:
<h1 class="text-4xl">Header 1</h1>
<h1 class="text-4xl font-bold">Header 1 Bold</h1>
<h1 class="text-4xl"><i>Header 1 Italic</i></h1>
<h1 class="text-4xl"><u>Header 1 Underline</u></h1>
<h2 class="text-2xl">Header 2</h2>
<h2 class="text-2xl font-bold">Header 2 Bold</h2>
<h2 class="text-2xl"><i>Header 2 Italic</i></h2>
<h2 class="text-2xl"><u>Header 2 Underline</u></h2>
<h3 class="text-xl">Header 3</h3>
<h3 class="text-xl font-bold">Header 3 Bold</h3>
<h3 class="text-xl"><i>Header 3 Italic</i></h3>
<h3 class="text-xl"><u>Header 3 Underline</u></h3>

Text

Text Bold

Text Italic

Text Underline

Text Hyperlink

Text Bounce

CODE EXAMPLE:
<p>Text</p>
<p class="font-bold">Text Bold</p>
<p><i>Text Italic</i></p>
<p><u>Text Underline</u></p>
<a class="cursor-pointer text-blue-400" href="/">Text Hyperlink</a>
<p class="animate-bounce">Text Bounce</p>

Yellow Highlight

Dark Yellow Highlight

Orange Highlight

Blue Highlight

Pink Highlight

Black Highlight

White Highlight

CODE EXAMPLE:
<p><span class="bg-yellow-500 text-white">Yellow Highlight</span></p>
<p><span class="bg-yellow-700 text-white">Dark Yellow Highlight</span></p>
<p><span class="bg-orange-400 text-white">Orange Highlight</span></p>
<p><span class="bg-blue-400 text-white">Blue Highlight</span></p>
<p><span class="bg-pink-400 text-white">Pink Highlight</span></p>
<p><span class="bg-black text-white">Black Highlight</span></p>
<p><span class="bg-white text-black">White Highlight</span></p>

ItteBlox navbar:

Home Catalog Games Avatar Profile

Users Groups Gifts Transactions Develop Settings

CODE EXAMPLE:
<div style="display: contents;">
<div class="flex h-12 w-full place-items-center justify-center p-1 bg-[#303030] text-white/60">
<a class="mr-4" href="/">Home</a>
<a class="mr-4" href="/">Catalog</a>
<a class="mr-4" href="/">Games</a>
<a class="mr-4" href="/">Avatar</a>
<a href="/">Profile</a>
</div>
<div class="flex h-8 w-full place-items-center justify-center p-1 bg-[#232323] border-black/10 text-white/60">
<a class="mr-3" href="/">Users</a>
<a class="mr-3" href="/">Groups</a>
<a class="mr-3" href="/">Gifts</a>
<a class="mr-3" href="/">Transactions</a>
<a class="mr-3" href="/">Develop</a>
<a href="/">Settings</a>
</div>
!!!REST OF THE SITE CONTENTS GO IN HERE!!!
</div>

How to insert CSS:

Download the CSS

And paste this line of code below between <head> and </head>