Hey all. For the past few days I have been working on trying to add custom user styles to Pokemon Showdown, and it kind of worked! For those of you not aware, you could use the extension Stylish (now the Stylus extension, as the newer version of Stylish is now spyware) to create or add custom CSS code to override the existing CSS within Pokemon Showdown. This can achieve a lot different things including changing the background, button colors, and what I was most interested in: Layout. I was never really a fan of Pokemon Showdown's layout (no flame) but I like CSS so I decided to try to add some small tweaks.
Well, turns out it's a lot harder than it sounds to change a whole site to flexbox with no access to the HTML! So I scrapped that idea... and came back to it with a new mindset. I just want to fix existing problems for myself that I occasionally would run into, instead of creating new problems for myself. So, I started writing code to just change the theme of the site as a whole to a darker theme. I wanted to keep it really simple, but I plan on adding a lot more in the future if I have time. It's not done yet completely (I still need to bugfix certain aspects within a battle, but it's hard to do that when I don't have any dummy battles or anything that I can quickly setup - anyway).
This work brought me to a question... How can I see my epic blacked-out theme on mobile, too? Stylus is easy to use and very intuitive, but I haven't seen anything about the mobile development of the site as a whole... like... EVER. So this is that post. This is that niche post that will detail how YOU can also get any style you want - even ones you made yourself - to work on iOS. Unfortunately, you might have to do some of the work yourself if you don't have Safari (but everyone does if you're on iOS as far as I know, so anyone with an iPhone is able to do this. I would say RIP Android users but I think they have a few easier ways to actually do this that have been out for a lot longer).
So if you're on iPhone you probably know that using extensions is like... not possible. I thought the same thing when I started my research but as it turns out: you can get some from the app store! You just need to do a few other steps after downloading said extension. The ONLY one that I was able to get this to work with is called Hyperweb.
Download it, follow the instructions to enable the extension on your Safari browser. This involves opening your iPhone Settings, searching for Safari, scrolling to extensions, and enabling each of the seven instances of Hyperweb. You might not need all of them, but I turned them all on just to be sure. After this is all set up, go back to the app and scroll to Customize Styles and Scripts, click Custom Styles. This is where it gets dicey. Or at least - it was a bit dicey for me. We can use my extension as an example of what to do here. You need a CSS file specifically - and I believe it needs to be able to connect to this file within a URL for a website. Now, a CSS file isn't anything special, it can just be whatever.txt while you are editing it, BUT you need to remember to rename the file extension to whatever.css after you are finished.
I used Github to host my CSS file. There are probably other ways to do this easily online and you are free to use any way you can think of for this part. It's just very important that you link to the actual file. So what I did was: Create a new Repository called Obsidian-Pokemon-Showdown-Theme (this can be whatever you want to name it), add a new file - the new CSS file you just created. After this is done, commit the changes and open this file within Github. Select RAW on the right-hand side. You can now take the URL and email the link to yourself so you can see it easier on your phone, or just go to Github on your phone, select raw, and get the URL that way. Now you just need to copy + paste the URL into the Custom Styles section of Hyperweb! As an example, mine looks like this: https://raw.githubusercontent.com/RELIN-Q/Obsidian-Pokemon-Showdown-Theme/main/obsidian-styles.css (you can use this to see the extent of what I've created so far if you want to...)
And uhhh... yeah. That's it! If you host/edit the CSS file within Github, it should automatically update the styles on your phone (because you're linking the URL and not the actual file).
If you have any questions about this please reply to this post and I can try to help with any problems. I really hope this helps some of you, and I hope we can get some more mobile-friendly development for Pokemon Showdown in the near future.
Oh, and this is also a plug for my custom user styles that I previously linked - Pokemon Showdown Obsidian. I still have a lot of work to do but so far I've fixed a few bugs on mobile cause by fixed-width buttons, and I plan on doing more to just generally enhance the user experience on mobile devices. Thanks for reading and I hope to have an update for you all very soon!
Well, turns out it's a lot harder than it sounds to change a whole site to flexbox with no access to the HTML! So I scrapped that idea... and came back to it with a new mindset. I just want to fix existing problems for myself that I occasionally would run into, instead of creating new problems for myself. So, I started writing code to just change the theme of the site as a whole to a darker theme. I wanted to keep it really simple, but I plan on adding a lot more in the future if I have time. It's not done yet completely (I still need to bugfix certain aspects within a battle, but it's hard to do that when I don't have any dummy battles or anything that I can quickly setup - anyway).
This work brought me to a question... How can I see my epic blacked-out theme on mobile, too? Stylus is easy to use and very intuitive, but I haven't seen anything about the mobile development of the site as a whole... like... EVER. So this is that post. This is that niche post that will detail how YOU can also get any style you want - even ones you made yourself - to work on iOS. Unfortunately, you might have to do some of the work yourself if you don't have Safari (but everyone does if you're on iOS as far as I know, so anyone with an iPhone is able to do this. I would say RIP Android users but I think they have a few easier ways to actually do this that have been out for a lot longer).
So if you're on iPhone you probably know that using extensions is like... not possible. I thought the same thing when I started my research but as it turns out: you can get some from the app store! You just need to do a few other steps after downloading said extension. The ONLY one that I was able to get this to work with is called Hyperweb.
Download it, follow the instructions to enable the extension on your Safari browser. This involves opening your iPhone Settings, searching for Safari, scrolling to extensions, and enabling each of the seven instances of Hyperweb. You might not need all of them, but I turned them all on just to be sure. After this is all set up, go back to the app and scroll to Customize Styles and Scripts, click Custom Styles. This is where it gets dicey. Or at least - it was a bit dicey for me. We can use my extension as an example of what to do here. You need a CSS file specifically - and I believe it needs to be able to connect to this file within a URL for a website. Now, a CSS file isn't anything special, it can just be whatever.txt while you are editing it, BUT you need to remember to rename the file extension to whatever.css after you are finished.
I used Github to host my CSS file. There are probably other ways to do this easily online and you are free to use any way you can think of for this part. It's just very important that you link to the actual file. So what I did was: Create a new Repository called Obsidian-Pokemon-Showdown-Theme (this can be whatever you want to name it), add a new file - the new CSS file you just created. After this is done, commit the changes and open this file within Github. Select RAW on the right-hand side. You can now take the URL and email the link to yourself so you can see it easier on your phone, or just go to Github on your phone, select raw, and get the URL that way. Now you just need to copy + paste the URL into the Custom Styles section of Hyperweb! As an example, mine looks like this: https://raw.githubusercontent.com/RELIN-Q/Obsidian-Pokemon-Showdown-Theme/main/obsidian-styles.css (you can use this to see the extent of what I've created so far if you want to...)
And uhhh... yeah. That's it! If you host/edit the CSS file within Github, it should automatically update the styles on your phone (because you're linking the URL and not the actual file).
If you have any questions about this please reply to this post and I can try to help with any problems. I really hope this helps some of you, and I hope we can get some more mobile-friendly development for Pokemon Showdown in the near future.
Oh, and this is also a plug for my custom user styles that I previously linked - Pokemon Showdown Obsidian. I still have a lot of work to do but so far I've fixed a few bugs on mobile cause by fixed-width buttons, and I plan on doing more to just generally enhance the user experience on mobile devices. Thanks for reading and I hope to have an update for you all very soon!