Replies

Nov 2, 2020 5 years ago
Deadeye
Kisrah
User Avatar
Brainfreeze

Seems I'm using a lot of the ones mentioned here already, and a few for personal preference.

Custom CSS is really important for users to fix those things that are important to them, but may not be a priority for the site overall. It gives users with various accessibility issues a way to tweak the site to their needs.

It would be impossible for Subeta to accommodate every possible need. Having dark mode or various contrasting themes would be a good starting point for people with certain vision issues, for example, but not everyone is going to find a preset that works perfectly for them. Being able to tweak things to your own needs is a great thing about CSS.

I use CSS to get rid of a few things I dislike that others may find useful. And some of those would probably not be seen as important enough to have an option to turn them on or off. But being able to remove those things is important to ME, and I'm grateful for CSS giving us a way to adjust and remove the little annoyances for ourselves.

I doubt I'd want to stick around if I lost the QoL tweaks I made for myself. Custom CSS needs to stay.


HONK!

Nov 2, 2020 5 years ago
Saturnine
wants to believe
User Avatar
Fearleading

Thank you! It's more an issue that I don't have my glasses on than anything else lol

S-F
[flower=saturnine][tot=Saturnine]

Nov 5, 2020 5 years ago
Junior Archaeologist
Bison
User Avatar
Yellowstone

I have a lot of Custom CSS and I'd be extremely disappointed to lose it.

I have tweaks for:

  • Improved mobile navigation menu
  • Remove Hustler
  • Improved sidebar (main stuff on one side, notifications on the other, which I LOVE)
  • Improved Notes (they pop out on a lick so I can keep way more notes now)
  • Improved clock
  • Floating items in the top corner
  • Pet Role designation (icons next to main reader, gourmand, and battler - HUGE for me)
  • Improved wishlist borders
  • Bigger end battle button
  • Pet images and autotrain hidden in training
  • Gifs removed from the forums
  • Improved Slots and Mystery Box

And so many more little tweaks I didn't want to list. I used to have even more but those stopped working after years of use, which still annoys me.

I have carpal tunnel and need to have certain things changed (less scrolling), while other things I simply prefer having a bit different. Being able to make or commission my own accessibility and QoL improvements is one thing I've always really liked about Subeta. Losing that would be losing one of the only things that makes Subeta stand out among the few remaining pet sites.

previously shortaxel

Nov 5, 2020 5 years ago
Virus
is a pumpkin murderer!
User Avatar

i'd also be extremely disappointed to see custom CSS go. it's one of the things that makes subeta highly accessible to everyone, unlike other websites which depend on browser extensions for tweaking in favor of accessibility. i've got a shit load of custom css- some of it i've had for more than 7 years, i'd wager. i don't use a customized visual layout, but if i did i'd be even more sad to see custom CSS go.

here's what i'd miss in the mean time: bigger buttons all over the site (battling, training, etc)- because i hate trying to tap small buttons on my phone, or fatfingering the wrong one because they're small and close together. pet images & autotraining hidden on training page, huge buttons to make it easier to train my 20+ pets pet designation roles because i have 20+ pets and will click the wrong one wishlist borders (original borders are very difficult for me to see off hand) facebook login button removed- literally the instant it was introduced i removed it shopkeeper images & mystery box images are shrunken to reduce scroll items stocked in shops are altered to reduce scroll and make them easier for me to distinguish improved site clock- because im blind and oblivious floating item in static position w/ huge chonky border because i will otherwise miss every single one mobile navigation menus improvement- because otherwise i have to do a dance with the menus to use them on my phone or tablet no more hustler banner- i almost never buy items from him for CSC. honestly this feature could use a revamp, but i'd say that's relatively low priority. improved bookmarks- helps them be in static positions on pages improved sidebar & widgets- more efficient use of space

a bunch of the custom CSS i use now came from the Useful Custom CSS thread, so i mean... if you're going to remove the ability to use custom CSS at least check that out and implement fixes similar to what users have come up with and like and are already using.

CW shop wishlists sorted from low to high beanbagsplushiesbooksfoods

Nov 5, 2020 5 years ago
Tashamon
is lost in space
User Avatar
Signal

I thought I'd have a nosey at all this and see if I had any idea what might stop people from adding custom CSS on the new site. These are my thoughts:

  • Subeta V2 appears to be using Emotion js.
  • Emotion generates hashed class names like "css-1xhj18k" to apply css styles. (although apparently the hashing algorithm is a little prone to collisions)
  • The hash will be deterministic - that is to say as long as staff never change the style that creates the hash, the class name will never change. Which is also to say that any time the staff want to change the style of something, it will generate a new class name and break any custom css still targeting the old one.

And that last point is the real doozy here - you can create and add in a new custom stylesheet using all the key-hash class names that you've found that change exactly what you want, and then as soon as staff update the site it could all break. At least, that's my educated guess.


I use custom CSS for a lot of things already mentioned here such as pet roles, removing the large header & hustler, floating items, bookmarks, and to make the white background grey for my poor cave dweller eyes.

Nov 5, 2020 5 years ago
Ringo
needs more chocolate
User Avatar
Scorpius.

My soul would shrivel up and die without custom css....

There is soooo much I use it for. Buttons, how NPC shops look, training pages, tabs, floaters, hiding stuff... I've been customizing my css on here for nearly 13 years. I don't know what I would do if I couldn't. ugly cries

Nov 6, 2020 5 years ago Official
Bug
User Avatar
Segfault

We're using ReactJS with Chakra UI which has Emotion as a dependency. However, we'd still be able to add our own CSS classes to things that we want to have them, to accommodate custom CSS. Whether that custom CSS is done through our website is another discussion, though. We think it's something that is better done through the browser, though there are pros and cons to both approaches. It's a discussion we'll have in time.

🐝 ☕ bug (he/him) | your friendly neighborhood code wrangler. stay in the loop! join and check out the latest admin post highlights

Nov 6, 2020 5 years ago Official
Bug
User Avatar
Segfault

So... I can't say anything concrete or make promises right now - it will be a while before we can look into this further - but tl;dr we can still do what we can to support custom CSS (putting class names on things you can request, etc); what will likely have to change is how custom CSS is approached fundamentally. Traditionally, we've made it something you store in our database and that gets queried and loaded on every page. Efficiency issues aside, that is a little weird since what custom CSS controls is the way your browser renders pages, so conceptually it makes more sense for custom CSS to be stored in your browser. So that's the main difference, we'd like to move to having people apply custom CSS through a browser extension or browser settings instead. I do recognize there are pros and cons; one of the cons is that you won't have it if you're using someone else's computer to play Subeta, for example, since it won't be your own browser. These are all things we can talk about more in time.

There are some nice things we get in V2 by default:

  • Night mode and day mode support
  • Fully accessible components (meets official WCAG accessibility guidelines)
  • Mobile responsiveness

What would be super ideal is if I can figure out a way for you guys to save custom themes that you can edit without any CSS knowledge.

Thank you by the way, this thread is an excellent idea. I think it's great to look at what the most popular custom CSS is used for today, and see if we can just make it an actual option of the site itself.

🐝 ☕ bug (he/him) | your friendly neighborhood code wrangler. stay in the loop! join and check out the latest admin post highlights

Nov 6, 2020 5 years ago
Faber
is always in the spotlight
User Avatar
Vera

For me, the biggest and most important thing about custom css is making the site more mobile friendly. I have a computer, but I really only use it for things like making profiles. Everything else I do on the internet I do on my phone. And with updates to how apple's mobile browser works recently, navigating the site on my phone has become harder. I understand this is not subeta's fault. But my only hope of fixing these issues as they come up is with custom css. I love subeta, but if I can't make it work on my phone I would simply be a lot less active. Sites like neopets are basically impossible to use on a phone, mainly because of the reliance of adobe flash, which is a problem subeta doesn't have, but I just want to stress that mobile usability is super important for getting and keeping users, especially younger ones who may not own computers, but do own phones.

* chibi by [user=Recondite ] * visit my profile shop

Nov 6, 2020 5 years ago
jensen
rolled snake eyes
User Avatar
RM

outside of the pretty standard "bold the wishlist boarder, move floating items, hide the hustler banner" stuff, i mostly use css to remove images. lots and lots of images. i removed the header, a couple of shopkeeper images, the pet and opponent images on the battle page, and all forty-six (46!) pet images on the training page. now, maybe these things aren't necessary, but this makes the site way nicer to use for me, on both desktop and mobile. being able to retain that level of shenanigans on the new build would be greatly appreciated.

oh sacred spork, smite mine enemies

Nov 6, 2020 5 years ago
Oh My Shinwa, we thought
Roadkill
was dead
User Avatar
Lewis Pepper

Quote by Bug
. Traditionally, we&;ve made it something you store in our database and that gets queried and loaded on every page. Efficiency issues aside, that is a little weird since what custom CSS controls is the way your browser renders pages, so conceptually it makes more sense for custom CSS to be stored in your browser. So that&;s the main difference, we&;d like to move to having people apply custom CSS through a browser extension or browser settings instead. I do recognize there are pros and cons; one of the cons is that you won&;t have it if you&;re using someone else&;s computer to play Subeta

I doubt that's the main concern most people here have, since i assume the majority of users use their phone to access the site the majority of time, not someone else's desktop. i don't know any mainstream mobile browser app that allows anything close to what css let's us do, which is my main issue. also if someone makes a mod for x accessibility, rather than have one form they can share with others to plug into the css page, there may be multiple variations needed for different browsers (i have extensions that only work on chrome vs brave or firefox, for example, though who knows) ON TOP of a detailed breakdown of how to hack your browser into even allowing said modification, which might change from update to update. chrome is notorious for messing with custom options and removing access to things I've been using altogether.

basically I'm very wary on putting the onus on users to use less vetted browsers in their phones to make the site usable for themselves, or have to deep dive into 50 sub option menus to adjust, idk, text color or something because the site isn't made with their specific accessibility in mind. (many someones will always fall through the cracks no matter how fine the sieve when it comes to accessibility, I've found)

tldr no on-site css makes it highly likely lots of users will be using the site much less, be it because they have to use vanilla site without xyz on phones, or can't navigate the hoops browsers set to restrict customizing use experience.

[egg=roadkill] | | [tp=roadkill]

Nov 6, 2020 5 years ago
Sorcerer
is a worthy opponent
User Avatar
Forsake

Thanks for talking to us as much as you are, as early as you are.

The outcome I'm hoping for is a character limited amount of CSS being handled by Subeta.

Something that would cover all beginners who just copy/paste and never look again, some dabblers who want to play with the feature, even some more advanced users who can minify their code to cram it in. It would allow for some portable styling/theming, accessibility tweaking, and other edge cases. With a new site, our years of fixes-for-fixes-for-fixes will get thrown out anyway, I think we can build back with a lot less.

For the rest of us there are some definite up-sides to moving CSS offsite. Like automatic updates when code breaks (when you use someone else's code), and the ability to style to specific pages or arbitrary elements, which have always been impossible.

Nov 6, 2020 5 years ago
Mail
is ALL about art
User Avatar
Alter

Just noting in here some of the stuff I use custom CSS for!

[Spoiler=Partial List]- moving floating items to top corner (my most important one personally)

  • bunch of fixes to the bookmark sidebar
  • bunch of fixes to the ping sidebar, eg "easier event deletion"
  • remove hustler banner
  • hiding autotrain
  • bigger text[/spoiler]
Nov 6, 2020 5 years ago
Tashamon
is lost in space
User Avatar
Signal

Quote by Bug
We&;re using ReactJS with Chakra UI which has Emotion as a dependency. However, we&;d still be able to add our own CSS classes to things that we want to have them, to accommodate custom CSS. Whether that custom CSS is done through our website is another discussion, though. We think it&;s something that is better done through the browser, though there are pros and cons to both approaches. It&;s a discussion we&;ll have in time.

Awesome, thanks for the explanation! I wasn't sure that your own non-generated CSS classes was something you'd be willing to retroactively add at this point.

Ideally (and what's exciting about this thread) a lot of things mentioned here will become options built-in to V2. Realistically though, there will always be edge cases, and I think custom CSS has been a haphazardly genius way for users to forge their own accessibility/usability fixes without waiting for staff. (Which also comes with the caveat that potential problems might not get noticed - as soon as someone creates a bit of custom CSS to sort it out, everyone adds it in and goes about their day)

Not having to use browser extensions to completely customise the subeta experience has been a very nice and imo very loved feature, especially for those of us not quite as tech savvy, or learning. Having the changes persist across browsers and devices is also muy bien - I use Subeta on at least two devices regularly, one being mobile. Spitballing again, but I don't know how feasible it would be to have custom CSS cached locally and periodically refreshed from the database to avoid it being queried on every page?

Nov 6, 2020 5 years ago
chookie
has a dragon
User Avatar

Quote by Bug
What would be super ideal is if I can figure out a way for you guys to save custom themes that you can edit without any CSS knowledge.
^ this honestly would be great! maybe something similar to our preferences page where we can toggle stuff on and off, but like a site layout preferences page? where we can toggle at least basic stuff like font colour/size, images (shopkeeper/training etc), pet roles, wl boxes, floaters blah blah all the most popular stuff that users are already using and makes things more accessible...

i use pretty limited css (so little i actually have to go find the dang page to remind myself what i do actually use lol) but wow i've picked up some handy ones just from reading how everyone else uses it! -floaters (top left stickied with a thick obnoxious red border) -hide sidebar toggle button (i think i've had this so long i don't even know what the site looks like without it lol shrugs) -subeta adblocker (although now that i'm a subscriber i guess this is pointless) -hiding some training links -opening collapsed sections in inventory and generally tweaking look of inventory page -hiding some shop search results -that's it -now i'm gonna go add some other stuff that looks super useful!

lovely art by "grey would be the colour if i had a heart" ~nin ❤️ my stylefile

Nov 6, 2020 5 years ago Official
Bug
User Avatar
Segfault

As mentioned in the staff post above yours, v2 is mobile responsive by default! We're building it with attention to mobile because we 100% agree with you.

I hear you and I like your idea.

Yes, exactly! And re: caching, sorry my last message was written hastily and was misleading about this. We cache it on the current site but it is still a bit of a bottleneck. One huge strength of v2 is that pages will only reload the parts that change as you click around, so efficiency would no longer be a concern on there. That's one way it actually makes things like custom CSS and the sidebar more feasible than the current site does.

But that is not to dismiss your ideas and input, which I appreciate so much. For real, thank you! One reason this conversation is a little premature is that I don't know how feasible supporting server-loaded custom CSS is until I sit down and actually try to do it, see what problems come up. Once I get there, our discussion here will be a lot more fruitful I'm sure.

(I can list some immediate concerns I have about it - but I am not sure which will be real concerns in practice yet)

🐝 ☕ bug (he/him) | your friendly neighborhood code wrangler. stay in the loop! join and check out the latest admin post highlights

Nov 6, 2020 5 years ago
Chibois
The Great Pumpkin
User Avatar
Daikiria

my entire layout is severely CSSed. my game looks more how the site looked before the last revamp. if you're threatening to remove custom CSS with this update when literally every page i use ive customized im setting up camp with the "scrap the entire idea" group.

you should be adding MORE CSS options like the content divs having ids specific to the page to make it easier to customize not restricting or removing.

if you remove custom CSS, if i can't get the site how im used to playing via tampermonkey odds are I will quit and even if i can I will never touch the game on mobile ever again.

Nov 6, 2020 5 years ago
Tashamon
is lost in space
User Avatar
Signal

Again, I really appreciate the info. Subeta V2 as a whole is an exciting step for the site and it's especially exciting for me to both be knowledgeable(ish) about website development AND for staff to be willing to discuss it, at the point it's starting to come to fruition. Even if some of my comments/ideas miss the mark.

That said, despite the early stages I'd still be very interested to hear what your initial concerns with server loaded custom CSS would be, just out of curiosity!

Nov 6, 2020 5 years ago Official
Bug
User Avatar
Segfault

Please review the stickied post with info and rules for this forum, specifically rule 3. No one is threatening anything (except you; it is not necessary to threaten to quit the site.) If you read the discussion you'll see that staff is trying to listen to everyone and find a way to make this work. If you want to give input, we appreciate that and want to chat with you! but we ask that you read the discussion first of all so you're informed about what's going on, read and follow the rules of this forum, and participate in good faith. This is not an "us versus them", "staff versus users" kind of deal and never has been.

Yes, sure! I don't have a ton of time, and haven't sat down for a proper think on it, but my immediate concerns / "things to research" are:

  1. Security (since we would be evaluating custom code in javascript)
  2. Whether it's possible at all with React (...to eval a block of CSS and cause it to be applied to the page)
  3. Improper CSS breaking functionality with no good way to fix it

But you know, thinking about it more now, I don't think either of the first two will be a huge issue, and the third can be addressed with good validation. The fourth and biggest concern we have to work around is that - as you had pointed out - the bulk of our CSS selectors are dynamically generated and thus cannot be relied upon when writing custom CSS. This fact is unchangeable; it is also not immediately obvious to anyone unfamiliar with how ReactJS works, so we'll have to put some effort into making this clear.

And this requires a fundamental change to how all of us think about custom CSS. The kind of freedom we have now with custom CSS + userscripts will no longer be possible due to the way the new frontend is structured. If there is something you'd like to do, you will have to communicate it to staff so that we can add the necessary classes/IDs to the elements you'd like to work with.

This is why we were reluctant to support it as an official site feature in v2: because v2 is fundamentally not compatible with custom CSS, so I believe our original reasoning was that it doesn't make sense anymore to have it. But the feedback we've gotten has made me feel it's important to find a compromise here. It is true that no matter what we do, we'll never be able to cover ALL the bases for everyone, because accessibility is highly personal. Even meeting WCAG guidelines (as we intend to) may not be sufficient for everyone, and we don't want v2 to feel like a downgrade. The compromise I'm currently working towards (and we'll see how possible this is when I actually begin researching implementation) is something like:

  1. Add custom selectors to things as staff for you to style. Users should be able to request these. I'd do something like prefix all the classes/IDs with "sb-custom-" so it is very clear which selectors can be reliably used in custom CSS and which cannot when you are inspecting the page. Since this will be a manual and explicit process, perhaps there could even be a reference list of these somewhere (possibly would need to be user-maintained though due to limited staff resources)
  2. Allow character-limited custom CSS stored and loaded server side (thanks ); this will likely come with limitations we enforce via validation. For instance, to reduce confusion and bug reports, we may validate it so that you are only styling the classes we provide, maybe have it display a warning if it thinks you are trying to style one of the Emotion-generated classes.
  3. Encourage more tech-saavy users to implement more complex stuff through the browser if desired, which gives you total freedom - and we'd assume you know what you're doing if you choose to do this. Having both this AND the validated server-side is great because we can validate the server side CSS to make sure it is safe and won't break anything, since improper CSS could break the site in a way that you can't easily reset it. Whereas if your browser extension's custom CSS breaks Subeta, you can easily fix or reset that yourself through the extension. This works well with the fact that one will persist through login locations and the other is tied to the browser.
  4. Find out what people use custom CSS for the most and implement official options that do not require coding. You said "custom CSS has been a haphazardly genius way for users to forge their own accessibility/usability fixes without waiting for staff"; this is a great insight and also an area where we can step it up more. V2 gives us a foundation that makes it easier for us to support such things. V2 gives us a really great foundation for this, with its out-of-the-box support for accessibility, custom themes, day mode/night mode, and mobile responsiveness.

(This is all in the ideas and brainstorming stage though - often we realize something is unfeasible only when we implement it, though on the flip side, sometimes when implementing things we realize new possibilities we didn't see before!)

🐝 ☕ bug (he/him) | your friendly neighborhood code wrangler. stay in the loop! join and check out the latest admin post highlights

Nov 7, 2020 5 years ago
Star Captain
Anrivef
User Avatar

Bug, thank you so much for communicating all of this brainstorming process with us! I won't pretend to know what I'm talking about on the coding end--I went to the ReactJS website and I have no idea what any of that means, lol--but it's nice to know the way v2 is intended to work is to only reload relevant parts of the page. I never thought about how resource-intensive it must be to reload every page fully every time, especially since much of Subeta revolves around clicks&refreshing. It's a nice insight into how the website works, and has to work in the future.

If you go the custom theme route (which I have a feeling might be built into the website regardless of CSS), please allow the option to change different text elements independently of each other! Font size, family, color; body text, headers, links unvisited and visited--and please include an option to type in a hex code for any customizable things too!

Please log in to reply to this topic.