I adore this guide! But perhaps on another post, you could create a compilation of basic Extra CSS codes, such as changing the notification icon?

Added a section on the .mq# classes. Now go make all your skins responsive without those pesky @media!

---

Couple months late but eh I'll look into adding a list of basic snippits soon.

Hi! I saw your post and only then realized how much I wanted to change the icon too, so I set out for a solution and found one online. Here The black box that says CSS in an orange header is what you want. The text in that box needs to be modified in a couple ways for our purposes. 1. The "-moz-box-sizing" property is only necessary if you're using firefox (I'm pretty sure at least). 2. The url for the "background" property needs to be the url of the image that you want to replace the absol head with. The image must be 48px by 48px in order to fit. If the image you wanna use is a file on your computer, you'll need to upload the image to pokefarm first. 3. The width and height properties have to match the height and width of your new image (ex. 48px by 48px is what the absol head image is). 4. The "padding-left" property needs to be the same width as your new image, like in step 3. Now, that's great and all, but in order for us to actually be able to change the image, we need to access that image. If you select the absol head using the selector tool described in this forum, there isnt actually an id to access the image with. To be able to select the specific image, you need to click the three little dots that are next to the selected code in the html viewer, and then mouseover copy from the menu, and select "copy selector." Once thats done, you can paste that selector you copied before the brackets in your "extra CSS" text box. TL;DR because I am way too elaborate for my own good, or you just dont care to know how its done, this is what your final code will look like inside the "extra CSS" text box: #notifs > a > img{ display: block; box-sizing: border-box; background: url(IMAGE_URL_GOES_HERE.jpg) no-repeat; width: 48px; height: 48px; padding-left: 48px; } "#notifs > a > img" being the selector, and the "IMAGE_URL_GOES_HERE.jpg" being whatever picture you want. Sorry that was so long but it works, and it should work for any image in pokefarm you want as well. Hope it helped!

thank you so much for this!! its very helpful

Hi! I tried it and it only worked for a few pages on the site. It would return to the Absoul icon. Is there anything I'm doing wrong? Here's my code: #navigation>#navbtns>li>a, #navigation>#navbookmark>li>a{ border: 1px solid red; } #notifs > a > img{ display: block; box-sizing: border-box; background: url(https://pokefarm.com/upload/Timesheets/lol.png) no-repeat; width: 48px; height: 48px; padding-left: 48px; }

Anytime CSS “reverts” trying clearing your cache. It gets stuck sometimes but should fix itself after a few hard cache clears. :o

I'm struggling with a CSS template for a journal post. I'm trying to use this free-to-use template from buckembarnes, which I discovered in InsaneHysteria's journal The issue I'm having is with the icon in the .sideIMG class selector It works just fine with that image from the Wiki, but when I try to use an icon that I uploaded to the site with the Image Uploader, I lose all the other images from the template:

My apologies for double-posting, but this is what it looks like when it's working properly:

Because your name has a single quote in it, that is ending the image URL too early and causing the problem. If you wrap the image link in double quotes " " instead, or escape the ' in your name with a \ (so it's Alchemist\'s_Fire) you will not have this problem. You will need to do this with any CSS backgruond images you use that are uploaded under your name on the PFQ image uploader. Images using the [ img ] code should be fine.