Posted by CSS FAQ, Help and Neat Things [+IMGs]

Hok-Z|
𝑴𝒂𝒍𝒆𝒏
π’Šπ’‚ (#41458)


View Forum Posts


Posted on
2022-11-23 22:48:43
This thread will be undergoing a reformat to assist with readability! Please be patient as some sections may not have been updated!

PLEASE LET ME KNOW IF YOU HAVE QUESTIONS.
This thread is live! Meaning it's going to be updated with topics people ask about! Thank you for contributing. β™₯
-----
lioDevs is a beginner-friendly clan dedicated to coding across Lioden. Have a question? Stop on by.



You can open images in a new tab to view them full-size!

TABLE OF CONTENTS:

You can use this as a General CSS Help Thread!

When I find time, I will update this thread with new information. If you can't wait for the thread to be updated, ask me for help!

There are sometimes MULTIPLE WAYS to achieve something in CSS. It's not always black and white, although a majority if not all of these methods below are processes I've personally used, learned from others or even discovered myself. They might not be the best way, but they are a way to get what you want. Never stop learning!




Hrt Icon 8 players like this post! Like?

Edited on 31/08/24 @ 16:49:45 by Hok-Z | π‘Ήπ’‚π’π’π’Š (#170947)

Hok-Z|
𝑴𝒂𝒍𝒆𝒏
π’Šπ’‚ (#41458)


View Forum Posts


Posted on
2022-11-23 22:48:47
BASIC SETUP

To find something on the Table of Contents, just Ctrl+F for the title.

1.] Programs to Use
-- 1a.] Notepad++
-- 1b.] Visual Studio Code
2.] Uploading CSS to File Host
-- 2a.] Dropbox
3.] Uploading CSS to your Profile
-- 3a.] Territory/Profile CSS
-- 3b.] Cave CSS
4.] Making LIVE CSS Changes
-- 4a.] Saving Changes and Reuploading
-- 4b.] Codepen Template

--------------------------------------------------------------------
1. Programs to Use
--------------------------------------------------------------------
In order to have CSS in your den, someone has to code it. Whether it be you, someone else as a commission, or someone else providing free CSS for you to use. Either way, it's a good thing to understand the programs you could use in order to be successful in making your own.

At the end of the day, you can use ANY Text editor that allows you to save the text file as a Cascading Style Sheet file extension. No, you cannot use Word or Google Docs. TextEdit will work, but won't be covered unless asked.



--------------------------------------------------------------------
2. Uploading CSS to File Host
--------------------------------------------------------------------
In order to have CSS in your den, someone has to code it. But after that, you need something to connect your CSS to to a host in order to pull the information from it. It's like tying a string to a detective's investigation board, always connecting pictures and notes.

At the end of the day, you can use whatever works as long as a link is formed and functions. NOT ALL FILE HOSTING SITES WILL WORK, THOUGH. I have not personally tested Google Drive, so I cannot vouch for it.



--------------------------------------------------------------------
3. Uploading CSS to Your Profile
--------------------------------------------------------------------
Using CSS on your main den page and caves.



--------------------------------------------------------------------
4. Making LIVE CSS Changes
--------------------------------------------------------------------
Make changes and see their effects in realtime.





Hrt Icon 4 players like this post! Like?


Edited on 31/08/24 @ 17:05:41 by Hok-Z | π‘Ήπ’‚π’π’π’Š (#170947)

Hok-Z|
𝑴𝒂𝒍𝒆𝒏
π’Šπ’‚ (#41458)


View Forum Posts


Posted on
2022-11-23 22:48:50
CUSTOMIZED IMAGES

1.] Main CSS Images
-- 1a.] Main Background
-- 1b.] Navbar Image (Lioden Logo)
-- 1c.] Personalized King Icon
2.] Cave Images
-- 2a.] [General] Unsorted, Pride Overview
-- 2b.] [Specific] Cave Images
-- 2c.] [Universally Ascending] Cave Images
-- 2d.] Beetle Mound Images
-- 2e.] Featured Lioness Images
3.] Event Images
-- 3a.] Custom Apocalypse Horses [September]
-- 3b.] Custom Pumpkins [October]
-- 3c.] Custom Snuhlions [December]
4.] Gift Images
5.] Event Currency & Currency Images

To Upload and use Images
Various Elements and images you'll be changing have different sizes. Please refer to those dimensions before using an image! You can use Photopea to edit your images and upload them using Imgur. Do NOT use Discord to host images. THEY ARE TEMPORARY and WILL BREAK.

Once uploaded to Imgur, Right-Click on it and "Copy Image Address". Do NOT just "Copy Address". IT WILL NOT WORK!


--------------------------------------------------------------------
1. Main CSS Images
--------------------------------------------------------------------
These images will be the ones you see first and foremost upon visiting someone's den.



--------------------------------------------------------------------
2. Cave Images
--------------------------------------------------------------------
If you have your territory/account settings set to NOT view the traditional cave display, you and your visitors will see your caves displayed as images rather than a long list of names on your main page.

Using the [GENERAL] CODES will allow for these images to be seen on ANYONE's den. Perfect for public CSS that have cave images!



--------------------------------------------------------------------
3. Event Images
--------------------------------------------------------------------
These images are ones you'll see at different times throughout the year. Please note that I have no way of testing if one will override the other. I don't think they will, but I haven't tested it yet!



--------------------------------------------------------------------
4. Gift Images
--------------------------------------------------------------------
This is an outdated layout! It has been kept for archival purposes.

You won't actually see this image on your own den unless you look at your den from an alt account, but other players can see this image - so it might be nice to have something custom there!


--------------------------------------------------------------------
5. Currency Images
--------------------------------------------------------------------
Currency such as and , as well as Event Currency!




Hrt Icon 4 players like this post! Like?


Edited on 12/09/24 @ 17:28:59 by Hok-Z | π‘Ήπ’‚π’π’π’Š (#170947)

Hok-Z|
𝑴𝒂𝒍𝒆𝒏
π’Šπ’‚ (#41458)


View Forum Posts


Posted on
2022-11-23 22:48:53
<.div style="height:800px;width:100%;overflow:auto;">
Adding HTML Elements

1.]
-- 1a.]
-- 1b.]
2.]
-- 2a.]
3.]
-- 3a.]
-- 3b.]
4.]
-- 4a.]



Hrt Icon 1 player likes this post! Like?


Edited on 31/08/24 @ 22:10:57 by Hok-Z | π‘Ήπ’‚π’π’π’Š (#170947)

Hok-Z|
𝑴𝒂𝒍𝒆𝒏
π’Šπ’‚ (#41458)


View Forum Posts


Posted on
2022-11-23 22:48:56
<.div style="height:800px;width:100%;overflow:auto;">
SECTION...

1.]
-- 1a.]
-- 1b.]
2.]
-- 2a.]
3.]
-- 3a.]
-- 3b.]
4.]
-- 4a.]



Hrt Icon 1 player likes this post! Like?


Edited on 31/08/24 @ 22:11:17 by Hok-Z | π‘Ήπ’‚π’π’π’Š (#170947)

Hok-Z|
𝑴𝒂𝒍𝒆𝒏
π’Šπ’‚ (#41458)


View Forum Posts


Posted on
2022-11-23 22:51:03
<.div style="height:800px;width:100%;overflow:auto;">
SECTION...

1.]
-- 1a.]
-- 1b.]
2.]
-- 2a.]
3.]
-- 3a.]
-- 3b.]
4.]
-- 4a.]



Hrt Icon 1 player likes this post! Like?


Edited on 31/08/24 @ 22:11:23 by Hok-Z | π‘Ήπ’‚π’π’π’Š (#170947)

Hok-Z|
𝑴𝒂𝒍𝒆𝒏
π’Šπ’‚ (#41458)


View Forum Posts


Posted on
2022-11-23 22:51:06
<.div style="height:800px;width:100%;overflow:auto;">
SECTION...

1.]
-- 1a.]
-- 1b.]
2.]
-- 2a.]
3.]
-- 3a.]
-- 3b.]
4.]
-- 4a.]
AESTHETIC EXTRAS

1.] Gradients
-- 1a.] Backgrounds
-- 1b.] Text Elements
2.] Text Shadows / Glows
-- 2a.] Shadows
-- 2b.] Glows
3.] GIFS!!!
-- 3a.] Finding Gif
-- 3b.] Uploading Gif and Positioning
-- 3c.] Word of Caution
4.] Comment Box
-- 4a.] Basic Code
-- 4b.] "Comment Section" Header addition
5.] Custom Player Box UI Text & Removing Emojis
--------------------------------------------------------------------
1. Gradients
--------------------------------------------------------------------
Sometimes, we just want a little extra flare.
For this area in particular, I LOVE CSSGradient.io. I'd marry the site if I could. It's just... mwah.

[Clickable Image]




--------------------------------------------------------------------
2. Text Shadows / Glows
--------------------------------------------------------------------
- In Progress -


---------------------
βš” βš” βš” βš” βš” βš”
----------------------------------


--------------------------------------------------------------------
3. GIFS!!!
--------------------------------------------------------------------
- In Progress -



--------------------------------------------------------------------
4. Comment Box
--------------------------------------------------------------------
This section will provide to you the basic codebites for the Comment box on your den, as well as how to add a custom Header to the comment box.


--------------------------------------------------------------------
5. Custom Player Box UI Text & Removing Emojis
--------------------------------------------------------------------
Pandora has graciously provided an IMPROVED Method on their forum.
Check it out here under the "Restore Old Playerbox" section!
----
Yeah we're all annoyed by the most recent UI Update.
I'll update this later when the custom images are implemented - but for now, create your own UI Text and get rid of those annoying emojis!









Hrt Icon 3 players like this post! Like?


Edited on 31/08/24 @ 22:21:08 by Hok-Z | π‘Ήπ’‚π’π’π’Š (#170947)

Hok-Z|
𝑴𝒂𝒍𝒆𝒏
π’Šπ’‚ (#41458)


View Forum Posts


Posted on
2022-11-23 22:51:28
final res



Hrt Icon 1 player likes this post! Like?


Edited on 15/05/23 @ 23:11:17 by Hok-Z| π™ΌπšŠπš›πšŠ πš‚πš˜πšŸ (#170947)

Chen ✨ (#373905)

Sapphic
View Forum Posts


Posted on
2023-01-17 15:24:38
Will you explain how to make forum CSS?



Hrt Icon 0 players like this post! Like?

Hok-Z|
𝑴𝒂𝒍𝒆𝒏
π’Šπ’‚ (#41458)


View Forum Posts


Posted on
2023-01-17 15:30:34
The fancy stuff on the Forums is HTML.
I could write up a help guide/faq of sorts - but it'd be down the road. There's a few neat tutorials and templates out there too. ^^



Hrt Icon 0 players like this post! Like?

Chen ✨ (#373905)

Sapphic
View Forum Posts


Posted on
2023-01-17 15:31:28
Thank you!



Hrt Icon 0 players like this post! Like?

ʚ🩷ɞ tawny 15BO
Jag Snowflake (#251887)


View Forum Posts


Posted on
2023-01-19 12:49:25
This is very helpful! I had no idea I could change gift images. Thank you!



Hrt Icon 1 player likes this post! Like?

Hok-Z |
π‘Ήπ’‚π’π’π’Š (#170947)


View Forum Posts


Posted on
2023-03-16 17:36:55
The Customized Images section has been updated! It now includes:

- Main Background Image Replacements
- *NEW* Way to do Unsorted, Nesting and Overview Images!
- *NEW* Way to do Cave Images!

With the new method on creating your Cave and Unsorted/Nesting and Overview images, they can now be visible no matter WHO uses the CSS. SUPER helpful for those who want to do Free to Use CSS and still allow for custom cave images to be used! YAY!

COMING UP:
- Aesthetic Extras Section
- Adding a "Comment Section" Header to the new Comment box!



Hrt Icon 0 players like this post! Like?


Edited on 16/03/23 @ 17:37:17 by Hok-Z| SαvαΡ‚Π½un (#170947)

Sasa [πŸ…] (#30698)

Blessed
View Forum Posts


Posted on
2023-03-19 19:22:02
Hello! Could you write a guide on chat box coloration/font change for the den page? :) And the switch account button if that's possible. <3
Edit: Feed all play all would be cool too.



Hrt Icon 0 players like this post! Like?


Edited on 19/03/23 @ 19:24:13 by Sasa [πŸ…] (#30698)

Hok-Z|
𝑴𝒂𝒍𝒆𝒏
π’Šπ’‚ (#41458)


View Forum Posts


Posted on
2023-03-19 21:02:00
Will do! I'll let you know when I have it ^^ I'll be writing a bit of the next segment tonight, I'll add it there.



Hrt Icon 1 player likes this post! Like?

β™‘StonedLionβ—‡ (#341694)

King of the Jungle
View Forum Posts


Posted on
2023-03-20 12:49:12
Would css be able to be done just on a phone or would you need a computer?



Hrt Icon 0 players like this post! Like?







Memory Used: 696.74 KB - Queries: 2 - Query Time: 0.00041 - Total Time: 0.00465s