Site Skins: How-To, and Helpful CSS
Forum Index > PokéFarm > Guides >
There is NO hacking involved at all
Farm > other links> site skins > create new skin > extra css tab
https://pokefarm.com/skin
![](https://cdn.discordapp.com/attachments/630203808038780928/1020921292670636102/A_Vulpix_S.gif)
![](https://pfq.link/?R3T_8=platform.png)
![](https://pfq.link/?wqM3k=platform.png)
signature by Kattscribbles, with help from Wardove. Official Pokemon Art
QUOTE originally posted by Alchemist's Fire
It doesn't seem to work outside my fields though?
Party, Summary, and Dex pages all still show the official sprite instead of the replaced one. And the image is glitched in my fields (will grab a screenshot) (I transposed the width and height, fixed now)
QUOTE originally posted by Tarashia
Have you cleared your cache? Can you post the full code you're using, or your skin link?
SKIN CSS
//change mouse cursor
//body
/*
*, *:before, *:after
{
cursor: url("https://pokefarm.com/upload/Alchemist's_Fire/Art/Cursors/MelanPlusleMinunCursorForAlch4.png"), pointer;
} */
/*Change the colour of all progress bars (includes scour missions, task list, item progress, egg & Pokemon EXP) */
.expbar>div {
background-color: #8A2BE2; //bluer
}
//-----START custom special and gender icons-----
/*
//Melan Icon//
img[src*="/img/pkmn/melanistic.png"]{
height: 0px !important;
width: 16px !important;
padding-top: 16px !important;
//background: url("https://pokefarm.com/upload/Cele/site_skin/custom_icons/melan.png") top left no-repeat;
background: url("https://pokefarm.com/upload/Alchemist's_Fire/Site_Skin/custom_icons/melan05.png") top left no-repeat;
background-size: cover;
}
//Albino Icon//
img[src*="/img/pkmn/albino.png"]{
height: 0px !important;
width: 16px !important;
padding-top: 16px !important;
//background: url("https://pokefarm.com/upload/Cele/site_skin/custom_icons/albino.png") top left no-repeat;
background: url("https://pokefarm.com/upload/Cele/site_skin/custom_icons/melan2.png") top left no-repeat;
background-size: cover;
}
//Shiny Icon//
img[src*="/img/pkmn/shiny.png"]{
height: 0px !important;
width: 16px !important;
padding-top: 16px !important;
//background: url("https://pokefarm.com/upload/Cele/site_skin/custom_icons/shiny.png") top left no-repeat;
background: url("https://pokefarm.com/upload/Alchemist's_Fire/Site_Skin/custom_icons/melan04a.png") top left no-repeat;
background-size: cover;
}
//Male Icon//
img[src*="/img/pkmn/gender_m.png"]{
height: 0px !important;
width: 16px !important;
padding-top: 16px !important;
//background: url("https://pokefarm.com/upload/Cele/site_skin/custom_icons/male.png") top left no-repeat;
background: url("https://pokefarm.com/upload/Cele/site_skin/custom_icons/neutral.png") top left no-repeat;
background-size: cover;
}
//Female Icon//
img[src*="/img/pkmn/gender_f.png"]{
height: 0px !important;
width: 16px !important;
padding-top: 16px !important;
//background: url("https://pokefarm.com/upload/Cele/site_skin/custom_icons/female.png") top left no-repeat;
background: url("https://pokefarm.com/upload/Alchemist's_Fire/Site_Skin/custom_icons/heart01.png") top left no-repeat;
background-size: cover;
}
//Neutral Icon//
img[src*="/img/pkmn/gender_n.png"]{
height: 0px !important;
width: 16px !important;
padding-top: 16px !important;
//background: url("https://pokefarm.com/upload/Cele/site_skin/custom_icons/neutral.png") top left no-repeat;
background: url("https://pokefarm.com/upload/Alchemist's_Fire/Site_Skin/custom_icons/heart02.png") top left no-repeat;
background-size: cover;
}
*/
//-----END custom special and gender icons-----
//-----START Replace Albino Plusle Sprite-----
/* big image */
/* field, shelter */
img.big[src*='/q/p/z'] {
object-position: 9999px;
background-image: url("https://pokefarm.wiki/images/archive/2/26/20181207093934%21Albino_Plusle.png");
width: 31px;
height: 43px;
}
/* party, dex */
.pokemon.big[style*='/q/p/z'] {
background-image: url("https://pokefarm.wiki/images/archive/2/26/20181207093934%21Albino_Plusle.png") !important;
}
//-----END Replace Albino Plusle Sprite-----
//-----START Replace Albino Minun Sprite-----
/* big image */
/* field, shelter */
img.big[src*='3/f/t'] {
object-position: 9999px;
background-image: url("https://pokefarm.wiki/images/archive/a/aa/20181207115013%21Albino_Minun.png");
width: 36px;
height: 43px;
}
/* party, dex */
.pokemon.big[style*='3/f/t'] {
background-image: url("https://pokefarm.wiki/images/archive/a/aa/20181207115013%21Albino_Minun.png") !important;
}
//-----END Replace Albino Minun Sprite-----
//Removes the white border from the new hybrid clicking feature (hover mouse, hit 1-5)
.party > div:hover > .action a[data-berry]::after
{
border-color:transparent;
}
//-----START Remove Dressup Contest Buttons CODE-----
#announcements > ul > li[data-name="Contest Voting"] {
display: none;
}
#announcements > ul > li[data-name="Contest Sign-Up"] {
display: none;
}
//-----END Remove Dressup Contest Buttons CODE-----
//-----START MOBILE DATA OPTIMIZATION CODE-----
#multiuser #trainerimage {
display: none;
}
//don't display Pokemon sprites while clicking
/*#multiuser .pkmn {
display:none;
}*/
//don't display Pokemon name while clicking
#multiuser .name {
display:none;
}
//don't display Pokemon/Egg EXP bars while clicking
#multiuser .expbar {
display:none;
}
//don't display berry preference text while clicking
#multiuser .taste {
display:none;
}
//Controls a border around the party???
#multiuser .party {
width:430px;
}
//make the party a 3x2 table again (my value) while clicking (works when Compact View is off)
#multiuser .party>div {
width:215px;
}
//I have no idea what these things do
#multiuser .party>div:nth-child(1) {
border-top-right-radius:6px;
}
#multiuser .party>div:nth-child(2) {
border-top-right-radius:0px;
border-top-width:0px;
}
#multiuser .party>div:nth-child(5) {
border-bottom-left-radius:0px;
}
#multiuser .party>div:nth-child(6) {
border-bottom-left-radius:6px;
}
#multiuser .party>div:nth-child(2n+1) {
border-right-width:1px;
}
//gets rid of the tooltip when you hover over a berry while clicking
#multiuser .party>div>.action>.berrybuttons>.tooltip_content {
display:none;
}
//Note: comment the following 3 sections out if you want to restore berry images, remove borders and restore about me
//gets rid of the berry image, keeps the pref highlight, while clicking
#multiuser .party>div>.action>.berrybuttons>a>img {
display:none;
}
//puts a border around the berry button (purple border) while clicking
#multiuser .party>div>.action>.berrybuttons>a {
border: 1px solid #a020f0; border-radius: 20px; width: 38px;
}
//removes About Me box completely while clicking
#multiuser .panel {
display:none;
}
//-----END MOBILE DATA OPTIMIZATION CODE-----
//-----START SHELTER GRID CODE-----
#shelterarea {
min-height: 350px;
display: flex;
flex-direction:row;
flex-flow: row wrap;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-template-rows: repeat(5, 70px);
}
.mq2 #shelterarea {
min-height: 175px;
grid-template-rows: repeat(5, 35px);
}
#shelterarea .tooltip_content {
position: absolute;
bottom: 0;
transform: translate(0, 100%);
}
#shelterpage #shelter #shelterarea > .pokemon {
position: static;
flex: 1 1 16%;
display: inline-block;
display: inline-flex;
justify-content: center;
align-items: center;
}
#shelterpage #shelter #shelterarea:before {
display: none;
}
//-----END SHELTER GRID CODE-----
//-----START SHELTER EGG FILTER CODE-----
#shelterarea> .pokemon >
// img[src*="pkmn/6/5/i.png"], //Smeargle (melan hunt, hatched 2021-01-29)
// img[src*="pkmn/h/p/h.png"], //Sneasel (melan hunt with Cele, paused)
// img[src*="pkmn/n/q/8.png"], //Ekans (mini-hunt! 6 albinos, return male to Eternal-Hopes)
// img[src*="pkmn/n/a/i.png"], //Grimer (2 shiny, 2 albino)
// img[src*="pkmn/8/s/i/r.png"], //Alolan Grimer (2 shiny, 2 albino)
// img[src*="pkmn/b/d/m.png"], //Koffing (PAUSED Cele interested in albinos (shinies done))
// img[src*="pkmn/a/d/q/3.png"], //Minior (rock/flying, albino)
// img[src*="pkmn/6/8/0.png"], //Duskull (shiny/albino got, melan hunt?)
// img[src*="pkmn/c/g/k.png"], //Shuppet, 2 albino 3 shiny?
// img[src*="pkmn/8/1/1.png"], //Aipom (normal, shinies/albinos?)
// img[src*="pkmn/c/8/n.png"], //Lickitung (normal, shinies? albinos?)
// img[src*="pkmn/b/q/s.png"], //Porygon (normal, 3 shinies)
// img[src*="pkmn/f/w/s.png"], //Slakoth (3 albinos)
// img[src*="pkmn/7/x/q.png"], //Kecleon (1 shiny, 1 albino)
// img[src*="pkmn/w/y/c/n.png"], //Skwovet (albinos!)
// img[src*="pkmn/s/7/c/o.png"], //Blipbug
// img[src*="pkmn/c/r/x/r.png"], //Rolycoly (better nature albinos)
// img[src*="pkmn/k/q/l/l.png"], //Falinks (albino, gems)
// img[src*="pkmn/s/g/m/7.png"], //Dracozolt (want albino)
// img[src*="pkmn/u/0/o/a.png"], //Arctozolt (want albino)
// img[src*="pkmn/3/t/u/l.png"], //Dracovish (want albino)
// img[src*="pkmn/t/r/h/8.png"], //Arctovish (want albino)
// img[src*="pkmn/l/w/a/d.png"], //Galarian Zigzagoon (hunt, better nature shiny/albino)
// img[src*="pkmn/l/u/i/i.png"], //Galarian Slowpoke (shinies/albinos)
// img[src*=""], //
//-----START TYPE RACE-TOURNAMENT EGG FILTER-----
// img[src*="pkmn/e/4/9/m.png"], //Kyutopi (need more specials!, also psychic type race)
//Type Race March 2021: Team Poison (3rd rotation)
//-----END TYPE RACE-TOURNAMENT EGG FILTER-----
//-----POKEMON SPRITE FILTERING-----
img[src*="pkmn/n/8/2.png"], //Lickitung (normal)
img[src*="pkmn/8/1/1.png"], //Aipom F (normal)
img[src*="pkmn/j/j/j.png"], //Aipom M (normal)
// img[src*="pkmn/6/i/j.png"], //Porygon (normal)
// img[src*="pkmn/8/z/v.png"], //Chingling (psychic)
// img[src*="pkmn/q/g.png"], //Wynaut (psychic)
img[src*="pkmn/7/z/y.png"], //Nosepass (rock/steel)
// img[src*="pkmn/w/n/o/4.png"], //Rockruff (rock)
img[src*="pkmn/n/d/i.png"], //Roggenrola (rock)
img[src*="pkmn/i/j/b.png"], //Boldore (rock)
img[src*="pkmn/m/1/y.png"], //Bonsly (rock)
// img[src*="pkmn/j/l/k.png"], //Growlithe (fire stone)
// img[src*="pkmn/d/w/h.png"], //Gligar (F) (ground/fly)
// img[src*="pkmn/e/y/5.png"], //Gligar (M) (ground/fly)
// img[src*="pkmn/l/8/s.png"], //Sneasel (M) (ice/dark)
// img[src*="pkmn/o/k/f.png"], //Sneasel (F) (ice/dark)
// img[src*=""], //
//-----END POKEMON SPRITE FILTERING-----
// img[src*=""], //
{-webkit-filter: drop-shadow(0px 0px 5px #a020f0); //dropshadow code
//start animation code
animation-name: egg;
animation-duration: 1.5s;
animation-iteration-count: infinite;
}
@keyframes egg {
0% {transform: translate3d(0,0,0);} //normal
15% {transform: translate3d(0,30%,0);} //down
20% {transform: translate3d(0,0,0);} //return
35% {transform: translate3d(15%,0,0);}//
40% {transform: translate3d(0,0,0);}//return
55% {transform: translate3d(0,30%,0);}
60% {transform: translate3d(0,0,0);}//return
75% {transform: translate3d(-15%,0,0);}
80% {transform: translate3d(0,0,0);}
90% {transform: translate3d(0,0,0);}
100% {transform: translate3d(0,0,0);}
}
//-----END SHELTER EGG FILTER CODE-----
//-----START FIELD FLAVOUR STACKING MODIFICATION CODE-----
/*
@padding:10px;
#field_berries ~ #field_field[data-mode="public"]>div.field>.fieldmon[data-flavour*="sour-"], #field_field[data-mode="public"]>div.field>.fieldmon[data-flavour*="any-"]{
left:5%!important;
top:45%!important;
margin:-@padding!important;
transition:none!important;
img {
//animation:none!important;
padding:@padding!important;
}
}
#field_berries ~ #field_field[data-mode="public"]>div.field>.fieldmon[data-flavour*="spicy-"]{
left:25%!important;
top:45%!important;
margin:-@padding!important;
transition:none!important;
img {
//animation:none!important;
padding:@padding!important;
}
}
#field_berries ~ #field_field[data-mode="public"]>div.field>.fieldmon[data-flavour*="dry-"]{
left:45%!important;
top:45%!important;
margin:-@padding!important;
transition:none!important;
img {
//animation:none!important;
padding:@padding!important;
}
}
#field_berries ~ #field_field[data-mode="public"]>div.field>.fieldmon[data-flavour*="sweet-"]{
left:65%!important;
top:45%!important;
margin:-@padding!important;
transition:none!important;
img {
//animation:none!important;
padding:@padding!important;
}
}
#field_berries ~ #field_field[data-mode="public"]>div.field>.fieldmon[data-flavour*="bitter-"]{
left:85%!important;
top:45%!important;
margin:-@padding!important;
transition:none!important;
img {
//animation:none!important;
padding:@padding!important;
}
}
*/
//-----END FIELD FLAVOUR STACKING MODIFICATION CODE-----
//-----START FIELD CENTER STACKING MODIFICATION CODE-----
/*
@padding: 20px;
#field_field[data-mode="public"]>div.field>.fieldmon {
margin:-@padding!important;
left:45%!important;
top:45%!important;
img {
//animation:none!important;
padding:@padding!important;
}
}
#field_berries {
position:relative;
z-index:12;
}
#field_nav button[data-action=next], #field_nav button[data-action=previous], #field_nav button[data-action=jump] {
position:relative;
z-index:10;
}
#field_party {
position:relative;
z-index: 11;
}
*/
//-----END FIELD CENTER STACKING MODIFICATION CODE-----
Avatar credits: Melan Plusle & Minun Galaxy avatar made by Sharpy, (for my use only)
QUOTE originally posted by Vaporeon26
There is NO hacking involved at all
Farm > other links> site skins > create new skin > extra css tab
https://pokefarm.com/skin
QUOTE originally posted by Pata97
QUOTE originally posted by Vaporeon26
There is NO hacking involved at all
Farm > other links> site skins > create new skin > extra css tab
https://pokefarm.com/skin
- Main
- TypeRace
- Disclaimer
Formerly Jaceblep
Avatar from PMD, recoloured by me.
Hord Info
0S/0A/0M/3H
Score: 0
"WE" or "US" refers to multiple members, not multiple outside people. We do not account share. Some other members of the system have shown interest in playing, so this disclaimer exists now. However, the account remains primarily Jace's.
QUOTE originally posted by Jaceblep
QUOTE originally posted by Pata97
QUOTE originally posted by Vaporeon26
There is NO hacking involved at all
Farm > other links> site skins > create new skin > extra css tab
https://pokefarm.com/skin
@Alchemist's Fire
Thanks for spotting it, that was my mistake, and I agree 'big image' was not a good choice for the comment. I've fixed the code, could you please check
The updated post
Sorry about that.
Avatar by Kaelwolfur.
Sent from my PokéNav
It's definitely clearer with that language, but I'm still having the same issues. It only gets replaced in my fields, nowhere else.
Party and summary page it's still the official image rather than the replaced image.
Do I have to use the "replace specific pokemon" CSS as well?
No that should be fine. If I copy and paste the code from my post and nothing else, the regular male Eevee sprite definitely gets replaced in Party, Fields, Dex and Shelter.
Maybe clear your cache and let's have another look at your udpated complete CSS?
Cannot post: Please log in to post