RESOURCE Custom Usergroup Colors v4.0 & Style Fixes v3.0 (Browser Add-on)

  • Before posting a thread, please take a look at the Iwaku FAQs to see if your question has already been answered there!

Ardent

your blood on my teeth
Original poster
FOLKLORE MEMBER
Invitation Status
  1. Not accepting invites at this time
Posting Speed
  1. Multiple posts per week
  2. 1-3 posts per week
  3. One post per week
  4. Slow As Molasses
Online Availability
12NN-4PM, 7PM~
Writing Levels
  1. Intermediate
  2. Adept
  3. Advanced
  4. Adaptable
Preferred Character Gender
  1. No Preferences
Genres
Horror, Dark Fantasy, Modern
IMPORTANT UPDATE

I have uploaded both stylesheets to userstyles.world, which is admittedly a much better website than the last one. All links in this thread have been updated.

You will still find my stylesheets in the old website, but I recommend that you use the new one.

Another note: Iwaku makes minor and major updates regularly, which means these stylesheets will also have to be updated accordingly. Remember to check this thread now and then to install the current version. You can check the changelogs to see if you are up to date.


CUSTOM USERGROUP COLORS v4.0

Since the old versions by Kitti and Wolk are no longer working or are missing some selectors, I decided to create an updated version of their work. This stylesheet will enable you to tweak username and banner colors according to usergroups (Administrator, Staff, Regular Members, etc.).

Once again, you'll need to have the Stylus add-on installed on your browser. If you're using Firefox, you can get it from here. Chrome users can get it from here. Skip this step if the add-on is already installed.

You'll then have to go to this link. Hit Screenshot 2022-04-06 032729.png. You will be redirected to the extension page. Here you will find a configuration menu. Feel free to customize the different usergroup colors until you're pleased with the result. When you're finished, hit the Screenshot 2022-04-06 032641.png button.

If you ever feel like changing the colors later on, click on the Stylus extension on your browser. Then, click the gear button next to the name of the stylesheet. Screenshot 2022-04-06 033327.png

v4.0 (May 4, 2022)
  • Add new selectors .username--style85 (Folklore) and .username--style86 (Mythical) for new usergroups
  • Add new selectors for new usergroup ribbons: .ribbonFolklore, .ribbonMythical and .ribbonStaff
  • Assign one color picker for all staff departments
  • Add selectors .username--style33 and .ribbonLurker (Inactive Members)
  • Change default colors

v3.2 (April 3, 2022)
  • Add new selector .username--style84 (Roleplay Lead)
v3.1 (March 3, 2022)
  • Add new selector .username--style83 (Community Lead)
  • Change Administrator and Security Staff default colors for better legibility on Dusk theme.

STYLE FIXES v3.0


This stylesheet resolves various styling issues on Iwaku, like the account button font color (which primarily affects light theme users), the shape of the scroll button, and the issue that causes the toggle signature button to hide behind signature content, rendering it unclickable.

Here's how to get it installed on your browser:

First, you'll need to install Stylus (an addon). If you're using Firefox, you can get it from here. Chrome users can get it from here.
Next, you'll need to go to this link. Hit Screenshot 2022-04-06 032729.png. You will be redirected to the extension page. Hit the Screenshot 2022-04-06 032641.png button. (Yes, that's two install buttons).

And that's it. I hope that helps!

v3.0 (November 9, 2022)
  • Remove all reaction fixes
  • Rename stylesheet to "Style Fixes"

v2.2 (July 13, 2022)
  • Remove reaction 18 (Valentine)
  • Fix new reactions 19 (This Gives Me Plot Bunnies), 20 (Creepy), 21 (What a Twist), 22 (Hit Me in My Feels), 23 (I'm Shook), and 24 (Wicked).
v2.1 (April 14, 2022)
  • Remove linear gradient causing signature fade-out to appear black on light and gray theme users.
v2.0 (April 6, 2022)
  • Fix styling issue that causes account menu and chat badge to appear unreadable on lighter themes.
  • Fix styling issue causing scroll button to appear oval rather than circular.
  • Fix styling issue that causes toggle signature button to render underneath signature content.
v1.2 (February 15, 2022)
  • Fix new reaction 18 (Valentine)
v1.1 (January 16, 2022)
  • Fix new reactions 1 (Like), 2 (Love), and 3 (Haha)
 

Attachments

  • Screenshot 2022-04-06 032614.png
    Screenshot 2022-04-06 032614.png
    3.4 KB · Views: 13
Last edited:
It seems like the only ones that are still large are the thumb, red heart, and haha! At least when I downloaded it they still are showing as the larger version. It looks like this:
uGvoDG.png
 
It seems like the only ones that are still large are the thumb, red heart, and haha! At least when I downloaded it they still are showing as the larger version. It looks like this:
uGvoDG.png

That's because the emojis were recently changed :^) The stylesheet can't update itself! But I updated it now, so it should be good. Check the link again, and just click the update button.

Let me know if there are any other problems!
 
  • Like
Reactions: Absyinthe_Artica
Updated the original post to include Custom Usergroup Colors 3.0.
 
Resized Reactions v1.2 (February 15, 2022)
  • Fix new reaction 18 (Valentine)

Custom Usergroup Colors v3.1 (March 3, 2022)
  • Add new selector .username--style83 (Community Lead)
  • Change Administrator and Security Staff default colors for better legibility on Dusk theme.

You may have to update the stylesheets in order to see the changes.
 
Last edited:
Hey @Ardent. For some reason, Stylus isn't working for me anymore. I tried uninstalling and reinstalling it into my Chrome Browser but nothing. I broke it apparently.
 
@Reina

Hmm, it is indeed being weird on Chrome. Seems to be an issue with the website.

EDIT: Try this workaround first

Click on the stylus extension on your browser. If you still have the style(s) installed, simply click on the three-dot icon next to the name and hit "delete". Do this for all the stylesheets.

Screenshot 2022-04-06 023046.png

After that, go to this link (for resized reactions) or this link (for custom usergroup colors). Hit install. You will be redirected to the extension page. Hit install once again.

For the latter, you should be able to configure the stylesheet by clicking the gear icon next to the stylesheet name (found in the stylus extension).

Screenshot 2022-04-06 033327.png

Let me know if this works.
 
Last edited:
  • Thank You
Reactions: Reina
Thank you so much for this! I changed mines on Chrome and it works like a gem.

Had a fun time changing the staff colors, as well! I felt powerful for a moment 😂
 
  • Love
Reactions: Ardent
The custom usergroup stylesheet needed a major overhaul after the Great Color Refresh update. Here's what changed:

  • Add new selectors .username--style85 (Folklore) and .username--style86 (Mythical) for new usergroups
  • Add new selectors for new usergroup ribbons: .ribbonFolklore, .ribbonMythical and .ribbonStaff
  • Assign one color picker for all staff departments
  • Add selectors .username--style33 and .ribbonLurker (Inactive Members) //Not related to the update, but I somehow missed this last time.
  • Change default colors

You may have to re-install the stylesheet to see the changes.
 
The fix for the new reactions is here. Update or reinstall resized reactions for the changes to take effect.

  • Remove reaction 18 (Valentine)
  • Fix new reactions 19 (This Gives Me Plot Bunnies), 20 (Creepy), 21 (What a Twist), 22 (Hit Me in My Feels), 23 (I'm Shook), and 24 (Wicked).