Posted by FREE CSS TEMPLATE! (BEING REWRITTEN!)

Hok-Z|Hiatus (#41458)


View Forum Posts


Posted on
2022-05-25 21:39:30

Hok-Z's CSS Template


Free CSS Template



I've been meaning to do this for a while, and this lil page will be under construction as new info comes up.

Here is a FREE CSS TEMPLATE that I made. You can use this for ANYTHING. Just please don't claim you made the template.

The template has commented instructions within and small tips. I highly suggest using some of the resources I link below.

The CSS has a lot of clashing elements because I wanted things to stand out! The idea is that you'll either replace everything or not need it based on your preferences.

IF YOU HAVE QUESTIONS, I'LL DO MY BEST TO ANSWER THEM!
I'm not just posting the template and dipping out. I'll do my best to answer questions. If I don't respond to this thread within 24 hours, DM me on Discord at Hokzii#7707.

THIS THREAD WILL NOT COVER HOW TO DO EVERYTHING IN THE CSS!
It's mostly a template. However, there are other templates around as well. It's just a matter of which you like to use best.

Frequently Asked Questions and Problems [CLICK ME]



HERE ARE OTHER TEMPLATES CREATED BY USERS!
These are fabulously created templates as well. USE what sticks out to you! If this thread guides you to another template that you like better, so be it!! I just want to help :D
Kraft's CSS Template
Katie's CSS Template
----------------------

Intro + Resources


Welcome to the world of HTML and CSS! For ease of understanding, I won't be using "official" terminology. I just want to make it easy to understand for you to get into.
"But wait, Hok.. I'm here for CSS? What's HTML?"

Yeah I was in the same boat. Think of it like this:
HTML is the building blocks of a webpage or website.
CSS is what you use to make it pretty.

HTML gives the site structure. It assigns different Identifiers to different aspects of the site and each page you visit on Lioden.
The CSS is all the images, colors, fonts, and spacing between those aspects.

CSS Is used for your Dens, while HTML is used for Forum posts like this one. I cannot recommend enough checking out the links to W3Schools below. They will be SUCH an incredible resource for you and give you LOTS of insight!

You will need:
- Notepad (Windows 10) -OR- Notepad++ (Visual Studio Code is also an option)
- Dropbox
- W3Schools HTML Tutorial
- W3Schools CSS Tutorial
- How to Inspect Element (Chrome)
- PATIENCE.
- A boppin' music playlist.

WILL NOT WORK:
- Word
- Google Docs

Helpful Links
Hok-Z's CSS FAQ, Help and Neat Things [+IMGs]
Space's Guide to Creating Your Own CSS
Tserin's Guide to Beginner CSS
Athene's HTML and Coding Guide
Feather's CSS Guide
Pandora's CSS Guide [INCOMPLETE] - Offers GRADIENT assistance and how to find Cave IDs.
Random's Guide on how to use CSS for the WHOLE SITE. [pog]
----------------------



Hrt Icon 0 players like this post! Like?

Edited on 03/02/23 @ 21:46:01 by Hok-Z|ϴryx, G2 Haze Smilus (#41458)

Hok-Z|Hiatus (#41458)


View Forum Posts


Posted on
2022-05-28 21:42:37
I have updated the thread with some resources and other links that could be of help!



Hrt Icon 0 players like this post! Like?

Teddy Bear (#179832)

Majestic
View Forum Posts


Posted on
2022-05-28 22:04:14
Thankyou :) it’s looking good :)
Also, perhaps add Dropbox to the list of needed things too? :)



Hrt Icon 0 players like this post! Like?

Hok-Z|Hiatus (#41458)


View Forum Posts


Posted on
2022-05-28 22:09:32
I literally cant even believe i forgot to list it. smh

Updating. Thank you ♥



Hrt Icon 0 players like this post! Like?

Teddy Bear (#179832)

Majestic
View Forum Posts


Posted on
2022-05-28 22:11:21
Lol that’s okay :)



Hrt Icon 0 players like this post! Like?

Coen (Interstellar
withered) (#250872)

Aztec Knight
View Forum Posts


Posted on
2022-06-09 16:50:12
Hi so im trying to make a CSS and the other tutorial doesn't explain the opacity of the forground and i was wandering if anyone here could help since its more recent. i was wanting to make this part more transparent

.col-md-9.col-xs-12 {
background: #6C533A !important;
border: 4px double #91AFC2 !important;
border-top: none !important;
border-right: none !important;
border-bottom :none !important;
}

div.container.main {
background: #110B02 !important;
border: 4px double #91AFC2 !important;
border-left: none !important;
}



Hrt Icon 0 players like this post! Like?

Hok-Z|Hiatus (#41458)


View Forum Posts


Posted on
2022-06-09 22:09:59
To make the any solid color more transparent, add the percentage of the opacity to the end of the six digit hex code.

For example, if you want the color #6C533A to be 50% transparent, it would look like this:

background: #6C533A50 !important;

There's ways that you can get more precise after counting each ten decimal digits by using the letters A-F.
For example, the natural progression of opacity in the 10 percentage range would look like this:

#FFFFFF10
#FFFFFF11
#FFFFFF12
#FFFFFF13
#FFFFFF14
#FFFFFF15
#FFFFFF16
#FFFFFF17
#FFFFFF18
#FFFFFF19
#FFFFFF1a
#FFFFFF1b
#FFFFFF1c
#FFFFFF1d
#FFFFFF1e
#FFFFFF1f

If you'd rather not worry about the letters getting into the mix, that's fine - but they act as additional opacity options. Jumping from 19 opacity to 20 opacity would essentially be the same as removing 6% of opacity in between.



Hrt Icon 0 players like this post! Like?


Edited on 09/06/22 @ 22:11:09 by Hok-Z|ϴryx, Tѧĸᴇɴ KiɴG (#41458)

Coen (Interstellar
withered) (#250872)

Aztec Knight
View Forum Posts


Posted on
2022-06-10 03:03:33
Thank you



Hrt Icon 0 players like this post! Like?

JaeBird (#291195)

King of the Jungle
View Forum Posts


Posted on
2022-07-02 18:39:07
Do you do html temples specifically a table with a image background?



Hrt Icon 0 players like this post! Like?

Hok-Z|Hiatus (#41458)


View Forum Posts


Posted on
2022-07-02 19:07:06
Html isn't something I've gotten a chance to create from scratch yet, but there's a lot of lovely templates out that that you can deconstruct and if you would like help troubleshooting those, you can ask about them here too <3

Some of my favorites are:
Quake's HTML
Katie's CSS (HTML at the bottom!)
Betta Mom's HTML

I use Quake's HTML as a template sometimes for my own threads. All of these users are fine with you editing their templates as long as credit stays intact.



Hrt Icon 0 players like this post! Like?

JaeBird (#291195)

King of the Jungle
View Forum Posts


Posted on
2022-07-02 19:26:33
Ok thx



Hrt Icon 0 players like this post! Like?

Psychotix (#312951)

Bone Collector
View Forum Posts


Posted on
2022-07-18 19:51:07
Is there a way where mobile users can see the CSS on accounts too? If so pleassee tell me how



Hrt Icon 0 players like this post! Like?

Hok-Z|Hiatus (#41458)


View Forum Posts


Posted on
2022-07-18 23:01:35
Yep!

There was an issue I came across where my Den background would be grey when it was supposed to be an image for mobile. To fix this, here's the steps I went through in this thread.

If the CSS doesn't appear at all, try checking your Account Settings to see if you have custom Den CSS enabled.



Hrt Icon 0 players like this post! Like?

AL2022 (#273671)

Maneater
View Forum Posts


Posted on
2022-08-04 14:42:06
I cant find where it says background.css



Hrt Icon 0 players like this post! Like?

Hok-Z|Hiatus (#41458)


View Forum Posts


Posted on
2022-08-04 14:56:48
Are you referring to Step 3 of How to View Live Changes?



Hrt Icon 0 players like this post! Like?

AL2022 (#273671)

Maneater
View Forum Posts


Posted on
2022-08-04 15:20:24
yep



Hrt Icon 0 players like this post! Like?







Memory Used: 630.13 KB - Queries: 0 - Query Time: 0.00000 - Total Time: 0.00478s