help with coding

There's no specifics, but a ton of people struggle with writing and/or inserting the CSS into dens, so I'm here to help! I rarely see any CSS guides, because most of them are focused on HTML. katie has a really good thread on coding into her free template, but I'm here to describe how everything works and how to make it work! lmk if you have any questions!

I've spent a lot of time teaching myself to code CSS (with some tips from my friend) both free and custom commissions, so ask me anything about either CSS or HTML and I should be able to answer!

Eventually I'll add some HTML and CSS info into this, along with much more detailed explanations.

APPS I HARSHLY RECOMMEND:
Notepad
Stylus (Google/Firefox/etc. Browser extension)
Dropbox

background and font

background are the main thing to CSS codes, so if you're wondering how to get them, it's quite simple! find the image you want online, and right click on it. select 'copy image address' (it might be link instead of address)
[if you have an image in your files, I suggest uploading them to Postimage, and then copying the direct link.]

In your code, this should be what it says for background:

body {
background: url('NONE') center center fixed;
background-size: 100%;
font-family: 'FONT NAME';
color: #000
}

you'll want to paste your image link where it says "NONE" right after background. it should end in .png, .jpg, or .gif also works!
(getting gifs as your background is basically the same as putting in an image)

now, for the font.
at the very start of your code, it should say

@import url('FONT URL');

this is where you'll need a font from google fonts
when you select a font, scroll down a little ways and hit the + next to the type you want. a sidebar should pop up on the right, when it comes up find where it says and @import, and click import. you ONLY want what's in the '' inside of the ().
ex what's in the [ ]:

<*style>
@import url(' [ JUST THIS: https://fonts.googleapis.com/css2?family=Kablammo&display=swap ] ');
<*/style*>

there! font and background are finished.

text/border coloration

[UNDER CONSTRUCTION]

borders

[UNDER CONSTRUCTION]

the hell of boxes

[UNDER CONSTRUCTION]

cave/mound images

so, whenever you're coding a css, and you realize, hey wait a minute, where are my cave images?
here's what's happening, your code does not have the proper resources or images to put as your cave images.
here are the codes for each den image:

normal cave:

a[href$="CAVE ID"]>div.cave-grid>img {
content: url('IMAGE URL') !important
}

pregnant lionesses:

div.cave-grid>img{
content: url('IMAGE URL') !important
}

unsorted:

a[href$="unsorted.php?id=PLAYER ID"]>div.cave-grid>img{
content: url('IMAGE URL') !important
}

pride overview:

a[href$="lionoverview.php?id=PLAYER ID"]>div.cave-grid>img{
content: url('IMAGE URL') !important
}

now, you have all the images in.
1. for normal caves, you'll want to copy and paste the cave id into where is says "CAVE ID". how do you get the cave ID you ask? at the top of there screen, there should be the search bar. copy and paste the last number and put them in 'CAVE ID'. Your image should then show up. you can repeat the code with different cave ID's if you have multiple.
2. you only have to put the image id in for the pregnant lioness cave. putting the image onto this should make all the other caves the same image until you change them.
3. unsorted image and pride overview have the same thing, and that's your player ID. a little ways down on your den page, you should see your profile picture. copy and paste the set of number after the # and paste it into 'PLAYER ID'. (DO NOT INCLUDE THE #)

lmk if anything breaks, but you should have all the images in now.

going over mounds:
mounds are complicated when it comes to image, but I still don't know how to resize the image to fit, SO, here's the code for it either ways

.mound-grid img /* Mound(s) */ {
background: url("IMAGE URL");
width: 0;
height: 0;
padding-top: 80px;
padding-right: 130px
}

so- what's the deal with !important?

I see this question asked a LOT about why !important is everywhere in the code, and sometimes when pieces of code are not activating or showing up.
okay, so, !important is used to FORCE the code to do something. if you've ever noticed while editing the bookmark button, and you try to change the radius of the border, it doesn't work.

when you reach the bookmark code, it says this:

input.floatright, input.floatright:hover {
background: rgba(1, 1, 1, 0.5) !important;
border: none !important;
border-radius: 0px;
color: #000000 !important;
}

if you were to change the border radius, why doesn't it change and smooth out?
well, you need to add '!important;' to the end of that line. it will help the code force itself to do it and prioritize activating the code.

this goes for almost any part of the code that isn't working, this means colors, borders, etc. that's how simple it is to use

inserting pre-made/any css link

this section is simple, simply take the code given which should be:

<*link rel="stylesheet" type="text/css" href="INSERT CSS LINK HERE"* />

to insert it, simple paste it into your territory description and remove those silly little asterisks (*)

css won't show up?

so, you've just finished a new code and want to put it into your den, but it won't show up!
here are some issue that might be causing it:

When inserting css, the base link should look like this without the asterisks:

<*link rel="stylesheet" type="text/css" href="CODE LINK HERE"* />

another issue that may be happening is that the start of the share link says

https://www.

at the start

instead, it needs to say

https://dl.

getting the SHARE link

you have the base code and everything, now in the previous part I mentioned the share link.

to get the share link that makes the css work, you want to start by copying ALL of the code and pasting it into a new notepad. after you paste it, you'll want to hit file and click save as.

your saved notepad should be called:

insertanynamehere.css

make SURE that it ends in '.css'

now, to get the share link.
you'll need a dropbox account for this, so head to the dropbox link and create an account.

once you have an account made, it should take you to a page where you have buttons at the top called 'upload' and 'create'. you'll now want to click upload, and select file.

when the file selection comes up, select the CSS you're uploading. when it finishes uploading, a sidebar should appear on the side. this is where you'll want to click share. a small screen will come up, and you'll want to hit create and copy link.

now, you have the link! you would paste it here ----- ↓

<*link rel="stylesheet" type="text/css" href="SHARE LINK HERE"* />

copy and paste the complete link, and there you go! paste it into your territory desc and remove the silly little asterisks (*)

[REST IS UNDER CONSTRUCTION, I'M OPEN TO ANY INFO YOU WANT ADDED AS A GO-TO RESOURCE HERE]

Selfish ad :
My CSS Commissions