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) |