Site Skins: How-To, and Helpful CSS
Forum Index > PokéFarm > Guides >
Doing a bit of digging, but that kind of thing is hard to mess around with since the 'Nice' popup isn't ever up on the screen. From digging around in the JS and main CSS file, it looks like it's called '.nice_toast'.
Basically, I just include that to show what the original configuration is. So if you want to increase the height, image, background color, or whatever, this should give you the basic idea of how to do so.
Maybe. Again, I can't really test it. :p
Edit: So I'd suggest moving up from the bottom of the screen:
You can also increase the width on that, or mess with the animation keyframes that are up above.
Main CSS relevant to Nice
.nice_toast {
position: fixed;
left: 0;
bottom: 0;
margin: 8px;
width: 160px;
background-color: #0a1931;
box-shadow: 0 0 4px #020225;
border-radius: 16px;
padding: 8px 48px;
z-index: 200000;
animation: nice_popin 0.4s linear both;
}
.nice_toast:before {
position: absolute;
content: url('https://pfq-static.com/img/misc/goldstar.png');
left: 12px;
top: 12px;
transform-origin: center center;
animation: nice_mainstar 0.6s 0.4s linear both;
}
.nice_toast>.nice_close {
background-color: #223b64;
border: 1px solid #020225;
border-radius: 50%;
position: absolute;
left: 0;
top: 0;
width: 12px;
height: 12px;
text-decoration: none;
}
.nice_toast>.nice_close:before,.nice_toast>.nice_close:after {
content: '';
position: absolute;
left: 2px;
right: 2px;
height: 0;
border-top: 1px solid #b1bdd2;
border-bottom: 1px solid #b1bdd2;
}
.nice_toast>.nice_close:before {
top: 5px;
transform: rotate(45deg);
}
.nice_toast>.nice_close:after {
bottom: 5px;
transform: rotate(-45deg);
}
.nice_toast>.nice_star1,.nice_toast>.nice_star2,.nice_toast>.nice_star3 {
position: absolute;
border-bottom: 1px solid #b1bdd2;
transform-origin: right center;
animation: nice_star 3s 0.4s linear both;
}
.nice_toast>.nice_star1:before,.nice_toast>.nice_star2:before,.nice_toast>.nice_star3:before {
position: absolute;
content: url('https://pfq-static.com/img/misc/goldstar.png');
transform: scale(0.5);
left: -20px;
bottom: -12px;
}
.nice_toast>.nice_star1 {
right: 12px;
top: 4px;
}
.nice_toast>.nice_star2 {
right: 16px;
top: 16px;
}
.nice_toast>.nice_star3 {
right: 4px;
top: 24px;
}
.nice_toast.nice_fade {
animation: nice_popout 0.4s linear both;
}
@keyframes nice_mainstar {
from {
transform: scale(0) rotate(270deg);
}
80% {
transform: scale(1.4) rotate(54deg);
}
to {
transform: scale(1) rotate(0deg);
}
}
@keyframes nice_star {
from {
transform: rotate(-40deg);
width: 0;
}
to {
transform: rotate(-40deg) translateX(-12px);
width: 16px;
}
}
@keyframes nice_popin {
from {
transform: translate(-80%,0);
opacity: 0;
}
to {
transform: translate(0,0);
opacity: 1;
}
}
@keyframes nice_popout {
from {
transform: translate(0,0);
opacity: 1;
}
to {
transform: translate(0,80%);
opacity: 0;
}
}
CODE
.nice_toast {
top:50%;
}
official project sekai art; icon is official TCG art
he/him + 22 + cst
Firstly, I'd like to thank Gladion for your Berry Preference Code.
When the Pokemon Panels first came out, I didn't really like how much room they took up in my About Me. After a long time of playing around with this, I finally got it looking the way I wanted.
This is designed for the About Me section. At some point, I will work on one for skins (as I really think this would look great on Parties).
With this code, you have to sc=panels before the Pkmn Panels, and /sc after. Unless there's a way to make them inline-display without that? (I couldn't figure that out)
Image
Coding
.panels{width: 310px; margin-left: -15px; }
.panels>div{display: inline-block; padding: 5px; ;}
.party>div{width: 140px!important; height: 150px; display: inline-block; background-color: gray; a {color: blue; a:link} }
.party{width: 140px!important; margin-bottom: -20px}a
.party>div>.pkmn:before {display: none;}
.party>div>.pkmn {margin: 0px 0px 0px 0px; float: right; margin-right: -15px; margin-top: -25px; }/*Pokemon*/
.party>div>.name {margin-top: -5px; margin-left: -3px; position: absolute;}/*Name Images*/
.party>div>.action {width: 45px; height: 50px; overflow: hidden; position: relative;}/*Berries*/
.party>div>.expbar {width: 75px;}/*EXP Bar*/
.party>div>.expbar>span{font-size: x-small; min-height: 30px!important;}/*EXP Bar*/
.party>div>.taste {display: none; clear: left; float: left; width: 450px; font-size: 10pt;}/*Preference*/
.party>div>.extra {display: none; clear: left; font-size: 10pt; padding-top: 4px;}/*Bottom Info*/
.party>div>.extra {display: none; clear: left; font-size: 10pt; padding-top: 4px;}/*Type*/
.party>div>.extra {display: none; clear: left; font-size: 10pt; padding-top: 4px;}/*Happy?*/
.party>div>.extra {display: none; clear: left; font-size: 10pt; padding-top: 4px;}/*Nature*/
.party>div>.action>.berrybuttons {text-align:center;}
.party>div>.action>.berrybuttons {text-align:center;}
.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;
}
Aliit Ori'shya Tal'din || Tai'shar Manetheren!
SamanthaNBishop on Archive of our Own and Wattpad!
Gaming || Writing || Pokemon Fan Fic: Angel of the Shadows
Avatar of Trainer, Alexandria "Angel" Flamel, by Me
Banner for me by Furret on PokeHeroes. Do not use without permission.
I find this guide really helpful, but i am having a little problem here.
Why are my progress bars all white? It is kind of hard to differ. I am not an expert at css so i need some help from experts here.
Why are my progress bars all white? It is kind of hard to differ. I am not an expert at css so i need some help from experts here.
QUOTE originally posted by Moçhellez
I find this guide really helpful, but i am having a little problem here.
Why are my progress bars all white? It is kind of hard to differ. I am not an expert at css so i need some help from experts here.
Why are my progress bars all white? It is kind of hard to differ. I am not an expert at css so i need some help from experts here.- about me
- collecting
- secrets
Yeah / He
Type race: 0209/500 
till mew hunt (buying at 100k credits each)
NEW ABOUT ME!!!! till mew hunt (buying at 100k credits each)SECRET TEXT MWAHHAHA
Ima edit this eventually, but for now es blank
wawwwww a fancy thingy!!!!
credits
Code @Colorful
Background from Pokemon Mystery Dungeon: Rescue Team DX
Profile picture by Cryst
Signature Picture by @crazyMissdream
Running Mew by @KitKatKutie2 | Shop
do you think you are able to tell me where in the main colors section?
QUOTE originally posted by Moçhellez
do you think you are able to tell me where in the main colors section?
@ Moçhellez
That is definitely the 'main color' section of your skin. The 'content background' and 'global background' bits to be precise.
The first is the white behind the entire task list and also shows up as the white boxes of your party pokemon. The second will show in the bars of the tasklist and is also visible as the white on your party pokemon's platforms.
The part of the progress bar that shows your progress (up to those little bars) are in the color of your global background, and the rest of the bar is the color of the content background, I believe.
Just change one and the task list should be more visible!
Avatar Credit
Avatar was made by Sjoran
i tried changing both of them with all 4 possible combinations. But my task list and exp progress bar is still not pretty clear.
Did you clear your browser cache?
Credits:
*Image of Purple Glaceon used with permission*
*Avatar is an official Glaceon sprite from Pokemon Conquest*
QUOTE originally posted by Leacky
Did you clear your browser cache?
Cannot post: Please log in to post