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

Hok-Z|Hiatus (#41458)


View Forum Posts


Posted on
2022-11-23 22:48:43
I am going on Hiatus so I will not be able to help you 1-on-1, I'm sorry. You can seek answers to any issues on this thread and hopefully you'll get answers!

Alternatively, please feel free to check out the lioDevs clan! They're a bunch of skilled coders who don't mind helping new coders out!

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.


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 7 players like this post! Like?

Edited on 22/02/24 @ 14:17:18 by Hok-Z | G2 x10-CimmBO Harle (#170947)

Hok-Z|Hiatus (#41458)


View Forum Posts


Posted on
2023-03-20 13:09:33
To my knowledge you can! But it might be difficult to view your changes, and you don't get the bonus of being able to view live changes / make changes in Inspect Element.

I'm able to use Notepad++ on my phone. Im not sure if all carriers have it.



Hrt Icon 0 players like this post! Like?

who killed
redtail?(he/she/it) (#213862)


View Forum Posts


Posted on
2023-03-26 10:06:46
Hey hey! I was just wondering how to change the GB/SB>Event Currency Icons!

also tysm for making this forum!



Hrt Icon 0 players like this post! Like?

Hok-Z|Hiatus (#41458)


View Forum Posts


Posted on
2023-03-26 12:29:49
Sure thing! Use this ^^
Just replace the image link!

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

img[src$="silver.png"] {
content: url("https://i.imgur.com/SILVERBEETLES.png") !important;
width: 20px !important;
}




For event currency, I have this link here by another user:
Event Currency Codes



Hrt Icon 1 player likes this post! Like?


Edited on 26/03/23 @ 22:56:03 by Hok-Z| 𝙼𝚊𝚛𝚊 𝚂𝚘𝚟 (#170947)

Jasmine || Scattered
🥧 (#422636)

Usual
View Forum Posts


Posted on
2023-03-27 08:33:45
does a border text box thing also count as CSS? I really want a tut for it but cant find it anywhere, I looked on codepen but cant find a working one



Hrt Icon 0 players like this post! Like?

Hok-Z | Hiatus (#170947)


View Forum Posts


Posted on
2023-03-27 13:54:36
It does! However you can use it in html as well by using inline styling.

You den's territory description supports both HTML and CSS. If you want to use purely HTML and not have to worry about linking a CSS, you can use inline styling to specify your box's attributes. External CSS Styling does this exact thing by linking an external resource - aka the CSS Stylesheet that users typically upload to Dropbox, Discord or other upload sites.

You can use borders on spans, blockquotes and tables.

I wrote this up real quick using the HTML that I use for this very thread.. Maybe it can help you out by giving you a visual?
Table/Span Borders
Spans can essentially be used in place of <div> classes, which is what a majority of the site uses.
Check this out for the difference between Span and Div.



Hrt Icon 0 players like this post! Like?


Edited on 27/03/23 @ 14:04:10 by Hok-Z| 𝙼𝚊𝚛𝚊 𝚂𝚘𝚟 (#170947)

Jasmine || Scattered
🥧 (#422636)

Usual
View Forum Posts


Posted on
2023-03-27 14:49:54
That codepen is very helpful! Thanks so much



Hrt Icon 1 player likes this post! Like?

Gee (#196201)

Angelic
View Forum Posts


Posted on
2023-04-12 17:01:15
Hello!
I was going through ur guide and you are the first person I saw who had how to do the cave featured lion images. However, I am having trouble in doing this. I attempted to do it using a live editor and only the picture I wanted as the bg for the featured lion came up but not the itself. How do you do this?



Hrt Icon 0 players like this post! Like?

Hok-Z | Hiatus (#170947)


View Forum Posts


Posted on
2023-04-12 18:46:05
So I didn't know this at the time, but there's actually two methods! The guide currently goes over Method 1, but I'll update it shortly.

​𝐌𝐞𝐭𝐡𝐨𝐝 𝟏 - 𝐑𝐞𝐩𝐥𝐚𝐜𝐢𝐧𝐠 𝐭𝐡𝐞 𝐞𝐧𝐭𝐢𝐫𝐞 𝐈𝐦𝐚𝐠𝐞



.featured-lion {
background: none !important;
content: url('https://i.imgur.com/FeaturedLionRep.png') !important;
height: 500px;
width: 750px;
padding: 5px;}



Method One is listed in the guide. It allows you to replace the image for featured lionesses to be whatever you want. In the example I initially used in the guide, I Photoshopped all the background/decor and such details to be one image, then replaced it with the code in the guide - which is this code here. The image in the guide will be replaced to be this one instead, which is the same process.
--------------------------------------------------------------------


​𝐌𝐞𝐭𝐡𝐨𝐝 𝟐 - 𝐑𝐞𝐩𝐥𝐚𝐜𝐢𝐧𝐠 𝐣𝐮𝐬𝐭 𝐭𝐡𝐞 𝐢𝐬𝐨𝐥𝐚𝐭𝐞𝐝 𝐁𝐚𝐜𝐤𝐠𝐫𝐨𝐮𝐧𝐝



img[src$="default.png"] {
content:url("https://static.lioden.com/images/dynamic/backgrounds/herbgrovenight.png") !important;}



The Second method is something I discovered AFTER, and just never updated. I missed it. ^^'
In the case of This Image, you're essentially just isolating and replacing the background.




Hrt Icon 0 players like this post! Like?

Gee (#196201)

Angelic
View Forum Posts


Posted on
2023-04-12 18:48:54
TYSM! I was so confused when my lion kept disappearing too



Hrt Icon 1 player likes this post! Like?

Lima (#349008)

Nice Guy
View Forum Posts


Posted on
2023-04-28 13:21:27
I'm currently working on my den CSS, but I have a problem. Idk if it's okay I ask here, or if it's even something you can help with, but I'm not sure how to make the corners rounded on most of the back panel of my den css. If you check my den out, you'll be able to see that some parts that do have rounded cornes, also have square corners sticking out of them.. Idk how to fix this T-T

It's most of the panels of the main body of my css.



Hrt Icon 0 players like this post! Like?

Hok-Z | Hiatus (#170947)


View Forum Posts


Posted on
2023-04-28 18:11:31
I absolutely offer help! It's no trouble at all. ^^
Thankfully, that's an easy fix! Add the red snippet to your .table settings.

.table {
background: rgba(153, 105, 64, 0.9);
border: 2px solid #402719 !important;
border-collapse: separate;
overflow: hidden !important;
border-radius: 15px
}



Hrt Icon 0 players like this post! Like?

Lima (#349008)

Nice Guy
View Forum Posts


Posted on
2023-04-28 21:35:50
Thank you!!

It kinda worked, it definitely removed the clutter of sharp and rounded corners overlaying each other, but now the rounded corners are completely gone and it's just square?




Hrt Icon 0 players like this post! Like?

Hok-Z | Hiatus (#170947)


View Forum Posts


Posted on
2023-04-28 21:38:59
You're missing a semicolon after overflow: hidden !important ^^



Hrt Icon 1 player likes this post! Like?

Honey (#330641)


View Forum Posts


Posted on
2023-04-29 16:25:26
silly question, sorry. i see all this info... but WHERE do you put all this? like what button do i push in my den to start coding it?



Hrt Icon 0 players like this post! Like?

Hok-Z | Hiatus (#170947)


View Forum Posts


Posted on
2023-04-29 17:26:51
Sorry for the wait!

Lioden does not have the functionality for you to code CSS, therefore we have to use external programs like Notepad++ or Visual Studio Code. Links for both of these programs can be found under "Basic Setup".

The only "code" functionality Lioden allows you to use is basic HTML within your Territory Description.

However, we can save code that we write using third-party software such as Notepad or Visual Studio and upload it to a file host (See Steps 1-2). With a special link, we can share that file's code with Lioden by using a "link relationship" attribute (See Steps 2-3). By using a <> attribute, we're telling Lioden to download the code that you linked to an external site such as Dropbox, and override the site's default appearance with what you upload.

I would suggest revisiting the first infodump post, as it goes over the basics of how to do this! There are also other tutorials and guides out there.

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



Hrt Icon 2 players like this post! Like?


Edited on 29/04/23 @ 17:35:57 by Hok-Z| 𝙼𝚊𝚛𝚊 𝚂𝚘𝚟 (#170947)







Memory Used: 628.38 KB - Queries: 0 - Query Time: 0.00000 - Total Time: 0.00377s