Free CSS, Userscripts, etc
Forum Index > Other > Other Art >
QUOTE originally posted by IconicAnemone
could you post the exact code for a signiture version of the template above this post?
QUOTE originally posted by aud.rey
quote
QUOTE originally posted by DrWho
Here's a free template! It works as a post template as well as an about me template. You can find the code here: https://gitlab.com/alythal/pfq-stuff/-/raw/master/about-me-pages
- move left and right with < > buttons
- background scrolls by a configurable abount when you navigate
- sidebar that pops out
- Page One
- Page Two
- Page Three
Page One
background by ingmar @ unsplash link eevee from the pokemon anime bottom texthide
hide content
| this | is |
|---|---|
| this | is |
| a | table |
Page Two
Page Two Content Page Two Content Page Two Content Page Two ContentPage Three
Page Three Contentkeep this for the background!
unrelated but to be completely honest - i don't like how any of my templates look anyway, i'll leave the code up for anyone who cares for how the css works, or build sth new with it. meaning 'do with the code with you like'. but i'll just stop 'advertising' it as sth to use. to be clear this isn't related to anyone's post, it's something i wanted to do for a while.
Avatar by Kaelwolfur.
Sent from my PokéNav
Quote
QUOTE originally posted by DrWho
You can re-play the animation of any pokemon hatching. I'm tired now so I'll just drop the code. If you like you can change the variables at the start and run it in the browser console. Tomorrow I think I'll make a post about how to use the browser debugger to find these animations.
the code
species = `Skiddo`
gender = `f`
hatched_sprite = `https://pfq-static.com/img/pkmn/t/u/9/x.png/t=1543796180`
gem = 'Grass'
pokemon_id = `F8Cgx`
/* ----- */
c = pokemon_id
a = $(`[data-pid="${c}"]`)
b = {
gems: `<img src="https://pfq-static.com/img/items/gem_${gem.toLowerCase()}.png/t=1369079719" class="itemsprite" alt="${gem} Gem" data-tooltip/>`,
name: `<a class="summarylink" draggable="false" href="/summary/F8CqW" style="width:184px">${species}</a><img src="https://pfq-static.com/img/pkmn/gender_${gender}.png/t=1401213007" title="[F]"/>`,
sprite: hatched_sprite,
}
n = $(`[data-pid="${c}"] > div.pkmn`)
e = hatched_sprite
v = {
cracks : "https://pfq-static.com/img/pkmn/cracks.png",
//shiny1 : "https://pfq-static.com/img/particles/shiny1.png",
//shiny2 : "https://pfq-static.com/img/particles/shiny2.png",
//shiny1 : "https://pfq-static.com/img/particles/albino1.png",
//shiny2 : "https://pfq-static.com/img/particles/albino2.png",
shiny1 : "https://pfq-static.com/img/particles/melan1.png",
shiny2 : "https://pfq-static.com/img/particles/melan2.png",
}
q = function () {
a.find(">.pkmn").html('<div class="pokemon" style="background-image: url(\'' +
b.sprite + "')\"></div>");
a.find(">.name").html(b.name);
a.find(">.expbar").css("visibility", "hidden");
a.find(">.action").html('<table><tr><td>Egg hatched!<br /><span class="hatchgems">' + b.gems + "</span><button>OK</button></td></tr></table>");
a.find(">.action button").on("click", function () {
a.css("opacity", 0);
var b = $(this);
b.prop("disabled", !0);
setTimeout(function () {
ajax("summary/load", {
id: c,
smallberries: !0
}).success(function (b) {
b = $(b.html);
a.html(b.html());
a.css("opacity", "")
}).failure(function () {
b.prop("disabled",
!1);
a.css("opacity", "");
return !0
})
}, 500)
});
a.trigger("pfq-hatch")
}
$.PFQanim.hatch(n,e,v,q)
Hi, thanks for your post! I'm sorry I missed to explain it in the post. I just tried it mysself and it didn't work for me either. Do you see the this error message?
The pokemon you run it on must be an egg.
So with this configuration at the start of the script:
The pokemon_id ought to be one of an egg, then you can make it look like a male Snom hatches from it with an Ice gem.
QUOTE
Uncaught TypeError: n.find(...).css(...) is undefined
hatch https://pfq-static.com/js/index/sally.min.js/t=1605621938:95
<anonymous> debugger eval code:55
debugger eval code:95:72
QUOTE
species = `Snom`
gender = `m`
hatched_sprite = `https://pfq-static.com/img/pkmn/b/b/y/l.png/t=1591125451`
gem = 'Ice'
pokemon_id = `hwM0k`
Also, I was gonna post something..
So what's different?
* edit 2020-12-06: the interface was not stretched to the full width of the screen if the multiuser list only has a few users. now fixed. * edit 2020-12-08: missing a #multiuser prefix so the buttons on regular profile pages were too large
Immersive mode (custom CSS)
I'm sure everyone here's see the thread Site Skins: How-To, and Helpful CSS, full of scripts to make field clicking, party clicking and shelter hunting more pleasant by far. I've been playing mostly on mobile lately and wanted to offer an alternative 'immersive' version of the QoL CSS. Here's an example of one style I wrote, for multiuser clicking:Mobile view
Desktop view
So what's different?
- Huuuge buttons, so you can click using 1, 2, 3 (or more?) fingers and look away while clicking
- Precautions to make sure the page doesn't jump unexpectedly
Some notes from a CSS perspective
- There's just one code - it's identical for desktop and mobile devices. To identify mobile devices the PFQ styleclasses can be used.
- Use of vw/vh (viewport units), so you can style the button e.g. '80% of the screen'
- Use of fixed position to make sure the relevant section is glued to the screen
- Heavy use of CSS variables (--var-syntax). This offers a quick way to modify the css and should make it more consistent. It's also pure CSS (as opposed to LESS) so you can use it both it custom CSS and browser extensions
The code
I wonder what you all think. Is this is worth continuing, perhaps making a similar stylesheet for fields. Here's the code for multiuser clicks. To get out of the immersive mode, click the username and you'll get to their profile page (whcih should look as always). If you wanna try it out I'd be happy to hear your opinions and suggestions.:root {
--multiuser-button-height: 5em;
--multiuser-border-radius: 8px;
}
@media only screen and (max-width: 768px) {
:root {
--multiuser-button-height: 80vh;
}
#multiuser {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99999;
background: rgba(0,0,0,0.9);
height: 100vh;
overflow: auto;
}
}
@media only screen and (min-width: 768px) {
/* else next butotn touches the trainer card directly */
#partybox {
margin-right: 1em;
}
}
#multiuser h1 {
/* fix that icon next to name causes jumps */
display: flex;
justify-content: center;
align-items: center;
}
.mq2 #multiuser .tab-active {
margin: 0;
left: 0;
right: 0;
}
.mq2 #profilepage,
.mq2 #partybox, .multi-compact #partybox {
width: auto
}
#multiuser #partybox .party > div {
/* by making this static we can place the buttons
relative to the partybox */
position: static;
}
#multiuser #partybox {
position: relative;
padding-top: calc(var(--multiuser-button-height) + 1em)
}
#multiuser #partybox .action {
/* action button (hold the egg or berry) */
position: absolute;
/*allows for collapse when done*/
min-height: 0;
height: auto;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
}
#multiuser #partybox .action > a,
#multiuser #partybox .action > div,
#multiuser #partybox .mu_navlink.next {
/* next button AND action button*/
padding: 0;
margin: 0;
min-height: var(--multiuser-button-height);
line-height: var(--multiuser-button-height);
}
#multiuser #partybox .action > a {
display: flex;
align-items: center;
justify-content: center;
}
#multiuser #partybox .mu_navlink.next {
/* next button */
position: absolute;
top: 0;
left: 0;
width: 100%;
z-index: 9998;
border-radius: var(--multiuser-border-radius);
}
#multiuser #partybox .action:empty,
#multiuser #partybox .action > table,
#multiuser #partybox .action.working,
#multiuser #partybox .berrybuttons > .tooltip_content {
/*hide action when it is *empty *processing the berry
or *showing "Thank you!" */
display: none;
}
#multiuser #partybox .berrybuttons > a {
/*only 1 berry per berrybuttons*/
display: none;
height: 100%;
width: 100%;
line-height: var(--multiuser-button-height);
}
#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;
border-radius: var(--multiuser-border-radius);
}
.party > div:hover > .action a[data-berry]::after {
/* no border on berry hover */
border-color: transparent;
}
* edit 2020-12-06: the interface was not stretched to the full width of the screen if the multiuser list only has a few users. now fixed. * edit 2020-12-08: missing a #multiuser prefix so the buttons on regular profile pages were too large
QUOTE originally posted by DrWho
Hi, thanks for your post! I'm sorry I missed to explain it in the post. I just tried it mysself and it didn't work for me either. Do you see the this error message?
The pokemon you run it on must be an egg.
So with this configuration at the start of the script:
The pokemon_id ought to be one of an egg, then you can make it look like a male Snom hatches from it with an Ice gem.
QUOTE
Uncaught TypeError: n.find(...).css(...) is undefined
hatch https://pfq-static.com/js/index/sally.min.js/t=1605621938:95
<anonymous> debugger eval code:55
debugger eval code:95:72
QUOTE
species = `Snom`
gender = `m`
hatched_sprite = `https://pfq-static.com/img/pkmn/b/b/y/l.png/t=1591125451`
gem = 'Ice'
pokemon_id = `hwM0k`
Template
species = `POKEMON NAME HERE`
gender = `GENDER HERE (M OR F)`
hatched_sprite = `IMG FILE OF SHINY/ALBINO/MELAN HERE`
gem = 'GEM TYPE HERE'
pokemon_id = `ID OF POKEMON EGG HERE`
hiya! i'm trying to test out the rehatch animation, but it won't work for me. ^^"
whenever i try to do it, it gives me:
An internal error has occurred.
Message: CSS style error: parse error: failed at `species = `Spritzkrow`` line: 312
even if i change the name, the code will still fail at the species area.
Spewpa • She/Her • Touches Grass Occasionally
on hiatus/quit, will reply eventually
0/500 Raijin's Lamps 
- Buying at 150gp/equiv per*
HOARDING - 
*Only if I have the currency
- Buying at 150gp/equiv per*
HOARDING -
*Only if I have the currency
Background + Art | Code | Forum Icon - Bungo Stray Dogs: Gaiden
Hey Final, thanks so much for posting it on the other thread, and thanks for making the template as well!
Hi Spewpa, from the error message I guess you're trying to run it as CSS? Sorry I hadn't explainied this in the post before, it's actually Javascript which you can run from the browser console. I updated the post with instructions on how to use it, I hope it helps? If anyone wants to make it more friendly to use please do, maybe I'll get around to it too.
QUOTE originally posted by Spewpa
Message: CSS style error: parse error: failed at `species = `Spritzkrow`` line: 312
I also noticed that the code for hatching works on shelter eggs/eggs you don't own. Works the same way, grab the code of whatever egg you wanna see hatch and it'll do it if you're on the egg's page as long as nothing else is causing an error.
Hi FinalAbsolution, thanks so much discovering and sharing this!! I'm so sorry I forgot to reply earlier - I added that info to the now and quoted you.
Update on the block script
Thank you very much to the user who suggested some features to be added to the block script. As I guess you all know, this is now a sanctioned userscript and can be enabled from the PFQ settings (more info here). But.. I've made some changes, and those changes are just in Gitlab, not in the sanctioned PFQ Userscript. You can get this latest development version by updating the userscript in Tampermonkey (or similar extension). Just click the gitlab link and it should ask you to update. If you use this version, please disable the block script in PFQ settings and install it from Gitalb (so only 1 script is running at a time). Your list of blocked users remains. If you use it, I'd greatly appreciate if you notice any issues or hear other opinions or suggestions! If feedback is positive, I'll ask Niet if he would approve the update and add it to sanctioned script. The block script now does the following:- "Nice!"s from blocked users are not shown
- In the PM list https://pokefarm.com/pm conversations with blocked users are not shown. No 'show anyway' button, they're just not shown unless you unblock the user.
- Links to blocked names are anonymized on all PFQ pages - On the VIP list, Users Online, clicklistm, etc the name of a blocked user is 'Someone'. This only works if the link was made by PFQ, so if someone links a blocked user in their About section, the name is shown.
- faster and better error handling
details
The block script runs a 'handler' depending on the page it runs on. There's a handler that activates on user profiles, one for forums, one that activates on all pages etc. Each handler is executed asynchronously, so your browser isn't blocked while the block script does its work. Each handler is also run in a try-catch so if one handler fails the others continue to run.
No problem. I was pretty excited about it- made a post in my journal about it too when I found that out, haha.
As for the block script, I'd be happy to test it with you. We can communicate on Discord if you have it and I can block you and test out all the features- or vice versa.
Cannot post: Please log in to post