This is an old revision of the document!


PlayGround

Hello! What's up?

Full CSS Selector Reference

Every CSS selector you could want for profile customization!

Theme Selectors.

These are the basic themes for the forum.

  • #theme-melon - The body id for the default theme
  • #theme-dreamy - The body id for the cinni dreamy theme
  • #theme-news - The body id for the newspaper theme (theme made for readability; please stay extra mindful of this)

Important Note: It's highly recommended that you always use a theme selector for any of your other styles (for instance, using “#theme-melon #wrapper” instead of using “#wrapper”). Otherwise, setting any of the other selectors will affect all themes.

Advanced CSS Selectors.

You probably shouldn't have to mess with these ones! Many of them are super-specific or don't respond to a lot of the usual styles. If you do mess with them, it's recommended that you know what you're doing beforehand.

Important Note: If you get locked out of your profile customization link because you went a little too wild with your CSS, then use this link to return to your profile-customization page!

  • #wrapper - The div id that holds ALL visible elements on the page
  • #moon-link img - The image selector for that weird banana at the top left.
  • #radio img - The image selector for the radio at the top right
  • #melonland-surf-club + p - The holster for the forum links at the top (Home, Entrance, Wiki, etc.)
  • #melonland-surf-club + p a - All individual forum links at the top
  • #melonland-surf-club + p a:first-child - “Home” link
  • #melonland-surf-club + p a:first-child img - “Home” link image
  • #melonland-surf-club + p a:nth-child(2) - “Entrance” link
  • #melonland-surf-club + p a:nth-child(2) img - “Entrance” link image
  • #melonland-surf-club + p a:nth-child(3) - “Wiki” link
  • #melonland-surf-club + p a:nth-child(3) img - “Wiki” link image
  • #melonland-surf-club + p a:nth-child(4) - “Search” link
  • #melonland-surf-club + p a:nth-child(4) img - “Search” link image
  • #melonland-surf-club + p a:nth-child(5) - “Profile” link
  • #melonland-surf-club + p a:nth-child(5) img - “Profile” link image
  • #melonland-surf-club + p a:nth-child(6) - “Logout” link
  • #melonland-surf-club + p a:nth-child(6) img - “Logout” link image

Info Bar Elements.

  • #melonland-surf-club + p + table - The holster for the top info bar (with the forum logo image, time/date, forum activity rating & nav links, news bar, etc.)
  • #melonland-surf-club + p + table tbody tr:first-child - The first row for the top info bar (with the forum logo image, time && date, “messages” link, etc.)
  • #melonland-surf-club + p + table tbody tr:first-child td:first-child - The left half of the first row for the top info bar; holds the Melonland Forum logo
  • #melonland-surf-club + p + table tbody tr:first-child td:first-child a img - The Melonland Forum logo image
  • #melonland-surf-club + p + table tbody tr:first-child td:nth-child(2) - The right half of the first row for the top info bar; holds the time & date, “messages” link, etc.
  • #melonland-surf-club + p + table tbody tr:first-child td:nth-child(2) a:first-of-type - The “Messages” link

Note: The second row here also has the class selector .windowbg2, so you may also alter its styles, at a class level, using that class selector.

  • #melonland-surf-club + p + table tbody tr:nth-child(2) - The second row for the top info bar (with the forum activity rating, links for “Unread Topics,” “Unread Replies,” etc.)
  • #melonland-surf-club + p + table tbody tr:nth-child(2) td:first-child - The left half of the second row for the top info bar; contains the forum activity rating
  • #melonland-surf-club + p + table tbody tr:nth-child(2) td:first-child b - The “Forum activity rating:” and “Posts” text
  • #melonland-surf-club + p + table tbody tr:nth-child(2) td:first-child img - The stars image for the forum activity rating
  • #melonland-surf-club + p + table tbody tr:nth-child(2) td:nth-child(2) - The right half of the second row for the top info bar; contains links for “Unread Topics,” “Unread Replies,” etc.
  • #melonland-surf-club + p + table tbody tr:nth-child(2) td:nth-child(2) a:first-child - The “Unread Topics” link
  • #melonland-surf-club + p + table tbody tr:nth-child(2) td:nth-child(2) a:nth-child(2) - The “Unread Replies” link
  • #melonland-surf-club + p + table tbody tr:nth-child(2) td:nth-child(2) a:nth-child(3) - The “Own Posts” link
  • #melonland-surf-club + p + table tbody tr:nth-child(2) td:nth-child(2) a:nth-child(4) - The “Own Topics” link
  • #melonland-surf-club + p + table tbody tr:nth-child(2) td:nth-child(2) a:nth-child(5) - The “Recent Posts” link

Note: The third row here also has the class selector .windowbg, so you may also alter its styles, at a class level, using that class selector.

  • #melonland-surf-club + p + table tbody tr:nth-child(3) - The third row for the top info bar (with the news bar)
  • #melonland-surf-club + p + table tbody tr:nth-child(3) td - The news bar
  • #melonland-surf-club + p + table tbody tr:nth-child(3) td b - The “News:” text on the news bar

INVISIBLE-ELEMENT SELECTORS (don't use these names):

#melon-params #top



playground/playground.1693973204.txt.gz · Last modified: 2023/09/06 06:06 by kallistero
CC Attribution-Share Alike 4.0 International Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International