Site Skins: How-To, and Helpful CSS

Hello! I am currently working on some personal css skins but I was wondering if there was a way to replace the Neit icon with something else? I looked around for a bit but haven't found anything yet... Was hoping I may have a better chance here. Thank you :] EDIT: I also wanted to ask to be on the safe side, does that icon have to be a specific pixel size or does it just have to be a square?

absolutely! it's in my guide under the notifications tab as "notification button change"! here is the link!

Alrighty! That code did work so thank you so much :]

For those of you shelter hunting for tournament, this will find mild Pokemon. I used border so it will be compatible with the existing QoL features. #shelterarea .pokemon[data-nature="12"] { border: 2px solid red; } Looking for other natures? I have the number to nature list here: https://github.com/tarashia/PokeFarmQoL/blob/dev2/src/resources/natures.jsonc

#head-social > #notifs > a { background-image: url("https://images-wixmp-ed30a86b8c4ca887773594c2.wixmp.com/f/213f11f7-b47f-4f5c-b394-1bc1e6d41f48/ddvy36d-1c34d5c7-c009-4335-bd9a-1a001a5464d7.png?token=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ1cm46YXBwOjdlMGQxODg5ODIyNjQzNzNhNWYwZDQxNWVhMGQyNmUwIiwiaXNzIjoidXJuOmFwcDo3ZTBkMTg4OTgyMjY0MzczYTVmMGQ0MTVlYTBkMjZlMCIsIm9iaiI6W1t7InBhdGgiOiJcL2ZcLzIxM2YxMWY3LWI0N2YtNGY1Yy1iMzk0LTFiYzFlNmQ0MWY0OFwvZGR2eTM2ZC0xYzM0ZDVjNy1jMDA5LTQzMzUtYmQ5YS0xYTAwMWE1NDY0ZDcucG5nIn1dXSwiYXVkIjpbInVybjpzZXJ2aWNlOmZpbGUuZG93bmxvYWQiXX0.fONhrsWiCthr7pSDuMey-4bys75AnZ1_csGUqILefiA"); background-size: cover; background-position: center center; background-repeat: no-repeat; } #head-social > #notifs > a > img { opacity: 0; } .forumthreads>ul>li { background-color: black !important; } #header a:visited { color: #89ABD2 !important; } #header a { color: #c0d2e7 !important; } #footbar::after { content: 'WARNING: This CSS file uses the :has selector, which may be disabled by default. To enable :has in Firefox, visit about:config and toggle layout.css.has-selector.enabled.'; font-size: 10pt; font-family: consolas, monospace; color: black; border: 1px solid darkred; background-color: lightpink; display: block; position: fixed; width: 250px; padding: 3px 5px; margin: 5px; right: 0; bottom: 0; z-index: 999; } #footbar:has(*)::after { content: none; } #field_field { user-select: none; } #field_berries.selected > div > a { opacity: 1; } #field_berries.selected > div > a > img { opacity: 0.5; transition: opacity 0.4s linear; } #field_berries.selected > div > a.selected > img { opacity: 1; } [href='/online?auto']::before, #field_nav button[data-action='next']::before, #field_berries a[data-berry]::before, .fieldmon.cormyr::before, [href='/online?auto']::before { cursor: pointer; font-size: 20pt; line-height: 0; text-align: center; background-color: white; border: 3px solid black; border-radius: 16px; position: fixed; width: 20px; height: 20px; padding:20px; bottom: 30px; right: 700px; transform-origin: 0px 0px; z-index: 999; user-select: none; } .mq25:has([data-key="fieldClickCount"]:checked) body:has(#field_field[data-mode='public'])::after { content: ''; display: block; height: 60vw; user-select: none; } .mq25:has([data-key="fieldClickCount"]:checked) #field_field[data-mode='public'] .field::after { content: ''; background-color: white; display: block; position: fixed; height: 60vw; left: 0; bottom: 0; right: 0; user-select: none; } .mq25 [href='/online?auto']::before, .mq25 #field_nav button[data-action='next']::before, .mq25 #field_berries a[data-berry]::before, .mq25 .fieldmon.cormyr::before, .mq25 [href='/online?auto']::before { font-size: 64pt; border: none; border-top: 3px solid black; border-radius: 0; width: auto; height: 20vw; padding: 20vw; left: 0; bottom: 0; right: 0; } #core:has(#field_field[data-mode='public']):has([data-action='next'][disabled]) [href='/online?auto']::before { content: '👥'; } #core:has(#field_field[data-mode='public']):has([data-action='next'][disabled]):has([data-action='jump'][disabled]) [href='/online?auto']::before { content: none; } #core:has(#field_field[data-mode='public']):has([data-action='next'][disabled]):has(.fieldmon:not(.nothungry)) [href='/online?auto']::before { content: none; } button[data-action='next']:not([disabled])::before { content: '👉'; } #content:has(#field_field[data-mode='private']) button[data-action='next']::before, #content:has(.fieldmon:not(.nothungry)) button[data-action='next']::before, #core:has(#field_field[data-mode='public']):has(button[data-action='next'][disabled]):has(.fieldmon:not(.nothungry)) [href='/online?auto']::before { content: none; } #content:has(.fieldmon[data-flavour^='sour']:not(.nothungry)) a[data-berry='aspear']::before, #content:has(.fieldmon[data-flavour^='any']:not(.nothungry)) a[data-berry='aspear']::before, #content:has(a.selected[data-berry='aspear']) .fieldmon.cormyr:not(.nothungry)::before { content: '🍐'; } #content:has(.fieldmon[data-flavour^='spicy']:not(.nothungry)) a[data-berry='cheri']::before, #content:has(a.selected[data-berry='cheri']) .fieldmon.cormyr:not(.nothungry)::before { content: '🍒'; } #content:has(.fieldmon[data-flavour^='dry']:not(.nothungry)) a[data-berry='chesto']::before, #content:has(a.selected[data-berry='chesto']) .fieldmon.cormyr:not(.nothungry)::before { content: '🌰'; } #content:has(.fieldmon[data-flavour^='sweet']:not(.nothungry)) a[data-berry='pecha']::before, #content:has(a.selected[data-berry='pecha']) .fieldmon.cormyr:not(.nothungry)::before { content: '🍑'; } #content:has(.fieldmon[data-flavour^='bitter']:not(.nothungry)) a[data-berry='rawst']::before, #content:has(a.selected[data-berry='rawst']) .fieldmon.cormyr:not(.nothungry)::before { content: '🍓'; } #content:has(.fieldmon.cormyr:not(.nothungry)) a[data-berry]::before { content: none; } /* Hide with "Click counter" checkbox */ label:has([data-key="fieldClickCount"]) { font-size: 0; } label:has([data-key="fieldClickCount"])::after { content: ' Extra UI'; font-size: 12pt; } #content:has([data-key="fieldClickCount"]:not(:checked)) .fieldmon.cormyr::before, #content:has([data-key="fieldClickCount"]:not(:checked)) button[data-action='next']::before, #content:has([data-key="fieldClickCount"]:not(:checked)) [href='/user/~online']::before { content: none!important; } #footbar::after { content: 'WARNING: This CSS file uses the :has selector, which may be disabled by default. To enable :has in Firefox, visit about:config and toggle layout.css.has-selector.enabled.'; font-size: 10pt; font-family: consolas, monospace; color: black; border: 1px solid darkred; background-color: lightpink; display: block; position: fixed; width: 250px; padding: 3px 5px; margin: 5px; right: 0; bottom: 0; z-index: 999; } #footbar:has(*)::after { content: none; } .field[style*="unknown"]:has(.tooltip_content:first-of-type img:first-of-type[src*="fighting.png"]) { background-image: url(https://pokefarm.com/upload/:JnPv/fields/fighting.png)!important; } .field[style*="unknown"]:has(.tooltip_content:first-of-type img:first-of-type[src*="flying.png"]) { background-image: url(https://pokefarm.com/upload/:JnPv/fields/flying.png)!important; } .field[style*="unknown"]:has(.tooltip_content:first-of-type img:first-of-type[src*="poison.png"]) { background-image: url(https://pokefarm.com/upload/:JnPv/fields/poison.png)!important; } .field[style*="unknown"]:has(.tooltip_content:first-of-type img:first-of-type[src*="ground.png"]) { background-image: url(https://pokefarm.com/upload/:JnPv/fields/ground.png)!important; } .field[style*="unknown"]:has(.tooltip_content:first-of-type img:first-of-type[src*="rock.png"]) { background-image: url(https://pokefarm.com/upload/:JnPv/fields/rock.png)!important; } .field[style*="unknown"]:has(.tooltip_content:first-of-type img:first-of-type[src*="bug.png"]) { background-image: url(https://pokefarm.com/upload/:JnPv/fields/bug.png)!important; } .field[style*="unknown"]:has(.tooltip_content:first-of-type img:first-of-type[src*="ghost.png"]) { background-image: url(https://pokefarm.com/upload/:JnPv/fields/ghost.png)!important; } .field[style*="unknown"]:has(.tooltip_content:first-of-type img:first-of-type[src*="steel.png"]) { background-image: url(https://pokefarm.com/upload/:JnPv/fields/steel.png)!important; } .field[style*="unknown"]:has(.tooltip_content:first-of-type img:first-of-type[src*="fire.png"]) { background-image: url(https://pokefarm.com/upload/:JnPv/fields/fire.png)!important; } .field[style*="unknown"]:has(.tooltip_content:first-of-type img:first-of-type[src*="water.png"]) { background-image: url(https://pokefarm.com/upload/:JnPv/fields/water.png)!important; } .field[style*="unknown"]:has(.tooltip_content:first-of-type img:first-of-type[src*="grass.png"]) { background-image: url(https://pokefarm.com/upload/:JnPv/fields/grass.png)!important; } .field[style*="unknown"]:has(.tooltip_content:first-of-type img:first-of-type[src*="electric.png"]) { background-image: url(https://pokefarm.com/upload/:JnPv/fields/electric.png)!important; } .field[style*="unknown"]:has(.tooltip_content:first-of-type img:first-of-type[src*="psychic.png"]) { background-image: url(https://pokefarm.com/upload/:JnPv/fields/psychic.png)!important; } .field[style*="unknown"]:has(.tooltip_content:first-of-type img:first-of-type[src*="ice.png"]) { background-image: url(https://pokefarm.com/upload/:JnPv/fields/ice.png)!important; } .field[style*="unknown"]:has(.tooltip_content:first-of-type img:first-of-type[src*="dragon.png"]) { background-image: url(https://pokefarm.com/upload/:JnPv/fields/dragon.png)!important; } .field[style*="unknown"]:has(.tooltip_content:first-of-type img:first-of-type[src*="dark.png"]) { background-image: url(https://pokefarm.com/upload/:JnPv/fields/dark.png)!important; } .field[style*="unknown"]:has(.tooltip_content:first-of-type img:first-of-type[src*="fairy.png"]) { background-image: url(https://pokefarm.com/upload/:JnPv/fields/fairy.png)!important; } #shelterinfo { display: none !important; } .motd.warn { display: none !important; } #shelterarea .pokemon[data-nature="12"] { border: 2px solid red !important; }

i also don't see anything that would mess it up here, but uh. you should probably shove most of that stuff in your site skin instead of in the QoL-- the QoL isn't the safest place for it and if you ever want to use the code on multiple devices, you can't without copying a lot more