Step 1 - Download Necessary Programs
To use CSS on Lioden, you'll need Notepad (or Notepad++), a Dropbox account, and a place to host images. Most PCs come with Notepad by default, and you can download Notepad++ here. For Mac users, you can use a program called TextEdit. My preferred image hosting software is good ol' Discord. I have a server just for myself that I use to host images. You can also use Imgur if you prefer not to download a software.

Step 2 - Copy Paste Template into Notepad
You can either download the template or open it in your browser. After you do, simply copy paste all of it into your own Notepad program!

Step 3 - Choose a Background and Font
A background is one of the most important parts of CSS! You want a nice, high quality background, preferably one that is at least 1920x1080 pixels. Look for long images, not tall ones like phone backgrounds. To implement the background into the CSS, you'll need a link. You CAN simply use the image link from whichever site you're getting it from, but I prefer to re-upload it to Discord or Imgur just to ensure it won't break. Once you get your link, simply paste it where it says 'BACKGROUND URL' in the template.
_{* Make sure you are getting the correct image link - it should end in .jpg or .png.}

For fonts, choose one from Google Fonts. Then, scroll down to "Styles", and click the little + next to the one you want (I usually choose regular):


A sidebar will pop up - the link you're looking for is here, under "Use on the web":

Paste this where it says FONT URL in the template.

You will also need this here:

Copy paste what is outlined above wherever it says 'FONT NAME' in the template.

Step 4 - Changing the Colors and Opacity
Changing the colors to match your background is the bread and butter of CSS coding! To do this, you'll be changing the RGBA and hex codes in the CSS template. Anywhere you see rgba(1, 1, 1, 0.5), the three 1s are the RGB code of the color you'd like to use, and the 0.5 is the opacity. 0 = invisible, 1 = opaque. For a solid, opaque color, you can also simply replace the entire line of rgba with a hex code.
_{* See my resources for places to get hex/RGBA codes.}

To change the text color of an element, you'll change the hex code wherever it says "color: #000000". #000000 is a default black.

Step 5 - Changing the Lioden Logo
To change the Lioden logo, you can either recolor it, or use a different image entirely. You can find the original logo for recoloring purposes here. There are many photo editing softwares, and this is not a guide for that. I personally use Photoshop CS6. The original logo is on a 192 x 120 canvas, so if you are using a different image, I recommend keeping those dimensions, or close to it. When you're done and have your image link, paste it where it says 'LOGO REPLACER URL'.

Step 6 - Changing the Cursor
If you'd like to change the cursor, simply choose a cursor from Cursors 4 U and copy the CSS code into your CSS. This can go anywhere in your CSS, provided it is on it's own line. I usually put it somewhere near the end.


Step 7 - Changing Cave/Mound Images

To change the preview images of your caves and mounds, you will have to do some image cropping and resizing. For caves, the default image size is 240 x 120. For mounds, it is 130x80, and for "Unsorted", "Pregnant Lionesses", and "Pride Overview", it is 260x60. You can make the images taller than this, but I wouldn't recommend messing with the width. You can use any picture that you like, but if you want Lioden backgrounds, you can find all of them here.

Once you have your images handy, simply replace 'IMAGE URL' in the template with your image link, and CAVE ID with the ID to the cave you want to change. Your cave ID is the string of numbers at the end of the cave's URL.


Step 8 - Boxes
For boxes, the coding gets a bit messy, but an essential rule is that you need one boxcontainer for every row of boxes. You can view the coding for the boxes included in my template HERE.

Step 9 - Uploading & Using Your CSS
Once you're done, you'll need to save your CSS as a .css file. To do this, click File --> Save As, and change the dropdown menu to "All Files".


Then, name your CSS whatever you like, but make sure you add .css to the end. If you've downloaded the Dropbox software, you can save it directly to your Dropbox that way. Otherwise, go to Files --> Upload Files on the Dropbox website.
_{* Make sure not to give your CSS two file extensions, ie lioden.css.webp}


After that, you'll need to create a link. Hover over your file, then click "Share".


Then, click "Create Link", then "Copy Link".


You ONLY need the code after /s/. Copy paste that into this code:

<link rel=""stylesheet" type="text/css" href="https://dl.dropbox.com/s/CODE HERE" />

Then, paste the entire code from above into your territory description. It should look like this:


For caves and mounds, you ONLY need the Dropbox URL, not the whole thing. It will look like this:


Aaaand you're done!
Your CSS should be visible. If you have the Dropbox app installed and open, saving the file will automatically update the CSS. Otherwise, you'll need to re-upload the file and get a new link for changes to show.

If you have questions, feel free to post here. I may or may not reply, but there are usually other people willing to help if I'm not able.

Enjoy your new CSS!