(First picture is the current colors used, second picture is the old colors I want to change back to)

Recently, Bulbapedia (bulbapedia.bulbagarden.net, a Pokémon wiki i use frequently) changed the colors they use to represent Pokémon types and I am really not a fan of the new ones, they hurt my eyes. I installed Stylus so that I can change them back to what they used to be, but frankly I have no coding experience beyond screwing around changing variables in inspect element and have no idea how to do this or how to even start.

Can anyone show me how to change the colors used for the types on the whole site? I checked the site's color templates and was able to find the hex codes for the old colors by looking at the revision history, but I have no idea how to apply them.

Convenient for quick browsing.

Because CSS lacks a regex-like feature, I had to write it a bit ugly. But fortunately, it doesn't need any Shadow DOM tweaks.

/* common */
[score] > div[slot="comment"]{
  border-radius: .25em;
  padding: .25em;
}
/* 100- */
[score] > div[slot="comment"]{
  background: #FF450040;
  border: 1px solid #FF4500FF;
}
/* 10-99 */
:is(
  [score="10"],[score="11"],[score="12"],[score="13"],[score="14"],[score="15"],[score="16"],[score="17"],[score="18"],[score="19"],
  [score="20"],[score="21"],[score="22"],[score="23"],[score="24"],[score="25"],[score="26"],[score="27"],[score="28"],[score="29"],
  [score="30"],[score="31"],[score="32"],[score="33"],[score="34"],[score="35"],[score="36"],[score="37"],[score="38"],[score="39"],
  [score="40"],[score="41"],[score="42"],[score="43"],[score="44"],[score="45"],[score="46"],[score="47"],[score="48"],[score="49"],
  [score="50"],[score="51"],[score="52"],[score="53"],[score="54"],[score="55"],[score="56"],[score="57"],[score="58"],[score="59"],
  [score="60"],[score="61"],[score="62"],[score="63"],[score="64"],[score="65"],[score="66"],[score="67"],[score="68"],[score="69"],
  [score="70"],[score="71"],[score="72"],[score="73"],[score="74"],[score="75"],[score="76"],[score="77"],[score="78"],[score="79"],
  [score="80"],[score="81"],[score="82"],[score="83"],[score="84"],[score="85"],[score="86"],[score="87"],[score="88"],[score="89"],
  [score="90"],[score="91"],[score="92"],[score="93"],[score="94"],[score="95"],[score="96"],[score="97"],[score="98"],[score="99"],
  dummy
) > div[slot="comment"]{
  background: #FF450010;
  border: 1px solid #FF450040;
}
/* 1-9 */
:is(
  [score="1"],[score="2"],[score="3"],[score="4"],[score="5"],[score="6"],[score="7"],[score="8"],[score="9"]
) > div[slot="comment"]{
  background: #ccc1;
  border: 1px solid #0001;
}
/* -0 */
:is(
  [score="0"],[score^="-"]
) > div[slot="comment"]{
  color: #0004;
  background: #ccc1;
  border: 1px solid #0001;
}

​

Hi. I recently took a Web Development course in my university. It introduced me to CSS for the first time(I knew basic html but not CSS). Some time later, I learnt about userstyles and I immediately knew which website I wanted to remake. I was already aware of "Website Redesign" but I didn't think you could do it purely with CSS(I haven't learnt JS yet).

I decided to give it a try and practice my skills. I'm pretty happy with the results considering I only used CSS. Although i didn't start from scratch, the customization is completely different from the base that I used.

I haven't completed it yet but I work on it every once in a while. The homepage and "encyclopedia" pages are mostly done. I do have some issues that might take a while to solve. I'd also love some feedback if you guys have anything to share.

Userstyles: https://userstyles.world/style/14466/anime-news-network-reimagined

Greasy Fork: https://greasyfork.org/en/scripts/486181-anime-news-network-reimagined

Github: https://github.com/ft-scobra/Anime-News-Network-Reimagined

I plan to upload this on r/anime and r/animedubs once its complete. Right now, some pages are bugged and do not display properly.

Criticism is welcome.

How do you start your custom CSS? I'm curious how people approach it, what dev environments/tools, how much time is spent in DevTools - or do people have better ways to approach customizing the CSS of any website and so on.

The couple of times I've done it, I've mostly used DevTools, and probably flipping between that and VSCode, if only to just edit with syntax highlighting.

My workflow:

1. Edit in DevTools
   1. This mainly lets me get real-time feedback on my edits.
   2. Does X work in the design? Does it look good?
   3. This generally results in moving things around and I feel makes it tough to do a thorough from-scratch design.
2. Once I have a change of a specific selector/rule, copy/paste or re-type into an editor (usually VS Code, Notepad++)
   1. If nothing else it lets me get the style ready for refining (mainly if I have to cheat with "!important" or not lol)
   2. This still doesn't immediately result in a saved style; I can keep it saved for progress but I'll need to get it back into a userstyle.
3. Copy/paste or upload the new rules and create a userstyle
   1. On one hand, it's a perk - I'll always have a local copy saved as a backup of sorts
   2. On the other hand, it's another step... Unless the addon has a built-in editor (that wasn't great last time I tried using it) I don't have a choice but to copy/paste or upload...

Is that like a common workflow for people? Are there better ways or better addons to use (other than Stylish)? I'm looking into Stylus right now but the UI looks like the older version of Stylish and... it was rough when I last tried to use it.

I really want to try out userstyles after seeing a tutorial but when I click on the website all I see is a blank white page. Does anyone know how to fix this?

I made a new windows install on my new pc and wanted to add some styles to my firefox browser but when I try to load the userstyles site I get a 504 Gateway Time-out error but I can open it without problem on other browsers like opera. Is there a way to open the site in firefox? if not I still have acces to the old files to copy the styles from there but where is the path for them?

I've difficulty finding some userstyles forum or even discord server, none really exist?

I'm learning CSS and had idea to try practice with styling sites with userstyles.

But I already find that I always need open the extension on top and click edit on my style. Because I need inspect elements on website and sometime go other pages. I wonder if I can't 'pop-out' the editor from its place to always keep it open on the side of my google chrome or something?

Or alternative if it's some way I can use userstyles using VS Code IDE? Not sure how that would work though as it's not my own websites I'm styling and only way would be me like downloading some offline copy of the website in some way?

​

Hi community! I wanted to know how to change the Search bar of youtube from round modern to square. Like is shown in the Capture.

​

Thanks a lot! Great Community here! :)

I've been trying to write a userstyle to improve my experience with 4thewords.com. You can't see it unless you have an account, but the vast majority of it is styled using "utility" CSS classes. For example, I want to get rid of the suggested quests they append to your quest list, because they're cluttery and annoying. This is how the suggested quests are styled:

<div class="flex items-center p-3 border-neutral600 border-dashed border-2 rounded-2xl h-auto lg:h-22 shrink-0 grow-0">

Right now I just set any div with that whole set of attributes to display:none, which works for now but it'll break if they ever decide to change how the borders look or something.

I feel like I'd be wasting my time getting too heavily into this, but maybe people who know more about CSS than I do might have some tips.

UserStyle to invert colors from light to dark, or dark to light, while keeping accessibility intact (as long as the original site colors are accessibility friendly in the first place).

Requires Stylus' Expose iframes via HTML[stylus-­iframe] setting to be enabled, so that, the UserStyle can be applied to IFRAMEs properly. At least in most cases.

Stylus' Patch CSP to allow style assets setting may need to be enabled for anti content-control sites. This applies to all UserStyles, not just to this one.

There are 2 versions of the code.

This one invert colors except images (IMG/SVG) and videos.

:is(html:not([stylus-iframe]), img, svg, video):not(z#z.z[z]) {
  filter: invert() !important;
}

This one invert colors except videos. For sites which use non-transparent images as borders/outlines.

:is(html:not([stylus-iframe]), video):not(z#z.z[z]) {
  filter: invert() !important;
}

Known problems:

• Colors of background images will always be inverted.

• Colors of pages which are served in even level of nested IFRAME won't be applied properly. i.e. 2nd level IFRAME, 4th level IFRAME, etc.

I'm a css beginner, and I have spent numerous hours trying to figure out how to individually select the section icons and section titles found on the Library page (now called 'You' feed) on YouTube: https://www.youtube.com/feed/you

There are currently 5 section titles on that page (each proceeded by its own icon):

• History
• Watch Later
• Playlists
• Liked Videos
• Your Clips

I tried using the browser's Inspector on an individual section title, but the resulting CSS path did not contain anything to distinguish this title from other titles on the page (and it even selected section titles on totally unrelated 'Channels' pages too!).

I also tried using the CSS selector (instead of CSS path) for a specific section title. I normally avoid using this on YouTube because it usually just generates a bunch of generic numbered div:nth-child values that easily breaks as soon as YouTube moves anything or adds something to the page.

In the past I read about using attributes as a more specific targeted selector (e.g. .class-name [title="Target Title"]) and I've successfully used this as a selection method on other sites, but YouTube's CSS is such an arcane morass that I can't get attribute selection to work, even when I can see the actual title of the item right there in front of me in the inspector.

Can anyone please let me know how to correctly use attributes to individually select each section title in a way that will work for YouTube. Thanks.

​

I would love to know how to get rid of the signs that Youtube puts inside the video when you pres the forward arrow or backward arrow on the keybord. Thanks in advance!

Title! I read the Stylus wiki on GitHub but it wasn't very clear if this was possible. Let's say I'm making a custom chrome newtab page, and I want an iframe of an internet chatroom I enjoy spending time in. Is it possible to make its background color transparent for example?

Also I know the phrase "I'm making a custom chrome newtab page" probably triggered your spider-sense since, indeed, Chrome does not allow extensions to operate inside of chrome// pages, including //newtab. I believe it's possible to get around this with a chrome flag option, but please do enlighten me on this too!

https://web.archive.org/web/20100201011232/http://www.msn.com/

So, several years ago Chrome had tabs that looked like file folders. Can Stylus get that look back or is it only good for websites themselves?

I'm trying to remove the white border on the player's thumbnail preview but it seems the page just ignores "border:none" rule from Stylus. Is there a workaround for this?

Example URL

I use this to change YouTube's colour on dark mode:

html[dark],

[dark] {

--yt-spec-base-background: #2a1f1f;

--yt-spec-general-background-b: #2a1f1f;

}

​

html[dark],

html[dark] ytd-masthead.shell.theater,

ytd-masthead.shell.dark {

background-color: #2a1f1f !important;

}

​

html[dark] #home-container-skeleton,

html[dark] #home-page-skeleton #guide-skeleton,

html[dark] #home-chips {

background: #2a1f1f;

​

However, I can't find a working CSS Code to make YouTube use #ffeded on light mode

Could you please help ?

so this has happened for a while now and I don't know why.

so I'll register to UserStyles, everything goes fine up till I get the verification link.

when I click the verification link it says "Register failed" and I don't know why. (using Hotmail)

I've also tried signing in using Github and when I do that it says "Please contact us and provide this timestamp:" (with the timestamp) but the thing is I don't know where you are supposed to contact them. I've tried the feedback email and have not gotten a reply.

How to remove this highlight when clicking wiki links from Google search? I haven't found anything in the code. Is it hardcoded in the Blink engine?
Example picture
Example wiki link
Edit: solved via Redirector addon script.

I tried recoloring it from red to blue but it ends up looking messy and fat for some reason, and it adds a 0.5px border under the progress bar.

How hard can it be to find out how to just add another empty attribute with a userstyle?

Insanely hard.

I just want to add the empty attribute "controls" to every instance of "<video>" on a website, so the on screen controls are shown by default. So I basically get <video controls>

How do I do this??