Site Skins: How-To, and Helpful CSS
Forum Index > PokéFarm > Guides >
I've been skimming though the pages here and there to see if this has been asked already or not but I was wanting to know how people get the signature thing under what they post?
I'm wanting to put on of my pokemon panels like how other people have it but I'm just not sure how to
Aspear Berry
Aspear Berry (SOUR)
Cheri BerryCheri Berry (SPICY)
Chesto BerryChesto Berry (DRY)
Pecha BerryPecha Berry (SWEET)
Rawst BerryRawst Berry (BITTER)
Likes:
Sour food
27%Relaxed nature
QUOTE originally posted by DriftedPoem
I've been skimming though the pages here and there to see if this has been asked already or not but I was wanting to know how people get the signature thing under what they post?
I'm wanting to put on of my pokemon panels like how other people have it but I'm just not sure how to
Indeedee - He/Him
DriftedPoem,
Options > Forum tab > "[Edit forum signature.]"
For a compressed code of PKMNPanels that fits within the signature's character limit, check out Mirzam's entry here.
Options > Forum tab > "[Edit forum signature.]"
For a compressed code of PKMNPanels that fits within the signature's character limit, check out Mirzam's entry here.Avatar is official Pokémon TCG artwork illustrated by TOKIYA.
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.)
Warning: Large blobs of CSS
Original Code
@padding:50px;
#field_berries.selected ~ #field_field[data-mode="public"]>div.field>.fieldmon[data-flavour*="sour-"], #field_berries.selected ~ #field_field[data-mode="public"]>div.field>.fieldmon[data-flavour*="any-"]{
left:0%!important;
top:45%!important;
margin:-@padding!important;
transition:none!important;
img {
animation:none!important;
padding:@padding!important;
}
}
#field_berries.selected ~ #field_field[data-mode="public"]>div.field>.fieldmon[data-flavour*="spicy-"]{
left:20%!important;
top:45%!important;
margin:-@padding!important;
transition:none!important;
img {
padding:@padding!important;
}
}
#field_berries.selected ~ #field_field[data-mode="public"]>div.field>.fieldmon[data-flavour*="dry-"]{
left:40%!important;
top:45%!important;
margin:-@padding!important;
transition:none!important;
img {
animation:none!important;
padding:@padding!important;
}
}
#field_berries.selected ~ #field_field[data-mode="public"]>div.field>.fieldmon[data-flavour*="sweet-"]{
left:60%!important;
top:45%!important;
margin:-@padding!important;
transition:none!important;
img {
animation:none!important;
padding:@padding!important;
}
}
#field_berries.selected ~ #field_field[data-mode="public"]>div.field>.fieldmon[data-flavour*="bitter-"]{
left:80%!important;
top:45%!important;
margin:-@padding!important;
transition:none!important;
img {
animation:none!important;
padding:@padding!important;
}#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;
}
@-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;
}
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;
}
Error Message
UnVudGltZUV4Y2VwdGlvbjogQ1NTIHN0eWxlIGVycm9yOiBjb21waWxlU2VsZWN0b3JzIGV4cGVjdHMgYW4gYXJyYXkgYnV0IGdvdCBOVUxMIGluIC9jbGFzc2VzL1NraW5FZGl0b3IuY2xhc3MucGhwOjEwMApTdGFjayB0cmFjZToKIzAgL21vZHVsZXMvc2tpbi9lZGl0LmFqYXgucGhwKDU5KTogU2tpbkVkaXRvci0+c2F2ZVNraW4oJ1N1bnNldF9JbnN0aV8yLy4uLicsICdNQURORVNTJywgQXJyYXksICdAcGFkZGluZzogNTBweDsuLi4nKQojMSAvY2xhc3Nlcy9BSkFYLmNsYXNzLnBocCgxOTApOiByZXF1aXJlKCcvaG9tZS9wb2tlZmFybS8uLi4nKQojMiAvaW5pdC5waHAoNzcpOiBBSkFYOjpsb2FkTW9kdWxlKCdza2luL2VkaXQnKQojMyAvaW5kZXgucGhwKDEpOiByZXF1aXJlKCcvaG9tZS9wb2tlZmFybS8uLi4nKQojNCB7bWFpbn0=
- TYPE RACE :D
- About me
- Other Shops
- Click pls!
Score: 0
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
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;
}
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;
}
For reference, there's online LESS validators that can help you track down syntax errors like this. Here's one I've used before:
https://www.lesstester.com/
When I pasted in your code, it showed me the extra brace on line 169 right away :)
There's also tools that will "beautify" your code, which can make some types of errors, especially with nested selectors, easier to find.
Just a random tid-bit of information for those interested - a quirk I found using BBCode and CSS in combination. Not sure if someone else has posted about this somewhere?
In posts and signatures (wherever BBCode and CSS is allowed), it appears that BBCode resolves before CSS/LESS resolves within the code.
Using that, one can create variables or values in their CSS using information that BBCode can give you such as date, time, inventory item count, shiny/hunt count, and so on so forth. I've got an example for how to use BBCode to make a weekly greeting below!
The above code results in the following (updates itself every day): Hello! Today is . Datetime can also give values such as the day of the year (for those who might like to make a daily Pokemon code or something), month (for monthly greetings like Happy Pride Month!), years, and so on ^^ Using LESS for conditionals one could even change their entire color scheme in a post based on how far along their hunt chain or their type race score is, or based on time (day/night)! The limit is your own creativity ^o^ EDIT: Do not change your entire theme as mentioned above (as shown/linked in the post below). If your code is very difficult for even yourself to tread, it's probably best to break it down into smaller, simpler pieces or separate posts altogether! If your code breaks, PFQ moderators step in to try to deal with it, and difficult code is a lot of time and effort for them to deal with; use common sense here! I find the math, datetime, and inventory BBCodes to be most useful here. Most datetime values can be found here: https://www.php.net/manual/en/datetime.format.php Anyway! Just something I stumbled upon, hope someone finds use in it! Feel free to PM me if you need help with something regarding this ^^
Hello! Today is [sc=weekly-greeting][/sc].
[style]
@day-1: 'Monday';
@day-2: 'Tuesday';
@day-3: 'Wednesday';
@day-4: 'Thursday';
@day-5: 'Friday';
@day-6: 'Saturday';
@day-7: 'Sunday';
.weekly-greeting {
display: inline-flex;
&::after {
// Datetime BBCode resolves to 1-7 for Monday through Sunday
// Resulting in '@{day-1}' for 'Monday', etc!
content: '@{day-[datetime=N]now[/datetime]}';
}
}
[/style]
The above code results in the following (updates itself every day): Hello! Today is . Datetime can also give values such as the day of the year (for those who might like to make a daily Pokemon code or something), month (for monthly greetings like Happy Pride Month!), years, and so on ^^ Using LESS for conditionals one could even change their entire color scheme in a post based on how far along their hunt chain or their type race score is, or based on time (day/night)! The limit is your own creativity ^o^ EDIT: Do not change your entire theme as mentioned above (as shown/linked in the post below). If your code is very difficult for even yourself to tread, it's probably best to break it down into smaller, simpler pieces or separate posts altogether! If your code breaks, PFQ moderators step in to try to deal with it, and difficult code is a lot of time and effort for them to deal with; use common sense here! I find the math, datetime, and inventory BBCodes to be most useful here. Most datetime values can be found here: https://www.php.net/manual/en/datetime.format.php Anyway! Just something I stumbled upon, hope someone finds use in it! Feel free to PM me if you need help with something regarding this ^^
Yes! It's neat, you can also use it for auto-hide item tables by using the inventory code in your CSS. (I'm on mobile so can't do an example, but there's one here)
But I did want to comment on the colors for day/night: your theme colors shouldn't change based on things like time, user's light/dark mode, etc. More details at the very bottom of this post.
I figured this code might be found useful to some, so I decided to post it. A user asked me to help make the Score Badges by LycanKai work with my about me type rotation. That resulted in the following:
The '@tr-#' variables need to be adjusted to your type rotation. If you don't know yours, it can be found at the bottom of the type race page HERE.
If users know how to import site skin code, all of the '@tr-#' variables as well as the '.badge();' mixins at the bottom can be moved to and imported from a site skin to reduce character count. Useful for signatures. More info on that by Aemilia in their CSS Guide in the '@import' tab. The '@year' and '@month' variables NEED to stay as they rely on BBCode, and BBCode does not work in site skins!
I've not thoroughly tested it, so it could look strange if pasted in certain locations. Let me know if it does, and I will update it accordingly! It seems to work for the cases I've tested though.
Hopefully some others find this useful at least ^^
Score: 0
This score badge automatically updates the type each month using the code above, so the user no longer has to manually update it every month.
The code is as follows:
[sc=tr-badge]Score: [inventory=TypeRace][/sc]
[style]
@import 'skins/user/q/b/R/type-race/__extra';
// These need to be set to match your type rotation manually.
// '@tr-0' is January of 2020, 2023, 2026 etc. Adjust accordingly.
// These need to be lowercase or the background will not show!
@tr-0: 'fighting'; @tr-1: 'water'; @tr-2: 'dragon';
@tr-3: 'ghost'; @tr-4: 'psychic'; @tr-5: 'grass';
@tr-6: 'ice'; @tr-7: 'rock'; @tr-8: 'fairy';
@tr-9: 'dark'; @tr-10: 'bug'; @tr-11: 'electric';
@tr-12: 'poison'; @tr-13: 'flying'; @tr-14: 'steel';
@tr-15: 'ground'; @tr-16: 'normal'; @tr-17: 'fire';
// These values are needed to automatically update to the current month's type
// You can manually set them if you want this to be permanent for any month
@year: [datetime=y]now[/datetime]; // 1-99
@month: [datetime=n]now[/datetime]; // 1-12
.badge-type(@@type-race); // Sets the background to the type for this month
.badge-text(@@type-race); // Lightens text for dark and ghost types
[/style]
Cannot post: Please log in to post