Free CSS Template + Tutorial 2.0 (2023) :|: Lioden

Posted by Free CSS Template + Tutorial 2.0 (2023)
katie 🍃 (#106445)

Warrior
View Forum Posts


Posted on
2022-12-29 04:57:14
Welcome to the new and updated version of my CSS template + tutorial!
My original from 2019 is still usable, but a bit outdated and needed some polishing.

> VIEW/DOWNLOAD THE TEMPLATE HERE <

Rules:
• This template may be used for anything and everything - free codes, pre-mades, commissions, you name it.
• Please leave the credit in the template intact, unless your coding becomes unrecognizable from it.
• This is a guide for CSS coding, not things like image hosting or photo editing. Please use Google if you need help with things like that.
• Feel free to show me CSS you made using my template! It makes me happy.

Resources:
W3Schools
Always go here first. Anything and everything you need to know about CSS is here.
Live CSS Editor (Chrome)
Allows you to see changes to your CSS instantly, great for when you're working on your code.
Unsplash & Pexels
Great high quality, free to use backgrounds.
Google Fonts
Fonts MUST be from here to work in the template.
Color Palette from Image & Gradient from Image
Generates a color palette or gradient based on your background image.
Color Picker
For hex or RGBA codes.

Coding Things to Keep in Mind:
• The background of an element controls the solid color behind it, the color of an element controls the text.
• In RGBA codes, the decimal controls transparency of the element. For example, rgba(1, 1, 1, 0.5) = 50% transparency. 1 = opaque, 0 = invisible.
• Aim for readability. Cursive fonts are great for headers, but are hard to read in description text.
• Avoid creating eye-burning CSS or a page that may harm others. Be mindful of intensely bright colors, flashing images, etc. Other people have to see your den too!

Tutorial



Hrt Icon 112 players like this post! Like?

Edited on 15/05/23 @ 16:23:01 by katie 🌿 (#106445)

🦝 ⋆
ርዪዐሠርዐ
𓆟 (#369725)

Witcher
View Forum Posts


Posted on
2023-09-07 22:35:35
how do I add text boxes? I'm a bit confused on the concept



Hrt Icon 0 players like this post! Like?


Edited on 08/09/23 @ 00:46:31 by ☆Zombae (#369725)

Mothsarts (#280015)


View Forum Posts


Posted on
2023-09-09 04:29:59
Hey, I don't know if you'll be able to do this, but is there anyway to get rid of the scroll bar on the hover boxes?



Hrt Icon 0 players like this post! Like?

☠️Dromaeosaur☠
(#365858)

Punk
View Forum Posts


Posted on
2023-09-09 05:11:40
@Oskoreia Maybe try using "rgba(1, 1, 1, 0.5)" in replacement of the # color code. You would want to change the .5 to 0, not sure if it would 100% work but it'd be worth a try!



Hrt Icon 0 players like this post! Like?

Mothsarts (#280015)


View Forum Posts


Posted on
2023-09-09 06:33:09
@Dromaeosaur Thankyou! I'll be doing this tomorrow!

Another question, I'm 100% aware unsplash is my best bet, but is there anyway to use a lioden background for the css, I have seen other accounts pull it off and I am just curious to figure out what to do



Hrt Icon 0 players like this post! Like?

Wyn| G1 Purple BO (#344111)

Heavenly
View Forum Posts


Posted on
2023-09-09 06:41:18
You can totally use a LD background for your css. I've done it with mine.

You can find a background you like from the Wiki page: https://www.lioden.wiki/background-directory

Then just save the image/screenshot it and use it in your css. I can't remember if I had to resize it for it to look better, but I don't think it's necessary.



Hrt Icon 0 players like this post! Like?

Eve (#347597)

King of the Jungle
View Forum Posts


Posted on
2023-09-16 23:22:23
How do i make spoiler? what the code for it?



Hrt Icon 0 players like this post! Like?

cyanidesurpryse|sphi
nx breeder (#199523)

Maneater
View Forum Posts


Posted on
2023-09-17 09:22:38
prev: [*spoiler] before the text and [*/spoiler] after it without the asterisks ofc



Hrt Icon 0 players like this post! Like?

Hyune (#392928)

King of the Jungle
View Forum Posts


Posted on
2023-09-17 12:44:09
Does anyone know how to fix Dropbox making the code link a 'scl' instead of 's'?



Hrt Icon 0 players like this post! Like?

☠️Dromaeosaur☠
(#365858)

Punk
View Forum Posts


Posted on
2023-09-17 13:19:18
<*link rel=""stylesheet" type="text/css" href="https://dl.dropbox.com/scl/CODE HERE" /*>
Make sure it says "dl" and not "www" in the dropbox link. <-- Must be done manually



Hrt Icon 0 players like this post! Like?

cyanidesurpryse|sphi
nx breeder (#199523)

Maneater
View Forum Posts


Posted on
2023-09-17 16:30:52
prev: i did that and it still doesnt work. i did this: <*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/u0trkqwyyqnvghri66fxu/getscared.css?dl=0" />

ive tried dl and www, ive tried /s and /scl, i tried dl=1 just to see and it doesnt work.



Hrt Icon 0 players like this post! Like?


Edited on 17/09/23 @ 16:35:46 by cyanidesurpryse|combo breeder (#199523)

☠️Dromaeosaur☠
(#365858)

Punk
View Forum Posts


Posted on
2023-09-17 23:41:48
@cyan this is how i have it in my den <*link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/scl/fi/4svr12q3ee733c0g9kwn6/dromo.css?rlkey=xwt5jdv1hytumh5dnqok4kx0h&dl=0" />, just go ahead and replace my link with yours. If that still doesnt work, it may be something in the physical coding. Dm me if thats the case and I'll see if I can help more!



Hrt Icon 0 players like this post! Like?


Edited on 17/09/23 @ 23:42:02 by ☠️Dromaeosaur☠️ (#365858)

cyanidesurpryse|sphi
nx breeder (#199523)

Maneater
View Forum Posts


Posted on
2023-09-18 07:29:06
prev: got it working! it was because i took out the rlkey part



Hrt Icon 0 players like this post! Like?

☠️Dromaeosaur☠
(#365858)

Punk
View Forum Posts


Posted on
2023-09-18 08:07:09
Awesome! Glad you got it figured out!



Hrt Icon 0 players like this post! Like?

Mythical2 (#150758)

Sapphic
View Forum Posts


Posted on
2023-09-21 20:36:33
I've been using the CSS for both my main and side but I have not been able to figure out how to get the backgrounds to work! I'm totally stumped on what I'm doing wrong. Any tips on how to fix it?

Here's my GitHub repository with the CSS for both accounts.



Hrt Icon 0 players like this post! Like?

aj1234 (#304140)

Sapphic
View Forum Posts


Posted on
2023-09-22 19:25:26
whatever i do, the images for my dens won't change , i'm lost



Hrt Icon 0 players like this post! Like?







Memory Used: 641.52 KB - Queries: 2 - Query Time: 0.00034 - Total Time: 0.00859s