|
|
---|---|
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 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 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? 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! 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 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. 0 players like this post! Like? |
Eve (#347597)
King of the Jungle View Forum Posts Posted on 2023-09-16 23:22:23 |
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 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'? 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 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. 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! 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 |
☠️Dromaeosaur☠ ️ (#365858) Punk View Forum Posts Posted on 2023-09-18 08:07:09 |
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. 0 players like this post! Like? |
aj1234 (#304140)
Sapphic View Forum Posts Posted on 2023-09-22 19:25:26 |