Your ULTIMATE Site Skin CSS Guide
Forum Index > PokéFarm > Guides >
Hey everyone! I've been playing around with site skins for a bit now, and today, I'd like to bring you the ultimate set of codes (in my opinion)! You can change just about every visual aspect of PFQ if you just know how to do it, and today, I'm going to show you some of the fun or essential ones. If you're a guide owner or a code owner and you'd like me to take your bits out, or if you'd like me to list them here, please let me know! I'm making this guide since so many people who made CSS guides are now inactive, so you all can ask questions and have them answered by someone who is still active!
ALL code needs to go in the "Extra CSS" section on your site skin, and if it isn't working, please refresh your cache. Any things you need to edit are also UNDERLINED.
DISCLAIMER: I will not fix your skin for you, it is your responsibility, and I will not spoonfeed you, but I am willing to do troubleshooting for you and give general advice. If you're interested in a custom CSS site skin, you are more than welcome to commission me! My shop is located here!
Additionally, please credit me for any of my code that you use. <3
- Fields
- Backgrounds
- Notification/Header Images
- Trainer/Trainer Cards
- Party Backgrounds
- Custom Berries
- Extras
- Other Resources
Fields
Field Clicking Modifications
This specific code is not mine and can be found here in Corviknight's guide under the same name! Please check it out because I will not be including every single code on their post here.
Code
@padding: 50px;
/*do not touch below here*/
#field_berries.selected ~ #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;
}
Results!
Field Background Changes
This specific code is not mine and can be found here in Corviknight's guide under the name "Changing Field Images"!
Code
//???-type Field
#field_field>div.field[style*="unknown"] {
background-image: url("IMG URL") !important;
background-size:cover;
}
//Normal-type Field
#field_field>div.field[style*="normal"] {
background-image: url("IMG URL") !important;
background-size:cover;
}
//Fire-type Field
#field_field>div.field[style*="fire"] {
background-image: url("IMG URL") !important;
background-size:cover;
}
//Water-type Field (1st style)
#field_field>div.field[style*="water1"] {
background-image: url("IMG URL") !important;
background-size:cover;
}
//Water-type Field (2nd style)
#field_field>div.field[style*="water2"] {
background-image: url("IMG URL") !important;
background-size:cover;
}
//Electric-type Field
#field_field>div.field[style*="electric"] {
background-image: url("IMG URL") !important;
background-size:cover;
}
//Grass-type Field
#field_field>div.field[style*="grass"] {
background-image: url("IMG URL") !important;
background-size:cover;
}
//Ice-type Field
#field_field>div.field[style*="ice"] {
background-image: url("IMG URL") !important;
background-size:cover;
}
//Fighting-type Field
#field_field>div.field[style*="fighting"] {
background-image: url("IMG URL") !important;
background-size:cover;
}
//Poison-type Field
#field_field>div.field[style*="poison"] {
background-image: url("IMG URL") !important;
background-size:cover;
}
//Ground-type Field
#field_field>div.field[style*="ground1"] {
background-image: url("IMG URL") !important;
background-size:cover;
}
//Flying-type Field
#field_field>div.field[style*="flying"] {
background-image: url("IMG URL") !important;
background-size:cover;
}
//Psychic-type Field
#field_field>div.field[style*="psychic"] {
background-image: url("IMG URL") !important;
background-size:cover;
}
//Bug-type Field
#field_field>div.field[style*="bug"] {
background-image: url("IMG URL") !important;
background-size:cover;
}
//Rock-type Field
#field_field>div.field[style*="rock"] {
background-image: url("IMG URL") !important;
background-size:cover;
}
//Ghost-type Field
#field_field>div.field[style*="ghost"] {
background-image: url("IMG URL") !important;
background-size:cover;
}
//Dragon-type Field
#field_field>div.field[style*="dragon"] {
background-image: url("IMG URL") !important;
background-size:cover;
}
//Dark-type Field
#field_field>div.field[style*="dark"] {
background-image: url("IMG URL") !important;
background-size:cover;
}
//Steel-type Field
#field_field>div.field[style*="steel"] {
background-image: url("IMG URL") !important;
background-size:cover;
}
//Fairy-type Field
#field_field>div.field[style*="fairy"] {
background-image: url("IMG URL") !important;
background-size:cover;
}
Results!
Sort Field to Grid & Count
This code belongs to DrWho and sorts your fields into a grid, as well as provides a progress bar so you can keep track!
Code
/* DRWHO'S CSS */
/* stacking CSS */
/* Field CSS
Show Pokemon in a grid and create a progress bar*/
#field_field[data-mode=public] .fieldmon {
left: 0 !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
display: flex !important;
margin: 0 !important;
padding: 0 !important;
position: absolute !important;
justify-content: stretch;
align-items: stretch;
}
/* disable tooltip */
#field_field[data-mode=public] .fieldmon:hover + .tooltip_content {
display: none;
}
#field_field[data-mode=public] .fieldmon img {
flex-grow: 1;
animation: none !important;
background: none !important;
object-fit: none;
object-position: 0 0;
}
/* each pokemon causes a block to appear to make a progress bar, this is the block */
#field_field[data-mode=public] .fieldmon:after {
content: "";
display: block;
position: absolute;
box-sizing: border-box;
width: 10px;
height: 15px;
background: #cc4244;
border-right: 2px solid #262626;
}
/* the color of the block for fed pokemon */
#field_field[data-mode=public] .fieldmon.nothungry:after {
background: #f2da4b;
}
/* necesarry to make the sprite invisible, but keep the block in the progress bar */
#field_field[data-mode=public] > div.field > .fieldmon.nothungry {
opacity: 1;
}
#field_field[data-mode=public] > div.field > .fieldmon.nothungry > img {
opacity: 0;
}
/* draws the progress bar */
#field_field[data-mode=public] .fieldmon:nth-of-type(2):after { left: 10px; }
#field_field[data-mode=public] .fieldmon:nth-of-type(3):after { left: 20px; }
#field_field[data-mode=public] .fieldmon:nth-of-type(4):after { left: 30px; }
#field_field[data-mode=public] .fieldmon:nth-of-type(5):after { left: 40px; }
#field_field[data-mode=public] .fieldmon:nth-of-type(6):after { left: 50px; }
#field_field[data-mode=public] .fieldmon:nth-of-type(7):after { left: 60px; }
#field_field[data-mode=public] .fieldmon:nth-of-type(8):after { left: 70px; }
#field_field[data-mode=public] .fieldmon:nth-of-type(9):after { left: 80px; }
#field_field[data-mode=public] .fieldmon:nth-of-type(10):after { left: 90px; }
#field_field[data-mode=public] .fieldmon:nth-of-type(11):after { left: 100px; }
#field_field[data-mode=public] .fieldmon:nth-of-type(12):after { left: 110px; }
#field_field[data-mode=public] .fieldmon:nth-of-type(13):after { left: 120px; }
#field_field[data-mode=public] .fieldmon:nth-of-type(14):after { left: 130px; }
#field_field[data-mode=public] .fieldmon:nth-of-type(15):after { left: 140px; }
#field_field[data-mode=public] .fieldmon:nth-of-type(16):after { left: 150px; }
#field_field[data-mode=public] .fieldmon:nth-of-type(17):after { left: 160px; }
#field_field[data-mode=public] .fieldmon:nth-of-type(18):after { left: 170px; }
#field_field[data-mode=public] .fieldmon:nth-of-type(19):after { left: 180px; }
#field_field[data-mode=public] .fieldmon:nth-of-type(20):after { left: 190px; }
#field_field[data-mode=public] .fieldmon:nth-of-type(21):after { left: 200px; }
#field_field[data-mode=public] .fieldmon:nth-of-type(22):after { left: 210px; }
#field_field[data-mode=public] .fieldmon:nth-of-type(23):after { left: 220px; }
#field_field[data-mode=public] .fieldmon:nth-of-type(24):after { left: 230px; }
#field_field[data-mode=public] .fieldmon:nth-of-type(25):after { left: 240px; }
#field_field[data-mode=public] .fieldmon:nth-of-type(26):after { left: 250px; }
#field_field[data-mode=public] .fieldmon:nth-of-type(27):after { left: 260px; }
#field_field[data-mode=public] .fieldmon:nth-of-type(28):after { left: 270px; }
#field_field[data-mode=public] .fieldmon:nth-of-type(29):after { left: 280px; }
#field_field[data-mode=public] .fieldmon:nth-of-type(30):after { left: 290px; }
#field_field[data-mode=public] .fieldmon:nth-of-type(31):after { left: 300px; }
#field_field[data-mode=public] .fieldmon:nth-of-type(32):after { left: 310px; }
#field_field[data-mode=public] .fieldmon:nth-of-type(33):after { left: 320px; }
#field_field[data-mode=public] .fieldmon:nth-of-type(34):after { left: 330px; }
#field_field[data-mode=public] .fieldmon:nth-of-type(35):after { left: 340px; }
#field_field[data-mode=public] .fieldmon:nth-of-type(36):after { left: 350px; }
#field_field[data-mode=public] .fieldmon:nth-of-type(37):after { left: 360px; }
#field_field[data-mode=public] .fieldmon:nth-of-type(38):after { left: 370px; }
#field_field[data-mode=public] .fieldmon:nth-of-type(39):after { left: 380px; }
#field_field[data-mode=public] .fieldmon:nth-of-type(40):after { left: 390px; }
/* shows pokemon in a grid */
#field_field[data-mode=public] .fieldmon:nth-of-type(1) img { object-position: 0 0;}
#field_field[data-mode=public] .fieldmon:nth-of-type(2) img { object-position: 12.5% 0;}
#field_field[data-mode=public] .fieldmon:nth-of-type(3) img { object-position: 25% 0;}
#field_field[data-mode=public] .fieldmon:nth-of-type(4) img { object-position: 37.5% 0;}
#field_field[data-mode=public] .fieldmon:nth-of-type(5) img { object-position: 50% 0;}
#field_field[data-mode=public] .fieldmon:nth-of-type(6) img { object-position: 62.5% 0;}
#field_field[data-mode=public] .fieldmon:nth-of-type(7) img { object-position: 75% 0;}
#field_field[data-mode=public] .fieldmon:nth-of-type(8) img { object-position: 87.5% 0;}
#field_field[data-mode=public] .fieldmon:nth-of-type(9) img { object-position: 0 20%;}
#field_field[data-mode=public] .fieldmon:nth-of-type(10) img { object-position: 12.5% 20%;}
#field_field[data-mode=public] .fieldmon:nth-of-type(11) img { object-position: 25% 20%;}
#field_field[data-mode=public] .fieldmon:nth-of-type(12) img { object-position: 37.5% 20%;}
#field_field[data-mode=public] .fieldmon:nth-of-type(13) img { object-position: 50% 20%;}
#field_field[data-mode=public] .fieldmon:nth-of-type(14) img { object-position: 62.5% 20%;}
#field_field[data-mode=public] .fieldmon:nth-of-type(15) img { object-position: 75% 20%;}
#field_field[data-mode=public] .fieldmon:nth-of-type(16) img { object-position: 87.5% 20%;}
#field_field[data-mode=public] .fieldmon:nth-of-type(17) img { object-position: 0 40%;}
#field_field[data-mode=public] .fieldmon:nth-of-type(18) img { object-position: 12.5% 40%;}
#field_field[data-mode=public] .fieldmon:nth-of-type(19) img { object-position: 25% 40%;}
#field_field[data-mode=public] .fieldmon:nth-of-type(20) img { object-position: 37.5% 40%;}
#field_field[data-mode=public] .fieldmon:nth-of-type(21) img { object-position: 50% 40%;}
#field_field[data-mode=public] .fieldmon:nth-of-type(22) img { object-position: 62.5% 40%;}
#field_field[data-mode=public] .fieldmon:nth-of-type(23) img { object-position: 75% 40%;}
#field_field[data-mode=public] .fieldmon:nth-of-type(24) img { object-position: 87.5% 40%;}
#field_field[data-mode=public] .fieldmon:nth-of-type(25) img { object-position: 0 60%;}
#field_field[data-mode=public] .fieldmon:nth-of-type(26) img { object-position: 12.5% 60%;}
#field_field[data-mode=public] .fieldmon:nth-of-type(27) img { object-position: 25% 60%;}
#field_field[data-mode=public] .fieldmon:nth-of-type(28) img { object-position: 37.5% 60%;}
#field_field[data-mode=public] .fieldmon:nth-of-type(29) img { object-position: 50% 60%;}
#field_field[data-mode=public] .fieldmon:nth-of-type(30) img { object-position: 62.5% 60%;}
#field_field[data-mode=public] .fieldmon:nth-of-type(31) img { object-position: 75% 60%;}
#field_field[data-mode=public] .fieldmon:nth-of-type(32) img { object-position: 87.5% 60%;}
#field_field[data-mode=public] .fieldmon:nth-of-type(33) img { object-position: 0 80%;}
#field_field[data-mode=public] .fieldmon:nth-of-type(34) img { object-position: 12.5% 80%;}
#field_field[data-mode=public] .fieldmon:nth-of-type(35) img { object-position: 25% 80%;}
#field_field[data-mode=public] .fieldmon:nth-of-type(36) img { object-position: 37.5% 80%;}
#field_field[data-mode=public] .fieldmon:nth-of-type(37) img { object-position: 50% 80%;}
#field_field[data-mode=public] .fieldmon:nth-of-type(38) img { object-position: 62.5% 80%;}
#field_field[data-mode=public] .fieldmon:nth-of-type(39) img { object-position: 75% 80%;}
#field_field[data-mode=public] .fieldmon:nth-of-type(40) img { object-position: 87.5% 80%;}
Backgrounds
Keep Backgrounds Centered
This code is mine.
Code
body {
background-color: #COLOUR;
background-image: url("IMG URL");
background-size: 100%;
background-position: 100% center;
background-repeat: no-repeat;
background-attachment: fixed;
}
Results! (image is from unsplash)
Notification/Header Images
Notification Button Change
This specific code is not mine and can be found here in Corviknight's guide under "Notification Icon Modification!"
Code
#head-social > #notifs > a {
background-image: url("URL HERE");
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
#head-social > #notifs > a > img {
opacity: 0;
}
Results!
Floating Images in Header
This code is mine and is for making an image float in the dead space on your header!
Code
#header
{
background: url('URL HERE'), #COLOUR;
background-size: auto 100%;
background-repeat: no-repeat;
background-position: 60% 60%;}
Results! (credit)
Customize Currencies
This code is mine and is for making credits, zophan, and gold poke appear as custom icons!
Code
#head-middle > ul > li > #c_credits > img {
content: url("URL HERE");
}
#head-middle > ul > li > #c_zophan > img {
content: url("URL HERE");
}
#head-middle > ul > li > #c_gold > img {
content: url("URL HERE");
}
Results!
Customize Bonus Counters
This code was originally made by Aemilia, but was updated and will be upkept by me.
Code
/* Counter Images */
@Niet = url("URL HERE");
@Niet-Active = url("URL HERE");
@Niet-Hype = url("URL HERE");
@Garth = url("URL HERE");
@Garth-Active = url("URL HERE");
@Garth-Hype = url("URL HERE");
@Suri = url("URL HERE");
@Suri-Active = url("URL HERE");
@Suri-Hype = url("URL HERE");
@Ravyne = url("URL HERE");
@Ravyne-Active = url("URL HERE");
@Rayvne-Hype = url("URL HERE");
@Novan = url("URL HERE");
@Novan-Active = url("URL HERE");
@Novan-Hype = url("URL HERE");
@Shazi = url("URL HERE");
@Shazi-Active = url("URL HERE");
@Shazi-Hype = url("URL HERE");
@Elta = url("URL HERE");
@Elta-Active = url("URL HERE");
@Elta-Hype = url("URL HERE");
@Sei = url("URL HERE");
@Sei-Active = url("URL HERE");
@Sei-Hype = url("URL HERE");
/* Names */
@Niet-Name = "Niet";
@Garth-Name = "Garthic";
@Suri-Name = "Suriya";
@Ravyne-Name = "Rayvne";
@Novan-Name = "Novan-chan";
@Shazi-Name = "Shazi";
@Elta-Name = "Eltafez";
@Sei-Name = "Sei";
/* DO NOT MODIFY PAST THIS POINT */
div#counters > ul#counterlist
{
/* Niet Counter/EXP Gain */
> li:first-child
{
background-image: @Niet !important;
> div.tooltip_content
{
> img
{
display: block;
box-sizing: border-box;
-moz-box-sizing: border-box;
background: @Niet center no-repeat;
height: 48px;
width: 40px;
padding-left: 45px;
}
> h3
{
visibility: hidden;
position: relative;
&:after
{
visibility: visible;
position: absolute;
top: 0;
left: 55px;
content: @Niet-Name;
}
}
}
}
> li.active:first-child
{
background-image: @Niet-Active !important;
> div.tooltip_content
{
> img
{
display: block;
box-sizing: border-box;
-moz-box-sizing: border-box;
background: @Niet center no-repeat;
height: 48px;
width: 40px;
padding-left: 45px;
}
> h3
{
visibility: hidden;
position: relative;
&:after
{
visibility: visible;
position: absolute;
top: 0;
left: 55px;
content: @Niet-Name;
}
}
}
}
> li.zophan:first-child
{
background-image: @Niet-Hype !important;
> div.tooltip_content
{
> img
{
display: block;
box-sizing: border-box;
-moz-box-sizing: border-box;
background: @Niet center no-repeat;
height: 48px;
width: 40px;
padding-left: 45px;
}
> h3
{
visibility: hidden;
position: relative;
&:after
{
visibility: visible;
position: absolute;
top: 0;
left: 55px;
content: @Niet-Name;
}
}
}
}
/* Garth/IP Gain */
> li:nth-child(2)
{
background-image: @Garth !important;
> div.tooltip_content
{
> img
{
display: block;
box-sizing: border-box;
-moz-box-sizing: border-box;
background: @Garth center no-repeat;
height: 48px;
width: 40px;
padding-left: 45px;
}
> h3
{
visibility: hidden;
position: relative;
&:after
{
visibility: visible;
position: absolute;
top: 0;
left: 55px;
content: @Garth-Name;
}
}
}
}
> li.active:nth-child(2)
{
background-image: @Garth-Active !important;
> div.tooltip_content
{
> img
{
display: block;
box-sizing: border-box;
-moz-box-sizing: border-box;
background: @Garth center no-repeat;
height: 48px;
width: 40px;
padding-left: 45px;
}
> h3
{
visibility: hidden;
position: relative;
&:after
{
visibility: visible;
position: absolute;
top: 0;
left: 55px;
content: @Garth-Name;
}
}
}
}
> li.zophan:nth-child(2)
{
background-image: @Garth-Hype !important;
> div.tooltip_content
{
> img
{
display: block;
box-sizing: border-box;
-moz-box-sizing: border-box;
background: @Garth center no-repeat;
height: 48px;
width: 40px;
padding-left: 45px;
}
> h3
{
visibility: hidden;
position: relative;
&:after
{
visibility: visible;
position: absolute;
top: 0;
left: 55px;
content: @Garth-Name;
}
}
}
}
/* Suriya/Scours */
> li:nth-child(3)
{
background-image: @Suri !important;
> div.tooltip_content
{
> img
{
display: block;
box-sizing: border-box;
-moz-box-sizing: border-box;
background: @Suri center no-repeat;
height: 48px;
width: 40px;
padding-left: 45px;
}
> h3
{
visibility: hidden;
position: relative;
&:after
{
visibility: visible;
position: absolute;
top: 0;
left: 55px;
content: @Suri-Name;
}
}
}
}
> li.active:nth-child(3)
{
background-image: @Suri-Active !important;
> div.tooltip_content
{
> img
{
display: block;
box-sizing: border-box;
-moz-box-sizing: border-box;
background: @Suri center no-repeat;
height: 48px;
width: 40px;
padding-left: 45px;
}
> h3
{
visibility: hidden;
position: relative;
&:after
{
visibility: visible;
position: absolute;
top: 0;
left: 55px;
content: @Suri-Name;
}
}
}
}
> li.zophan:nth-child(3)
{
background-image: @Suri-Hype !important;
> div.tooltip_content
{
> img
{
display: block;
box-sizing: border-box;
-moz-box-sizing: border-box;
background: @Suri center no-repeat;
height: 48px;
width: 40px;
padding-left: 45px;
}
> h3
{
visibility: hidden;
position: relative;
&:after
{
visibility: visible;
position: absolute;
top: 0;
left: 55px;
content: @Suri-Name;
}
}
}
}
/* Ravyne/Gems */
> li:nth-child(4)
{
background-image: @Ravyne !important;
> div.tooltip_content
{
> img
{
display: block;
box-sizing: border-box;
-moz-box-sizing: border-box;
background: @Ravyne center no-repeat;
height: 48px;
width: 40px;
padding-left: 45px;
}
> h3
{
visibility: hidden;
position: relative;
&:after
{
visibility: visible;
position: absolute;
top: 0;
left: 55px;
content: @Ravyne-Name;
}
}
}
}
> li.active:nth-child(4)
{
background-image: @Ravyne-Active !important;
> div.tooltip_content
{
> img
{
display: block;
box-sizing: border-box;
-moz-box-sizing: border-box;
background: @Ravyne center no-repeat;
height: 48px;
width: 40px;
padding-left: 45px;
}
> h3
{
visibility: hidden;
position: relative;
&:after
{
visibility: visible;
position: absolute;
top: 0;
left: 55px;
content: @Ravyne-Name;
}
}
}
}
> li.zophan:nth-child(4)
{
background-image: @Ravyne-Hype !important;
> div.tooltip_content
{
> img
{
display: block;
box-sizing: border-box;
-moz-box-sizing: border-box;
background: @Ravyne center no-repeat;
height: 48px;
width: 40px;
padding-left: 45px;
}
> h3
{
visibility: hidden;
position: relative;
&:after
{
visibility: visible;
position: absolute;
top: 0;
left: 55px;
content: @Ravyne-Name;
}
}
}
}
/* Novan/Credits Discount */
> li:nth-child(5)
{
background-image: @Novan !important;
> div.tooltip_content
{
> img
{
display: block;
box-sizing: border-box;
-moz-box-sizing: border-box;
background: @Novan center no-repeat;
height: 48px;
width: 40px;
padding-left: 45px;
}
> h3
{
visibility: hidden;
position: relative;
&:after
{
visibility: visible;
position: absolute;
top: 0;
left: 55px;
content: @Novan-Name;
}
}
}
}
> li.active:nth-child(5)
{
background-image: @Novan-Active !important;
> div.tooltip_content
{
> img
{
display: block;
box-sizing: border-box;
-moz-box-sizing: border-box;
background: @Novan center no-repeat;
height: 48px;
width: 40px;
padding-left: 45px;
}
> h3
{
visibility: hidden;
position: relative;
&:after
{
visibility: visible;
position: absolute;
top: 0;
left: 55px;
content: @Novan-Name;
}
}
}
}
> li.zophan:nth-child(5)
{
background-image: @Novan-Hype !important;
> div.tooltip_content
{
> img
{
display: block;
box-sizing: border-box;
-moz-box-sizing: border-box;
background: @Novan center no-repeat;
height: 48px;
width: 40px;
padding-left: 45px;
}
> h3
{
visibility: hidden;
position: relative;
&:after
{
visibility: visible;
position: absolute;
top: 0;
left: 55px;
content: @Novan-Name;
}
}
}
}
/* Shazi/Shelter Adopts */
> li:nth-child(6)
{
background-image: @Shazi !important;
> div.tooltip_content
{
> img
{
display: block;
box-sizing: border-box;
-moz-box-sizing: border-box;
background: @Shazi center no-repeat;
height: 48px;
width: 40px;
padding-left: 45px;
}
> h3
{
visibility: hidden;
position: relative;
&:after
{
visibility: visible;
position: absolute;
top: 0;
left: 55px;
content: @Shazi-Name;
}
}
}
}
> li.active:nth-child(6)
{
background-image: @Shazi-Active !important;
> div.tooltip_content
{
> img
{
display: block;
box-sizing: border-box;
-moz-box-sizing: border-box;
background: @Shazi center no-repeat;
height: 48px;
width: 40px;
padding-left: 45px;
}
> h3
{
visibility: hidden;
position: relative;
&:after
{
visibility: visible;
position: absolute;
top: 0;
left: 55px;
content: @Shazi-Name;
}
}
}
}
> li.zophan:nth-child(6)
{
background-image: @Shazi-Hype !important;
> div.tooltip_content
{
> img
{
display: block;
box-sizing: border-box;
-moz-box-sizing: border-box;
background: @Shazi center no-repeat;
height: 48px;
width: 40px;
padding-left: 45px;
}
> h3
{
visibility: hidden;
position: relative;
&:after
{
visibility: visible;
position: absolute;
top: 0;
left: 55px;
content: @Shazi-Name;
}
}
}
}
/* Elta/GP Discount */
> li:nth-child(7)
{
background-image: @Elta !important;
> div.tooltip_content
{
> img
{
display: block;
box-sizing: border-box;
-moz-box-sizing: border-box;
background: @Elta center no-repeat;
height: 48px;
width: 40px;
padding-left: 45px;
}
> h3
{
visibility: hidden;
position: relative;
&:after
{
visibility: visible;
position: absolute;
top: 0;
left: 55px;
content: @Elta-Name;
}
}
}
}
> li.active:nth-child(7)
{
background-image: @Elta-Active !important;
> div.tooltip_content
{
> img
{
display: block;
box-sizing: border-box;
-moz-box-sizing: border-box;
background: @Elta center no-repeat;
height: 48px;
width: 40px;
padding-left: 45px;
}
> h3
{
visibility: hidden;
position: relative;
&:after
{
visibility: visible;
position: absolute;
top: 0;
left: 55px;
content: @Elta-Name;
}
}
}
}
> li.zophan:nth-child(7)
{
background-image: @Elta-Hype !important;
> div.tooltip_content
{
> img
{
display: block;
box-sizing: border-box;
-moz-box-sizing: border-box;
background: @Elta center no-repeat;
height: 48px;
width: 40px;
padding-left: 45px;
}
> h3
{
visibility: hidden;
position: relative;
&:after
{
visibility: visible;
position: absolute;
top: 0;
left: 55px;
content: @Elta-Name;
}
}
}
}
/* Sei/Shiny Boost */
> li:nth-child(8)
{
background-image: @Sei !important;
> div.tooltip_content
{
> img
{
display: block;
box-sizing: border-box;
-moz-box-sizing: border-box;
background: @Sei center no-repeat;
height: 48px;
width: 40px;
padding-left: 45px;
}
> h3
{
visibility: hidden;
position: relative;
&:after
{
visibility: visible;
position: absolute;
top: 0;
left: 55px;
content: @Sei-Name;
}
}
}
}
> li.active:nth-child(8)
{
background-image: @Sei-Active !important;
> div.tooltip_content
{
> img
{
display: block;
box-sizing: border-box;
-moz-box-sizing: border-box;
background: @Sei center no-repeat;
height: 48px;
width: 40px;
padding-left: 45px;
}
> h3
{
visibility: hidden;
position: relative;
&:after
{
visibility: visible;
position: absolute;
top: 0;
left: 55px;
content: @Sei-Name;
}
}
}
}
> li.zophan:nth-child(8)
{
background-image: @Sei-Hype !important;
> div.tooltip_content
{
> img
{
display: block;
box-sizing: border-box;
-moz-box-sizing: border-box;
background: @Sei center no-repeat;
height: 48px;
width: 40px;
padding-left: 45px;
}
> h3
{
visibility: hidden;
position: relative;
&:after
{
visibility: visible;
position: absolute;
top: 0;
left: 55px;
content: @Sei-Name;
}
}
}
}
}
Results!
Removes Social Media Links
This code is from Aemilia and removes the annoying social media icons from your bar!
Code
#announcements > ul > li.spacer ~ li {
display: none;
}
Image in Timers Bar
This code is by Aemilia and adds an image to your timers bar! If used with the thing to remove social media icons, it goes where they normally would be!
Code
/* tugglesssss */
#announcements>ul>li.spacer{
width:230px!important;
Height:40px;
margin-left: -4px;
background-image: url('https://i.ibb.co/DfxK2k3/tuggle.png');
background-attachment:scroll;
background-repeat: no-repeat; !important
}
Smaller Header Font
This code is just. A general code, lol. It makes the font size smaller!
Code
#header {
font-size: 10pt;
}
Trainer/Trainer Cards
Custom Trainer Image
This code is mine, with credit to Aemilia and AstrayedHannah for helping me figure all of this out! We all put a lot of work into it. This changes the way YOUR specific trainer appears, but your image has to be within 300px by 600px in order to fit properly. The background size needs to be the exact dimensions of your image, but no bigger than 300px (width) by 600px (height).
Code
:root:has([data-menu=editcard]) #trainerimage image {
display: none;
}
:root:has([data-menu=editcard]) #trainerimage{
height: 600px!important;
width: 300px!important;
background: url('URL HERE'), @col-bg3;
background-position: center center;
background-repeat: no-repeat;
background-size: 250px 500px;
&::before {content: none;}
}
Results!
Custom Trainer Card Image
This code is mine! I edited it from the previous code and made it work so only YOUR specific trainer card image is changed.Your image will need to be 100px by 100px.
Code
:root:has([data-menu=editcard]) #trainercard > div.tc-sprite {
height: 100px!important;
width: 100px!important;
content: url('URL HERE');
}
Results!
Custom Trainer Card Colors
This code belongs to Corviknight and can be found, once again, in their guide!
Code
#trainercard>div.tc-ballicon, #trainercard>div.tc-ballicon:before,
#trainercard>div.tc-header {
background-color: #COLOUR !important;
border: 2px #COLOUR !important;
color: #COLOUR !important;
}
#trainercard>div.tc-name {
color: #COLOUR !important;
}
#trainercard>div.tc-joined, #trainercard>div.tc-starter, #trainercard>div.tc-rank, #trainercard>div.tc-sprite, #trainercard>div.tc-badges {
background-color: #COLOUR !important;
color: #COLOUR !important;
border: 2px #COLOUR !important;
}
#trainercard:before, #trainercard>div.tc-ballicon:after {
background-color: #COLOUR !important;
border: 2px #COLOUR !important;
}
#trainercard>div.tc-status, #trainercard {
border: 2px solid #COLOUR !important;
background-color: #COLOUR !important;
}
Results!
Custom Trainer Card Colors (based on number of stars)
This code is made by Aemilia and will be upkept by me!
Code
#trainercard {
>div.tc-ballicon, >div.tc-ballicon:before, >div.tc-header {
background-color: #COLOUR;
border: none;
color: #COLOUR;
font-size: 12pt;
}
>div.tc-name {
color: #COLOUR;
font-size: 12pt;
}
>div.tc-joined, >div.tc-starter, >div.tc-rank, >div.tc-sprite, >div.tc-badges {
background-color: #COLOUR;
color: #COLOUR;
border: 1px solid #COLOUR;
}
&:before, >div.tc-ballicon:after {
background-color: #COLOUR;
border: none;
}
>div.tc-status, & {
border: 2px solid #COLOUR;
background-color: #COLOUR;
color: #COLOUR;
a,a:link,a:hover,a:active, a:visited{color: inherit;}
}
}
div#trainercard_preview{
border: 2px solid #COLOUR;
background-color: #COLOUR;
color: #COLOUR;
a,a:link,a:hover,a:active, a:visited{color: inherit;}
}
#trainercard.bronze {
>div.tc-ballicon, >div.tc-ballicon:before, >div.tc-header {
background-color: #COLOUR;
border: none;
color: #COLOUR;
font-size: 12pt;
}
>div.tc-name {
color: #COLOUR;
font-size: 12pt;
}
>div.tc-joined, >div.tc-starter, >div.tc-rank, >div.tc-sprite, >div.tc-badges {
background-color: #COLOUR;
color: #COLOUR;
border: 1px solid #COLOUR;
}
&:before, >div.tc-ballicon:after {
background-color: #COLOUR;
border: none;
}
>div.tc-status, & {
border: 2px solid #COLOUR;
background-color: #COLOUR;
color: #COLOUR;
a,a:link,a:hover,a:active, a:visited{color: inherit;}
}
}
#trainercard.silver {
>div.tc-ballicon, >div.tc-ballicon:before, >div.tc-header {
background-color: #COLOUR;
border: none;
color: #COLOUR;
font-size: 12pt;
}
>div.tc-name {
color: #COLOUR;
font-size: 12pt;
}
>div.tc-joined, >div.tc-starter, >div.tc-rank, >div.tc-sprite, >div.tc-badges {
background-color: #COLOUR;
color: #COLOUR;
border: 1px solid #COLOUR;
}
&:before, >div.tc-ballicon:after {
background-color: #COLOUR;
border: none;
}
>div.tc-status, & {
border: 2px solid #COLOUR;
background-color: #COLOUR;
color: #COLOUR;
a,a:link,a:hover,a:active, a:visited{color: inherit;}
}
}
#trainercard.gold {
>div.tc-ballicon, >div.tc-ballicon:before, >div.tc-header {
background-color: #COLOUR;
border: none;
color: #COLOUR;
font-size: 12pt;
}
>div.tc-name {
color: #COLOUR;
font-size: 12pt;
}
>div.tc-joined, >div.tc-starter, >div.tc-rank, >div.tc-sprite, >div.tc-badges {
background-color: #COLOUR;
color: #COLOUR;
border: 1px solid #COLOUR;
}
&:before, >div.tc-ballicon:after {
background-color: #COLOUR;
border: none;
}
>div.tc-status, & {
border: 2px solid #COLOUR;
background-color: #COLOUR;
color: #COLOUR;
a,a:link,a:hover,a:active, a:visited{color: inherit;}
}
}
Party Backgrounds
Transparent/Colored Party Backgrounds
This code is mine and is just as easy as it looks. Simply change the COLOUR to whatever color you want, and if you want it to be transparent, write transparent instead of a hex code and delete the hashtag.
Code
.party > div
{background: #COLOUR;}
Results!
Custom Berries
All of these codes are by Mirzam or Neonyan with permission! All you have to do is just copy the codes, edits needed!Pi Day Berries
Edited to have the Pi Day berries!
Code
.berries[style*="aspearberry.png"]
{
background-image:url("https://pokefarm.wiki/images/d/d5/Pie_Aspear_Meringue.png")!important;
}
img[src*="aspearberry.png"]
{
content:url("https://pokefarm.wiki/images/d/d5/Pie_Aspear_Meringue.png");
}
.berries[style*="cheriberry.png"]
{
background-image:url("https://pokefarm.wiki/images/5/5c/Pie_Lattice_Cheri.png")!important;
}
img[src*="cheriberry.png"]
{
content:url("https://pokefarm.wiki/images/5/5c/Pie_Lattice_Cheri.png");
}
.berries[style*="chestoberry.png"]
{
background-image:url("https://pokefarm.wiki/images/1/13/Pie_Chesto_Crumble.png")!important;
}
img[src*="chestoberry.png"]
{
content:url("https://pokefarm.wiki/images/1/13/Pie_Chesto_Crumble.png");
}
.berries[style*="aspear"]
{
background-image:url("https://pokefarm.wiki/images/d/d5/Pie_Aspear_Meringue.png")!important;
}
img[src*="aspear"]
{
content:url("https://pokefarm.wiki/images/d/d5/Pie_Aspear_Meringue.png");
}
.berries[style*="cheri"]
{
background-image:url("https://pokefarm.wiki/images/5/5c/Pie_Lattice_Cheri.png")!important;
}
img[src*="cheri"]
{
content:url("https://pokefarm.wiki/images/5/5c/Pie_Lattice_Cheri.png");
}
.berries[style*="chesto"]
{
background-image:url("https://pokefarm.wiki/images/1/13/Pie_Chesto_Crumble.png")!important;
}
img[src*="chesto"]
{
content:url("https://pokefarm.wiki/images/1/13/Pie_Chesto_Crumble.png");
}
.berries[style*="pecha"]
{
background-image:url("https://pokefarm.wiki/images/7/7a/Pie_Pecha.png")!important;
}
img[src*="pecha"]
{
content:url("https://pokefarm.wiki/images/7/7a/Pie_Pecha.png");
}
.berries[style*="rawst"]
{
background-image:url("https://pokefarm.wiki/images/9/9b/Tart_Rawst_Berry.png")!important;
}
img[src*="rawst"]
{
content:url("https://pokefarm.wiki/images/9/9b/Tart_Rawst_Berry.png");
}
.party > div:hover > .action a[data-berry]::after {
border-color: transparent;
}
// Fit image into the space it's supposed to go into
.party > div > .action > .berrybuttons > a > img {
max-width: 85%;
max-height: 85%;
padding: 3px;
padding-top: 0px;
}
Halloween Berries
Edited to have the Halloween berries!
Code
.berries[style*="aspearberry.png"]
{
background-image:url("https://pfq-static.com/img/events/halloween/sour.candy.big.png")!important;
}
img[src*="aspearberry.png"]
{
content:url("https://pfq-static.com/img/events/halloween/sour.candy.big.png");
}
.berries[style*="cheriberry.png"]
{
background-image:url("https://pfq-static.com/img/events/halloween/spicy.candy.big.png")!important;
}
img[src*="cheriberry.png"]
{
content:url("https://pfq-static.com/img/events/halloween/spicy.candy.big.png");
}
.berries[style*="chestoberry.png"]
{
background-image:url("https://pfq-static.com/img/events/halloween/dry.candy.big.png")!important;
}
img[src*="chestoberry.png"]
{
content:url("https://pfq-static.com/img/events/halloween/dry.candy.big.png");
}
.berries[style*="aspear"]
{
background-image:url("https://pfq-static.com/img/events/halloween/sour.candy.big.png")!important;
}
img[src*="aspear"]
{
content:url("https://pfq-static.com/img/events/halloween/sour.candy.big.png");
}
.berries[style*="cheri"]
{
background-image:url("https://pfq-static.com/img/events/halloween/spicy.candy.big.png")!important;
}
img[src*="cheri"]
{
content:url("https://pfq-static.com/img/events/halloween/spicy.candy.big.png");
}
.berries[style*="chesto"]
{
background-image:url("https://pfq-static.com/img/events/halloween/dry.candy.big.png")!important;
}
img[src*="chesto"]
{
content:url("https://pfq-static.com/img/events/halloween/dry.candy.big.png");
}
.berries[style*="pecha"]
{
background-image:url("https://pfq-static.com/img/events/halloween/sweet.candy.big.png")!important;
}
img[src*="pecha"]
{
content:url("https://pfq-static.com/img/events/halloween/sweet.candy.big.png");
}
.berries[style*="rawst"]
{
background-image:url("https://pfq-static.com/img/events/halloween/bitter.candy.big.png")!important;
}
img[src*="rawst"]
{
content:url("https://pfq-static.com/img/events/halloween/bitter.candy.big.png");
}
.party > div:hover > .action a[data-berry]::after {
border-color: transparent;
}
// Fit image into the space it's supposed to go into
.party > div > .action > .berrybuttons > a > img {
max-width: 85%;
max-height: 85%;
padding: 3px;
padding-top: 0px;
}
Christmas Berries
Edited to have the Christmas/holiday berries!
Code
/* big berries */
@sour-big: url("https://pfq-static.com/img/events/christmas/sour.sweet.big.png");
@spicy-big: url("https://pfq-static.com/img/events/christmas/spicy.sweet.big.png");
@dry-big: url("https://pfq-static.com/img/events/christmas/dry.sweet.big.png");
@sweet-big: url("https://pfq-static.com/img/events/christmas/sweet.sweet.big.png");
@bitter-big: url("https://pfq-static.com/img/events/christmas/bitter.sweet.big.png");
/* small berries */
@sour-small: url("https://pfq-static.com/img/events/christmas/sour.sweet.png");
@spicy-small: url("https://pfq-static.com/img/events/christmas/spicy.sweet.png");
@dry-small: url("https://pfq-static.com/img/events/christmas/dry.sweet.png");
@sweet-small: url("https://pfq-static.com/img/events/christmas/sweet.sweet.png");
@bitter-small: url("https://pfq-static.com/img/events/christmas/bitter.sweet.png");
/* --- do not change below this line --- */
/* small berries */
#profilepage .berrybuttons {
a[data-berry="aspear"] img,
a[data-berry="cheri"] img,
a[data-berry="chesto"] img,
a[data-berry="pecha"] img,
a[data-berry="rawst"] img {
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
height: 0;
padding-top: 24px;
width: 24px;
}
a[data-berry="aspear"] img {
background-image: @sour-small !important;
}
a[data-berry="cheri"] img {
background-image: @spicy-small !important;
}
a[data-berry="chesto"] img {
background-image: @dry-small !important;
}
a[data-berry="pecha"] img {
background-image: @sweet-small !important;
}
a[data-berry="rawst"] img {
background-image: @bitter-small !important;
}
}
/* big berries */
#partypage .berrybuttons,
#summarypage .berrybuttons,
#field_berries {
a[data-berry="aspear"] img,
a[data-berry="cheri"] img,
a[data-berry="chesto"] img,
a[data-berry="pecha"] img,
a[data-berry="rawst"] img {
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
height: 0;
padding-top: 52px;
width: 40px;
}
a[data-berry="aspear"] img {
background-image: @sour-big !important;
}
a[data-berry="cheri"] img {
background-image: @spicy-big !important;
}
a[data-berry="chesto"] img {
background-image: @dry-big !important;
}
a[data-berry="pecha"] img {
background-image: @sweet-big !important;
}
a[data-berry="rawst"] img {
background-image: @bitter-big !important;
}
}
/* field drag may not work during holidays */
.berrydragghost {
background-position: center center;
background-repeat: no-repeat;
background-size: contain;
}
.berrydragghost[style*="/img/items/aspearberry.png"] {
background-image: @sour-small !important;
}
.berrydragghost[style*="/img/items/cheriberry.png"] {
background-image: @spicy-small !important;
}
.berrydragghost[style*="/img/items/chestoberry.png"] {
background-image: @dry-small !important;
}
.berrydragghost[style*="/img/items/pechaberry.png"] {
background-image: @sweet-small !important;
}
.berrydragghost[style*="/img/items/rawstberry.png"] {
background-image: @bitter-small !important;
}
Valentine's Day Berries
Edited to have the V-Day berries!
Code
.berries[style*="aspearberry.png"]
{
background-image:url("https://pfq-static.com/img/events/valentine/sour.dessert.big.png")!important;
}
img[src*="aspearberry.png"]
{
content:url("https://pfq-static.com/img/events/valentine/sour.dessert.big.png");
}
.berries[style*="cheriberry.png"]
{
background-image:url("https://pfq-static.com/img/events/valentine/spicy.dessert.big.png")!important;
}
img[src*="cheriberry.png"]
{
content:url("https://pfq-static.com/img/events/valentine/spicy.dessert.big.png");
}
.berries[style*="chestoberry.png"]
{
background-image:url("https://pfq-static.com/img/events/valentine/dry.dessert.big.png")!important;
}
img[src*="chestoberry.png"]
{
content:url("https://pfq-static.com/img/events/valentine/dry.dessert.big.png");
}
.berries[style*="aspear"]
{
background-image:url("https://pfq-static.com/img/events/valentine/sour.dessert.big.png")!important;
}
img[src*="aspear"]
{
content:url("https://pfq-static.com/img/events/valentine/sour.dessert.big.png");
}
.berries[style*="cheri"]
{
background-image:url("https://pfq-static.com/img/events/valentine/spicy.dessert.big.png")!important;
}
img[src*="cheri"]
{
content:url("https://pfq-static.com/img/events/valentine/spicy.dessert.big.png");
}
.berries[style*="chesto"]
{
background-image:url("https://pfq-static.com/img/events/valentine/dry.dessert.big.png")!important;
}
img[src*="chesto"]
{
content:url("https://pfq-static.com/img/events/valentine/dry.dessert.big.png");
}
.berries[style*="pecha"]
{
background-image:url("https://pfq-static.com/img/events/valentine/sweet.dessert.big.png")!important;
}
img[src*="pecha"]
{
content:url("https://pfq-static.com/img/events/valentine/sweet.dessert.big.png");
}
.berries[style*="rawst"]
{
background-image:url("https://pfq-static.com/img/events/valentine/bitter.dessert.big.png")!important;
}
img[src*="rawst"]
{
content:url("https://pfq-static.com/img/events/valentine/bitter.dessert.big.png");
}
.party > div:hover > .action a[data-berry]::after {
border-color: transparent;
}
// Fit image into the space it's supposed to go into
.party > div > .action > .berrybuttons > a > img {
max-width: 85%;
max-height: 85%;
padding: 3px;
padding-top: 0px;
}
Extras
Party Click Mod (Showcase Inclusive)
This code is by Neonyan and myself, and is based off DrWho's party clicking modifications! It allows you to consistently click with little to no hassle! It also works on mobile!
Code
//**DRWHO'S PARTY CLICK ADJUSTMENTS**//
:root {
--multiuser-button-height: 5em;
--multiuser-border-radius: 8px;
}
@media only screen and (max-width:800px) {
:root {
--multiuser-button-height: 500px;
}
#multiuser #profilebox,
#multiuser div.center.small,
#multiuser mu_navlink.prev,
#multiuser a.fieldslink {
display: none;
}
#multiuser div.party.wide {
position: absolute;
top: 0px;
left: 0px;
width: 100%;
}
}
#multiuser h1 {
/* fix that icon next to name causes jumps */
display: flex;
justify-content: center;
align-items: center;
}
.mq2 #content {
padding-top: 0;
}
.mq25 #partybox, .mq25 .multi-compact #partybox {
width: 90%;
}
.mq25 #multiuser #partybox .showcase {
display: flex;
}
.mq25 #multiuser #partybox .mu_navlink.toggle {
display: none;
}
.mq25 #multiuser #partybox .compact-view-toggle {
display: none;
}
.mq25 #multiuser .mu_navlink.prev,
.mq25 #multiuser #partybox > label {
position: absolute;
bottom: 0;
margin: 0;
padding: 8px;
border-radius: var(--multiuser-border-radius);
background-color: @col-bg1;
border: 1px solid @col-border1;
}
.mq25 #multiuser #partybox > label {
right: 0;
}
.mq25 #multiuser #profilepage .showcase > div > .pkmn.plateform,
.mq25 #multiuser #profilepage .showcase > div > .name,
.mq25 #multiuser #profilepage .showcase > div > .icons,
.mq25 #multiuser #profilepage .showcase > div > .fieldslink {
display: none;
}
.mq25 #multiuser .showcase {
background: transparent;
border: 0;
}
.mq25 #multiuser #profilepage {
width: 100%;
align-items: center;
justify-content: center;
}
.mq25 #multiuser .tab-active {
margin: 0;
left: 0;
right: 0;
height: auto;
box-shadow: none;
}
#multiuser #partybox {
/* else next button touches the trainer card directly */
margin-right: 1em;
}
.mq25 #multiuser #partybox {
/* reset for mobile */
margin-right: 0;
}
#multiuser #partybox .party > div {
/* by making this static we can place the buttons
relative to the partybox */
position: static;
}
#multiuser #partybox {
position: relative;
padding-top: calc(var(--multiuser-button-height) + 1em)
}
#multiuser #partybox .action {
/* action button (hold the egg or berry) */
position: absolute;
/*allows for collapse when done*/
min-height: 0;
height: auto;
top: 0;
left: 0;
box-sizing: border-box;
width: 100%;
z-index: 9999;
}
#multiuser.tabbed_interface.horizontal > div {
box-shadow: none;
}
#multiuser.tabbed_interface.horizontal > ul {
flex-wrap: nowrap;
align-items: center;
justify-content: center;
width: 100%;
}
#multiuser.tabbed_interface.horizontal > ul > li {
padding: 0;
marign: 0;
font-size: 8pt;
border: 0;
text-align: center;
width: 0px;
overflow: hidden;
}
#multiuser.tabbed_interface.horizontal > ul > li.tab-active {
min-width: fit-content;
font-size: 12pt;
}
#multiuser #profilepage .showcase > div > .action > .berrybuttons > a {
/* adjust showcase button */
display: flex;
align-items: center;
justify-content: center;
}
#multiuser #partybox .action > a,
#multiuser #partybox .showcase > div > .action > .berrybuttons > a,
#multiuser #partybox .action > div,
#multiuser #partybox .mu_navlink.next {
/* next button AND action button*/
padding-right: 1em;
border: 0;
box-sizing: border-box;
font-size: 12pt;
padding: 0;
margin: 0;
min-height: var(--multiuser-button-height);
line-height: var(--multiuser-button-height);
}
#multiuser #partybox .action > a,
#multiuser #partybox .showcase > div > .action > .berrybuttons > a {
display: flex;
align-items: center;
justify-content: center;
}
#multiuser #partybox .mu_navlink.next {
/* next button */
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
min-width: 100%;
z-index: 9997;
border-radius: var(--multiuser-border-radius);
}
#multiuser #partybox .action:empty,
#multiuser #partybox .action > table,
#multiuser #partybox .action.working,
#multiuser #partybox .berrybuttons > .tooltip_content {
/*hide action when it is *empty *processing the berry
or *showing "Thank you!" */
display: none;
}
#multiuser #partybox .berrybuttons > a {
/*only 1 berry per berrybuttons*/
display: none;
box-sizing: border-box;
height: 100%;
width: 100%;
line-height: var(--multiuser-button-height);
}
#multiuser #partybox .berrybuttons[data-up='sour'] > a[data-berry='aspear'],
#multiuser #partybox .berrybuttons[data-up='spicy'] > a[data-berry='cheri'],
#multiuser #partybox .berrybuttons[data-up='dry'] > a[data-berry='chesto'],
#multiuser #partybox .berrybuttons[data-up='sweet'] > a[data-berry='pecha'],
#multiuser #partybox .berrybuttons[data-up='bitter'] > a[data-berry='rawst'],
#multiuser #partybox .berrybuttons[data-up='any'] > a:first-of-type {
/*show only good berries*/
display: inline-block;
border-radius: var(--multiuser-border-radius);
background-color: @col-flavour-up;
}
#multiuser #profilepage .party > div:hover > .action a[data-berry]::after,
#multiuser #profilepage .showcase > div:hover > .action a[data-berry]::after {
/* no border on berry hover */
border-color: transparent;
}
Image in Daycare Empty Space
This code is from Aemilia and adds images to the empty/dead space in the daycare!
Code
#dcpokemon{
background-image: url('LINK');
background-repeat: no-repeat;
background-position: top center;
}
Image in Personal Link Box
This code is from Aemilia and adds images to the empty/dead space in the box where your user links are!
Code
#partypage #partybox #profilelinks{
background-image: url('LINK');
background-repeat: no-repeat;
background-size: auto 100%;
background-position: center !important;
}
Eggsweeper Customization/Accessibility
This code is by me and allows you to customize the content and colors of your eggsweeper board for the numbers 1-8!
Code
#eggsweeper > .board > div > div > div.revealed {
text-indent: -7777777px;
}
& div.revealed::after {
display: flex;
position: absolute;
align-items: center;
justify-content: center;
inset: 0;
text-indent: 0px;
}
#eggsweeper > .board > div > div > div.revealed.n1 {
background-color: #COLOUR;
color: #COLOUR;
}
& div.revealed.n1::after {
content:"1"
}
#eggsweeper > .board > div > div > div.revealed.n2 {
background-color: #COLOUR;
color: #COLOUR;
}
& div.revealed.n2::after {
content:"2"
}
#eggsweeper > .board > div > div > div.revealed.n3 {
background-color: #COLOUR;
color: #COLOUR;
}
& div.revealed.n3::after {
content:"3"
}
#eggsweeper > .board > div > div > div.revealed.n4 {
background-color: #COLOUR;
color: #COLOUR;
}
& div.revealed.n4::after {
content:"4"
}
#eggsweeper > .board > div > div > div.revealed.n5 {
background-color: #COLOUR;
color: #COLOUR;
}
& div.revealed.n5::after {
content:"5"
}
#eggsweeper > .board > div > div > div.revealed.n6 {
background-color: #COLOUR;
color: #COLOUR;
}
& div.revealed.n6::after {
content:"6"
}
#eggsweeper > .board > div > div > div.revealed.n7 {
background-color: #COLOUR;
color: #COLOUR;
}
& div.revealed.n7::after {
content:"7"
}
#eggsweeper > .board > div > div > div.revealed.n8 {
background-color: #COLOUR;
color: #COLOUR;
}
& div.revealed.n8::after {
content:"8"
}
Adds an Outline to Text
This code is by Aemilia and adds an outline to different text around site!
Code
/* outlines text */
#core > #content > h1, #field_globalmeta, div.center.small, p.pagelist, p.pagelist, div#newthreadform, p#breadcrumb, form#skineditorform, div.forumthreads, div.forumthread > p,div.forumthread > h2, div#multiuser.tabbed_interface.horizontal, div.tab-active > h1,p > label, div.competitors > div > div, div.competitors > div.right > div, p.center, .globalbg > h2
{
text-shadow: -1px 0 #000, 0 1px #000, 1px 0 #000, 0 -1px #000;
}
/* rid on editor */
p.pagelist > a,p.pagelist > a:active, div.bbcode_editor.ace_editor.ace-chrome,div.panel.accordion,div.forumthreads > ul > li, div#multiuser.tabbed_interface.horizontal #trainercard
{
text-shadow: none !important;
}
Changes Icons Around Site
This code is by Aemilia and changes different icons, such as male, female, custom sprite, and more!
Code
// MALE ICON
img[src*="/img/pkmn/gender_m.png"]
{
height: 0px!important;
width: 16px!important;
padding-top: 16px!important;
background: url('LINK') center no-repeat;
background-size: auto;
}
// FEMALE ICON
img[src*="/img/pkmn/gender_f.png"]
{
height: 0px!important;
width: 16px!important;
padding-top: 16px!important;
background: url('LINK') center no-repeat;
background-size: contain;
}
// NEUTROIS/GENDERLESS ICON
img[src*="/img/pkmn/gender_n.png"]
{
height: 0px!important;
width: 16px!important;
padding-top: 16px!important;
background: url('LINK') center no-repeat;
background-size: contain;
}
// SHINY ICON
img[title*="SHINY"]
{
height: 0px!important;
width: 16px!important;
padding-top: 16px!important;
background: url('LINK') center no-repeat;
background-size: auto;
}
// ALBINO ICON
img[title*="ALBINO"]
{
height: 0px!important;
width: 16px!important;
padding-top: 16px!important;
background: url('LINK') center no-repeat;
background-size: auto;
}
// MELANISTIC ICON
img[title*="MELANISTIC"]
{
height: 0px!important;
width: 16px!important;
padding-top: 16px!important;
background: url('LINK') center no-repeat;
background-size: auto;
}
// ACCOUNT LOCKED ICON
img[title*="ACCOUNT"]
{
height: 0px!important;
width: 16px!important;
padding-top: 16px!important;
background: url('LINK') center center no-repeat;
background-size: contain;
}
// Pokéwalker ICON
img[title*="Pokéwalker"]
{
height: 0px!important;
width: 16px!important;
padding-top: 16px!important;
background: url('LINK') center center no-repeat;
background-size: contain;
}
// FOSSIL ICON
img[title*="PREHISTORIC"]
{
height: 0px!important;
width: 16px!important;
padding-top: 16px!important;
background: url('LINK') center center no-repeat;
background-size: auto;
}
// PF1 TRANSFER ICON
img[title*="PF1"]
{
height: 0px!important;
width: 16px!important;
padding-top: 16px!important;
background: url('LINK') center center no-repeat;
background-size: contain;
}
// MEGA ICON
img[title*="MEGA"]
{
height: 0px!important;
width: 16px!important;
padding-top: 16px!important;
background: url('LINK') center center no-repeat;
background-size: contain;
}
// TOTEM ICON
img[title*="TOTEM"]
{
height: 0px!important;
width: 16px!important;
padding-top: 16px!important;
background: url('LINK') center center no-repeat;
background-size: auto;
}
// STARTER ICON
img[title*="STARTER"]
{
height: 0px!important;
width: 16px!important;
padding-top: 16px!important;
background: url('LINK') center center no-repeat;
background-size: auto;
}
// CUSTOM SPRITE ICON
img[title*="Custom"]
{
height: 0px!important;
width: 16px!important;
padding-top: 16px!important;
background: url('LINK') center center no-repeat;
background-size: auto;
}
Mochi ✪ 21 ✪ they/he/kit
Your local catboy hoarding quirky, bashful, and docile mons!
500/500claiming an extra post spot in case i ever need it!
claiming another extra spot!
Hallo! :D
I'm having an issue with a skin I'm working on. I've finished all the basic things, the colors and background, and I'm trying to use it just to see what it looks like actually in use, but it isn't working?? Whenever I use it, it shows an old version of the skin and I don't know how to fix it. There's no extra CCS right now, so that can't be the issue.
I've saved the skin multiple times and refreshed every page I have open, so I'm a little lost and I'd appreciate any help! (the skin is called WTT/test incase you need it)
also first ask!! ♩¨̮(ง ˙˘˙ )ว♩¨̮
Skin Off + Preview
Skin On + Preview
N/A
Aspear Berry  Aspear Berry (SOUR) Cheri Berry Cheri Berry (SPICY) Chesto Berry Chesto Berry (DRY) Pecha Berry Pecha Berry (SWEET) Rawst Berry Rawst Berry (BITTER) Likes: Spicy food    27%Adamant nature | It/It's
My Journal
 4 / 1500 |
QUOTE originally posted by Shiitakii
Hallo! :D
I'm having an issue with a skin I'm working on. I've finished all the basic things, the colors and background, and I'm trying to use it just to see what it looks like actually in use, but it isn't working?? Whenever I use it, it shows an old version of the skin and I don't know how to fix it. There's no extra CCS right now, so that can't be the issue.
I've saved the skin multiple times and refreshed every page I have open, so I'm a little lost and I'd appreciate any help! (the skin is called WTT/test incase you need it)
also first ask!! ♩¨̮(ง ˙˘˙ )ว♩¨̮
Skin Off + Preview
Skin On + Preview
★ Zachary ★ They/He ★ 22 ★
Quiet nature collector.QUOTE originally posted by Neonyan
QUOTE originally posted by Shiitakii
~snip~ ̮
could the valentines berries be added in? i still have the images saved if you need them!
Kip
(Minor/Artist/Student)
"You cannot beat yourself up over things you did not know"
QUOTE originally posted by dumbdog
could the valentines berries be added in? i still have the images saved if you need them!
QUOTE originally posted by dumbdog
would this post work? thats where i have them saved!
hello! sorry for the double post but this is a small update! i've seen several people request me/someone in general to make a code to hide the new showcase :) i'm just letting you all know that i do know about that and that i am on that as far as the valentine's berries, i am also on that! someone commissioned me for a template so i'm working on the showcase code and their template code first since those currently need to take precedence
Cannot post: Please log in to post