R34 mod: Baddy's Custom CSS for Rule34 v1.2 - Major Update!
Hi!
I am Baddy.
I use the R34 forums. And it's kinda rough.
So I decided to make it a little bit less rough for myself.
So why not share the little customization I built?
Currently I offer two versions.
One is the standard version, the other cuts down on Sticky posts being shown.
Screenshots: imgur.com/a/glcJEtf
Updates
v1.2 - Major Update
- Design for Posts page.
- Comments page.
- Mail Inbox, Outbox, Sending.
- Some adjustments to the existent Redesign to be more in line with the new changes.
- Option for hiding Quotes 5 Quotes deep and 3 Quotes deep. (Cutting down on the endless quote cloud, especially in DMs.)
- Profile page.
- Many more changes.
v1.1.3 - Stylus Version Release
Moving away from UserCSS plugin and instead utilizing the Stylus plugin.
Reason is that it makes installing and updating the Style much easier, aswell as offer me to ship customization options for users to simply check a box for as they install the style.
Install instructions have been updated accordingly.
If you were running UserCSS before, you can uninstall the plugin switching over to Stylus.
v1.1 - Threads
Overall gave replies more space to work with, Content fields have more space than before, so text can also run further.
Quotes are now semi-transparent instead of gray, so stacking quotes will be nicely visualized through it aswell.
Quote icon is moved to the back and made gray, so that if text overlaps it stays somewhat readable.
Line height has been drastically increased. (space between lines)
This should improve readability by a lot!
What are the requirements?
It's using R34's dark mode! No guarantee it looks good with light mode.
This was designed for Desktop with a target resolution of 1920x1080.
If you run other resolutions, you can try and report back here.
Would love to get it working on all formats and resolutions.
It uses a browser plugin called Stylus. This plugin loads custom CSS.
How to install?
1. Install the Stylus plugin for your browser.
Chrome: chrome.google.com/webstor...pkpeebahjckkjfobafhncgmne
Firefox: addons.mozilla.org/en-US/firefox/addon/styl-us/
2. Once installed, open the R34 website. Now press on the Stylus plugin, which sits on the top right of your browser.
If it's not showing at the top right away, check in your browser plugins, it should be there.
There should be a button called 'Find Styles'.
It opens a list of available styles. Look for Baddy's R34 Custom CSS - UserStyles Version and press on it.
The style should be applied now! There is now an additional button called configure, where you can toggle certain parts of the design whenever you like!
Should you have trouble finding the Style, you can also go here and install it that way: userstyles.world/style/11...om-css-userstyles-version
Feedback and ideas are welcome!
FAQ
Q: How does this mod work?
A: It uses a browser plugin to load in an additionional CSS-file (Cascading Style Sheet).
Q: Can you add new functionalities or make vast changes to the layout?
A: Not with CSS files alone. CSS is a styling language, allowing to change the appearance of existing HTML elements, like let's say a website displays a link, CSS is able to style the link in different colors, formating, size, etc. However it is very limited in changing the structure of a website and its contents.
Q: Is there more to come? What's next?
A: Forums is where I spend most of my time on this website. And I kinda grew very annoyed with it, so that's why I made some changes with this mod.
Next thing I would like to look into is how I can also build a mod for mobile, as the mobile experience is DISASTEROUS. I will need to check the options for loading in custom files, as Chrome Mobile doesn't support plugins.
I would also like to make DMs look a bit more nice.
Additionally I also want to take a look at what options I have to style threads.
Should the project get bigger (probably not, I am lazy bum) I will add bundled and modular options for people to pick and choose.
Customization is of big importance to me.
Q: HELP! Shit looks bugged on my end!
A: Post about it here or reach out to me! I want it to work for everyone and all resolutions.
The CSS files are hosted on my own webhost, so I can push updates to the latest version without the need for users to manually update whenever there is a patch or update.
Q: Why does the Stickyless Version still have a Sticky-Post showing?
A: It's a control post. There is no class assigned to sticky posts to easily hide them away in one go.
So the solution I went with was counting and hiding the first 12~ posts.
However, it's possible staff add or remove sticky posts, changing the count which could result in fewer Stickies to hide and instead hiding non-sticky posts (the content you are interested in).
Having the last Sticky showing always let's you knowing no non-stickies are hidden and the count is in tact.
I am Baddy.
I use the R34 forums. And it's kinda rough.
So I decided to make it a little bit less rough for myself.
So why not share the little customization I built?
Currently I offer two versions.
One is the standard version, the other cuts down on Sticky posts being shown.
Screenshots: imgur.com/a/glcJEtf
Updates
v1.2 - Major Update
- Design for Posts page.
- Comments page.
- Mail Inbox, Outbox, Sending.
- Some adjustments to the existent Redesign to be more in line with the new changes.
- Option for hiding Quotes 5 Quotes deep and 3 Quotes deep. (Cutting down on the endless quote cloud, especially in DMs.)
- Profile page.
- Many more changes.
v1.1.3 - Stylus Version Release
Moving away from UserCSS plugin and instead utilizing the Stylus plugin.
Reason is that it makes installing and updating the Style much easier, aswell as offer me to ship customization options for users to simply check a box for as they install the style.
Install instructions have been updated accordingly.
If you were running UserCSS before, you can uninstall the plugin switching over to Stylus.
v1.1 - Threads
Overall gave replies more space to work with, Content fields have more space than before, so text can also run further.
Quotes are now semi-transparent instead of gray, so stacking quotes will be nicely visualized through it aswell.
Quote icon is moved to the back and made gray, so that if text overlaps it stays somewhat readable.
Line height has been drastically increased. (space between lines)
This should improve readability by a lot!
What are the requirements?
It's using R34's dark mode! No guarantee it looks good with light mode.
This was designed for Desktop with a target resolution of 1920x1080.
If you run other resolutions, you can try and report back here.
Would love to get it working on all formats and resolutions.
It uses a browser plugin called Stylus. This plugin loads custom CSS.
How to install?
1. Install the Stylus plugin for your browser.
Chrome: chrome.google.com/webstor...pkpeebahjckkjfobafhncgmne
Firefox: addons.mozilla.org/en-US/firefox/addon/styl-us/
2. Once installed, open the R34 website. Now press on the Stylus plugin, which sits on the top right of your browser.
If it's not showing at the top right away, check in your browser plugins, it should be there.
There should be a button called 'Find Styles'.
It opens a list of available styles. Look for Baddy's R34 Custom CSS - UserStyles Version and press on it.
The style should be applied now! There is now an additional button called configure, where you can toggle certain parts of the design whenever you like!
Should you have trouble finding the Style, you can also go here and install it that way: userstyles.world/style/11...om-css-userstyles-version
Feedback and ideas are welcome!
FAQ
Q: How does this mod work?
A: It uses a browser plugin to load in an additionional CSS-file (Cascading Style Sheet).
Q: Can you add new functionalities or make vast changes to the layout?
A: Not with CSS files alone. CSS is a styling language, allowing to change the appearance of existing HTML elements, like let's say a website displays a link, CSS is able to style the link in different colors, formating, size, etc. However it is very limited in changing the structure of a website and its contents.
Q: Is there more to come? What's next?
A: Forums is where I spend most of my time on this website. And I kinda grew very annoyed with it, so that's why I made some changes with this mod.
Next thing I would like to look into is how I can also build a mod for mobile, as the mobile experience is DISASTEROUS. I will need to check the options for loading in custom files, as Chrome Mobile doesn't support plugins.
I would also like to make DMs look a bit more nice.
Additionally I also want to take a look at what options I have to style threads.
Should the project get bigger (probably not, I am lazy bum) I will add bundled and modular options for people to pick and choose.
Customization is of big importance to me.
Q: HELP! Shit looks bugged on my end!
A: Post about it here or reach out to me! I want it to work for everyone and all resolutions.
The CSS files are hosted on my own webhost, so I can push updates to the latest version without the need for users to manually update whenever there is a patch or update.
Q: Why does the Stickyless Version still have a Sticky-Post showing?
A: It's a control post. There is no class assigned to sticky posts to easily hide them away in one go.
So the solution I went with was counting and hiding the first 12~ posts.
However, it's possible staff add or remove sticky posts, changing the count which could result in fewer Stickies to hide and instead hiding non-sticky posts (the content you are interested in).
Having the last Sticky showing always let's you knowing no non-stickies are hidden and the count is in tact.