| Both sides previous revisionPrevious revision | |
| forum_css [2025/09/05 23:26] – old revision restored (2025/08/26 19:49) GlitchyZorua | forum_css [2025/10/11 18:22] (current) – GlitchyZorua |
|---|
| ---- | ---- |
| |
| | <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: |
| |
| * 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> |
| ---- | ---- |
| |
| * **#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. ==== |
| 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 |
| |
| ---- | ---- |
| | <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.) |
| |
| ---- | ---- |
| | <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) |