Single post in Site Skins: How-To, and Helpful CSS
Forum Index > PokéFarm > Guides > Site Skins: How-To, and Helpful CSS >
QUOTE originally posted by Hakano Riku
QUOTE originally posted by Insti
So essentially I have a long blob of CSS for site skins. Now, the CSS I currently use works and the main problem is when I change sort by berry preferences to sort in a giant blob on a field. Does anyone know how to fix it (and if it doesn't bother you, it seems that there is more code than this guide has to offer.)
New Code
@padding: 50px;
#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;
}
#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:left;
transform:scale(15);
opacity:.75;
transform-origin:bottom left;
-ms-interpolation-mode:nearest-neighbor;
image-rendering:-moz-crisp-edges;
image-rendering:pixelated;
touch-action:none;
pointer-events:none;
}
@-webkit-keyframes bounce {
0% {-webkit-transform:translateY(-100%);}
5% {-webkit-transform:translateY(-100%);}
15% {-webkit-transform:translateY(0);padding: 4px auto;}
20% {-webkit-transform:translateY(-80%);}
25% {-webkit-transform:translateY(0%);padding: 4px auto;}
30% {-webkit-transform:translateY(-70%);}
35% {-webkit-transform:translateY(0%);padding: 5px auto;}
40% {-webkit-transform:translateY(-60%);}
45% {-webkit-transform:translateY(0%);padding: 5px auto;}
50% {-webkit-transform:translateY(-50%);}
55% {-webkit-transform:translateY(0%);padding: 6px auto;}
60% {-webkit-transform:translateY(-30%);}
65% {-webkit-transform:translateY(0%);padding: 6px auto;}
70% {-webkit-transform:translateY(-15%);}
75% {-webkit-transform:translateY(0);padding: 8px auto;}
80% {-webkit-transform:translateY(-10%);}
85% {-webkit-transform:translateY(0);padding: 8px auto;}
90% {-webkit-transform:translateY(-5%);}
95% {-webkit-transform:translateY(0);padding: 10px;}
100% {-webkit-transform:translateY(0);padding: 10px;}
}
#shelterarea > .pokemon > img[src*="3/e/l.png"]{
-webkit-animation: bounce 3s ease-out;
-moz-animation: bounce 800ms ease-out;
-o-animation: bounce 800ms ease-out;
animation: bounce 3s ease-out;
}#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;
}
#multiuser #aboutbox, #multiuser #trainercard{
display:none;
}
#partybox .party>div>.action.working {
display:none;
}
#multiuser .party>div {
position: absolute;
background-color:transparent;
border:none;
left:300px;
top:500px;
}
#multiuser .party>div>.action a[data-berry] {
z-index:100;
}
.mu_navlink.next {
position:absolute;
left:300px;
top:500px;
}
.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.tabbed_interface.horizontal>ul {height: 35px;overflow: hidden;}
#multiuser.tabbed_interface>ul>li>label {width: 5px;padding: 2px;}
#multiuser #aboutbox, #multiuser #trainercard{
display:none;
}
#partybox .party>div>.action.working {
display:none;
}
#multiuser .party>div {
position: absolute;
background-color:transparent;
border:none;
left:300px;
top:500px;
}
#multiuser .party>div>.action a[data-berry] {
z-index:100;
}
.mu_navlink.next {
position:absolute;
left:300px;
top:500px;
}
.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.tabbed_interface.horizontal>ul {height: 35px;overflow: hidden;}
#multiuser.tabbed_interface>ul>li>label {width: 5px;padding: 2px;}
body
{
cursor: url("https://pokefarm.com/upload/Insti/ZygardeCursorForInsti.png"), pointer;
}
#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;
}
#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:left;
transform:scale(15);
opacity:.75;
transform-origin:bottom left;
-ms-interpolation-mode:nearest-neighbor;
image-rendering:-moz-crisp-edges;
image-rendering:pixelated;
touch-action:none;
pointer-events:none;
}
- TYPE RACE :D
- About me
- Other Shops
- Click pls!
Score: 1404
Astral Wonders - An Amazing Boost Shop
My Journal
I don't mind dms! ^^
These are some places you should definitely visit!
Little Free Library (ran by Shebunia, inactive)
Coral Cove - A wonderful joint shop opened by my friend :p
