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?
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!
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;
}
