What Is It
If you're reading this page, you may be curious about how to customize your own character's page with a nifty background image that only shows up on that page only. (See example here).
Below is the set of instruction needed in order to understand how to achieve such.
Before you start, please understand editing the CSS affects the whole magerp wikia so please test things out first before you edit. If unsure, please ask someone else to help you to edit.
Important
Before you start, please understand making changes to the CSS takes time to reflect to the entire site. Generally, expect it to change after about 20~30 minutes rather than immediately. Thus it is highly recommended to test things out first with this nifty tool. I will provide more instructions below so read on.
The Code
Copy the code below as is. Do not go to source view as it would...most likely mess up the coding 8'D.
Below is the CSS code used to achieve what is seen on Periwinkle's page.
body.page-YOUR-CHARACTER-NAME{
background:url("YOUR-URL-HERE") no-repeat fixed center;
background-size:100%;
background-color: #000000
}
Code Instruction
There are several things to edit from here. First you will have to change
body.page-YOUR-CHARACTER-NAME
to the actual page name. For example, to change background image on Periwinkle's page, I had to do
body.page-Periwinkle_Winter
With underscore between Periwinkle and Winter due to the space between her name.
Then, change the url contained in
background:url("YOUR-URL-HERE") no-repeat fixed center;
to the url of the background image you plan to use.
For example, this is the background image on Periwinkle's page.
background:url("h t t p://fc09.deviantart.net/fs71/f/2013/111/b/3/wiki_background_periwinkle_by_kurishu-d62l5qw.png") no-repeat fixed center;
If you want to use a pattern image rather than an image that doesn't move, then you may change the following part. background:url("YOUR-URL-HERE") no-repeat fixed center;
to
background:url("YOUR-URL-HERE") repeat;
Now that you're done with those, you can change the last two things in this.
background-size:100%;
background-color: #000000
But it is not recommended to change background-size since everyone has different monitor resolutions and by leaving that part of the code alone, the image will automatically scale down to fit everyone's monitor resolution.
You may however, alter background-color to any background color you would like. I've changed it to background-color: #5a5f7d for Periwinkle's page.
Testing
Remember the nifty tool I linked above? Yeah, time to use it to test to make sure it works.
First of all, you'll see there's a source code area on the left and a result area on the right. You'll be editing some codes to do the testing!
Locate the code from below:
body { background:#ffffff url('img_tree.png') repeat; margin-right:200px; }
This is where you will make your changes. Copy the things inside the body.page-YOUR-CHARACTER-NAME{ } bracket aka the below.
background:url("YOUR-URL-HERE") no-repeat fixed center;
background-size:100%;
background-color: #000000
And paste them between body { } on the link you just opened (aka Tryit Editor page).
Press Submit Code button and check to see if your code does what it does.
Where to Edit
I've left this part to the last since I do not wish for people to immediately jump to edit the Wikia CSS and possibly... mess up the whole CSS for magerp wikia, lol. But after getting to this part and testing things out, you may head over to this page to edit the source code.
Read the comments there just in case. The comment tag is /* write comment here */
Enjoy the spiffy background image that can only be seen on your character's page!