| Both sides previous revisionPrevious revisionNext revision | Previous revision |
| playground:playground [2023/09/06 04:41] – [FULL CSS SELECTOR REFERENCE] kallistero | playground:playground [2023/09/06 06:09] (current) – [Background & Floating Image Link Elements.] kallistero |
|---|
| ====== Full CSS Selector Reference ====== | ====== Full CSS Selector Reference ====== |
| |
| | Every CSS selector you could want for profile customization! |
| |
| ==== Theme Selectors. ==== | ==== Theme Selectors. ==== |
| | |
| | These are the basic themes for the forum. |
| |
| * **#theme-melon** - The body id for the default theme | * **#theme-melon** - The body id for the default theme |
| * **#theme-news** - The body id for the newspaper theme (theme made for readability; please stay extra mindful of this) | * **#theme-news** - The body id for the newspaper theme (theme made for readability; please stay extra mindful of this) |
| |
| ==== Top-level Elements. ==== | **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. |
| | ==== Page-wide Elements. ==== |
| | |
| | * **.smiley** - Every smiley on the page! (for instance, things like :ozwomp: or :eyes: ) |
| | |
| | ==== Background & Image Link Elements. ==== |
| | |
| | * **#shade** - The div id that holds [[https://forum.melonland.net/Themes/pimp-my-classic/images/rain.gif|the rain background gif]] |
| | * **#shade-2** - The div id that holds [[https://forum.melonland.net/Themes/pimp-my-classic/images/dust-clipart-cloud-smoke-12.png|the dust-cloud background image]] |
| | * **#shade-3** - The div id that holds [[https://forum.melonland.net/Themes/pimp-my-classic/images/starsky.gif|the blinking-stars background gif]] |
| | * **#bunting** - The div id that holds [[https://forum.melonland.net/Themes/pimp-my-classic/images/glowstars.gif|the 5-pointed-stars header gif]] |
| | * **#moon-link** - The id for the link at the top left, the one that looks like a weird banana spinning around |
| | * **#radio** - The id for the link at the top right, the one that looks like a radio |
| | * **#melonland-surf-club** - The object id for the Melonland Surf Club link; contains an embedded document, so your results may vary! |
| | |
| | ===== 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:** | **Important Note:** |
| If you don't use the theme selector (for instance, using "#wrapper" instead of "#theme-melon #wrapper"), setting any of the following will affect all themes. | If you get locked out of your profile customization link because you went a little too wild with your CSS, then [[https://forum.melonland.net/index.php?action=profile;area=customized;|use this link to return to your profile-customization page]]! |
| |
| * **#wrapper** - The div id that holds ALL visible elements on the page | * **#wrapper** - The div id that holds ALL visible elements on the page |
| * **#shade** - The div id that holds [[https://forum.melonland.net/Themes/pimp-my-classic/images/rain.gif|the rain background gif]] | * **#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 |
| | |
| | ==== Nav Bar Elements. ==== |
| | |
| | * **#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.) |
| |
| #shade -- holds rain background gif | |
| #shade-2 -- holds dust-cloud background image | |
| #shade-3 -- holds blinking-stars background gif | |
| #bunting -- holds 5-pointed-stars header gif | |
| |
| #moon-link -- is the link at the top left | * **#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.) |
| #moon-link img -- is that weird banana at the top left | * **#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 |
| |
| #radio -- is the link at the top right | **Note:** |
| #radio img -- is the radio at the top right | 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 -- is the surf club link just to the left of the radio | * **#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 |
| |
| #melonland-surf-club + p -- is the holster for the forum links at the top (Home, Entrance, Wiki, etc.) | **Note:** |
| #melonland-surf-club + p a -- all of the individual forum links at the top | 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 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 | |
| |
| #melonland-surf-club + p + table -- holster for the top info bar (with the logo image, time/date, forum activity rating & nav links, news bar, etc) | * **#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 | * **#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): | INVISIBLE-ELEMENT SELECTORS (don't use these names): |
