baddy1000
07/31/23 11:56PM
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.

AnotherFork
08/01/23 12:26AM
That's weird, I placed the code in the drawer but the site literally didn't change at all. I made sure I used the full link for the CSS and I even retyped the CSS command carefully. Turning the plugin on and off doesn't change anything.
her
08/01/23 12:27AM
This is awesome! It would probably be better to post it in this sticky thread though forum #6538
HdyMacXXII
08/01/23 12:29AM
AnotherFork said:
That's weird, I placed the code in the drawer but the site literally didn't change at all. I made sure I used the full link for the CSS and I even retyped the CSS command carefully. Turning the plugin on and off doesn't change anything.


The site shortens the link whenever you post a reply, so just get the full link by quoting baddy1000's post, then copy the full link from there. It actually worked on my end.
baddy1000
08/01/23 12:30AM
AnotherFork said:
That's weird, I placed the code in the drawer but the site literally didn't change at all. I made sure I used the full link for the CSS and I even retyped the CSS command carefully. Turning the plugin on and off doesn't change anything.

You can also look in the plugin settings, it should look like this: i.imgur.com/8cfn42l.png

If it has a different website listed, then you haven't used the UserCSS plugin on Rule34. ^^
AnotherFork
08/01/23 12:31AM
Hey, it works now. Thanks.
baddy1000
08/01/23 12:33AM
HdyMacXXII said:
AnotherFork said:
That's weird, I placed the code in the drawer but the site literally didn't change at all. I made sure I used the full link for the CSS and I even retyped the CSS command carefully. Turning the plugin on and off doesn't change anything.


The site shortens the link whenever you post a reply, so just get the full link by quoting baddy1000's post, then copy the full link from there. It actually worked on my end.

I didn't even notice that, thanks for pointing it out.
I'll add easy quote replies for people to use.
baddy1000
08/01/23 12:35AM
baddy1000
08/01/23 12:35AM
baddy1000
08/01/23 02:59AM
Update v1.1 - Threads
Threads: i.imgur.com/QjCnnJA.png

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!

If you already got the script in, there is nothing further you have to do but to wait for your browser to eventually request the latest script version.
Shissei
08/01/23 03:39AM
This is literally the exact same layout of the forums for r34s sister site, Konachan. The colors are the same and everything
baddy1000
08/01/23 03:42AM
Shissei said:
This is literally the exact same layout of the forums for r34s sister site, Konachan. The colors are the same and everything

Uh, most colors are unchanged.
It's just r34s darkmode.
Which reminds me, I should mention that in the op. Thanks! (I guess? ;p)

Edit: just took a look at Konachan and I have no idea what you mean about layout looking the exact same. It has more similarities with the regular r34 than this.
Shissei
08/01/23 04:06AM
baddy1000 said:
Shissei said:
This is literally the exact same layout of the forums for r34s sister site, Konachan. The colors are the same and everything

Uh, most colors are unchanged.
It's just r34s darkmode.
Which reminds me, I should mention that in the op. Thanks! (I guess? ;p)

Edit: just took a look at Konachan and I have no idea what you mean about layout looking the exact same. It has more similarities with the regular r34 than this.


Desktop konachan. Mobile and desktop are different

Depends on your device but the links to the pictures of how the forums look, look exactly like konas default
baddy1000
08/01/23 04:15AM
Shissei said:
baddy1000 said:
Shissei said:
This is literally the exact same layout of the forums for r34s sister site, Konachan. The colors are the same and everything

Uh, most colors are unchanged.
It's just r34s darkmode.
Which reminds me, I should mention that in the op. Thanks! (I guess? ;p)

Edit: just took a look at Konachan and I have no idea what you mean about layout looking the exact same. It has more similarities with the regular r34 than this.


Desktop konachan. Mobile and desktop are different

Depends on your device but the links to the pictures of how the forums look, look exactly like konas default

So I made you some screenshots comparing the ORIGINAL R34 dark mode and the Konachan.
imgur.com/a/h7OYoDz

And yes, they are desktop layout despite screenshoting from phone.

They are nearly identical.
My design changes move away from both.
Shissei
08/01/23 07:04AM
baddy1000 said:
Shissei said:
baddy1000 said:
Shissei said:
This is literally the exact same layout of the forums for r34s sister site, Konachan. The colors are the same and everything

Uh, most colors are unchanged.
It's just r34s darkmode.
Which reminds me, I should mention that in the op. Thanks! (I guess? ;p)

Edit: just took a look at Konachan and I have no idea what you mean about layout looking the exact same. It has more similarities with the regular r34 than this.


Desktop konachan. Mobile and desktop are different

Depends on your device but the links to the pictures of how the forums look, look exactly like konas default

So I made you some screenshots comparing the ORIGINAL R34 dark mode and the Konachan.
imgur.com/a/h7OYoDz

And yes, they are desktop layout despite screenshoting from phone.

They are nearly identical.
My design changes move away from both.



...I must be colorblind or some shit. My konachan is green? But yours is black?? I just logged on and it's a super dark green, a little darker than the r34 one.
1 2>>>


Reply | Forum Index