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...
by asralore on deviantart
by strobelast on deviantart
by asralore on deviantart
by unkumi on deviantart
by unkumi on deviantart
by asralore on deviantart
by strobelast on deviantart
by asralore on deviantart
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
for Market equiv. 
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: 04:55 PM
Score: 0
TR code credit
Odd 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?
Glory || they/them Cannot post: Please log in to post