Differences
This shows you the differences between two versions of the page.
| Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
| forum_css [2023/09/06 09:05] – Completed the full CSS selector reference. kallistero | forum_css [2025/10/11 18:22] (current) – GlitchyZorua | ||
|---|---|---|---|
| Line 1: | Line 1: | ||
| - | __WIP - A list of tips and snippets for customizing MelonLand forum profile | + | For Guild CSS Edits, see [[guild_css|this page]]! |
| ====== How to access MelonLand' | ====== How to access MelonLand' | ||
| - | From your main profile view, go to //Modify Profile// category > //Ultimate | + | From your main profile view, go to //Modify Profile// category > //[[https:// |
| - | [[https:// | + | {{ https:// |
| ===== How do I start? ===== | ===== How do I start? ===== | ||
| Line 16: | Line 16: | ||
| ---- | ---- | ||
| + | <WRAP center round tip 60%> | ||
| **Important Note:** | **Important Note:** | ||
| Remember that the forum has multiple themes (Selectable on Profile/ | Remember that the forum has multiple themes (Selectable on Profile/ | ||
| + | </ | ||
| + | |||
| You can style each of them separately using these root ids: | You can style each of them separately using these root ids: | ||
| Line 30: | Line 33: | ||
| The easiest way to give your MelonLand profile some unique, fun individuality, | The easiest way to give your MelonLand profile some unique, fun individuality, | ||
| - | [[https:// | + | {{https:// |
| Between your //style// tags, insert the following lines: | Between your //style// tags, insert the following lines: | ||
| Line 63: | Line 66: | ||
| Make your profile visitors feel as if they just landed in another world! | Make your profile visitors feel as if they just landed in another world! | ||
| - | [[https:// | + | {{https:// |
| The MelonLand forum background is made up of different layers. Specifically: | The MelonLand forum background is made up of different layers. Specifically: | ||
| Line 78: | Line 81: | ||
| * Where " | * Where " | ||
| + | <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: | background-repeat: | ||
| + | | ||
| __TIP 2:__ To simply hide a background element, replace " | __TIP 2:__ To simply hide a background element, replace " | ||
| display: | display: | ||
| + | </ | ||
| ---- | ---- | ||
| Line 93: | Line 96: | ||
| The cherry on top! | The cherry on top! | ||
| - | [[https:// | + | {{https:// |
| We will start by defining our own custom element, using the //div// tags to contain our new image. | We will start by defining our own custom element, using the //div// tags to contain our new image. | ||
| Line 139: | Line 142: | ||
| Because empty space should not go to waste! | Because empty space should not go to waste! | ||
| - | [[https:// | + | {{https:// |
| Between your //style// tags, insert the following lines and fill the // | Between your //style// tags, insert the following lines and fill the // | ||
| Line 152: | Line 155: | ||
| ====== Full CSS Selector Reference ====== | ====== Full CSS Selector Reference ====== | ||
| - | Every CSS selector you could want for profile customization! | + | Every CSS selector you could want for profile customization! |
| + | |||
| + | //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. ===== | ===== Theme Selectors. ===== | ||
| Line 162: | Line 167: | ||
| * **# | * **# | ||
| + | <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 "//# | + | It's highly recommended that you always use a theme selector for any of your other styles (for instance, using "//# |
| + | </ | ||
| ---- | ---- | ||
| ==== Page-wide Elements. ==== | ==== Page-wide Elements. ==== | ||
| Line 259: | Line 265: | ||
| You probably shouldn' | You probably shouldn' | ||
| + | <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:// | If you get locked out of your profile customization link because you went a little too wild with your CSS, then [[https:// | ||
| + | </ | ||
| + | |||
| * **# | * **# | ||
| Line 271: | Line 280: | ||
| * **# | * **# | ||
| * **# | * **# | ||
| - | * **# | + | * **# |
| - | * **# | + | * **# |
| - | * **# | + | * **# |
| - | * **# | + | * **# |
| - | * **# | + | * **# |
| - | * **# | + | * **# |
| - | * **# | + | * **# |
| - | * **# | + | * **# |
| - | * **# | + | * **# |
| - | * **# | + | * **# |
| - | * **# | + | * **# |
| - | * **# | + | * **# |
| + | etc etc for each link... | ||
| ---- | ---- | ||
| Line 297: | Line 307: | ||
| ---- | ---- | ||
| + | < | ||
| **Note:** | **Note:** | ||
| The second row here also has the class selector **.windowbg2**, | The second row here also has the class selector **.windowbg2**, | ||
| + | </ | ||
| * **# | * **# | ||
| Line 312: | Line 324: | ||
| ---- | ---- | ||
| + | < | ||
| **Note:** | **Note:** | ||
| The third row here also has the class selector **.windowbg**, | The third row here also has the class selector **.windowbg**, | ||
| + | </ | ||
| * **# | * **# | ||
