Single post in Bishop's Journal

Forum Index > PokéFarm > Journals > Bishop's Journal >

👍 12

Posted 15/Jan/2018 18:38:55 (6 years ago)
Edited 09/Apr/2018 02:13:36 (6 years ago)

Info
Pictures
Instructions
Code

HOW TO MAKE EVERYONE HAVE STACKED FIELDS

1) Pictures, see this tab for the different views and features. 2) Easy step by step instructions on how to use skins. 3) Code: with explanations of what each section does. I would like to thank Gladion again, it was their Site Skins: How-To, and Helpful CSS post that i found the original stack code and other things that inspired me to make/change other features. Sharing code to post a "hide box" in your template has been removed, you can just link to this post to spread the word.

Private View
Public View
Berry Sort View
Phone View

The stack and unstack codes do NOT effect the view of your own private fields (unless viewing in public mode to feed)

i use this background for Psychic Fields for Unown reasons. (code for this also included in code section if you wish to use... affects ALL Psychic fields, not just ones with Unown in them)

this is view of stack code only. (does not put berry preferences in different piles.) looks same whether on computer of phone.

bigger boxes for computer view to make keyboard number smashing and/or two mouse clicking easier.

smaller box for phones to help them not cover full screen, yet making them big enough to drumroll tap for faster interacting.

the red circle on them is from "mini" move/release code. it is not included in this section and they wont have that circle unless you also add it.

Step One: go to Site Skins If you already have a skin saved, click edit then go to next step. If not, click on "- Create New Skin -". give it a name and description. Step Two: click on "Extra CSS" section and add the code(s) you like from "Code" section above. Step Three: click back on "Skin metadata" on top to save it. then click the "use the skin" button. Step Four: Clear Cache if needed, (or press Control+F5 at same time while in fields and on Shelter page).

Unown
Stack All
bigger berry stack
UNstack/Grid View
Code explained (so you can alter if you wish)

this will change the background of ALL psychic fields. while i do not think many will use/want this, it did help me organize them and quickly find ones needed for breeding pairs.

Code: unown background for psychic fields

/* unown background */ #field_field>div.field[style*="psychic"] {background-image: url("https://pokefarm.com/upload/Bishop/Unown_Spacer.png") !important;}

*Thanks to Gladion for this code also. you can find a link to his post on "Info" tab.*

This will Stack all fields, remove "animation: none;" if you would like to see them bounce/shake.

Code: stacks all

/* stacks all */ #field_field[data-mode="public"]>div.field>.fieldmon{left:45%!important;top:40%!important; animation: none;}

Add this instead if you also want it to put a small border around them to make feeding easier on any device.

Code: stacks all with a small border

/* stacks w/border */ #field_field[data-mode="public"]>div.field>.fieldmon{padding:50px!important;margin-top:-50px!important;margin-left:-50px!important;left:45%!important;top:40%!important; animation: none;}

This section will match the berry preference pictures, much larger box to tap/click. while you would only need first half if on computer only, and second half if on device only, there is no harm in having both halfs in your skin so i would use both anyway. but if you choose to only use device half then later decide to use computer half, computer half must be placed before device half in skin.

berry sorted stacks, phone friendly version

/* stacks all */ html.mq5 #field_field[data-mode="public"]>div.field>.fieldmon{padding:110px170px110px170px!important;margin-top:-110px!important;margin-left:-170px!important;left:45%!important;top:40%!important; animation: none;} /* stacks wrong berry */ html.mq5 #field_field[data-mode="public"]>div.field>.fieldmon.goaway{padding:110px170px110px170px!important;margin-top:-110px!important;margin-left:-170px!important;left:60%!important;top:40%!important; animation: none;} /* stacks right berry */ html.mq5 #field_field[data-mode="public"]>div.field>.fieldmon.cormyr{padding:110px170px110px170px!important;margin-top:-110px!important;margin-left:-170px!important;left:30%!important;top:40%!important; animation: none;} /* stacks all mobile */ html.mq2 #field_field[data-mode="public"]>div.field>.fieldmon{padding:55px85px55px85px!important;margin-top:-55px!important;margin-left:-85px!important;left:45%!important;top:40%!important; animation: none;} /* stacks wrong berry mobile */ html.mq2 #field_field[data-mode="public"]>div.field>.fieldmon.goaway{padding:55px85px55px85px!important;margin-top:-55px!important;margin-left:-85px!important;left:60%!important;top:40%!important; animation: none;} /* stacks right berry mobile */ html.mq2 #field_field[data-mode="public"]>div.field>.fieldmon.cormyr{padding:55px85px55px85px!important;margin-top:-55px!important;margin-left:-85px!important;left:30%!important;top:40%!important; animation: none;}

and for those of you who despise stacked fields, add this code it will align to grid all private fields. makes it easy to see everything in sell/free fields, also helpful on some devices that make feeding stacked fields harder.

UNstack (grid view)

#field_field[data-mode="public"]>.field>.fieldmon:nth-child(1),#field_field[data-mode="public"]>.field>.fieldmon:nth-child(2),{left:0%!important;top:0%!important;} #field_field[data-mode="public"]>.field>.fieldmon:nth-child(3),#field_field[data-mode="public"]>.field>.fieldmon:nth-child(4),{left:12.5%!important;top:0%!important;} #field_field[data-mode="public"]>.field>.fieldmon:nth-child(5),#field_field[data-mode="public"]>.field>.fieldmon:nth-child(6),{left:25%!important;top:0%!important;} #field_field[data-mode="public"]>.field>.fieldmon:nth-child(7),#field_field[data-mode="public"]>.field>.fieldmon:nth-child(8),{left:37.5%!important;top:0%!important;} #field_field[data-mode="public"]>.field>.fieldmon:nth-child(9),#field_field[data-mode="public"]>.field>.fieldmon:nth-child(10),{left:50%!important;top:0%!important;} #field_field[data-mode="public"]>.field>.fieldmon:nth-child(11),#field_field[data-mode="public"]>.field>.fieldmon:nth-child(12),{left:62.5%!important;top:0%!important;} #field_field[data-mode="public"]>.field>.fieldmon:nth-child(13),#field_field[data-mode="public"]>.field>.fieldmon:nth-child(14),{left:75%!important;top:0%!important;} #field_field[data-mode="public"]>.field>.fieldmon:nth-child(15),#field_field[data-mode="public"]>.field>.fieldmon:nth-child(16),{left:87.5%!important;top:0%!important;} #field_field[data-mode="public"]>.field>.fieldmon:nth-child(17),#field_field[data-mode="public"]>.field>.fieldmon:nth-child(18),{left:0%!important;top:20%!important;} #field_field[data-mode="public"]>.field>.fieldmon:nth-child(19),#field_field[data-mode="public"]>.field>.fieldmon:nth-child(20),{left:12.5%!important;top:20%!important;} #field_field[data-mode="public"]>.field>.fieldmon:nth-child(21),#field_field[data-mode="public"]>.field>.fieldmon:nth-child(22),{left:25%!important;top:20%!important;} #field_field[data-mode="public"]>.field>.fieldmon:nth-child(23),#field_field[data-mode="public"]>.field>.fieldmon:nth-child(24),{left:37.5%!important;top:20%!important;} #field_field[data-mode="public"]>.field>.fieldmon:nth-child(25),#field_field[data-mode="public"]>.field>.fieldmon:nth-child(26),{left:50%!important;top:20%!important;} #field_field[data-mode="public"]>.field>.fieldmon:nth-child(27),#field_field[data-mode="public"]>.field>.fieldmon:nth-child(28),{left:62.5%!important;top:20%!important;} #field_field[data-mode="public"]>.field>.fieldmon:nth-child(29),#field_field[data-mode="public"]>.field>.fieldmon:nth-child(30),{left:75%!important;top:20%!important;} #field_field[data-mode="public"]>.field>.fieldmon:nth-child(31),#field_field[data-mode="public"]>.field>.fieldmon:nth-child(32),{left:87.5%!important;top:20%!important;} #field_field[data-mode="public"]>.field>.fieldmon:nth-child(33),#field_field[data-mode="public"]>.field>.fieldmon:nth-child(34),{left:0%!important;top:40%!important;} #field_field[data-mode="public"]>.field>.fieldmon:nth-child(35),#field_field[data-mode="public"]>.field>.fieldmon:nth-child(36),{left:12.5%!important;top:40%!important;} #field_field[data-mode="public"]>.field>.fieldmon:nth-child(37),#field_field[data-mode="public"]>.field>.fieldmon:nth-child(38),{left:25%!important;top:40%!important;} #field_field[data-mode="public"]>.field>.fieldmon:nth-child(39),#field_field[data-mode="public"]>.field>.fieldmon:nth-child(40),{left:37.5%!important;top:40%!important;} #field_field[data-mode="public"]>.field>.fieldmon:nth-child(41),#field_field[data-mode="public"]>.field>.fieldmon:nth-child(42),{left:50%!important;top:40%!important;} #field_field[data-mode="public"]>.field>.fieldmon:nth-child(43),#field_field[data-mode="public"]>.field>.fieldmon:nth-child(44),{left:62.5%!important;top:40%!important;} #field_field[data-mode="public"]>.field>.fieldmon:nth-child(45),#field_field[data-mode="public"]>.field>.fieldmon:nth-child(46),{left:75%!important;top:40%!important;} #field_field[data-mode="public"]>.field>.fieldmon:nth-child(47),#field_field[data-mode="public"]>.field>.fieldmon:nth-child(48),{left:87.5%!important;top:40%!important;} #field_field[data-mode="public"]>.field>.fieldmon:nth-child(49),#field_field[data-mode="public"]>.field>.fieldmon:nth-child(50),{left:0%!important;top:60%!important;} #field_field[data-mode="public"]>.field>.fieldmon:nth-child(51),#field_field[data-mode="public"]>.field>.fieldmon:nth-child(52),{left:12.5%!important;top:60%!important;} #field_field[data-mode="public"]>.field>.fieldmon:nth-child(53),#field_field[data-mode="public"]>.field>.fieldmon:nth-child(54),{left:25%!important;top:60%!important;} #field_field[data-mode="public"]>.field>.fieldmon:nth-child(55),#field_field[data-mode="public"]>.field>.fieldmon:nth-child(56),{left:37.5%!important;top:60%!important;} #field_field[data-mode="public"]>.field>.fieldmon:nth-child(57),#field_field[data-mode="public"]>.field>.fieldmon:nth-child(58),{left:50%!important;top:60%!important;} #field_field[data-mode="public"]>.field>.fieldmon:nth-child(59),#field_field[data-mode="public"]>.field>.fieldmon:nth-child(60),{left:62.5%!important;top:60%!important;} #field_field[data-mode="public"]>.field>.fieldmon:nth-child(61),#field_field[data-mode="public"]>.field>.fieldmon:nth-child(62),{left:75%!important;top:60%!important;} #field_field[data-mode="public"]>.field>.fieldmon:nth-child(63),#field_field[data-mode="public"]>.field>.fieldmon:nth-child(64),{left:87.5%!important;top:60%!important;} #field_field[data-mode="public"]>.field>.fieldmon:nth-child(65),#field_field[data-mode="public"]>.field>.fieldmon:nth-child(66),{left:0%!important;top:80%!important;} #field_field[data-mode="public"]>.field>.fieldmon:nth-child(67),#field_field[data-mode="public"]>.field>.fieldmon:nth-child(68),{left:12.5%!important;top:80%!important;} #field_field[data-mode="public"]>.field>.fieldmon:nth-child(69),#field_field[data-mode="public"]>.field>.fieldmon:nth-child(70),{left:25%!important;top:80%!important;} #field_field[data-mode="public"]>.field>.fieldmon:nth-child(71),#field_field[data-mode="public"]>.field>.fieldmon:nth-child(72),{left:37.5%!important;top:80%!important;} #field_field[data-mode="public"]>.field>.fieldmon:nth-child(73),#field_field[data-mode="public"]>.field>.fieldmon:nth-child(74),{left:50%!important;top:80%!important;} #field_field[data-mode="public"]>.field>.fieldmon:nth-child(75),#field_field[data-mode="public"]>.field>.fieldmon:nth-child(76),{left:62.5%!important;top:80%!important;} #field_field[data-mode="public"]>.field>.fieldmon:nth-child(77),#field_field[data-mode="public"]>.field>.fieldmon:nth-child(78),{left:75%!important;top:80%!important;} #field_field[data-mode="public"]>.field>.fieldmon:nth-child(79),#field_field[data-mode="public"]>.field>.fieldmon:nth-child(80),{left:87.5%!important;top:80%!important;}

Unown

#field_field>div.field[style*="psychic"] {background-image: url("https://pokefarm.com/upload/Bishop/Unown_Spacer.png") !important;} you can change the image by replacing mine with yours. (must be https, not all image websites storage are supported here so you may have to upload your image here instead). size is 600x345 (310x178 mobile), pics not in same format may repeat, or not show all.

Stacks

#field_field[data-mode="public"]>div.field>.fieldmon{left:45%!important;top:40%!important; animation: none;} left/top can be changed, 0% on each will put stack into top-left corner. they are currently close to the middle (on the rock in generic field). do not go more than 80% on either as some pokes are large and part of them will appear outside of the field. #field_field[data-mode="public"]>div.field>.fieldmon{padding:50px!important;margin-top:-50px!important;margin-left:-50px!important;left:45%!important;top:40%!important; animation: none;} with padding you can no longer go to 0% top/left as padding will be outside of field possibly covering other buttons. if you would like to change size of the padding you MUST also change the margins (which equal padding size) without margin the box to tap will be still be larger, but the pokemon will appear in top/left of the box instead of centered.

Berry Sort

after "animation: none;" (or any spot in it if you delete animation code to see them bounce) in any section you can add "background-color: blue;" to change all, liked or disliked to its own color of your choosing. html.mq5 #field_field[data-mode="public"]>div.field>.fieldmon{padding:110px170px110px170px!important;margin-top:-110px!important;margin-left:-170px!important;left:45%!important;top:40%!important; animation: none;} html.mq5.mq45.mq4.mq35.mq3.mq25.mq2.mq15.mq1 ***** while you can use different borders/colors anything else for different resolutions... LARGER MUST BE LISTED FIRST IN YOUR SKIN (if you give rules for mq2, then mq5 ONLY mq2 will show). mq5 is normal computer view with a wide screen. mq2 is standard phone/tablet view. here we changed padding: ALL; to padding: top right bottom left; this is so we can make a rectangle box instead of square. margins are also adjusted based on top and left padding. what to add to move piles based on berry preference: #field_field[data-mode="public"]>div.field>.fieldmon ....fieldmon *normal view with just all stacked in same spot. ....fieldmon.goaway *add ".goaway" to effect WRONG berry preference and change top and left percents to move its pile. ....fieldmon.cormyr *add ".cormyr" to effect RIGHT berry preference and change top and left percents to move its pile.

Loading...