e621 Redesign Fixes v.2.0.9

This is a custom stylesheet that patches a number of bugs in the updated site theme. It is a combined work of several forum users, striving to bring back the old e621 look and feel that we all know and love.

Github: https://github.com/bitWolfy/e621-Redesign-Fixes

Screenshots

Image page: old vs new
Comment section: old vs new
Search: old vs new
Forums: old vs new
Forum posts: old vs new
Themes: new (potato quality)

Note that the project is in active development. The screenshots might not exactly match the current state of the project.

Installation:

Using e621 Custom CSS

- Open the latest stylesheet release, select and copy everything.
- On e621, go to Account > Settings > Advanced Settings > Custom CSS
- Paste the stylesheet there, then save.

Using a Userstyle Manager

- Open the userstyle release
- Follow the instructions on the page

Releases

Latest release: style.user.css

Userstyle release: style.user.css

Legacy 1.51: legacy.css

With version 2.0 came some changes that might not be to everyone's tastes. As such, I shall continue maintenance and support of legacy version 1.51. It will receive bug fixes and patches, but no new content.

What's new?

Version 2.0

Major project rewrite using SASS. Developing this project has just become significantly easier.
- Added theme support. Ships with vanilla hexagon, bloodlust, and (most importantly) hotdog. Might add more themes later.
- Paradigm shift with regards to page width - fixed-width central column that expands at viewport breakpoints.
- Began work on a companion userscript for things that cannot be done with CSS. To start with, hiding the blacklist filters by default.
- Significant code clean-up and improvement.
Patch 2.0.1
- Bugfix: Align posts in the search results to the grid
Patch 2.0.2
- Tweak the breakpoints to stretch the page a bit more
- Make the DText subsections (quote, code, expandable) decorations a bit more subtle
- Begin working on the profile page in an attempt make it more mobile-friendly
- Fail at making the profile page more mobile-friendly and put it off for later
- Bugfix: correct multiple elements that were missing the correct theme colors
- Bugfix: make sure that tables on artist, tag, pool lists got proper stylings
- Bugfix: make post-preview info stand out a little more against the section
Patch 2.0.3
- Bugfix: fixed the misaligned table on the profile page
Patch 2.0.4
- Re-style the post tag history, adapt it for mobile
- Bugfix: color the site news segment according to the theme
Patch 2.0.5
- Implement a toggle for responsive site width into the companion script
- Bugfix: color the voting arrows correctly
Patch 2.0.6
- Re-aligned half the project to use rem widths instead of pixels. Scaling should be more consistent.
- Unfortunately, post navigation has returned back to the top of the page. Such are the design requirements, what can you do.
- Added theme extras. Unfortunately, e621's content security policy disables external images, so they won't work for you unless you use an extension to disable that.
- Ported the rest of the original themes, except for the clean hexagonal one. I for the life of me can't tell the difference between that and the normal one.
- Fixed some element precedence issues causing tag and user link colors to be incorrect (but only sometimes) on themes other than the default one.
- Re-styled quote / code / expandable to have consistent margins and padding. Also, they now use font-awesome icons instead of attached images.
- Style fixes for the site news box. It is now actually readable on darker themes.
- Restored missing theming on post notices (resize, parent/child, flagges, etc.)
Patch 2.0.7
- Re-align the image page. Now, navigation should be the same width as the post, image resized notice is on top, and other notices are properly colored.
- Slight tweaks to DText sub-sections. Smaller margins, smaller backgrounds.
- Fix the color and positioning of the various notices
- Updated the animation type badges to use the new system
- Standardize border radius across the site
- Bugfix: DText sections no longer broken on the wiki pages
Patch 2.0.8
- Transferred the project to a new page. No practical changes for users.
- Fixed a bug causing striping to re-appear on tables
- Included a JQuery dependency in the script
Patch 2.0.9
- Minor changes to project structure. No practical difference for users.
- Removed the companion userscript. Its functionality has been replaced by re621.

I should have made it clearer, but the comment index tweaks I added should be within the scope of @media screen and (max-width: 800px) alongside Peegus's. If it's in the main scope, the comment index will look weird on wide windows/screens.

jakxxx3 said:
I should have made it clearer, but the comment index tweaks I added should be within the scope of @media screen and (max-width: 800px) alongside Peegus's. If it's in the main scope, the comment index will look weird on wide windows/screens.

You are completely correct, of course, I'm just really tired :)
It's fixed now in 1.39

I'm having some issues using this script. It works fine for the most part but when the background uses the faded hexagon tiles, it "loops" throughout the entire page, visible on searches and in this forum.
Example: https://i.imgur.com/6ov0lx7.png

umbreon5 said:
I'm having some issues using this script. It works fine for the most part but when the background uses the faded hexagon tiles, it "loops" throughout the entire page, visible on searches and in this forum.
Example: https://i.imgur.com/6ov0lx7.png

Thanks for bringing it up. I'm frankly baffled nobody told me sooner.
This issue was caused by a very specific quirk of how custom CSS is applied to the site. Since I'm using the Stylish plugin instead, I never spotted it.
It's fixed now in 1.40, along with some other minor things.

Ok, so this IS responsible for the hexagons?

I couldn't tell because they only showed up a few page-loads after I installed the custom CSS.
Not sure what is up with that.

savageorange said:
Ok, so this IS responsible for the hexagons?

I couldn't tell because they only showed up a few page-loads after I installed the custom CSS.
Not sure what is up with that.

The hexagons (both kinds) are images that are converted to base64 and included in the stylesheet directly.
This might cause a few... peculiarities.
Do they show up every time now, at least?

Yeah, they do.

Wow, this almost single-handedly fixes every one of the problems I had with the site redesign. Few niggling issues though,

- The "Viewing sample resized to ##% of original (view original)" text when in a pool is awkwardly shoved under the 'Prev' button.
- Why does every comment under images say "Updated by anonymous 2 days ago"?
- Could this have the 'arrow keys to move between images in a set/pool' function? It's the only functionality I ever needed an extension for with the old site, and frankly it's baffling to this day this isn't just native to the site.
- This is purely a personal thing, but the colors on the Favorite/Unfavorite/Download seem a bit garish as is, if they were toned down in intensity they'd look far better.
- Again personal preference, but having everything in the forums centered with a defined width isn't optimal when a user types a lot of text in a single line, if someone has the screen real estate they should be able to use it to read text easier.

It's a shame I have to be logged in for this to take effect, though given the forced login now with the forced blacklisting (I don't care for any of the things that are black listed, but seeing "2 things were hidden because of the auto-blacklist" does get infuriating with not knowing what they are.) I guess needing to log in for 3rd party CSS to take effect isn't much of a stretch.
Thank you all so much for putting this together.

anonomn said:
- The "Viewing sample resized to ##% of original (view original)" text when in a pool is awkwardly shoved under the 'Prev' button.

Hm. Yeah, that would happen. I've centered the message in v1.41, so it shouldn't get in the way now.

anonomn said:
- Why does every comment under images say "Updated by anonymous 2 days ago"?

That's a site bug. No idea why it happens.
Hiding those messages would also hide the legitimate "message edited" notices, so they stay for now.

anonomn said:
- Could this have the 'arrow keys to move between images in a set/pool' function? It's the only functionality I ever needed an extension for with the old site, and frankly it's baffling to this day this isn't just native to the site.

This has been added in the new update: https://e621.net/static/keyboard_shortcuts. You'll need to turn them on in the settings.
Although, arrow keys still don't work for me for some reason. A and D do, though.

anonomn said:
- This is purely a personal thing, but the colors on the Favorite/Unfavorite/Download seem a bit garish as is, if they were toned down in intensity they'd look far better.

Favorite and Download - agree, it's just the default green and cyan, I'll play around with the colors a bit more later.
I'm pretty happy with the Unfavorite color, though, so it'll probably stay for now.

anonomn said:
- Again personal preference, but having everything in the forums centered with a defined width isn't optimal when a user types a lot of text in a single line, if someone has the screen real estate they should be able to use it to read text easier.

Centering makes everything quite a bit easier and neater, but I do see your point. I'll keep that in mind for later.

It would be great if there's a way to hide a name changing history.

bitwolfy said:
Although, arrow keys still don't work for me for some reason. A and D do, though.

Just testing this, can confirm this is the case as well. How weird.
For what reason would keyboard shortcuts be a "Turn off by default" thing? It's not like there's going to be shortcut conflicts or anything, there's absolutely no real good reason for it.
Otherwise, I have nothing else to say, I think this custom CSS fixes basically anything I care about, aside from the arrow keys not working. I genuinely hope this could get merged into the actual site as standard.

anonomn said:
Just testing this, can confirm this is the case as well. How weird.
For what reason would keyboard shortcuts be a "Turn off by default" thing? It's not like there's going to be shortcut conflicts or anything, there's absolutely no real good reason for it.
Otherwise, I have nothing else to say, I think this custom CSS fixes basically anything I care about, aside from the arrow keys not working. I genuinely hope this could get merged into the actual site as standard.

Kira said that they didn't want to force the keyboard shortcuts upon people. Yeah, I dunno either.

Getting the fixes integrated into the site proper is a... process. It's going to happen at some point, though.

bitwolfy said:
Kira said that they didn't want to force the keyboard shortcuts upon people. Yeah, I dunno either.

The great thing about keyboard shortcuts is if you don't use them, you wouldn't know they were ever even there. Assuming there's still UI functionality that allows the user to do everything without touching the keyboard, there's no reason just to have them on at all times.
Where was this said? I'd rather make this point directly to the explanation for them being turned off by default.

anonomn said:
The great thing about keyboard shortcuts is if you don't use them, you wouldn't know they were ever even there. Assuming there's still UI functionality that allows the user to do everything without touching the keyboard, there's no reason just to have them on at all times.
Where was this said? I'd rather make this point directly to the explanation for them being turned off by default.

Join the e621 discord. It's a hoot: https://e621.net/static/discord

What's even the point of having publicly open forums if chunks of information like this are going to be squirreled away into some discord chat no one will ever see unless they go out of their way to join up, in which case all that information will be lost whenever that discord chat or discord in general eventually shut down? At least with a public forum there's a chance it can be archived somewhere.
I really do hate the current year sometimes.

I have no words great enough to thank you

Thank you so much for the 1.40 update. Everything looks about right for me now, and the whole site genuinely feels good to use again. You are a great person for going out of your way to fix this in a mere few days.

If I could make a suggestion for future features, maybe adding some padding between the images in a search so that it matches the old search results? With the redesign they get kind of crammed together for the sake of showing just one or two more entries per row of results which can be a bit weird to look at. Otherwise everything is so nice now I actually think the redesign with your CSS script made e621 look neat, clean and modernized.

Thank you so much for this, this is how the redesign should officially look.

We've got official permission to "steal" bitWolfy's redesign to use directly on e621. We'll be working on implementing it as soon as all the rest is up and running and the remaining bugs have been squashed.

umbreon5 said:
If I could make a suggestion for future features, maybe adding some padding between the images in a search so that it matches the old search results? With the redesign they get kind of crammed together for the sake of showing just one or two more entries per row of results which can be a bit weird to look at. Otherwise everything is so nice now I actually think the redesign with your CSS script made e621 look neat, clean and modernized.

Adding too much padding there tends to break things, so I can't really make it as spaced-out as it used to be.
I did make it a little less crammed in 1.42, though. Hope that helps.

notmenotyou said:
We've got official permission to "steal" bitWolfy's redesign to use directly on e621. We'll be working on implementing it as soon as all the rest is up and running and the remaining bugs have been squashed.

<3

One issue I notice is that when using Scale To Fit for images, it shows the Viewing sample resized to XX% of original (view original) message. However, the given percentage is wrong, it's the same value as with the Sampled mode. Also if I switch from Sampled to Scale To Fit, it just shows Loading... on that line (the image shows fine). By default without the CSS, the Viewing sample resized ... message only shows when the size is set to Sampled, not Scale To Fit or Original.

EDIT:
The view original link also seems to act the same as the Change Size Mode (...) link right underneath, meaning it cycles through Sample, Scale To Fit, and Original, rather than going right to Original as implied. So other than the percentage size for Sample view, it doesn't seem all that useful.

watsit said:
One issue I notice is that when using Scale To Fit for images, it shows the Viewing sample resized to XX% of original (view original) message. However, the given percentage is wrong, it's the same value as with the Sampled mode. Also if I switch from Sampled to Scale To Fit, it just shows Loading... on that line (the image shows fine). By default without the CSS, the Viewing sample resized ... message only shows when the size is set to Sampled, not Scale To Fit or Original.

EDIT:
The view original link also seems to act the same as the Change Size Mode (...) link right underneath, meaning it cycles through Sample, Scale To Fit, and Original, rather than going right to Original as implied. So other than the percentage size for Sample view, it doesn't seem all that useful.

Yeah, I see the issue, and unfortunately, I can't straight up fix it. The custom CSS functionality adds !important to every property, which means that in this case, since I use the display property to re-order the notifications, the site can no longer hide them with display:none.

I will try to find a workaround for this.

Edit: I've put a workaround for this in 1.43. Good news: the notification gets hidden properly. Bad news: it's now stuck below the ad. But that's the best I can do for now.

bitwolfy said:
Adding too much padding there tends to break things, so I can't really make it as spaced-out as it used to be.
I did make it a little less crammed in 1.42, though. Hope that helps.

Just tried it, yup this makes it a lot better. The padding isn't about as large as the old site but this is good too, it makes it look nicer in general. I think that makes about most of the glaring issues for me. Thanks again.

Any way to get a vertical scale to fit?

I like most of the fixes but I need my left alignment back :-/

It looks like the prev/next navigation links on images is too large, which creates problems when there's at least three lines: https://imgur.com/iR4qLNt Though even when it's just two lines, the added bulk of the links makes it look unaligned.

smaugthedragon said: Any way to get a vertical scale to fit?

Sorry, that's beyond the scope of this project.

km3333 said: I like most of the fixes but I need my left alignment back :-/

Could you be more specific? Left alignment on what?

watsit said:
It looks like the prev/next navigation links on images is too large, which creates problems when there's at least three lines: https://imgur.com/iR4qLNt Though even when it's just two lines, the added bulk of the links makes it look unaligned.

Oh god, I didn't even consider having two different pools.

I'm in the process of re-designing the nav links at the moment anyways, the current design is kind of garbage.

Two details I just noticed:
The next and previous buttons on pools feel like they have inverted functionality (unless the pool I was looking at was just like that). Pressing next sent me back one page while previous would go to the next page.

Also, the content rating for an image like explicit or questionable isn't colored, and I also remember it being bold before. As it is right now it's just plain text.

umbreon5 said:
Two details I just noticed:
The next and previous buttons on pools feel like they have inverted functionality (unless the pool I was looking at was just like that). Pressing next sent me back one page while previous would go to the next page.

Could you link the pool in question so that I can take a look myself? From what I've seen, the buttons should work normally.
I have also changed the way pool navigation works in 1.44, so you might want to try that too.

umbreon5 said:
Also, the content rating for an image like explicit or questionable isn't colored, and I also remember it being bold before. As it is right now it's just plain text.

Unfortunately, I can't do anything about that for the time being. The element containing the image rating lacks any classes or IDs, so I can't style it.

bitwolfy said:
- Reworked the pool and search navigation buttons. Let me know what you think.

The search navigation looks good, but the pool navigation is extremely big/tall now (about 6x or so the height of the search nav bar, by rough estimation).

EDIT:
A pic showing what I see: https://imgur.com/o3BAnSq

If admins/bitWolfy wants to implement more changes (as this will probably be the official patch to redesign the site now) and the other post is a mess to deal it, I'm trying to emulate the old theme as close as possible in some cases: https://pastebin.com/NeWzrCkA

watsit said:
The search navigation looks good, but the pool navigation is extremely big/tall now (about 6x or so the height of the search nav bar, by rough estimation).

That's somewhat intentional, but not to that extent. Try the new version (1.44.2), it should be smaller.

The problem lies with pools with really long names ( like this ) and images belonging to more than one pool ( like this ). The nagivation needs to still be usable on mobile, which means that the links can't be too crowded.

nonono2 said:
If admins/bitWolfy wants to implement more changes (as this will probably be the official patch to redesign the site now) and the other post is a mess to deal it, I'm trying to emulate the old theme as close as possible in some cases: https://pastebin.com/NeWzrCkA

That's some good work. Some stuff I didn't even notice that was missing.
Would you mind if I incorporated your changes into the main stylesheet?

bitwolfy said:
That's some good work. Some stuff I didn't even notice that was missing.
Would you mind if I incorporated your changes into the main stylesheet?

Go ahead, I'll be posting here If I change something more.

EDIT: Better not implement the 'lower space between text lines by 0.03'. I think is too much OCD and I noticed the text is too cramped when walls of text are posted.

bitwolfy said:
That's somewhat intentional, but not to that extent. Try the new version (1.44.2), it should be smaller.

The problem lies with pools with really long names ( like this ) and images belonging to more than one pool ( like this ). The nagivation needs to still be usable on mobile, which means that the links can't be too crowded.

I see. I guess I just expected it to grow vertically as needed; if the title and nav links can fit on a single line, it's just a single line tall, or if the title is too long, it line breaks where necessary and expands to be two lines tall, etc. Maybe that's not possible to change with pure CSS though, I don't know.

I saw that the old site had a font-size of 82% for body. If this is implemented, then almost everything in your code related to font sizes can be dismissed and would be consistent for all page. Although, I don't know if I already got used with the actual size, because reverting it seems a bit small now and there's the problem with mobile users as the actual code is focused for this. Anyway, if you want to test it: body {font-size: 82%}.

If the header suddently get's too big, then: body, header {font-size: 100%}

nonono2 said: Go ahead, I'll be posting here If I change something more.

The changes are in update 1.45. Funny story - while I was fixing the font sizes, the power went out. And of course I didn't save anything. So, had to do the whole thing twice. Fun times.
Anyways, the only tweak I didn't put in is getting rid of the avatars on My Profile -> Comments page. Yes, it does make it look sleeker, but it also makes it kind of ambiguous who wrote the comment and when.

watsit said: Maybe that's not possible to change with pure CSS though, I don't know.

I believe that it is possible, but the current HTML layout makes it quite a bit difficult. Might happen in a later update, might not.

bitwolfy said:
The changes are in update 1.45. Funny story - while I was fixing the font sizes, the power went out. And of course I didn't save anything. So, had to do the whole thing twice. Fun times.
Anyways, the only tweak I didn't put in is getting rid of the avatars on My Profile -> Comments page. Yes, it does make it look sleeker, but it also makes it kind of ambiguous who wrote the comment and when.

I removed the avatars from the comment's page because a comment chain or a quote already have the user name on them. And if you are accessing your own comment page then you already know that you are you :P (with bonus space).

And I did some minor tweaks to the account page, mostly colors to keep it like the rest. Sorry to add 0.0.1 to your version, I'll stop now lol: https://pastebin.com/ki38jqUP

EDIT: Now I see what you mean, the changes for the avatars are affecting the general comments page (I'll take a look later). And I also realized that the .simple_form affects all forms in the site, but that's a good thing because it matches the theme everywhere.

Lord there are a bunch of changes that I made, but I didn't keep them together and document it aside from them appearing in the CSS file. It's mostly making the whole site look a bit more like the previous site, while tweaking a couple things like making shadows and what not more modern looking.

Feel free to have a look and let me know if there's things you don't like and what have you!

https://pastebin.com/uJu0bg0K

nonono2 said:
the changes for the avatars are affecting the general comments page

So, I took a look and it's impossible to take your avatar out of the comments listing with CSS only. For consistence between the normal comment posts (below images), your listing (Account > My Account > Comments) and general listing (Top Menu > Comments), please add div.comments-for-post {width: 100%;} besides the rest I did. To extend the quotes boxes too, add: div.content {width: 100%} - but I don't recommend because it's ugly, at least for me.

garrickson_venison said:
Lord there are a bunch of changes that I made, but I didn't keep them together and document it aside from them appearing in the CSS file. It's mostly making the whole site look a bit more like the previous site, while tweaking a couple things like making shadows and what not more modern looking.

https://pastebin.com/uJu0bg0K

I'll take a look, but we are removing most of the shadows as they are not blending so well with the rest (this is not official).

Thank you, this is so much better. I wish there were a way to use this without an account.

garrickson_venison said: Feel free to have a look and let me know if there's things you don't like and what have you!

This is really unfortunate, but the stylesheet _just_ got refactored to resolve a long-standing issue with the e621 custom CSS functionality. In the process, the old version that you based your changes ended up lost, so figuring out what changed is a bit of a chore now. I'll take a look regardless, of course.

newdesignproblems said: Thank you, this is so much better. I wish there were a way to use this without an account.

If you are on desktop, you can use a browser extension like Stylus to load custom stylesheets for any site.
For the mobile version... yeah sorry, you'll need an account.

bitwolfy said:
This is really unfortunate, but the stylesheet _just_ got refactored to resolve a long-standing issue with the e621 custom CSS functionality. In the process, the old version that you based your changes ended up lost, so figuring out what changed is a bit of a chore now. I'll take a look regardless, of course.

That's fine, I can redo it and make a sheet that has just my changes on it. The way I usually go about developing stylesheets is using Chrome DevTools and modifying the stylesheet inside my browser, hence why I gave you a full sheet lol. I keep a copy of it open in Sublime Text and upload to the server and refresh caches when I feel like I've reached a checkpoint.

bitwolfy said:
Could you link the pool in question so that I can take a look myself? From what I've seen, the buttons should work normally.
I have also changed the way pool navigation works in 1.44, so you might want to try that too.

Just tried 1.46 and it fixed the inverted pool navigation, thanks.
However, now the site is slightly crammed again, the main "box" with all content on the site is larger now and some details feel a bit smaller. I'm unsure if to keep version 1.42 or keep updating, because i liked the shape it had before.

Edit: also, this is the pool I had issues with https://e621.net/pools/18892 but I don't think it really matters anymore since the navigation got fixed.

Actually, are we able to see previous releases? I would like to try version 1.44 since it mentions the actual navigation fixes before the spacing changes in 1.45 and 1.46.

garrickson_venison said:
That's fine, I can redo it and make a sheet that has just my changes on it. The way I usually go about developing stylesheets is using Chrome DevTools and modifying the stylesheet inside my browser, hence why I gave you a full sheet lol. I keep a copy of it open in Sublime Text and upload to the server and refresh caches when I feel like I've reached a checkpoint.

That's pretty much the same way I develop stylesheets lol. If you want to share a sheet with your changes, you are welcome to do so.

umbreon5 said:
Just tried 1.46 and it fixed the inverted pool navigation, thanks.
However, now the site is slightly crammed again, the main "box" with all content on the site is larger now and some details feel a bit smaller. I'm unsure if to keep version 1.42 or keep updating, because i liked the shape it had before.

Edit: also, this is the pool I had issues with https://e621.net/pools/18892 but I don't think it really matters anymore since the navigation got fixed.

Actually, are we able to see previous releases? I would like to try version 1.44 since it mentions the actual navigation fixes before the spacing changes in 1.45 and 1.46.

Unfortunately, I didn't have any sort of version control before 1.46, so there aren't copies of previous versons. Sorry about that.

As far as the density of content goes, things start to break down after 10px margins on post thumbnails, which is where we are at right now. Literally can't space things out any further. Other things might look a bit smaller because we changed the way font sizes are set. It should look pretty similar to how the old theme did, though.
I just noticed that post details on the search page - like how many votes and favorites each of them has - look way too small. That'll get fixed in the next update.

I really like the progress on this. I thought of something that would make tagging a bit easier imo and that would be a floating "Submit" button at the bottom of the edit page, like what we had in the account settings page on the old design. Instead of adding my quick tags and then having to scroll down all the way on this massive new edit page I would be able to hit "Submit" to save changes right below my tags.

Would something like this be possible?

Idea: https://i.imgur.com/D7DsA8J.jpg

Is there going to be any sort of javascript used with this, or would you prefer to keep it as pure css? A piece of functionality I missed from the old site was auto focusing the search bar which I solved myself with a small snippet:

// ==UserScript==
...
// @match        https://e621.net/
...
// ==/UserScript==

document.getElementById('tags').focus();

Sup, I would like to drop in and say thank you very much for the fixes. Have you contacted any of the e621 admins, and prepose your scripts, and ideas to them? I know that NotMeNotYou is being pretty responsive, and said that they are looking for any help with the layout fixes.

blacklistbaron said:
I really like the progress on this. I thought of something that would make tagging a bit easier imo and that would be a floating "Submit" button at the bottom of the edit page, like what we had in the account settings page on the old design. Instead of adding my quick tags and then having to scroll down all the way on this massive new edit page I would be able to hit "Submit" to save changes right below my tags.

Yeah, that should be pretty easy to do. I'll look into the best way of implementing it.
Edit: it's in version 1.48.0, with some other minor tweaks to the tag editing form. One small issue is that I used a method that is not fully supported by all browsers. Let me know if it works for you.

idem said: Is there going to be any sort of javascript used with this, or would you prefer to keep it as pure css?

It's less about what I prefer and more about the fact that the site's built-in tools only support custom CSS, not Javascript. For scripts, you would need a browser extension. While there is a number of things I would love to do that would be trivial with Javascript, it is a little bit outside the scope of the project at the moment.

araptorinatophat said:
Sup, I would like to drop in and say thank you very much for the fixes. Have you contacted any of the e621 admins, and prepose your scripts, and ideas to them? I know that NotMeNotYou is being pretty responsive, and said that they are looking for any help with the layout fixes.

No problem!
Yeah, I've been in touch with the admins, mainly through Discord. The fixes will be integrated into the site proper at some point. However, the admins are focused on the back-end issues at the moment, so that might take some time.

I did some work to the main profile page: Result | Code

It's not like before but I think it's a bit cleaner and goes well with the rest. Still have to proper align the posts and do something to the mobiles users because right now it's a total mess (not my fault), but I'm not a pro so might take some time.

>tfw a random e6 user does a better job creating/updating a new lay-out that looks almost the same as the old one with the needed improvements than the staff

But forreal, you're a real trooper. I'll try this out and see if there's any problems I'll encounter, then I'll notify you.

nonono2 said: I did some work to the main profile page: Result | Code

I integrated some of the changes into the main stylesheet, although not all of them.
- Your version of the profile page looks a bit too dark I think. I went with solid colors, but now it seems a bit too bright.
- IMHO, expandable sections look better with the stripe on the side - like blockquotes. It might end up being kind of confusing for users, so... maybe having it in a slightly different color might be better. Not sure just yet.
- Text-shadow should be used very sparingly and subtly. Having the user name stand out is a good thing... but not like that.

Let me know what you think. I really do appreciate your work. And I'm not a pro either, web development is a hobby for me, not a job.

bitwolfy said:
I integrated some of the changes into the main stylesheet, although not all of them.
- Your version of the profile page looks a bit too dark I think. I went with solid colors, but now it seems a bit too bright.
- IMHO, expandable sections look better with the stripe on the side - like blockquotes. It might end up being kind of confusing for users, so... maybe having it in a slightly different color might be better. Not sure just yet.
- Text-shadow should be used very sparingly and subtly. Having the user name stand out is a good thing... but not like that.

Let me know what you think. I really do appreciate your work. And I'm not a pro either, web development is a hobby for me, not a job.

Thanks! I'm trying to emulate the old theme and modifiying some parts, but maybe I went too overboard - I will use some of my code when everything is set anyway lol. Now for the color parts:

- Some pages are different from others. I know this is not the main focus, but look at Comments, Blips/Forum, Settings and Profile pages: some are too greyish, others are too solid and blocky. From these, I would choose the Settings: it keeps almost the same color from the old theme and adds a bit of transparency in the top, a 'modern' feel. With the compilation of styles here, I think it's possible to modify all site pages, use only one theme and keep it (and add border-radius too). A color and text cheatsheet would be nice.
- For the expandable stripes, it's possible to use yellow, because its from the default theme already. I tested the pale yellow of the texts in Settings page (#ffe380) to keep the same pale blue/grey from the quote blocks, but you can also use #ffd700/gold color (from 'Welcome' text). I tried to set a transparent yellow background too, but it blends with white text when they cascade, so it's better to keep the same back color for now.

Cheers.

bitwolfy said:

Unfortunately, I didn't have any sort of version control before 1.46, so there aren't copies of previous versons. Sorry about that.

As far as the density of content goes, things start to break down after 10px margins on post thumbnails, which is where we are at right now. Literally can't space things out any further. Other things might look a bit smaller because we changed the way font sizes are set. It should look pretty similar to how the old theme did, though.

Welp. I actually like the spacing 1.42 had. Thanks anyways.
Would anyone happen to have version 1.44 sitting around to share? I would prefer to keep that version if I could.

nonono2 said:
Thanks! I'm trying to emulate the old theme and modifiying some parts, but maybe I went too overboard - I will use some of my code when everything is set anyway lol. Now for the color parts:

- Some pages are different from others. I know this is not the main focus, but look at Comments, Blips/Forum, Settings and Profile pages: some are too greyish, others are too solid and blocky. From these, I would choose the Settings: it keeps almost the same color from the old theme and adds a bit of transparency in the top, a 'modern' feel. With the compilation of styles here, I think it's possible to modify all site pages, use only one theme and keep it (and add border-radius too). A color and text cheatsheet would be nice.
- For the expandable stripes, it's possible to use yellow, because its from the default theme already. I tested the pale yellow of the texts in Settings page (#ffe380) to keep the same pale blue/grey from the quote blocks, but you can also use #ffd700/gold color (from 'Welcome' text). I tried to set a transparent yellow background too, but it blends with white text when they cascade, so it's better to keep the same back color for now.

That is a really nice yellow (#ffe380), it goes pretty well against the blue of the background.
Getting a color scheme normalized would be a very good idea. Have you seen the list of color variables for the current theme? It's like 400 lines long.
I guess, I'll start on that once I finish up with the current version.
Edit: It's done in v.1.50. FML, that was tedious.

umbreon5 said: Welp. I actually like the spacing 1.42 had. Thanks anyways.

Funnily enough, in the 18 hours that have passed since I left that comment, I fixed the actual problem. You can now have as much padding as you want. Check out version 1.49.0.
I've set padding to 15px for the time being - if that's not enough for you, let me know, I'll tell you how to increase it manually.

A quick look at the new update, and search results no longer have their stat bars aligned. Maybe I'm misremembering, but I thought the search results were bottom-aligned on each row so their stat bars lined up. It also seems that the results on the bottom row have their stat bars stretched out to fill the row width, instead of maintaining a consistent size with the other results.

bitwolfy said:
Funnily enough, in the 18 hours that have passed since I left that comment, I fixed the actual problem. You can now have as much padding as you want. Check out version 1.49.0.
I've set padding to 15px for the time being - if that's not enough for you, let me know, I'll tell you how to increase it manually.

Just tried it, it looks okay, however it still feels crammed. I think the issue for me is how the "main" box is larger and there is little space for the background, and the left "pane" with the tags and all is small. I think 15px may be a little too much, as it even goes over what 1.42 had. Thanks for offering how to change it manually though, can you show me how to make the main box smaller and the text on the left pane slightly bigger?

watsit said:
A quick look at the new update, and search results no longer have their stat bars aligned. Maybe I'm misremembering, but I thought the search results were bottom-aligned on each row so their stat bars lined up. It also seems that the results on the bottom row have their stat bars stretched out to fill the row width, instead of maintaining a consistent size with the other results.

Yeah, it used to be bottom aligned.

watsit said:
A quick look at the new update, and search results no longer have their stat bars aligned. Maybe I'm misremembering, but I thought the search results were bottom-aligned on each row so their stat bars lined up. It also seems that the results on the bottom row have their stat bars stretched out to fill the row width, instead of maintaining a consistent size with the other results.

Yeah, that wasn't meant to happen. It's a side effect of switching to display:flex in the search results box. I'll get it fixed in the next version.
Edit: should be fixed in 1.50.0. Yes, I know that the animation type labels have shifted down, but it's really late, and I have to go to work tomorrow, so this is how it is for the time being.

umbreon5 said:
Just tried it, it looks okay, however it still feels crammed. I think the issue for me is how the "main" box is larger and there is little space for the background, and the left "pane" with the tags and all is small. I think 15px may be a little too much, as it even goes over what 1.42 had. Thanks for offering how to change it manually though, can you show me how to make the main box smaller and the text on the left pane slightly bigger?

Turns out, I didn't actually increase the margins. That's just flexbox spacing things out across the page.

Anyways, make sure you have version 1.50 before trying to change things.
Modifying the left sidebar is kind of complicated, but you don't really need to. Simply increasing the font size should do the trick.

On line 13, you should see this:

--conf-font-size: 85%;

Starting in version 1.44, I decreased that from 87% to the 82% that was in the original theme. I've bumped it up to 85% in 1.50, but if you want to increase it, that's up to you.

Limiting the search page results container is also simple. On the next line (line 14), there is this bit:

--conf-posts-list-width: none;

Change none to 1200px to start with. That should be about the same size as the original theme.

Increasing margins on thumbnails is a bit more difficult, mainly because I don't think that it's necessary at this point, but if you want to do that, this is the relevant bit (line 284):

article.post-preview {
    flex: 1 1 auto;
    margin: 10px;
}

The margins are set to a fairly conservative 10px by default. Setting it to 15px seems excessive to me, but it might work.

Let me know if that works out for you.

Thanks for the floating submit button, work great!

But the latest version doesn't hide blacklisted images anymore. Also the "anim", "webm" etc. symbols are now at the bottom of the images and the parent/child post section on images looks messed up.

Went back to 1.49.0 for the time being.

https://imgur.com/a/jBncKaD

The posts in pools seem the be stuck in one column on the left after I updated to 1.50. Removing the CSS fixes it, but I'd like to figure out if this is an issue on my side before assuming anything.

Sorry for the potatoe quality sceen caps: https://imgur.com/a/Q0p7bS3/

bitwolfy said:
Anyways, make sure you have version 1.50 before trying to change things.

Thank you for the guide on editing these details, however version 1.50 seems to have broken the background for me. It's completely blank now.
Edit: Wait whoops, looks like I just copied wrong that time. Tried it again and it works now.

I made those edits you pointed out and I got it into a comfortable spot for me, but I still don't know how to change the size of the main box itself. I would like to make it so the box is slightly less wide so the background shows a little more.
Also, thank you so much for your help. I've dabbled with programming with things like C++ and C# but I never got around to using CSS in web dev this much.

anthraxfolf said:
The posts in pools seem the be stuck in one column on the left after I updated to 1.50. Removing the CSS fixes it, but I'd like to figure out if this is an issue on my side before assuming anything.

Sorry for the potatoe quality sceen caps: https://imgur.com/a/Q0p7bS3/

getting the same effect on the Popular page.

This really makes the website fell good to use, but there's a small issue when using the mobile version that makes it a bit awkward, at least for me.
Having spaces on the side of the page makes it so the search results page only fits 2 thumbnails in a row instead of 3.
I tried changing the margin in div#page from "0 0.5rem" and on my device setting it to 0.4 or lower made it work the way it used to. I think having it around 0.1-0.2 makes it look best, though it also makes the spaces barely visible on desktop.
Thanks for all the work!

blacklistbaron said:
But the latest version doesn't hide blacklisted images anymore. Also the "anim", "webm" etc. symbols are now at the bottom of the images and the parent/child post section on images looks messed up.

kemonophonic said: I just updated to v.1.50 and my blacklist no longer works.

anthraxfolf said:
The posts in pools seem the be stuck in one column on the left after I updated to 1.50. Removing the CSS fixes it, but I'd like to figure out if this is an issue on my side before assuming anything.

smaugthedragon said: getting the same effect on the Popular page.

juslookin said:
This really makes the website fell good to use, but there's a small issue when using the mobile version that makes it a bit awkward, at least for me.
Having spaces on the side of the page makes it so the search results page only fits 2 thumbnails in a row instead of 3.
I tried changing the margin in div#page from "0 0.5rem" and on my device setting it to 0.4 or lower made it work the way it used to. I think having it around 0.1-0.2 makes it look best, though it also makes the spaces barely visible on desktop.
Thanks for all the work!

Sorry about that. Turns out, switching to flexbox on the search page causes other issues that I didn't notice straight away.
I just pushed out version 1.50.2, which should hopefully fix all of these problems.

umbreon5 said:
I made those edits you pointed out and I got it into a comfortable spot for me, but I still don't know how to change the size of the main box itself. I would like to make it so the box is slightly less wide so the background shows a little more.

Wait, do you mean like this? https://i.imgur.com/9vYbG5z.png
To match how wide the forum is right now.

bitwolfy said:
Wait, do you mean like this? https://i.imgur.com/9vYbG5z.png
To match how wide the forum is right now.

Yeah, I mean that. What I want to do is make the width match what 1.42 had.

In recent updates, it seems certain elements have become somewhat translucent (the Settings Updated alert, webm/anim/swf markers, and the floating Submit button/background for editing tags). These should probably be made a bit more opaque, as at least the Submit button is difficult to see, and the Settings Updated alert blends with its background to the point that it can look messy in some cases. The Submit element in particular might be better off as completely opaque like it was.

watsit said:
In recent updates, it seems certain elements have become somewhat translucent (the Settings Updated alert, webm/anim/swf markers, and the floating Submit button/background for editing tags). These should probably be made a bit more opaque, as at least the Submit button is difficult to see, and the Settings Updated alert blends with its background to the point that it can look messy in some cases. The Submit element in particular might be better off as completely opaque like it was.

That was a side-effect of me re-writing the stylesheet to use variables instead of hard-coded color values at 3 in the morning.
I've pushed out a quick transparency fix in 1.50.3, but I'll keep tweaking the actual colors in the future releases.

umbreon5 said: Yeah, I mean that. What I want to do is make the width match what 1.42 had.

I absolutely guarantee that no version had a fully-centered search results page like that, mainly because of the feedback I received on similarly narrowing down the forum page - if there is screen real estate, why not use it?
I've put in a configuration variable in version 1.50.3 that should do what you are trying to get. Set --conf-page-body-width to 1200px, and you should be good.

The webm/anim/swf tag is misaligned for the bottom row of search results: https://imgur.com/xP2Y6Ox

bitwolfy said:

I absolutely guarantee that no version had a fully-centered search results page like that, mainly because of the feedback I received on similarly narrowing down the forum page - if there is screen real estate, why not use it?
I've put in a configuration variable in version 1.50.3 that should do what you are trying to get. Set --conf-page-body-width to 1200px, and you should be good.

I didn't need a fully centered results page, just a slightly less wide box for the page. I think you already changed something (or maybe that very setting you pointed out) that brought it back to be the exact width 1.42 had, though, so it looks good now. Setting it to 1200px is excessive, the none setting somehow gets the width 1.42 had. I changed a few values you pointed out before and it's now about as comfortable as it'll get. Thanks again, and sorry if I made you go back and forth with changes.

watsit said: The webm/anim/swf tag is misaligned for the bottom row of search results: https://imgur.com/xP2Y6Ox

... That's not the animation labels misaligned, that's the entire bottom row thumbnails misaligned. Goddamn it.
Edit: it should be fixed in 1.50.4

umbreon5 said:
I didn't need a fully centered results page, just a slightly less wide box for the page. I think you already changed something (or maybe that very setting you pointed out) that brought it back to be the exact width 1.42 had, though, so it looks good now. Setting it to 1200px is excessive, the none setting somehow gets the width 1.42 had. I changed a few values you pointed out before and it's now about as comfortable as it'll get. Thanks again, and sorry if I made you go back and forth with changes.

Well, I'm glad that you are happy, because honestly I don't want to touch that bit of code again for a little while at least.
Flexbox is very useful, but it gives me a massive headache.

- Bugfix: Does anyone even read these? I doubt it.

Yes I do, I'm not installing anything new when I don't know what has been done, rather stay with what I have then.

The search results are still messed up in 1.50.5 btw

https://i.imgur.com/2Xyw469.jpg

Just to say that's an awesome code rework! Unfortunately I'll not be able to help too much until weekend - and [web] dev is not my forte too -, but I'll be testing and pointing out the issues if possible. Based on 1.50.5:

- Search pages that don't fill to the bottom have their last line misaligned.
Possible fix: Modify article.post-preview to {/*flex: 1 1 auto*/; margin: 10px 1em;} lines 284/285. I don't think there are other way to do this as it's flex default behaviour. I tried some display: grid but it removes one column from mobile view. I didn't look if this modification aligns the webm/swf/etc labels too.

- Settings page have more space above the title.
Fix: Modify line 721 to margin: 0 auto;

- Modify 'Comments' tab to the same layout as Forum/Settings
Fix: Add .c-comments div#page > div {max-width: var(--conf-page-inner-width); margin: 0px auto}
PS: I think some other mods can be pointed to this line OR you can add this to a better place in code, I didn't look too much on it.

- Modify 'Blips' tab to the same layout as Forum/Settings
Fix: Add .c-blips div#page > div {max-width: var(--conf-page-inner-width); margin: 0px auto}
PS: This page needs some work for the shadow removal and box color too, but I needed to sleep.

And I read the changelogs :P

nonono2 said:
Just to say that's an awesome code rework! Unfortunately I'll not be able to help too much until weekend - and [web] dev is not my forte too

It's perfectly fine! You've already helped out quite a lot.

nonono2 said:Search pages that don't fill to the bottom have their last line misaligned.

blacklistbaron said:The search results are still messed up in 1.50.5 btw

Now, I'm starting to believe that I spend too much time on this site, because it seems like I'm going blind.
I just don't fucking see it: https://i.imgur.com/G8ojVuB.png
Maybe something in 1.51.0 fixed it? Try that one.

nonono2 said: Settings page have more space above the title.

Fixed. No idea why that was even there.

nonono2 said:
- Modify 'Comments' tab to the same layout as Forum/Settings
- Modify 'Blips' tab to the same layout as Forum/Settings

Gonna hold off on that for just a little while. I'm honestly not sure if cramming everything into a single column in the middle of a page is a good idea.
I think, I'll instead implement a set of breakpoints with different widths for different viewports, so that people on giant monitors (like myself) won't be stuck with 2/3 of the screen space being taken by background.

blacklistbaron said: Yes I do, I'm not installing anything new when I don't know what has been done, rather stay with what I have then.

nonono2 said: And I read the changelogs :P

That makes me really happy. Thanks, guys.