Hi! Welcome to my free CSS template and tutorial! I'll be going over how to use the template to make your own CSS here, as well as providing some helpful links. ^^ You can find my free pre-made CSS here, and my CSS commissions here.

Edit 08/29/20: Due to some confusion, I'd like to clarify - codes made using this template CAN be sold. I am 100% okay with people using this template for CSS commissions! I am not comfortable with people taking my free CSS, slightly altering them, and selling them - they are fully made codes with backgrounds, colors, etc. already in place. This template is a blank slate - so I have no issues with you using it for paid codes, seeing as it still takes your time and creativity!

VIEW/DOWNLOAD THE TEMPLATE HERE

How to Use

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 sharing software is ShareX. 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! My favorite websites for finding backgrounds are Pexels and Unsplash. You can also use good ol' Google Images. You want a nice, high quality background, preferably one that is at least 1920x1080 pixels. But, if it's smaller, don't worry, because the CSS will automatically blow it up to fit. :) 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 with ShareX or Imgur just to ensure it won't break. Once you get your link, simply paste it where instructed in the CSS template.

For fonts, choose one from Google Fonts. Then, click the little + next to the font you'd like to use.


Then, click the bar that pops up.


Highlighted is the font link you'll paste into the CSS where indicated.


And highlighted here is where you'll paste the font CSS where indicated.


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(0,0,0,0.6), the three 0s are the RGB code of the color you'd like to use, and the 0.6 is the opacity. Higher opacity = more visible. So if you want it to be completely transparent, you would use 0, and 0.5 is semi-visible. If you would like a solid, opaque color, simply replace the entire line of rgba with the hex code or change the opacity to 1.

To get hex and RGB codes, you can use a variety of sources. You can even just google "rgb color picker" and one will pop right up in the browser. My preferred tool is Photoshop. I use the eyedropper tool in Photoshop to pick 4-6 colors directly from my background photo and use them in my CSS. Photoshop is expensive, though, so I know it isn't available to everyone. For free color picking from a photo, you can use sites like Instant Eyedropper, and there is also a Chrome extension. You can even use sites like this and this to generate a color palette from your image!

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, the image must be on a 192x120 canvas. You can find the original logo for recoloring purposes here. To recolor the logo, you have to use an image editing software. Again, Photoshop is my preferred one here, but there are many free image editing softwares. Changing the hue/saturation will make the biggest difference, but you can also play with things like brightness/contrast. To put an image on a 192x120 canvas, you can use this website.

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 your Caves and Mounds

To change the background image of your caves and mounds, you will have to do some image cropping and resizing. For caves, the image size is 252x127. 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.

Step 8 - 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.


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 where indicated on my template here.


Then, paste the entire code in my template (linked above) into your territory description. For caves and mounds, you ONLY need the Dropbox url from the code, not the whole thing. After that, replace the HEADER with whatever you like, and the TEXT with whatever you like. You can copy paste the box codes to add more or less in correlation to your CSS. If you don't want any boxes, remove everything after the Dropbox link. You can use HTML here, or add images. Here is a good HTML tutorial.

Aaaand you're done!
Your CSS should be visible, and from now on you can make any changes directly to the CSS and it'll change without you needing a new link.