|
|
---|---|
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 ![]() Edited on 15/05/23 @ 16:23:01 by katie 🌿 (#106445) |
Lima (#349008)
Nice Guy View Forum Posts ![]() Posted on 2023-11-24 08:43:52 |
Enchanted Eyes (#387806)
Aztec Knight View Forum Posts ![]() Posted on 2023-11-30 07:36:34 |
🌤Dikotsa | SHE/HER🇵🇸🌤 (#248234) View Forum Posts ![]() Posted on 2023-12-01 13:16:11 |
The hoverboxes don't seem to be working for me. Is this a me problem or are the codes broken? ![]() |
Lima (#349008)
Nice Guy View Forum Posts ![]() Posted on 2023-12-01 14:17:38 |
@Star-Blessed_Pride - You can put code in den descriptions to change their look (like this templates shows you), or you can use it in forums to change the look & layout of the post. @Dikotsa - What's your issue with them? Do they just not show? ![]() |
🌤Dikotsa | SHE/HER🇵🇸🌤 (#248234) View Forum Posts ![]() Posted on 2023-12-01 14:47:56 |
@Lima Correct. The boxes do not show. It only gives me a header and a text below it, but no box. I tried the other codes too, not working. ![]() |
Lima (#349008)
Nice Guy View Forum Posts ![]() Posted on 2023-12-01 15:02:21 |
Olivia [G1|9xFelineO] (#65030) ![]() Savage View Forum Posts ![]() Posted on 2023-12-01 18:35:38 |
<*div class="scrollSection"><*div class="scrollBox">TEXT<*/*div><*div class="scrollBox">TEXT<*/*div><*/*div> <*div class="boxcontainer"><*div class="hoverbox2">Text<*/*div><*div class="hoverbox2">Text<*/*div><*/*div> I don't mean to steal the conversation, but these are the codes I'm trying to use and they don't seem to work ![]() ![]() Edited on 01/12/23 @ 18:39:55 by Olivia [CG3 | 9x Feline Onyx] (#65030) |
Lima (#349008)
Nice Guy View Forum Posts ![]() Posted on 2023-12-02 01:25:07 |
@Olivia - Sorry, I don't recognize which of Katie's box codes that is? If it's your own code, make sure you've written the names of the boxes exactly as they're written in your css-code. So make sure they're written as scrollBox and hoverbox2 in your css-code. I can't help further without seeing the whole code ^^ ![]() |
Olivia [G1|9xFelineO] (#65030) ![]() Savage View Forum Posts ![]() Posted on 2023-12-02 06:36:21 |
@Lima - I found what I did wrong! I thought the box coding within Katie's template was supposed to show it's own boxes and was broken so I removed it, but turns out that's what makes the boxes work in the first place ![]() Thank you so much for being willing to help me out ![]() ![]() |
Lima (#349008)
Nice Guy View Forum Posts ![]() Posted on 2023-12-02 06:39:37 |
Moss666 (Side) (#325512)
Divine View Forum Posts ![]() Posted on 2023-12-02 23:25:12 |
since discord doesn't host images anymore, what are ya'll using for the background now? ![]() |
Lima (#349008)
Nice Guy View Forum Posts ![]() Posted on 2023-12-03 01:38:51 |
I usually use Imgur.com, but I've seen other people use Postimage or ImgBB :) ![]() |
Alexandrite (#380409)
UwU View Forum Posts ![]() Posted on 2023-12-03 18:59:07 |
Anyone know of a way to do this without dropbox, for many dropbox users it no longer saves as /s/ and instead the links are now made with /scl/fl making this not work ![]() ![]() |
Ragnar (#455806)
Lone Wanderer View Forum Posts ![]() Posted on 2023-12-03 19:01:32 |
It still works with the /scl/fl, mine was like that. replace the www.dropbox with dl.dropbox, iirc. ![]() |
Olivia [G1|9xFelineO] (#65030) ![]() Savage View Forum Posts ![]() Posted on 2023-12-03 19:02:02 |
@Alexandrite - You can still use that code! You just use everything after the /scl/fl/ ![]() |