Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
forum_css [2025/09/05 23:26] – old revision restored (2025/08/26 19:49) GlitchyZoruaforum_css [2025/10/11 18:22] (current) GlitchyZorua
Line 16: Line 16:
 ---- ----
  
 +<WRAP center round tip 60%>
 **Important Note:** **Important Note:**
 Remember that the forum has multiple themes (Selectable on Profile/Look & Layout) - its fine to just focus on one theme, but be sure to check your final profile design on other themes to make sure its still readable! Remember that the forum has multiple themes (Selectable on Profile/Look & Layout) - its fine to just focus on one theme, but be sure to check your final profile design on other themes to make sure its still readable!
 +</WRAP>
 +
  
 You can style each of them separately using these root ids: You can style each of them separately using these root ids:
Line 78: Line 81:
  
 * Where "Insert_URL", add a web address that ends with an image format name. Such as .JPG, .PNG, .GIF, etc. * Where "Insert_URL", add a web address that ends with an image format name. Such as .JPG, .PNG, .GIF, etc.
 +<WRAP center round tip 60%>
 __TIP:__ Add no-repeat after the (Insert_URL) if you wish for your background image to not spread over the profile page. __TIP:__ Add no-repeat after the (Insert_URL) if you wish for your background image to not spread over the profile page.
  
   background-repeat: no-repeat;   background-repeat: no-repeat;
 +  
 __TIP 2:__ To simply hide a background element, replace "background-image:url()" with: __TIP 2:__ To simply hide a background element, replace "background-image:url()" with:
  
   display:none    display:none 
 +</WRAP>
 ---- ----
  
Line 164: Line 167:
   * **#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)
  
 +<WRAP center round tip 60%>
 **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 .catbg//" instead of using "//.catbg//"). 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.
 +</WRAP>
 ---- ----
 ==== Page-wide Elements. ==== ==== Page-wide Elements. ====
Line 261: Line 265:
 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. 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.
  
 +<WRAP center round important 60%>
 **Important Note:** **Important Note:**
 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]]! 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]]!
 +</WRAP>
 +
  
   * **#wrapper** - The div id that holds ALL visible elements on the page   * **#wrapper** - The div id that holds ALL visible elements on the page
Line 300: Line 307:
  
 ---- ----
 +<note>
 **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.
 +</note>
  
   * **#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)** - The second row for the top info bar (with the forum activity rating, links for "Unread Topics," "Unread Replies," etc.)
Line 315: Line 324:
  
 ---- ----
 +<note>
 **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.
 +</note>
  
   * **#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)** - The third row for the top info bar (with the news bar)