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-08-04 15:30:08
Around the :12 second mark is where you can find it ^^

Click Here for a short Video



Hrt Icon 0 players like this post! Like?

Aly <33 (#124168)

Wicked
View Forum Posts


Posted on
2022-08-09 19:50:15

Your template has been super helpful to help get back into CSS! <3 I haven't touched it since 2018 so it's been a WIP. lol Unfortunately, I went a little too deep. I've been having a weird little issue I was wondering if you knew the code line/fix for. Well, a couple, I guess?

Admittedly, I just spammed the code line for the border radius onto everything and thought I'd be able to fix any issues later but I didn't expect this one. I asked around a bit and checked some other websites, used inspector to try to find the exact spot (all I kept getting was the table which I could not find the same table on the template, although I did try adding a new line of table code in and adding 0 padding, none to border, etc) and had no luck. I'm obviously missing something; I managed to fix it in some parts ONCE but when I did fix it, I didn't notice in time, overwrote it, and have no idea how to fix it again. And even then, it was the wrong spot that got fixed but I thought if I could replicate it I could just paste the code in different spots to see if it worked. I'd had 2 den pages open and just reuploaded the CSS to Dropbox to scrutinize the changes but accidentally entirely overrode it.

Anyways.. essay aside lol I'm getting this weird double border on the outside of pretty much everything. When it is fixed, it's leaving this weird white outline instead as well (that, if I could find, I could just put the hexcode for the surrounding box in so that's NBD, I think? lol). For the allies specifically, I'd ideally like it to go back to one cohesive box with only the top and bottom bars' outer corners rounded so it looks like one cohesive element. Same with the chat box. I properly messed that one up, and I'm not sure where I did that. The code line is pretty much the same as the original template minus color edits and "border-radius: 10px;" being added. I've tried putting none as the border, 30px, changed the color, etc and it's just not showing me what is wrong with that outer border properly. I also somehow made the Account Options bar grow, which I don't know how I did that. lol I'll attach some images as that's probably easier. On the 3rd image, you can see the double border on the outline that isn't making sense to me.

Thank you for the template, nonetheless! <3

unknown.png?width=650&height=330

unknown.png?width=650&height=130

unknown.png?width=230&height=570




Hrt Icon 0 players like this post! Like?


Edited on 10/08/22 @ 01:26:45 by Aly <33 (#124168)

Hok-Z|Hiatus (#41458)


View Forum Posts


Posted on
2022-08-10 01:18:37
Ooh interesting.

If you wouldn't mind either DMing me a link or posting one here for the code you have, I should be able to take a look in depth at it tomorrow, since it's late for me rn ^^



Hrt Icon 0 players like this post! Like?


Edited on 10/08/22 @ 01:19:12 by Hok-Z|ϴryx, Tѧĸᴇɴ KiɴG (#41458)

Aly <33 (#124168)

Wicked
View Forum Posts


Posted on
2022-08-10 01:28:20

Sure thing, I'll message it to you tomorrow if that's alright! Late here too so I'm about to head off. Thanks for the help!! <3 I definitely tweaked it more after trying to find the problem but the problem persists/I can easily bring it back (cannot remember if I entirely masked it by removing all my border-radius lines lol).




Hrt Icon 0 players like this post! Like?

Hok-Z|Hiatus (#41458)


View Forum Posts


Posted on
2022-08-10 11:40:10
Sounds good to me ^^



Hrt Icon 0 players like this post! Like?

Taurp (#342281)

Bone Collector
View Forum Posts


Posted on
2022-09-13 09:18:19
Hi can I please have the direct code for the Destiny themed CSS?



Hrt Icon 0 players like this post! Like?

Hok-Z|Hiatus (#41458)


View Forum Posts


Posted on
2022-09-13 11:18:27
I have various Free CSS here. ^^

Though they're outdated, they follow the same base my main den uses.



Hrt Icon 0 players like this post! Like?

Taurp (#342281)

Bone Collector
View Forum Posts


Posted on
2022-09-13 11:25:37
Thanks so much!



Hrt Icon 0 players like this post! Like?

Hok-Z|Hiatus (#41458)


View Forum Posts


Posted on
2022-10-25 22:06:30
I have updated the Template to include/fix the following:

> Edited the "Gift Image" segment.
---> Gift Image no longer appears as your "Event Image" icons, such as Pumpkins during October and Snowlions in December.

> Added "Event Image" segment.
---> Allows for custom image swaps of Pumpkins and Snowlions. These must be manually changed as each month rolls around to fit the season.

> Reorganized some elements for easier finding.

> Reworked Boxes. There's now four total boxes
A row of three: Left, Mid, Right -- AND -- Cover, which spans the width of the page.



Hrt Icon 0 players like this post! Like?

🌘 new & the
old Gods (#282122)

King of the Jungle
View Forum Posts


Posted on
2022-11-10 23:37:01
Hello I am just trying to get css for my dens that are flowers I need help I don't know how to do it doesn’t need to be customized just need help please



Hrt Icon 0 players like this post! Like?

Hok-Z|Hiatus (#41458)


View Forum Posts


Posted on
2022-11-11 00:27:06
I'd recommend checking out Katie's Free CSS thread. They have a few flower-themed ones.



Hrt Icon 0 players like this post! Like?


Edited on 11/11/22 @ 00:27:44 by Hok-Z|ϴryx, G2 Haze Uneven (#41458)

🌘 new & the
old Gods (#282122)

King of the Jungle
View Forum Posts


Posted on
2022-11-11 00:32:03
Are these for css dens ?

Because I don't see any or understand what I am missing ?



Hrt Icon 0 players like this post! Like?


Edited on 11/11/22 @ 00:50:02 by 🥀Flowering Tulip 🥀 (#282122)

Hok-Z|Hiatus (#41458)


View Forum Posts


Posted on
2022-11-11 01:42:02
Yep! These are for Dens. ^^
I sent ya a DM.



Hrt Icon 0 players like this post! Like?

🌘 new & the
old Gods (#282122)

King of the Jungle
View Forum Posts


Posted on
2022-11-11 01:51:26
Thank you so so mutch I really really appreciate you it's been such a hassle i never thought I would say my barin hurt but boy does it 😅.

I am looking for any pretty glaxey themed ones different if you don't mind or flower ones 😁🥰 It would be so mutch appreciated.



Hrt Icon 0 players like this post! Like?


Edited on 11/11/22 @ 07:11:31 by 🥀Flowering Tulip 🥀 (#282122)

Ezra | Demiurge
Patches 1x ros (#257412)

Pervert
View Forum Posts


Posted on
2022-11-27 00:27:06
do i delete all the things that tell me what theyre for? like for example, the coding for the lioden logo, do i delete the "this replaces the lioden logo"?



Hrt Icon 0 players like this post! Like?







Memory Used: 630.26 KB - Queries: 0 - Query Time: 0.00000 - Total Time: 0.00414s