What's new

How to change your facebook buttons to pokemon sprites

  • Thread starter Chazay
  • Start date
  • Views 6,096
C

Chazay

Android
Retired
Messages
8,410
Reaction score
5,093
QUI2K.jpg


Get the add on "Stylish" for Chrome or Firefox.

Here’s the CSS code

Code:
.slimHeader #fbNotificationsJewel a.jewelButton,
 
#fbMessagesJewel a.jewelButton,
 
.slimHeader #fbNotificationsJewel.openToggler a.jewelButton {
 
    background-image: url(<link to picture file of Jigglypuff>) !important;
 
    background-position: center center !important;
 
}
 
 
 
.slimHeader #fbNotificationsJewel a.jewelButton:hover,
 
#fbMessagesJewel a.jewelButton:hover {
 
    background-image: url(<link to picture file of Jigglypuff>) !important;
 
    background-position: center center !important;
 
}
 
 
 
.slimHeader #fbMessagesJewel a.jewelButton,
 
.slimHeader #fbMessagesJewel.openToggler a.jewelButton,
 
#fbMessagesJewel a.jewelButton {
 
    background-image: url(<link to picture file of Delibird>) !important;
 
    background-position: center center !important;
 
}
 
 
 
.slimHeader #fbMessagesJewel a.jewelButton:hover,
 
#fbMessagesJewel a.jewelButton:hover {
 
    background-image: url(<link to picture file of Delibird>) !important;
 
    background-position: center center;
 
}
 
 
 
.slimHeader #fbRequestsJewel a.jewelButton,
 
.slimHeader #fbRequestsJewel.openToggler a.jewelButton,
 
#fbMessagesJewel a.jewelButton {
 
background-image: url(<link to picture file of Dugtrio>) !important;
 
background-position: center center !important;
 
}
 
 
 
.slimHeader #fbRequestsJewel a.jewelButton:hover,
 
#fbMessagesJewel a.jewelButton:hover {
 
    background-image: url(<link to picture file of Dugtrio>) !important;
 
    background-position: center center !important;
 
}

If you want to copy it, you'd have to replace <link to picture file of Jigglypuff/Delibird/Dugtrio> with a real URL, of course, starting with http:// (and without < > around it).
Hope that helps. :smile:Source: http://www.reddit.com/r/pokemon/comments/t8voe/i_changed_my_facebook_icons_what_do_you_think/
 
C

ChrisSMellor

Getting There
Messages
1,745
Reaction score
357
QUI2K.jpg


Get the add on "Stylish" for Chrome or Firefox.

Here’s the CSS code

Code:
.slimHeader #fbNotificationsJewel a.jewelButton,
 
#fbMessagesJewel a.jewelButton,
 
.slimHeader #fbNotificationsJewel.openToggler a.jewelButton {
 
    background-image: url(<link to picture file of Jigglypuff>) !important;
 
    background-position: center center !important;
 
}
 
 
 
.slimHeader #fbNotificationsJewel a.jewelButton:hover,
 
#fbMessagesJewel a.jewelButton:hover {
 
    background-image: url(<link to picture file of Jigglypuff>) !important;
 
    background-position: center center !important;
 
}
 
 
 
.slimHeader #fbMessagesJewel a.jewelButton,
 
.slimHeader #fbMessagesJewel.openToggler a.jewelButton,
 
#fbMessagesJewel a.jewelButton {
 
    background-image: url(<link to picture file of Delibird>) !important;
 
    background-position: center center !important;
 
}
 
 
 
.slimHeader #fbMessagesJewel a.jewelButton:hover,
 
#fbMessagesJewel a.jewelButton:hover {
 
    background-image: url(<link to picture file of Delibird>) !important;
 
    background-position: center center;
 
}
 
 
 
.slimHeader #fbRequestsJewel a.jewelButton,
 
.slimHeader #fbRequestsJewel.openToggler a.jewelButton,
 
#fbMessagesJewel a.jewelButton {
 
background-image: url(<link to picture file of Dugtrio>) !important;
 
background-position: center center !important;
 
}
 
 
 
.slimHeader #fbRequestsJewel a.jewelButton:hover,
 
#fbMessagesJewel a.jewelButton:hover {
 
    background-image: url(<link to picture file of Dugtrio>) !important;
 
    background-position: center center !important;
 
}

If you want to copy it, you'd have to replace <link to picture file of Jigglypuff/Delibird/Dugtrio> with a real URL, of course, starting with http:// (and without < > around it).
Hope that helps. :smile:Source: http://www.reddit.com/r/pokemon/comments/t8voe/i_changed_my_facebook_icons_what_do_you_think/
I have just seen this I love you so much for this (I don't actually love you sorry) Thank you so much.
 
V

VinnyHaw

Se7enSinner
Messages
14,050
Reaction score
5,481
how do you do this? i need step/step instructions
 
C

ChrisSMellor

Getting There
Messages
1,745
Reaction score
357
how do you do this? i need step/step instructions
1) Download app.
2)Write new style.
3)Copy and paste code.
4)find a picture you want and get the URL for it and put in the
background-image: url(<link to picture file of Jigglypuff>
) !important; (Replace the enlarged part.)
5)save and put Facebook as the URL to effect.

If you need more infomation then just pm me


 
V

VinnyHaw

Se7enSinner
Messages
14,050
Reaction score
5,481
1) Download app.
2)Write new style.
3)Copy and paste code.
4)find a picture you want and get the URL for it and put in the
background-image: url(<link to picture file of Jigglypuff>
) !important; (Replace the enlarged part.)
5)save and put Facebook as the URL to effect.

If you need more infomation then just pm me

thanks you :biggrin:

lol, even .gif files work. the mew in this pic is bouncing up and down

23mtpg1.png
 
Top Bottom