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)

Awaruπ˜…β‚“ (#338173)

Nice Guy
View Forum Posts


Posted on
2024-01-31 21:12:06
@Anxiety Primeβ„’
[CSS COM WIP] (#191357) it still didn't work...... WHAT AM I EVEN DOING WRONGKFKDFM... btw at least i found some ''already made'' code that helped me change cave images but yeaah.. btw im putting these into the cave territory.. its where you are SUPPOSED to right... but yeah.. thanks for at least trying! smkdm.. have a COOOOOOL day! <3



Hrt Icon 1 player likes this post! Like?

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


View Forum Posts


Posted on
2024-01-31 22:08:45
Baetsheba (#338173) - I fear I looked at someone else's den when responding earlier fgsdgfgh I'm sorry.

The codes I provide are meant to go within a CSS File, not in the caves or descriptions themselves! It looks like the CSS you're using titled WinterFantasy.css was created by Kraft (#738/#1105). This means in order to edit the CSS to include the caves, you must download the CSS, edit & reupload it to use it as you intend.

The CSS is uploaded on Github, but here's a direct link to it:
WinterFantasy.css


Copy and paste the entire page and follow the steps in this post here.

From there, you can add the codebite you mentioned earlier that I have in my post ^-^



Hrt Icon 1 player likes this post! Like?

iees|Felis|4xros|G2[
Main] (#429395)

Devastator
View Forum Posts


Posted on
2024-02-15 16:11:37
Hi I have an issue on my background for the CSS. On desktop is correct but on mobile it repeats itself. is there a way to fix it. cuz I have seen other CSS that don't have a difference between desktop and mobile



Hrt Icon 0 players like this post! Like?

Destiny (#269645)


View Forum Posts


Posted on
2024-02-16 09:36:31
hi, so i recently found this thread which is awesome because you include the hosting and such.

but i wanted to ask if dropbox still work? i read somewhere that dropbox doesnt allow sharing anymore or something?



Hrt Icon 0 players like this post! Like?

|✦Tacatto✦| (#14803)


View Forum Posts


Posted on
2024-02-16 09:50:58
Dropbox still works for me and my codes! I hope that helps :D



Hrt Icon 0 players like this post! Like?

Destiny (#269645)


View Forum Posts


Posted on
2024-02-16 11:15:45



Hrt Icon 0 players like this post! Like?


Edited on 17/02/24 @ 12:16:58 by Destiny (#269645)

Baudome (#452767)

Divine
View Forum Posts


Posted on
2024-02-20 22:29:39
Hello! I've got a few questions maybe you can help with.
β€’ The CSS I have on my main Pride page works as intended, but using it on the Cave CSS the chat area, some of the buttons, and the box under the featured lion no longer match the rest of the CSS. Is Cave CSS limited or different? How can I fix that.

β€’ On desktop, the CSS works as intended (centered). On mobile, it is not (left aligned). I'm not used to mobile, is there some bit of code that won't change desktop but fix mobile?



Hrt Icon 0 players like this post! Like?

Destiny (#269645)


View Forum Posts


Posted on
2024-02-21 00:14:28
yes, cave CSS is completely different, your den CSS wont fit there.

yes, there is a bit of a code that should fix your den for mobiles. but as im looking at your den i think i know where the problem is. its not a code problem, the "about" thing is a picture that is too big for mobile. either you can make it smaller so it fits mobile, but then it will be smaller on desktop or you can code a box itself, where you can type into, that will change its size depending on where you are looking at it.
(you can look at my den on phone and on desktop to see it doesnt change much)



Hrt Icon 0 players like this post! Like?

Baudome (#452767)

Divine
View Forum Posts


Posted on
2024-02-21 06:47:10
Thank you. For the about box, I'll change the size smaller later and get that working on both mobile and desktop.

Do you know of any templates for Cave CSS? I'd like to take a look at the differences. I'm still pretty new to coding on Lioden.



Hrt Icon 0 players like this post! Like?

Destiny (#269645)


View Forum Posts


Posted on
2024-02-21 08:37:19
well, i dont do cave CSS so i dont have any saved, but im pretty sure there will be some template and tutorial thread somewhere



Hrt Icon 0 players like this post! Like?

Kevindish (#349586)

Impeccable
View Forum Posts


Posted on
2024-02-25 11:50:27
I just wanted to say this is genuienly THE MOST helpful CSS guide I’ve found on the whole site so far - thank you so much!!



Hrt Icon 0 players like this post! Like?

Baudome (#452767)

Divine
View Forum Posts


Posted on
2024-02-26 18:51:54
Thanks for all your help so far. I've got another Cave CSS question.
https://www.lioden.com/cave.php?id=394612
I have the code working to get decor on top of the featured lion. On desktop, works great. On mobile, it doesn't quite line up, dropping down off the background in some cases and in the linked Cave just not sitting on the lion correctly. Besides recoding this to just replace the whole thing with a static PNG, is there a way to fix this?



Hrt Icon 0 players like this post! Like?

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


View Forum Posts


Posted on
2024-02-26 21:23:52
I will say that your issue perplexed me.. it's something I haven't come across or considered doing.

I messed around with a bit and came up with this. You'll have to replace all the code in the segment for "FEATURED LION DECOR" with this. On Mobile, you'll notice that you can "Scroll" side to side since the image technically goes out of bounds of the div box. I'll ask some friends over at LioDevs if they have any different ideas that would work better.


/* FEATURED LION DECOR - No "below" decor - add URL to "Background-image" to work */
.lionImage>div::after {
content: url('//static.lioden.com/images/dynamic/backgrounds/nothing.png') !important;
background-image:
url(//static.lioden.com/images/decors/teenfemale/over/mohawk_sparkly.png),
url(//static.lioden.com/images/decors/teenfemale/over/kanga_sparkly.png);
}

.lionImage>div::after {
background-position: center !important;
display: block;
top: 0px;
left: 0px;
position: relative;
}

.lionImage div {
height: auto !important;
max-width: fit-content !important;
}

.featured-lion::-webkit-scrollbar {
display: none !important;
}



Hrt Icon 1 player likes this post! Like?

Baudome (#452767)

Divine
View Forum Posts


Posted on
2024-02-26 22:21:40
Thanks so much! I thought I had it all figured out, then opened Lioden on my phone today and was pretty frustrated. That worked :)



Hrt Icon 0 players like this post! Like?

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


View Forum Posts


Posted on
2024-02-26 22:51:48
I asked around and got a quick response! This will fix the side of the box cutting off and scale it as needed.

Change the following:
.lionImage>div::after {
display: block;
top: 0px;
left: 0px;
position: relative;
}

.lionImage div {
height: auto !important;
max-width: fix-content !important;
}


TO:

.lionImage>div::after {
background-size: contain;
display: block;
top: 0px;
left: 0px;
position: relative;
}

.lionImage div {
height: auto !important;
}



Hrt Icon 1 player likes this post! Like?







Memory Used: 630.16 KB - Queries: 2 - Query Time: 0.00033 - Total Time: 0.00653s