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.

1a. Notepad++
Visit this page here to visit the Notepad++ site and download the editor.
Before you start coding, it'd be best to save the file immediately as CSS. This allows you to have visual aid when coding, as the program will change the colors of different elements which helps to differentiate what you are editing.

Just Ctrl+S, and under "Save as Type", select "Cascading Style Sheets".

----------------------------------
⚔ ⚔ ⚔ ⚔ ⚔ ⚔
----------------------------------
1b. Visual Studio Code
Visual Studio Code acts in a similar fashion to Notepad++, but it has more themes you can choose from. It also changes the color of your code based on the filetype to allow for easier readability. The only notable difference for those who are new, is that VSC has a nifty "Problems" area where it will help in detecting misplaced commas and semicolons, etc. Both function, both are free.



Here, you can see that it tells me when I have an error if I delete the last bracket.

----------------------------------
⚔ ⚔ ⚔ ⚔ ⚔ ⚔
----------------------------------

--------------------------------------------------------------------
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.

2a. Dropbox
Visit this page here to either Sign up or Login to Dropbox.

Uploading CSS is as simple as dragging the file into the Dropbox folder you want it in. Super simple.
To generate the link you need, Right click on the file you uploaded and click "Copy Link", then copy the link it generates.



For this CSS in the image, the link copied is https://www.dropbox.com/s/z0yxa0o424odete/Destiny%20-%20Beyond%20Light.css?dl=0
However, some of this we don't need. We can actually delete the www segment and replace it with the abbreviation for "download", or dl. This will be incredibly important for the next step.

Now, it'll look like this:
https://dl.dropbox.com/s/z0yxa0o424odete/Destiny%20-%20Beyond%20Light.css?dl=0
----------------------------------
⚔ ⚔ ⚔ ⚔ ⚔ ⚔
----------------------------------

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

3a. Den CSS
Go to your MAIN PROFILE. This has your territory stats, lioness count, caves, etc.

At the bottom of your profile page, go to "Edit Details" and then "Territory Description".
We'll be using the <link rel> attribute.

Using the CSS in the last segment, the full bit of code I'd place in the Territory Description would look like this:
<link rel="stylesheet" type="text/css" href="https://dl.dropbox.com/s/abcdefghijklm/DenCSSLink.css?dl=0">
[Note this is not actually a valid link]

----------------------------------
⚔ ⚔ ⚔ ⚔ ⚔ ⚔
----------------------------------
3b. Cave CSS
Cave CSS is a little easier. All you gotta do is paste the edited link at the bottom of the cave in the area called "Cave CSS".
Just as a reminder, the link would look like this:
https://dl.dropbox.com/s/UniqueCSSCodeLink.css?dl=0

----------------------------------
⚔ ⚔ ⚔ ⚔ ⚔ ⚔
----------------------------------

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

4a. Inspect Element
Not gonna lie, seeing your changes live is THE WAY to make your changes. Please note you can only do this on the Desktop Browser for Lioden.

Take a look at this vid, then I'll explain what's going on beneath.


Crazy how I can just change that all at once. But it doesn't actually "Save" my changes. If I refresh the page, everything will be lost.
What I'm doing is ONLY previewing CSS changes. As long as you have some type of file saved in your Den Description, you can make LIVE changes to your den appearance and preview it.

1. Go to the page you wish to change.
2. Right Click -> Inspect Element
3. Click the area that says your "custom.css" or whatever custom CSS you have. It's going to be named whatever CURRENT CSS you have on your profile.
4. Make all your changes here. The site will update live and give you immediate previews into what your CSS will look like.

BE SURE TO SAVE INTO AN EXTERNAL FILE!!!! You cannot save your changes within the Inspector. You must save it externally. This is why I suggested saving a .CSS working file earlier in step 1a.
----------------------------------
⚔ ⚔ ⚔ ⚔ ⚔ ⚔
----------------------------------
4b. Codepen Template
If you don't want to navigate all this scary code, I also updated a template made by Ryouta#276513 for Lioden's most recent update including the Comment Box.

Click the image to be brought to the Template! For testing Boxes and Den Descriptions, go to Line 91 and make your edits there. Again, BE SURE TO SAVE YOUR CHANGES TO AN EXTERNAL FILE!!!

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.] Beetle Mound Images
-- 2d.] Featured Lioness Images
3.] Event Images
-- 3a.] Custom Apocalypse Horses [September]
-- 3b.] Custom Pumpkins [October]
-- 3c.] Custom Snuhlions [December]
4.] Gift 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.

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.

1a. Main Background

For this, I suggest using an image no smaller than 1920x1080 pixels. You can resize images by using Photopea and uploading them to Imgur.

Code:
/*Background*/
@media (min-width: 220px) {
body {
background-color: black;
background: url("https://i.imgur.com/BackgroundImage.png") center center fixed !important;
background-size: cover !important;
background-repeat: no-repeat;
color: blue;
}

background-color: comes into play when the image won't load. For a split second, a user might see it before the page loads. Use a color that matches your den!

background: url("linkhere") is the url to the image itself. The "center center fixed" bit ensures that it stays in place.

background-size: cover controls how the image fits the background. You can also use contain, auto, or other parameters here.

background-repeat just controls if it's a repeating element. Typically, you don't want it repeating. If you have a seamless background and want it to repeat, check this out: Here

color: controls the font color throughout your whole den. You can override this with individual elements later.

----------------------------------
⚔ ⚔ ⚔ ⚔ ⚔ ⚔
----------------------------------
1b. Navbar Image (Lioden Logo)
The Navbar Logo is 192x120px.

Code:
/*Navbar Lioden Logo*/
div.container.main>div:nth-child(1)>nav>div.navbar-header>a>img {
content: url('https://i.imgur.com/LiodenLogoReplacement.png');}


----------------------------------
⚔ ⚔ ⚔ ⚔ ⚔ ⚔
----------------------------------
1c. Personalized King Icon
These images should be 200x200px.

I actually made a snazzy 5 minute video on this.
The video goes over pulling images from the site to make a Transparent background for your king's profile image.

Click the Image to be brought to the video.


The code:
/*Replacing King/Queen's Image*/
div#lion_image {
content: url('https://i.imgur.com/KingQueenImageRep.png') !important;}
----------------------------------
⚔ ⚔ ⚔ ⚔ ⚔ ⚔
----------------------------------

--------------------------------------------------------------------
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!

2a. [General] Unsorted, Nesting, Pride Overview
These images should be 260x60px.

Use this code to change the Unsorted, Nesting and Pride Overview images.
Only change the CONTENT URL. Leave the img[src$="Link"] Alone. This is the source image in Lioden that we're aiming to replace. It links directly to the site's code.
/*Unsorted Lions*/
img[src$="unsortedlionsbanner.png"] {
content: url('https://i.imgur.com/Unsorted.png')!important;
}

/*Nesting*/
img[src$="nestingbanner.png"] {
content: url('https://i.imgur.com/Nesting.png')!important;
}

/*Overview*/
img[src$="overviewbanner.png"] {
content: url('https://i.imgur.com/Overview.png')!important;
}

/*Other Caves*/
/*Use this to change all of your cave images at once. You can leave it empty or delete it to use images specific to individual caves.*/

img[src$="cavedefault.jpg"] {
content: url("https://i.imgur.com/CaveOverall.png") !important;
}

img[src$="caveunused.jpg"] {
content: url("https://i.imgur.com/EmptyCave.png") !important;
}



----------------------------------
⚔ ⚔ ⚔ ⚔ ⚔ ⚔
----------------------------------
2b. [Specific] Cave Images
These cave images should be 240x120px.

Now, for Caves you created.
To get the unique Cave ID, click on the cave. In the URL at the top, the string of numbers after the link is what you'll need to copy.



Now, with your unique Cave ID, you can begin changing out the Cave's image.. Use this. Just be sure to replace the Cave ID with your own! You can copy and paste this as many times as you need for your other caves. Just be sure to find their own unique ID.
a[href="cave.php?id=#####"]>.cave-grid>img {content: url('https://i.imgur.com/CaveImage.png')!important;}



----------------------------------
⚔ ⚔ ⚔ ⚔ ⚔ ⚔
----------------------------------
2c. Beetle Mound Images
These images should be 130x80px.

[SPECIFIC] MOUNDS:
To get the unique mound ID, click on the mound. In the URL at the top, the string of numbers after the link is what you'll need to copy.



a[href="mound.php?id=#####"] > .mound-grid > img {
content: url("https://i.imgur.com/MoundImage.png") !important;
}

[GENERAL] MOUNDS:
/*Default Mound Image*/
img[src$="beetleunsorted.png"] {
content: url("https://i.imgur.com/unsortedbeets.png") !important;
}

img[src$="beetlemound.png"] {
content: url("https://i.imgur.com/allbeetmounds.png") !important;
}

img[src$="addbeetlemound.png"] {
content: url("https://i.imgur.com/addbeetmound.png") !important;
}
----------------------------------
⚔ ⚔ ⚔ ⚔ ⚔ ⚔
----------------------------------
2e. Featured Lioness Images
I try to get these images to 640x500px.

Sometimes you just want a decorated gal on the front page.. or something else that fits your cave's aesthetic. That's fine too! There are TWO Methods to do this!

Method 1 ~ Replacing the Default Background
img[src$="default.png"] {
content: url("https://i.imgur.com/B5pWSiB.png"); }



This will replace the Default cave background behind the featured lion. When no lion is set, this will display as well.
----------------------------------
⚔ ⚔ ⚔ ⚔ ⚔ ⚔
----------------------------------
Method 2 ~ Overriding the overall image.
You can use this code by itself OR place it below the code above! Both codes work independently and together, but this code must be placed below the Default Cave Background.

.lionImage > img {
content: url("https://i.imgur.com/DisplayNoneImageOverride.png") !important; }

--------------------------------------------------------------------
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!

3a. Custom Apocalypse Horses [September]

Paste this in your CSS!
Images: 500 x 301px


img[src$="whitehorseofapocalypse.png"] {
content: url("https://img.png") !important;}

img[src$="redhorseofapocalypse.png"] {
content: url("https://img.png") !important;}

img[src$="blackhorseofapocalypse.png"] {
content: url("https://img.png") !important;}

img[src$="palehorseofapocalypse.png"] {
content: url("https://img.png") !important;}


----------------------------------
⚔ ⚔ ⚔ ⚔ ⚔ ⚔
----------------------------------
3b. Custom Pumpkins [October]

Paste this in your CSS!
Images: 400 x 300px

/*Pumpkins Halloween*/
div.feature.auto img.floatleft{
content: url('https://PumpkinImage.png') !important;}



Individual Pumpkins:

img[src$="pumpkin.png"] {
content: url("https://img.png") !important;}

img[src$="pumpkin1on.png"] {
content: url("https://img.png") !important;}

img[src$="pumpkin2on.png"] {
content: url("https://img.png") !important;}

img[src$="pumpkin3on.png"] {
content: url("https://img.png") !important;}

img[src$="pumpkin4on.png"] {
content: url("https://img.png") !important;}

img[src$="pumpkin5on.png"] {
content: url("https://img.png") !important;}

img[src$="pumpkin6on.png"] {
content: url("https://img.png") !important;}

img[src$="pumpkin7on.png"] {
content: url("https://img.png") !important;}

img[src$="pumpkin8on.png"] {
content: url("https://img.png") !important;}

img[src$="pumpkin9on.png"] {
content: url("https://img.png") !important;}

img[src$="pumpkin10on.png"] {
content: url("https://img.png") !important;}

img[src$="pumpkin11on.png"] {
content: url("https://img.png") !important;}

img[src$="pumpkin12on.png"] {
content: url("https://img.png") !important;}
----------------------------------
⚔ ⚔ ⚔ ⚔ ⚔ ⚔
----------------------------------
3c. Custom Snuhlions [December]

Paste this in your CSS!

/*Snuhlions*/
div.feature.auto.center img {
content: url("https://img.png") !important;}




Individual Snuhlions:

img[src$="snuhlions/1.png"] {
content: url("https://img.png") !important;}

img[src$="snuhlions/2.png"] {
content: url("https://img.png") !important;}

img[src$="snuhlions/3.png"] {
content: url("https://img.png") !important;}

img[src$="snuhlions/4.png"] {
content: url("https://img.png") !important;}

img[src$="snuhlions/5.png"] {
content: url("https://img.png") !important;}

img[src$="snuhlions/6.png"] {
content: url("https://img.png") !important;}

img[src$="snuhlions/7.png"] {
content: url("https://img.png") !important;}

img[src$="snuhlions/8.png"] {
content: url("https://img.png") !important;}

img[src$="snuhlions/9.png"] {
content: url("https://img.png") !important;}

img[src$="snuhlions/10.png"] {
content: url("https://img.png") !important;}

img[src$="snuhlions/11.png"] {
content: url("https://img.png") !important;}

img[src$="snuhlions/12.png"] {
content: url("https://img.png") !important;}

img[src$="snuhlions/13.png"] {
content: url("https://img.png") !important;}

img[src$="snuhlions/14.png"] {
content: url("https://img.png") !important;}

img[src$="snuhlions/15.png"] {
content: url("https://img.png") !important;}
----------------------------------
⚔ ⚔ ⚔ ⚔ ⚔ ⚔
----------------------------------

--------------------------------------------------------------------
4. Gift Images
--------------------------------------------------------------------
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!

4. Gift Images
Gift Images are typically 100x100px, so use this as a reference when creating or uploading your own image. If editing an image, try sizing it down first in a program like Photopea.

Add this to your CSS:

/*Gift Image*/
table#player.table img.floatleft {
content: url('https://i.imgur.com/GiftImage.png') !important;}

If it works out, you'll get your own custom gift image :)

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

5a. Currency Images
Currency Images are typically 20x20px, so use this as a reference when creating or uploading your own image. If editing an image, try sizing it down first in a program like Photopea.

Add this to your CSS:

/*-------------------------*/
/*Beetles*/
/*-------------------------*/
img[src$="icon-beetle-gold.png"] {
content: url("https://i.imgur.com/GOLDBEETLES.png") !important;
width: 20px !important;
}

img[src$="icon-beetle-silver.png"] {
content: url("https://i.imgur.com/SILVERBEETLES.png") !important;
width: 20px !important;
}
5b. Event Currency Images
For event currency, I have this link here by another user:
Event Currency Codes

However you'll want to be sure to use "icon-beetle-silver/gold.png" rather than "silver/gold.png" as in the Pastebin.. this is because if a lion has Silver or Intense Gold eyes (or any other gold eye), that eye image will be replaced with the currency icon if the lion is Featured in a Cave or is your King/Queen.

Adding HTML Elements

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

SECTION...

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

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]

1a. Gradient Backgrounds
Firstly, if you're not using the site above, you're shooting yourself in the foot. It literally writes the code for you, in either Linear or Radial form.

The "background" gradients will work for any attribute that has a background color. For example:


.topbar {
background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,169,0,1) 19%, rgba(234,255,0,1) 39%, rgba(0,243,255,1) 59%, rgba(85,106,255,1) 81%, rgba(75,33,255,1) 91%, rgba(151,0,255,1) 100%) !important;}

.navbar {
background: linear-gradient(90deg, rgba(255,0,0,1) 0%, rgba(255,169,0,1) 19%, rgba(234,255,0,1) 39%, rgba(0,243,255,1) 59%, rgba(85,106,255,1) 81%, rgba(75,33,255,1) 91%, rgba(151,0,255,1) 100%) !important; }


Again, CSSGradient.io literally makes the gradient for you! It's flawless.

1a. Gradient Text
Gradient text has a couple more steps to it. Check this out.

[Clickable Image]


Essentially, you need a gradient, a clip mask, and a transparent fill color.
For example:
.h2 {background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;}


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

2a. Sub-Title
Sub-Description

---------------------
⚔ ⚔ ⚔ ⚔ ⚔ ⚔
----------------------------------


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

3a. Finding Gif
Sub-Description

3b. Uploading Gif and Positioning
Sub-Description

3c. Word of Caution
Sub-Description

--------------------------------------------------------------------
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.

4a. Basic Code
Here's some of the Basic Code for the Comment Box. This will allow you to change the colors, fonts, etc of the comment box on your profile.

/*-------------------------*/
/*Comment Box*/
/*-------------------------*/
#commentBox {
background: #2c1a5d;
border: 3px solid #ffffff !important;}

div.comment {background: #bb6b6bc4 !important;
border-bottom: 1px solid #713636;
font-weight: bold;
color: white;}

div#makeComment {background: #2c1a5d !important;
border: 1px #d56a6a solid;}

input#comment {background: #b64343 !important;
color: #fff6f6 !important;}

small.text-muted {color: white;}
small.text-muted a {color: #c1c2ff;}

input[type="button"].bad {background: #c12c2c !important;}

/*-------------------------*/
/*Scrollbars*/
/*-------------------------*/
#commentBox::-webkit-scrollbar {
width: 7px;
height: 7px;}

#commentBox::-webkit-scrollbar-track {
background: black;}

#commentBox::-webkit-scrollbar-thumb {
background: #2c1a5d;
border: 1px solid #78699f;}


4a. "Comment Section" Header addition
Want a Header above your comment box? Use the code provided below!


#commentBox::before {
content: "Comment Section";
background: #0000007a;
color: #fff;
font-weight: 700;
width: 100%;
height: 40px;
display: block;
padding-top: 10px !important;}


--------------------------------------------------------------------
5. Custom Player Box UI Text & Removing Emojis
--------------------------------------------------------------------
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!

IMPORTANT: Replace 12345 with your Lioden ID!
OR IT WILL NOT WORK!

Where content: "Text Here" !important; is displayed, you can change that Text to be a custom message.

/*-------------------------*/
/*Player Actions*/
/*-------------------------*/

/*Compose Message*/
#player a[href="/compose.php?to=12345"] {
visibility: hidden !important;}

#player a[href="/compose.php?to=12345"]:after {
content: "Send Message" !important;
visibility: visible !important;}


/*Send Gift*/
#player a[href="/transfers.php?mem=12345"] {
visibility: hidden !important;}

#player a[href="/transfers.php?mem=12345"]:before {
content: "Send a Gift!" !important;
visibility: visible !important;
margin-right: -100px !important;}


/*Private Trade*/
#player a[href="/trading_center.php?p=create&type=private&for=12345"] {
visibility: hidden !important;}

#player a[href="/trading_center.php?p=create&type=private&for=12345"]:before {
content: "Create Private Trade" !important;
visibility: visible !important;
margin-right: -100px !important;}


/*View Wishlist*/
#player a[href="/wishlist.php?id=12345"] {
visibility: hidden !important;}

#player a[href="/wishlist.php?id=170947"]:before {
content: "View Wishlist" !important;
visibility: visible !important;
margin-right: -100px !important;}

/*View Trades*/
#player a[href="/trading_center.php?s=users&owner=12345&ref#results"] {
visibility: hidden !important;}

#player a[href="/trading_center.php?s=users&owner=12345&ref#results"]:before {
content: "View Trades" !important;
visibility: visible !important;
margin-right: -100px !important;}


/* Refer a Friend*/
#player a[href="/refer.php"] {
visibility: hidden !important;}

#player a[href="/refer.php"]:before {
content: "Refer a Friend" !important;
visibility: visible !important;
margin-right: -150px !important;}

/* Block User */
#player a[href="/allies.php?block=12345"] {
visibility: hidden !important;}

#player a[href="/allies.php?block=12345"]:before {
content: url(//static.lioden.com/images/emotes/skull.png) !important;
visibility: visible !important;
margin-right: -110px;}

#player a[href="/allies.php?block=12345"]:after {
content: "Block User" !important;
visibility: visible !important;}