If you cant see the images click This

As you can see the template is already a predone css! thats just so you can coordinate the template better and see an example of what can be done with the template :3
Firstly, Lets start with a nice Font from Google Fonts! .
You can choose any Font you may want to use, even Multiple if you like several!

Once you picked out a font you'll click on it, then press on the following:

Then, just follow the Images below this Text;



As you can tell from these (Messy ) Images you will paste purely the @import url part at the TOP of your code. there CANT anything above this or it will break.
Then, you will select where you want your fonts! for example, if you want a specific font at your topbar you will purely paste the font-family below your element, not the other stuff!!

Then, lets go ahead and find a Background! Its important that your Background is Above 1920x1080px If you want it to look the best on every device, although any size will work. you can find out the size of an image on google by hovering over the image with your cursor, The size should be at the bottom right corner of the image.

To Import your Image into the Code you have to do the following
1) Locate the Background Section in your Body { Element at the top of your code
2) Replace the current URL with your desired URL by right clicking on the image, clicking "open image in a new tab" and then copying & pasting the URL

Great! Background and Font done! Now onto the Rest.

For a Cursor go here , find one you like and then scroll down and and choose Option #2 - CSS Style Sheet Only Code, paste ONLY the following part into your css, preferably after the imported font or the background:


All Images after this is practically just showing what everything in the code is

The Lioden Logo

Follow the Tutorial for background images, just paste the image into the "content" section this time! Size and Position can be adjusted by playing around with the width and top parts!

Next Part is the Scrollbar, i reccommend going with a lighter color for the bar and a darker color for the little scroll button :3


After that comes the main container! the biggest box on your screen

Navbar:


Comment Bar & Post Button:


Breadcrumb & Bookmark Button:


Switch Account Button:

Warnings:

Header 1:

Header 3:

Notification Button:

Panels on the Right:

Panel Headers:


Even Numbered Messages, Odd Numbered Messages, Pinned Message, Pings, Timestamp and Channels:

Account Options Panels:

King Image:

Player Image:

Color behind "Level, Stats, Branch, Territory" etc:

Color behind the number of all of the things above:

Area BEHIND the Above Mentioned:

Kings Title:

Color Behind Cave Names:

FAPA:

Color Behind King dynasty, pride dynasty etc:

Input Areas:


Account Options Panel:

Area Below Options Panel:

Account Options On/Off Switch and Circle Part:


Link Color:

(Link Examples)

Bar Behind Lions with Mutations etc:


Background of the 4 bars in Panels and Colored part:


After these you can choose your cave images, mound images along with your SB and GB icons! :3

One last thing needed, youll need to use this form to make your css valid;

<*link rel="stylesheet" type="text/css" href="code LINK here" /*>

in your link switch "www" to "dl", then just the remove the * and paste into your den!

And now youre pretty much done! if your CSS isnt working use This tool (ignore the !important; flagging though, those are needed!) If you have any Questions you can either Post them under this Topic or PM me. Have fun with your new CSS!

Background controls The Color an Element is
Color controls the Color Of Text in the Element
Links Are Clickable Text that Leads you to another Page
Hover Controls something you're hovering on with your cursor

Difference in RGBA and Hexcodes & Colors

See the Difference? One is Translucent, the other is Solid. Hexcodes will always be solid, whereas RGBA (also RGB) can be both Solid, Translucent or even Transparent.
Depending on the Vibe you're going for in your CSS, both options might work, but to put it simple, i personally think RGBA is better even if youre going for solid colors
A Solid RGB Code: rgb(247,242,240)
A Translucent RGBA Code: rgba(247,242,240, 0.5)
The last Number is always opacity, 0 is Invisible, anything from 0.01 and 0.99 is Translucent and 1 is Solid, The left image is a 0.2

Additionally you can also just use Color Names in your CSS! There's 140 Different Supported Colors that you can simply use by their name Or, if you want something to be Transparent, whether it might be a text color or a background you can simply use transparent or none.

Borders and Rounded Borders

As you can see, the Left Box has Rounded Corners whereas the Right Box has Sharp Corners. Rounded Corners can be done using the Border-Radius Element. There are 3 Ways to do this:

border-radius: 20px; Affects all Borders

border-radius: 20px 20px 20px 0; Edit all Borders seperately

border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px; Edit all Borders seperately, just individually!

Boxes consist of 2 parts: HTML and CSS
HTML makes it visible, CSS is designing the actual box.
Boxes CANNOT be made without either, luckily its easy though!

Firstly you will make the box actual show up by writing the following into your den:
< div class="box1"> text < /div >
Then remove the spaces
HTML part done! :)
Now onto the CSS, write the following into your code previewer:

.box1 {
Background: #hex OR url("url");
Color: #hex;
Height: %;
Width: %;
Border: px solid #hex OR none;
Border-radius: %;
Position: relative;
Left: px;
Top: px;

The last 3 are optional, but are better to control where your box is positioned, you can play around with sizes and the position and see what you would like to make your perfect box!

To add these to your CSS just paste them anywhere into your code
Password for all of these is WASCSS

Hide the little online/offline button next to a players username
Make your Comment Box Anonymous
Hide the Clans you're in (for everybody)
Replace the Little Arrow next to a Kings name in Panels with an Image