Site Skins: How-To, and Helpful CSS
Forum Index > PokéFarm > Guides >
Without leaving Pokefarm, you can create a new site skin and paste the code in the 'Extra CSS' section.
Alternatively you can install a browser extension like 'Stylus' to manage custom stylesheets for websites.
Avatar by Kaelwolfur.
Sent from my PokéNav
Thanks, I got it to work! Sorry, I'm not really quick to catch on...
hey there~ I was hoping to make the berry buttons, Hold the Egg! buttons, and the Next button on the multi-profile page bigger. I tried a few things myself. May I ask for some help? :3
sig code and sig bg image made by me
Does this go in the direction of what you're looking for?
You can set a fixed height on the Hold/Berry buttons in one line.
In another line, you can set the height/width of the next button.
The rest of the code is to ensure the Hold/Berry buttons fill your custom set space and center their content.
If you have more specific ideas on how you want to change the layout let us know!
Set Hold/Berry/Next sizes
#multiuser .party > div > .action {
/* sets the height of the hold/berry button */
height: 4rem;
display: flex;
}
#multiuser .mu_navlink.next {
/* height and width of the 'next' button */
height: 8rem;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
#multiuser .party > div > .action > .berrybuttons {
display: flex;
}
#multiuser .party > div > .action a {
height: unset;
flex: 1 1 100%;
display: flex;
align-items: center;
justify-content: center;
}
#multiuser .party > div > .action > .berrybuttons > a {
flex: 1 1 0;
height: unset;
}
My Layout
#partybox .party > div > .action.working {
display: none;
}
#multiuser .party > div {
position: absolute;
background-color: transparent;
border: none;
left: 40%;
top: 900px;
}
#multiuser .party > div > .action a[data-berry] {
z-index: 1;
}
#multiuser #trainercard{
position: relative;
top: 80px;
}
#multiuser #aboutbox{
position: relative;
top: 80px;
}
.mu_navlink.next {
position: absolute;
left: 40%;
top: 900px;
width: 200px;
}
.mu_navlink.prev {
position: absolute;
left: 40%;
top: 850px;
}
#multiuser a.fieldslink {
display: none;
}
.party > div > .action > .berrybuttons[data-up='sour'] > [data-berry='aspear'],
.party > div > .action > .berrybuttons[data-up='spicy'] > [data-berry='cheri'],
.party > div > .action > .berrybuttons[data-up='dry'] > [data-berry='chesto'],
.party > div > .action > .berrybuttons[data-up='sweet'] > [data-berry='pecha'],
.party > div > .action > .berrybuttons[data-up='bitter'] > [data-berry='rawst'] {
width: 100%;
}
.party > div > .action > .berrybuttons:not([data-up='sour']) > [data-berry='aspear'],
.party > div > .action > .berrybuttons:not([data-up='spicy']) > [data-berry='cheri'],
.party > div > .action > .berrybuttons:not([data-up='dry']) > [data-berry='chesto'],
.party > div > .action > .berrybuttons:not([data-up='sweet']) > [data-berry='pecha'],
.party > div > .action > .berrybuttons:not([data-up='bitter']) > [data-berry='rawst'] {
display: none;
}
.party > div > .action > .berrybuttons[data-up='any'] > [data-berry] {
display: inline-block;
}
#multiuser .pkmn {
display: none;
}
#multiuser .name {
display: none;
}
#multiuser .expbar {
display: none;
}
#multiuser .taste {
display: none;
}
#multiuser .party {
width: 300px;
}
#multiuser .party > div {
width: 211px;
}
#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;
}
#multiuser .party > div > .action > .berrybuttons > .tooltip_content {
display: none;
}
#multiuser #trainerimage{
display:none;
}
#multiuser #profilebox{
display: none;
}
Yes that's improtant to mention. I haven't looked into your code yet but here's an alternate stacking code where it's straightforward to set a custom width/height on the buttons, it's all in the first block if that helps at all.
Code
#multiuser #partybox .action > a,
#multiuser #partybox .action > div,
#multiuser #partybox .action > div > a,
#multiuser #partybox .mu_navlink.next {
/* Specify the height/width of the buttons */
height: 10em;
line-height: 10em;
width: 12em;
}
#multiuser #partybox {
position: relative;
}
#multiuser #partybox .party > div {
position: static;
}
#multiuser #partybox .berrybuttons {
display: flex;
}
#multiuser #partybox .action {
position: absolute;
/*allows for collapse when done*/
min-height: 0;
height: auto;
top: 0;
left: 0;
z-index: 2;
}
#multiuser #partybox .mu_navlink.next {
position: absolute;
top: 0;
left: 0;
/*move 'next' button slightly to the left so you
can quit out of mass clicking by clicking on the right*/
-webkit-transform: translate(-25%, 0);
transform: translate(-25%, 0);
}
#multiuser #partybox .action:empty,
#multiuser #partybox .action > table,
#multiuser #partybox .action.working,
#multiuser #partybox .berrybuttons > .tooltip_content {
/*hide action when it is empty, shows 'Thank you!',
is processing and the berry tooltips*/
display: none;
}
#multiuser #partybox .action > a,
#multiuser #partybox .action > div,
#multiuser #partybox .mu_navlink.next {
padding: 0;
margin: 0;
}
#multiuser #partybox .berrybuttons > a {
/*only 1 berry per berrybuttons*/
display: none;
height: 100%;
width: 100%;
}
#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;
}
Any way to make
This code
#shelterarea .pokemon + .tooltip_content { display: block; visibility: hidden; }
#shelterarea .pokemon.lock + .tooltip_content,#shelterarea .pokemon:hover + .tooltip_content { visibility: visible; }
#shelterarea:not(.selected) .pokemon + .tooltip_content img:not([src*='gender']) {visibility: visible;
float: right; width: 55px; border-top: 5px solid; border-bottom: 5px solid; border-left: 45px solid; border-right: 45px solid; }
more hunted eggs too
this egg right now: img[src*="/pkmn/t/c/n/o.png"]
LEGO avatar built by me with LDD
I always plan for the possibly of a hunt not being complete
we're only human after all
Looking for Hasty Pokemon I don't have
TR/Tournament highlighting skin code
Help Christopher Leeaka Andros the Red In Space Ranger
's mom beat stage 2 lung cancer
My time is: 11:13 AM
Score: 387
TR code creditOdd question--is there any way to unstack a field via CSS to get a good long look at all the Pokemon there?
QUOTE originally posted by CobaltComm
Odd question--is there any way to unstack a field via CSS to get a good long look at all the Pokemon there?
Code
/* sets field size and aligns 8x5 */
#field_field>div.field {min-height: 345px;display: flex;flex-flow: row wrap;display: grid;grid-template-columns: repeat(8, 12.5%);grid-template-rows: repeat(5, 69px);}
/* sets phone field size to prevent double size */
.mq25 #field_field>div.field {min-height: 180px; grid-template-rows: repeat(5, 36px);}
/* keeps field size and offsets pokes to right starting point */
#field_field>div.field>.fieldmon {margin:0!important;position: static;flex: 1 1 12.5%;display: inline-flex;justify-content: center;align-items: center;}
/* stops field size from doubling and all pokes going to bottom half*/
#field_field>div.field {padding-top: 0%;}
/* changes some images size if too big, but stops them from making field grow */
#field_field>div.field>.fieldmon>img {max-width:75px;max-height:70px;}
For my shop click here
So this is a bit of an odd question, but I want the hitbox in the field click modification to look less...static...so that I can see with certainty that my clicks are going through (because the people I massclick the most often have hoards with identical sprites, it's hard to tell), without necessarily using the site's default animation because it causes the entire page to shake. Any suggestions?
![j.png](https://pfq-static.com/img/pkmn/t/9/o/j.png/t=1479779149)
![j.png](https://pfq-static.com/img/pkmn/t/9/o/j.png/t=1479779149)
Cannot post: Please log in to post