[OUTDATED] ★ Tetra's CSS Guide ★

Ok thanks! That works for me i can do HTML codes just not CSS just yet XD

I'm looking for the selectors of these three things:

1. Chat Box - including the settings, refresh, and hide icons (changes to this don't show up in stylus, so I can't tell if I find them unless I update the file.)

2. The dynasty, pupsitting, etc links

3. The den tables. I want to add a max width to the table cells so that long footnotes don't squish everything else to the side. .table td works, but that also affects the lead wolf table and messes it up.

Help is much appreciated! I've been wrangling with these for a while.

@DarkDragonfly

Forgot to respond on time, apologies!

#chatMessageContainer should select the whole chatbox, and #chatboxContainer i and .no-overflow i should select the icons you mentioned.

.col-6 .card.text-center should select each of the the dynasty, pupsitting, etc squares.

And a while ago I discovered a new selector [data-cave-key] that should select just the cave wolf lists. Try [data-cave-key] td to see if that works?

These worked, thank you! The chat is readable on my den page now.

Additional notes: [data-cave-key] td  did affect only the cave wolf tables and left the lead wolf table alone, however it doesn't look like it affects the lead wolf puppies table.

In case anyone else needs it as the two selectors mentioned above don't include it, .title-card i is the selector for the chat "hide" icon, which is the one above the refresh icon.

There's a table for the lead wolf's puppies...?

Oooh, I still have much to figure out. But glad I could help.

I think as long as you can type you’ll be fine.

@🐾ⒼⒺⓂⒾⓃⒾ

You may code on mobile as long as 1) it's convenient for you, and 2) you have some way of exporting the code into a .css file. I had addressed this is an earlier post but the gist is, it is fortunately not impossible!

And @MagicDream286 is correct, by following the steps provided you are making a publicly-viewed design for your den and profile pages. Coding for client-side website view is done exclusively on Stylus.