MelonLand Wiki

Trace: • forum_css

Differences

This shows you the differences between two versions of the page.

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision		Previous revision
forum_css [2023/09/06 06:44] – [Forbidden Selectors.] kallisteroforum_css [2023/09/07 03:36] (current) – [Theme Selectors.] kallistero
Line 152: Line 152:
 ====== Full CSS Selector Reference ====== ====== Full CSS Selector Reference ======
  
-Every CSS selector you could want for profile customization! Still a work in progress, so hold tight!+Every CSS selector you could want for profile customization!
  
-==== Theme Selectors. ====+//First compiled from the profile-page build that was live on September 6th, 2023, so if things are now out of date or incomplete, please update.// 
 + 
 +===== Theme Selectors. =====
  
 These are the basic themes for the forum. These are the basic themes for the forum.
Line 163: Line 165:
  
 **Important Note:** **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.+It's highly recommended that you always use a theme selector for any of your other styles (for instance, using "//#theme-melon .catbg//" instead of using "//.catbg//"). Otherwise, setting any of the other selectors will affect all themes. 
 + 
 +----
 ==== Page-wide Elements. ==== ==== Page-wide Elements. ====
  
-  * **.smiley** - Every smiley on the page! (for instance, things like :ozwomp: or :eyes: )+  * **.windowbg2** - The holster for the contents of both the comment-box input at the bottom and the middle row of the info pane at the top of the page 
 +  * **.smiley** - The image selector for every smiley on the page! (for instance, things like :ozwomp: or :eyes: )
  
 +----
 ==== Background & Image Link Elements. ==== ==== Background & Image Link Elements. ====
  
Line 177: Line 183:
   * **#radio** - The id for the link at the top right, the one that looks like a radio   * **#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!   * **#melonland-surf-club** - The object id for the Melonland Surf Club link; contains an embedded document, so your results may vary!
 +
 +----
 +==== Main Profile Pane Elements. ====
 +
 +  * **#main_container** - All the contents for the main profile pane
 +  * **.catbg** - The holster for every category header on the profile pane
 +  * **.windowbg** - The holster for the contents of every category (also applies to the news section at the top and comments at the bottom, but does not apply to the admin menu at the left)
 +  * **.topslice** - Element within each section & comment, placed before the actual content of each section
 +  * **.content** - Content of each section & comment
 +  * **.botslice** - Element within each section & comment, placed after the actual content of each section
 +  * **.smalltext** - Text elements that include the links in the left menu, along with any "Online" and "Offline" text under user profile avatars
 +  * **.avatar** - Image selector for all user avatars on the page
 +
 +----
 +
 +  * **.div1** - Element within the main profile pane, placed above the actual content
 +  * **.div2** - A second element within the main profile pane, placed above the actual content
 +
 +----
 +
 +  * **#left_admsection** - The admin menu of links on the top left of the profile pane
 +  * **.adm_section** - Each section for the admin menu; each section contains the header and the links
 +  * **.cat_bar** - Each section's header for the admin menu
 +  * **.left_admmenu** - Each sections contents containing links for the admin menu
 +  * **.left_admmenu li** - Every individual link in the admin menu
 +
 +----
 +
 +  * **#main_admsection** - The main contents of the main profile pane
 +  * **.creator** - The holster for the contents of every category, ONLY within the main contents of the main profile pane, and does not include anything in the "Comments" section
 +  * **#up_summary** - The profile pane's "Summary" section at the top
 +  * **#up_about_me** - The profile pane's "About Me" section at the top right
 +  * **#up_user_info** - The profile pane's user info section, directly below the "Summary" section
 +  * **#up_other_info** - The profile pane's section containing the "Signature," directly below the "About Me" section
 +  * **.signature** - The "Signature" contents; includes ONLY the signature, not any other content in that section
 +  * **.hrcolor** - The horizontal rule separating the signature from the other contents in its section
 +  * **#up_contact** - The profile pane's contact info section, directly above the "My Buddies" section
 +  * **#up_buddies** - The profile pane's "My Buddies" section
 +
 +----
 +
 +  * **.div3** - Element within the main profile pane, placed between the "Comments" section and all other content above the "Comments" section
 +
 +----
 +
 +  * **#profile_comments** - The profile pane's "Comments" section
 +  * **.poster** - Holster for every commentator's name & profile information in the "Comments" section
 +  * **.postarea** - Holster for the date, time, and contents of every comment
 +  * **.keyinfo** - Holster for the date & time of every comment
 +  * **.post** - Outer holster for the contents of every comment
 +  * **.inner** - Inner holster for the contents of every comment
 +  * **.moderatorbar** - Holster for the "Delete Comment" & "Reply" links at the bottom of each comment
 +  * **.post_separator** - The separator element between comments
 +  * **.pagesection** - The holster for the page select at the bottom of the "Comments" section
 +  * **.pagelinks** - The content for the page select at the bottom of the "Comments" section
 +  * **#up_write_comment** - The comment input section
 +  * **#comment** - The holster for the contents of the comment input section
 +  * **.sceditor-container** - The holster for the comment input toolbar & text area
 +  * **.sceditor-toolbar** - The holster for the comment input toolbar & input text area
 +  * **.sceditor-group** - The holster for each individual sub-toolbar within the input toolbar
 +  * **.sceditor-container textarea** - The text input area for leaving comments
 +  * **.sceditor-grip** - The resize handle for the comment text input area
 +  * **.sceditor-resize-cover** - The element that covers the comment text input area whenever it's resized
 +  * **.input_button** - The "Post Comment!" button
  
 ---- ----
 ===== Forbidden Selectors. ===== ===== Forbidden Selectors. =====
  
-These selectors have their names reserved and often refer to invisible elements, so using them or making elements that match their selectors might visually break your page!+These selectors have their names reserved and often refer to invisible elements, so using them or making HTML elements that match their selectors might visually break your page!
   * **#melon-params**   * **#melon-params**
   * **#top**   * **#top**
Line 198: Line 268:
   * **#radio img** - The image selector for the radio at the top right   * **#radio img** - The image selector for the radio at the top right
  
 +----
 ==== Nav Bar Elements. ==== ==== Nav Bar Elements. ====
  
Line 215: Line 286:
   * **#melonland-surf-club + p a:nth-child(6) img** - "Logout" link image   * **#melonland-surf-club + p a:nth-child(6) img** - "Logout" link image
  
 +----
 ==== Info Pane Elements. ==== ==== Info Pane 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** - 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** - 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** - The left half of the first row for the top info bar; holds the Melonland Forum logo
Line 226: Line 298:
   * **#melonland-surf-club + p + table tbody tr:first-child td:nth-child(2) a:first-of-type** - The "Messages" link   * **#melonland-surf-club + p + table tbody tr:first-child td:nth-child(2) a:first-of-type** - The "Messages" link
  
 +----
 **Note:** **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. 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.
Line 240: Line 313:
   * **#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 + table tbody tr:nth-child(2) td:nth-child(2) a:nth-child(5)** - The "Recent Posts" link
  
 +----
 **Note:** **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. 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.
Line 247: Line 321:
   * **#melonland-surf-club + p + table tbody tr:nth-child(3) td b** - The "News:" text on the news bar   * **#melonland-surf-club + p + table tbody tr:nth-child(3) td b** - The "News:" text on the news bar
  
 +----
 ==== Main Profile Pane Elements. ==== ==== Main Profile Pane Elements. ====
  
Line 252: Line 327:
   * **#melonland-surf-club + p + table + br + table tbody tr td** - The table cell containing the main profile content   * **#melonland-surf-club + p + table + br + table tbody tr td** - The table cell containing the main profile content
  
 +----
 ==== Footer Pane Elements. ==== ==== Footer Pane Elements. ====
  
   * **#melonland-surf-club + p + table + br + table + br + br + table** - The holster for the bottom footer pane (with copyright info, etc.)   * **#melonland-surf-club + p + table + br + table + br + br + table** - The holster for the bottom footer pane (with copyright info, etc.)
  
 +----
 ==== Footer Stickers. ==== ==== Footer Stickers. ====