Hey! I was just trying to figure this out, and from what I understand you have to go in using inspect element and copy the links of each image in each cave individually. The padding pushes the image off to the side so that you can only see the background, but you also need to put in the height manually.

To find the link of the cave whose image you're trying to replace, right click and hit inspect element. It should pop up a side panel thing where you can see a bunch of code, and it should highlight the thing that you hit inspect element on.
If you look 2 lines above the highlighted code, you should see a bit of code that says something like < a href="cave.php?id=#####" ||> without those two lines at the end. Take the link right there and pop it into the first place you need to put a link below.

Also, for the height, if you hover over the code that you highlighted (which should be an thing) it'll tell you what height the original image was.

Best of luck! I hope that this wasn't too hard to follow.

a[href$="link here"] > div.cave-grid > img {
background: url('link here') !important;
padding-left: 100%;
height: ##px;
}

You have liked this post!

Thank you so much! I will definitely give this a shot!! <3

You have liked this post!

AYO, where do you put the code in? In the cave css or the html/description box? Or in the den description box? Or are we putting it in the inspect code? If so where? Sorry for all the questions!

You have liked this post!

@poppinkiwi - You're gonna wanna put the code for changing the images into the CSS!

With HTML, you can only make those boxes you see in the description area of dens; CSS is for styling the entire den/the HTML boxes you make.

I use inspect element to essentially "preview" what the CSS might look like; if you replace code bits in inspect element then you'll see them pop up on the page you're editing, but doing this won't save your progress or anything. It's just to help you see what something might look like.

I hope this helps, and best of luck with your coding!

You have liked this post!

Thank you so much!

You have liked this post!

I was able to put in the new cave picture but every time I refresh it's gone :(

You have liked this post!

@ Pluto, i am currently trying to figure this out, but i cannot find any parts of the code you described when i click inspect? I have to scroll fairly hgih up and get this :

<*img src="//static.lioden.com/images/cave/default.png" style="position: absolute; top: 0px; left: 0px;"*> ( take out the astrix )

have they changed the code recently?


So , in the above code, when i replace the location of the defualt cave with ''the isolatoin'' it works, but i canno tfigure out how to incorporate it into my css code to get it to stay. when i copy the code as is but changed into my css, nothing chcanges, and if i try to cooporate the code you have stated above, also nothing changes . i cannot figure out how to get the image to repalce with the css

ps: ayntime i enter a code into my css that might work to change the default cave bg, i get this message when entering and inspecting:

cave.php:333

Cross-Origin Read Blocking (CORB) blocked cross-origin response https://www.dropbox.com/s/7ic6gqzj8y1zxwm/attempt%20to%20change%20den%20BG.css?dl=0 with MIME type text/html. See https://www.chromestatus.com/feature/5629709824032768 for more details.

this is what i entered into the css to get that message: a*[href$="169339"]>*div.cave-grid>*img {
content: url*('https://static.lioden.com/images/dynamic/backgrounds/solitude.png')!i*mportant;
}

( without the astrix)

You have liked this post!

@Couwu - I'm so sorry I never responded! I was busy during that time and even though I saw the question I totally forgot to respond.

It seems like you got it now, but I'll go ahead and put some pictures and a proper explanation to see if this helps anyone else. FYI, I use Firefox, so it might look a bit different on Chrome.

First, right click the cave image you want to replace and hit Inspect Element.



It should pop out the panel a panel that looks similar to this, with a highlight showing what you just hit inspect on:



There are a few important things to note in this code, all of which are circled or pointed to.

First off, the cave ID. That's the thing circled right above the highlighted line. This is how you select the specific cave you want to change the image of.

You're gonna want to take that and paste it into this code in the "link here":

a[href$="link here"] > div.cave-grid > img {
background: url('link here') !important;
padding-left: 100%;
height: ##px;
}

Second off, the padding. This is 100% necessary. What you're doing is not changing the image of the cave--you're giving it a background image which goes behind where the image is, and the padding will shove it to the side so that it doesn't block the background image.

Third, the height. I usually put this in as 120px, since that's what the sort of "default" is for the original image. When you shove the image off to the side like that, it's no longer "holding up" the space where your background is, so you need to put a proper background size in to make sure it can still be seen.

Finally, the background image itself. I usually do a separate background-size: cover; to make sure everything's nice and neat, but you can mess with the background settings until it looks the way you want.

Now, for what went wrong with your CSS Couwu: I'm not entirely sure what it was so I probably wouldn't have been able to help much, but it seems like it might've been something to do with the image URL or the CSS file itself since it mentions resource loads.

Not entirely sure why it did that since I've never had that problem before, but maybe it was to do with using content instead of background? That's all I've really got on that front, but I'm glad you were able to figure out how to make the content version work!

You have liked this post!

OHH, j might have describes it a bit wrong here, my bad

And don't worry at all! I'm in no rush and ofc live takes priority, that's perfectly fine.! I really. Appreciate you taking the time to try to help!

So, my issue isn't the cave image itself, those I have can "easily" chnage in my css template, but I was trying to figure out. When you CLICK on a cave, you see the previewed lion on a blad basic cave background image. ( I'll see if I cna link a Pic of what I mean xD)

That image I have seen a few people able to chnage, but I cannot figure out how to get it to Stay! When I replace the necessary image with another one ( both from the lioden wiki, so there is no difference in code) I just cannot get it to stay xD

While on that page, I see it has successfully chnaged, but as soon as I reload, gone again I've tried two or three "tutorials" that have all resulted in the CORB message, hence my question sif they perhaps chnaged something after the DDoS attack

Anyway, regardless, it was very nice of you to take the time and explain this to me and others whenever I decide to chnage up my template, this will deffinitly come in handyb ( also, your post before taught me what inspect does and how it works, so thanks for that!! )

You have liked this post!

@Couwu - OHHH I see!! Yeah, that's a different thing and 100% possible still; my caves have them! The cave images talked about here are the ones displayed on the main den; the thing you want to change is the featured lion background!

I'm on my phone right now, but I'll post an explanation for how to do that once I'm on laptop again!

You have liked this post!

Here's how to change the featured lion background image in caves!



Here's the code you're gonna need to use:

.lionImage img:first-child {
visibility: hidden;
}

.lionImage {
background: url('linkhere') no-repeat;
}

Now, what does this code do?

If you right click on the featured lion image and inspect element (like you did in the above explanation), you'll be taken to a bit that looks like this:



The way Lioden's lion pictures work is that it's a bunch of images layered on top of each other, stuck into a box. Right now, what you're looking at is all those image layers (starting from blank.png and up). Since it's not compressed into one image, we can mess with some things!

If you scroll up and find the top of it, you'll see that all these images are stored in one .lionImage div.



This is where you're going to be putting your background image (the second half of the code given). All you need to do is put in the background. However, you don't mess with padding, height, etc like with the outside cave image.

HOWEVER, this isn't enough to make your background appear, and thats where the first half of the code comes in!



What .lionImage img:first-child does is select the very first img in the .lionImage div, which just so happens to be the cave background image! By setting the visibility to hidden, you're hiding that image entirely, and that's how you show the background image you put in the div.

In my experience, using a Lioden background will look best, since it matches the artstyle of your lions. But feel free to go absolutely nuts! Just remember you might need to adjust the background a bit.

Hopefully this helps and I didn't overexplain; I like letting people know exactly what each bit of code is doing, that way they can kind of understand what they might get wrong.

You have liked this post!

Oh my, that is EXACTLY what I needed, thank you SO MUCH pluto for taking so much time out of your day to look into and and explain it so thoroughly!

I will try it out as soon as I am home, I'll update the post if I was successful, thank you so much

You have liked this post!

Is there any way to make it stay, instead of using inspect?

You have liked this post!

@Babie - Put the code in your CSS file itself! I was just using inspect to get the cave link IDs and to get screenshots for this tutorial.

You have liked this post!

hello! is there a way you could get photo examples to just make it stay like that forever? its hard for me to understand some of the things said in here and it just kinda goes in and out of my brain

You have liked this post!