|
|
---|---|
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) |
selcouth [GOODWILL] (#346172)
Bone Collector View Forum Posts ![]() Posted on 2023-05-03 10:01:09 |
it doesnt show up when i add the css or anything ![]() ![]() |
Munin (#267508)
![]() Cold-Blooded View Forum Posts ![]() Posted on 2023-05-03 11:30:50 |
Angelteeth and Selcouth want me to take a look at the code and see whats wrong? Can also use discord to screen share so you see what im doing aswell so you can learn how to do it aswell :) ![]() |
selcouth [GOODWILL] (#346172)
Bone Collector View Forum Posts ![]() Posted on 2023-05-03 11:37:16 |
[KRK/MH] πRedπ {G3FelisDR} (#118717) ![]() Maneater View Forum Posts ![]() Posted on 2023-05-03 14:39:15 |
Heya! I need a little help with my CSS,,, the link codes don't seem to be working when I put it in my den description, could anyone help me out? Thank you! ![]() |
quiqi βοΈ β (#371719)
View Forum Posts ![]() Posted on 2023-05-03 15:13:55 |
hi!! send it here w/ some * inbetween for me to see whats the issue (or what i can do to help-) ![]() |
[KRK/MH] πRedπ {G3FelisDR} (#118717) ![]() Maneater View Forum Posts ![]() Posted on 2023-05-03 15:19:14 |
<*link rel=""stylesheet" type="text/css" href="https://www.dropbox.com/s/oh89ueri0m29abs/liarsstuff.css?dl=0" /> Here it is!! It's my first CSS and I kinda half-assed it so it may look a little shit if you use the live CSS previewer ![]() |
quiqi βοΈ β (#371719)
View Forum Posts ![]() Posted on 2023-05-03 17:01:05 |
honestly i cant lie im a bit new too so i cant tell shit but are most of the sets supposed to be uncoloured? also there a double " before stylesheet" type so id remove that ![]() |
sprinklekit (#357545)
Amazing View Forum Posts ![]() Posted on 2023-05-03 17:05:41 |
i may have found what has caused the issue. ![]() the square border around the hashtag (#) is what may have caused this ![]() |
[KRK/MH] πRedπ {G3FelisDR} (#118717) ![]() Maneater View Forum Posts ![]() Posted on 2023-05-03 17:08:44 |
Ahh I see! I'll have to fix that when I get home, lol! And I believe so, the colors never really changed on my live viewer so I didn't touch them. Feel free to suggest anything (esp if u can help me change the bio text like "stats, male slots, territory" etc, i couldnt figure out how to make them *not* blue ;_; ![]() |
{Shamhna} π [M] (#5131)
King of the Jungle View Forum Posts ![]() Posted on 2023-05-03 17:11:28 |
[KRK/MH] π Redπ {G3FelisDR} (#118717) Try <*link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/s/oh89ueri0m29abs/liarsstuff.css?dl=0" /> ? The link worked in one of my caves. (Remove *) Edit: also line 268 (.inner-table .left) has a 4 digit number instead of a 3 digit. ![]() Edited on 03/05/23 @ 17:20:16 by {Shamhna, T.P.Q}π[M] (#5131) |
sprinklekit (#357545)
Amazing View Forum Posts ![]() Posted on 2023-05-03 17:19:40 |
wydm by "not blue", you mean the text or the color behind the text of "frozen slots, branch, etc" ![]() |
[KRK/MH] πRedπ {G3FelisDR} (#118717) ![]() Maneater View Forum Posts ![]() Posted on 2023-05-03 18:37:37 |
Thanks so much for the help y'all! I'll get to makin the changes to the code to make it look nicer,,, idk why the Live CSS add-on wasn't showing me the changes lol. As for the blue text, I mean these: ![]() Also rip my vulpix icon is supposed to be animated but I can't get it to move :( ![]() |
sprinklekit (#357545)
Amazing View Forum Posts ![]() Posted on 2023-05-03 18:46:50 |
![]() it seems that for the hexcode parts, the hexcode represent the color of the text in the parts of the code. EXAMPLE: /* HEADERS COLOR (King Name + Title, "There are _ lions with mutations in _'s pride.") */ . top, .bottom, th { background: rgba(209, 87, 40, 0.5) !important; [BACKROUND color: #1b170b !important; [TEXT COLOR border-radius: 0px; ![]() |
sprinklekit (#357545)
Amazing View Forum Posts ![]() Posted on 2023-05-03 18:47:11 |
[KRK/MH] πRedπ {G3FelisDR} (#118717) ![]() Maneater View Forum Posts ![]() Posted on 2023-05-03 18:51:11 |
Wait would that change the blue text or the boxes behind the text? Soz for so many questions I'm not used to big codes like this lol- ![]() |