Site Skins: How-To, and Helpful CSS

👍 0

Posted 07/Jun/2023 16:52:52 (10 months ago)

does anyone know if there is a way to highlight pokemon and eggs in the shelter (and potentially other people's fields) that you don't already have dexed?

Type Race
Clicky

{0}

Ryu

Lv. 69 — 9,585 / 14,491

Likes:

Dry food

MAX

Quiet nature

paimon

👍 0

Posted 07/Jun/2023 17:01:33 (10 months ago)

QUOTE originally posted by Kosana

does anyone know if there is a way to highlight pokemon and eggs in the shelter (and potentially other people's fields) that you don't already have dexed?

you can use Qol for shelter! for other people's fields you need to manually add the list of pokemons to highlight

Hakano Riku

👍 5

Posted 08/Jun/2023 19:22:22 (10 months ago)

Not sure how relevent this is, but if anyone here is bothered by their super long trade histories in their Pokemon (when dexing), there is a way with CSS to hide just the trade histories and leave the rest untouched.

Full Post

QUOTE originally posted by Hayashi Rin

Just a little update here for those that would like it for the time being; there is CSS that can target particular types of history elements as of last year I believe, perhaps more recently for browser compatibility. An extra step is needed for people using Mozilla Firefox (like myself lol) on desktop, and it doesn't work on Mozilla for Android (possibly iOS too). Every other main browser (Chrome, Edge, Safari, Opera) updated to the latest version should be able to use it. For example, placing the following in your site skin can hide all of your Pokemon's "trade" history leaving everything else still visible:

#timeline > li:has(use[*|href*="svg_icon_trade"]) { display: none; }

You can even hide history by usernames, so you can hide trade history that does not contain friends you specify by doing the following:

#timeline > li:has(svg > use[*|href*="svg_icon_trade"]):not(:has(.tlitem > :is(a[href*="USERNAME"], a[href*="USERNAME2", a[href*="USERNAME3"]))) { display: none; }

Or:

#timeline > li:has(use[*|href*="svg_icon_trade"]) { display: none; }
#timeline > li:has(.tlitem > :is(a[href*="USERNAME"], a[href*="USERNAME2", a[href*="USERNAME3"])) { display: block !important; }

And if you want to get even more complicated, you can target only particular pokemon's histories by specifying their pids as such:

#summarypage > #summary_col1:has(.party > div[data-pid="PKMN-PID"]) ~ #summary_col3 #timeline > li:has(use[*|href*="svg_icon_trade"]) { display: none; }

The following are the types of history you can target with CSS, they are indicated by the icon on the left of the history entry:

"svg_icon_create
": ☥ | ankh icon?
"svg_icon_obtain
": + | plus icon
"svg_icon_release
": x | times icon
"svg_icon_hatch
": 🥚 | egg icon
"svg_icon_trade
": ⇆ | exchange icon
"svg_icon_evolve
": 🗲 | lightning icon
"svg_icon_level
": ↑ | up arrow icon

For those using Mozilla Firefox on PC, you will have to enable the ":has()" selector manually before you can use this by doing the following:

> Open a new tab and enter "about:config
" into the address bar at the top (where urls go).

> In the page that appears, type "layout.css.has-selector.enabled
" into the search preferences bar. An item with a "true" or "false" value should appear.

> Toggle the value to "true" if it isn't already.

Not sure what kind of impact this has on page loading performance, but it should only happen on the summary page. Hopefully this helps some of those who would like to hide history entries ^^

You can hide particular users' entries only, hide other types of history entries, hide all BUT particular users and so on...Can even only do this in particular Pokemon's histories and leave the rest of your Pokemon untouched. Probably more you can do with complicated selectors, but just thought I'd throw this in here in case anybody wants to use it ^^

Avatar of Dian Rubens from Spice & Wolf

Type Race Score: 0

Type Race Clicklist: HERE

Volitaine

👍 0

Posted 15/Jun/2023 18:28:44 (10 months ago)

I'm sure this has to be posted somewhere but after a few hours of looking I still can't find it. I've seen people post their pokemon on the platform, but with a clickable berry in the corner so people can feed it without having to click into its page. How is this done?

Volitaine | Ace | Elder | Vulture | Slypin fan Confused by coding Art @ Myself Art Shop Link

paimon

👍 0

Posted 15/Jun/2023 18:34:32 (10 months ago)

QUOTE originally posted by Volitaine

I'm sure this has to be posted somewhere but after a few hours of looking I still can't find it. I've seen people post their pokemon on the platform, but with a clickable berry in the corner so people can feed it without having to click into its page. How is this done?

u use the code [ pkmnpanel=code ] so! like. if ur pkmn link is https://pokefarm.com/summary/52Bd8 then u use the cofe [ pkmnpanel= 52Bd8 ] (w/o the spaces)

Volitaine

👍 0

Posted 15/Jun/2023 18:44:10 (10 months ago)

Thank you. :)

Gem217

👍 0

Posted 15/Jun/2023 19:40:52 (10 months ago)
Edited 15/Jun/2023 19:52:00 (10 months ago)

Hi, I've had a scan through and can't see if anyone has asked this. I only went back about 20 pages, I'll admitt! I use the kind of app for pokefarm and after changing all the colours for the skin. It only works on half the site, yet when I open it in the web browser, it has worked correctly in full. Is this something to do with the app? Thanks so much! Edit - I think it just took a bit longer to think about it! It's just switched over now haha. One more quick question though, is there a way to change the colour of the boxes? EG. The field boxes and the boxes such as the 'edit, preview, etc' that are in the forum? They are the standard grey at the moment. Hope that makes sense!

Pokemon trainer since '99

Score: 760

Credit to LycanKai

× 391 / 500

Buying for 20zc

Hakano Riku

👍 0

Posted 17/Jun/2023 07:43:38 (10 months ago)

QUOTE originally posted by Gem217

... One more quick question though, is there a way to change the colour of the boxes? EG. The field boxes and the boxes such as the 'edit, preview, etc' that are in the forum? They are the standard grey at the moment. Hope that makes sense!

If by that, you mean the light gray buttons (next/previous/field navigation, post, preview, insert..., expand and so on), you can! Technically every aspect of the site is changeable style-wise to some degree. Only issue is, only by CSS; the basic color changing of site skins is pretty limited, but the "Extra CSS" field in site skins is where the magic happens, for those who know their way around CSS. There is a user guide HERE if you would like to check that out, though it might feel quite confusing at first. Otherwise, to change those buttons, you can for the most part by adding the following to your Extra CSS:

button {
    background-color: #E7E7E7; //The main color of the buttons
    color: #00000; //Color of the text on the buttons
    border-color: #121212; //The color of the pixel-thin border
    border-radius: 0; // N% or Npx, rounds the corners
    font-weight: normal; //normal or bold for more visibility
}

button:hover {
    //Same as above, but only when hovering over a button
}

button:active {
    //Same as above, when holding down a button before releasing
}

Usually when changing CSS, you'll have the same issue as before where things might not take effect immediately. On browser, you can fix this by cache refreshing, but for the "app" I believe it's just a waiting game unfortunately. Also, sometimes CSS is different between browsers, so some things will work on your browser while others you'll need to figure out a different way to change things. CSS can be troublesome like that at times. Hopefully this is what you were looking for ^^

Kuusouka

👍 0

Posted 20/Jun/2023 23:39:38 (10 months ago)
Edited 20/Jun/2023 23:49:42 (10 months ago)

Ty for the guide!

mallowbug

👍 0

Posted 27/Jun/2023 19:25:34 (9 months ago)

sorry if it's been posted but there's too much here to look through. is there a code for replacing/changing the wishforge badge images on the trainer card?