Posted by Free CSS Template + Tutorial!

katie 🥀 (#106445)

UwU
View Forum Posts


Posted on
2019-01-25 23:49:10
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.
39b735c722.png

Then, click the bar that pops up.
58b2e2bea9.png

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

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

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.
fb335df6e8.png

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".
335c231f76.png

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.
83fa268292.png

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

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

You ONLY need the code after /s/. Copy paste that where indicated on my template here.
e82248377f.png

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.


Edited on 06/09/20 @ 06:13:34 by katie 🍌 (#106445)

castiel ✨ (#19502)

Dreamboat of Ladies
View Forum Posts


Posted on
2019-01-28 23:58:16
I'm in a pickle :0 in the font part to be exact, do we paste the first link (ex.https://fonts.googleapis.com/css?family=Noto+Serif+SC) in @import url('LINK HERE'); or FONT LINK (From Google Fonts


katie 🥀 (#106445)

UwU
View Forum Posts


Posted on
2019-01-29 00:17:44
Hi! You paste that in "LINK HERE", that is the import url. :)


ɆӾ₮ł₦₵₮ (#160458)

Deathlord of the Jungle
View Forum Posts


Posted on
2019-02-08 17:48:55
Are there any other available places to make a CSS, other than dropbox?


ɆӾ₮ł₦₵₮ (#160458)

Deathlord of the Jungle
View Forum Posts


Posted on
2019-02-08 17:58:47
Also one more question,

just to make sure do we delete the (' ') around the links when we have put them in? just making sure im doin this correctly :o


ɆӾ₮ł₦₵₮ (#160458)

Deathlord of the Jungle
View Forum Posts


Posted on
2019-02-08 19:07:57
ahhhh, nvm, tysm this helped me out A LOT!!! i just made my first one!!!


katie 🥀 (#106445)

UwU
View Forum Posts


Posted on
2019-02-08 20:09:53
It looks awesome!! Sorry for not replying sooner, I've been offline. But to answer your question, you leave the ' ', but you probably figured that out already. ^^


ɆӾ₮ł₦₵₮ (#160458)

Deathlord of the Jungle
View Forum Posts


Posted on
2019-02-08 20:10:50
Thank you it's completely fine we all have life :)))

I'm planning to make another one but it really helped me out and got me motivated to do it! :)


🍧SodaPop🍭 (#31321)

Lone Wanderer
View Forum Posts


Posted on
2019-02-09 13:51:53
Hi, I'm trying to use this gif: https://imgur.com/a/4xuG61S
as my css background, but the background always ends up being a bright, blank white- ^^" I'm stuck, and don't know what to do...


Also, how do you remove that sort of blur off your lions icon?


ɆӾ₮ł₦₵₮ (#160458)

Deathlord of the Jungle
View Forum Posts


Posted on
2019-02-09 15:23:50
Coffee,

Im not an expert and I think katie is gonna have to help out with that one but maybe its the size, or are you right clicking (or holding down on the image) then viewing the image and then copying the link from that part? Also just wondering can I see the coding you have done so far?
It might have to do with that


katie 🥀 (#106445)

UwU
View Forum Posts


Posted on
2019-02-09 21:47:13
@CoffeeNova Try changing the background code to body {
background: url('https://i.imgur.com/55crARS.gif') no-repeat center center fixed;background-size: cover;


꧁Qunx꧂maofelis
korat (#134478)

Pervert
View Forum Posts


Posted on
2019-02-09 21:58:08
question,
so do we need to do it first on notepad++ or can we do it on dropbox or is it still going to work if we do it on any of them?


katie 🥀 (#106445)

UwU
View Forum Posts


Posted on
2019-02-09 22:31:55
I've never tried doing it straight on dropbox, but I think you need to do it on Notepad first in order to save it as a .css file.


_ (#125883)

Resurgent
View Forum Posts


Posted on
2019-02-09 22:33:00
So, am I able to use (not make) a CSS if I only have a Chromebook?


katie 🥀 (#106445)

UwU
View Forum Posts


Posted on
2019-02-09 22:34:34
I don't see why you wouldn't be able to! You just copy paste the CSS code into your territory description, which I imagine you could do from any platform. You'll want to look for pre-made CSS for that, though!


_ (#125883)

Resurgent
View Forum Posts


Posted on
2019-02-09 22:37:13
Okay, yeah, I might try that sometime. I've been trying to find one that'll fit my heir's look!