[UserScript] Avatar Size & Sub-Category Adjustment

This is a simple UserScript that I made that does a couple things to edit the visual appearance of the new forums to adjust a few things that I didn’t like too much. Hope you enjoy! If you like this script or even use it now, please leave a like or comment! Please also comment if you have any issues. :grin:

What this script does:

  • Adjusts the sub-categories to list vertically vs. side by side
  • Resizes the user avatar on posts from 45x45 to 120x120
  • Readjust and Re-position avatar image on the User Cards
  • Hides the “username” that would appears after some players’ names
  • Give “Discobot” a more “Eve” feel by replacing avatar image with a drone
  • Credit for the drone idea for the bots image compared to the drifter avatar to “Nana Skalski”

How to Install:

  • Get TamperMonkey Browser Addon: Chrome / Firefox
  • Get the UserScript: 120x120 Avatar Size / 75x75 Avatar Size
  • Click on the addon icon in the browser, select “Create New Script” (?)
  • Delete pre-set text, copy & paste the “Eve Avatar/Sub-Category Adjustment” script and save

Screenshots of Edits:

Notes: If you do not want the Sub-Catagory adjustment, simply delete the following line (line 14) from the appended stylesheet:

span.subcategory { display: table-row !important; }\

Extras: This is just some extra stuff that I made and am placing here for anyone interested. (Note: You can run multiple scripts, so you can run the avatar edit as well as any of the below. Just click on “Add New Script” and save!) :sunglasses:

  • Eve Forums Color Edit; this is a little script to edit a few parts of the forums for better reading with darker backgrounds as well. You can see a screenshot of this edit here and if you like it, you can pick up the code by clicking here.
  • Eve Forums Portal Menu; this is just a script to add a portal menu to the top navigation. See example here. Get the edit here. Hopefully this will be just a temporary edit until CCP adds in a official menu.
25 Likes

Avatar size was one of the first things I noticed as well. Hats off for a nice contribution.

4 Likes

That was one of my first gripes on these new forums and how they were way to tiny.
Thank you! :blush:

3 Likes

Very interesting! Are you scaling the 45x45 image or are you calling a larger size of it?

https://sea1.discourse-cdn.com/eveonline/user_avatar/meta.eveonline.com/erika_mizune/45/2168_1.png

Will produce:

https://sea1.discourse-cdn.com/eveonline/user_avatar/meta.eveonline.com/erika_mizune/90/2168_1.png

Will produce:

Don’t know if it’s possible to change this with a CSS, but would be awesome if it was! :grinning:

4 Likes

Yea the avatars are low res unfortunately. :slightly_frowning_face: I wasn’t able to replace to get the higher quality ones to work.

4 Likes

Oh well At least the rest works as intended. :slight_smile:

I have seen some threads on discourse developers forums and there is a way to make them larger, but it was post from 2016 or older and it involved modyfing head and adding some scripts or widgets, I dont know what they were saying really… looks like job for administrator who would know how to program things, and obviously there was a way to make avatars smaller on mobile phones while leaving big for desktop. I am under impression that if CCP will not do that here, nobody will. :thinking:

BTW what a poor technology this discourse is, doesnt even have an easy way to modify avatar sizes. :psyccp:

4 Likes

@Yiole_Gionglao @Nana_Skalski

Added a new edit to OP. There is a 2nd option that uses the TamperMonkey addon instead of Stylish since it allows JS (the only way I could get it to replace the image URL’s to the better quality versions.

Let me know if any issues :blush:

4 Likes

Wow! I’ve never used TamperMonkey but tried it and the script appears to run nice!

4 Likes

It is a nifty little addon :slight_smile:

I also added a 3rd option, which also replaces the bot’s avatar with a drifter avatar :grin:

3 Likes

Houm, for some reason, when I load a page, the avatars are just scaled up… they refresh to higher res if I do a refresh with F5, but if I leave page and return, they load again as scaled low res… :thinking:

3 Likes

The CSS is fine because that was appended to the header. If you are on a large thread and scroll up enough, having to load new avatars, it may do that because the JS wasn’t loaded for those images.

Not sure how to fix that from happening. May have to do some extra tinkering. :thinking:

Making progress though.

3 Likes

I think I got it, edited the script and played around with it and seems to keep the high res images intact as well as bot’s updated avatar. Try with the updated code from the bot edit (option 3). Script ‘should’ be good now.

Let me know!

5 Likes

It works now. \o/

I dont know what you did, but it is awesome. :kissing_heart:

I only replaced discobot image with picture of one drifter.
image

5 Likes

Perfect! I was worried about maybe being too critic but now the script is perfect! :thumbsup:

4 Likes

I added a new function to keep the script going, so as you scroll up/down and load new parts of the page it will still change the image url to the better picture. :grin:

This little bit is what did the trick:

$(window).on("load resize scroll",function(e){

Whew! Nice pick on the bot image! :blush:

Thank you!

4 Likes

Not at all!

I knew there had to be ‘some way’ but it wasn’t doable with just CSS, so had to work out how to get it in JS. This is my first time making a script for these addons too. :grin:

Very happy I got it going :relaxed:

5 Likes

So for everyone not liking Drifter images, I made this:
image
Strapped some disco lights on a rogue drone. :kissing_heart:

7 Likes

Reorganized the OP, added two version of script, one for 120x120 avatars as well as 75x75 and also dropped the link to the stylish addon script since it was outdated and the UserScript works better with more functionality. Also decided to use the drone avatar vs the original drifter image because it really fits the bot better I think.

Thank you @Nana_Skalski for the drone idea! :blush:

5 Likes

Have installed your scripts via the Tampermonkey plugin for Edge and it works perfect.
Couldn’t find the 75px download link though, so I change you script to fulfill my taste.

It do however give a warning inside your script though.
Have no idea what it mean.

Now, could we just get this to work on our phones…

2 Likes

I added a 75x75 download link, thoulght I added that one back in. Sorry about that, added it now. As for the message, that’s just a warning message and really doesn’t effect anything.

You can add in the line:

/*jshint multistr: true */

right before

$('head').append.(

And that should remove that warning. I’ll add that line in the pastebins.

4 Likes