Topic: [Outdated] e621 Redesign Fixes (v.2.0.9)

Posted under e621 Tools and Applications

bitwolfy said:
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.

It's still happening for me here too. Maybe a browser-specific problem? I'm using Pale Moon 28.8.2.1, which is based on Firefox. Are you perhaps using Chrome, Chromium, or something of the sort? Firefox proper?

watsit said:
It's still happening for me here too. Maybe a browser-specific problem? I'm using Pale Moon 28.8.2.1, which is based on Firefox. Are you perhaps using Chrome, Chromium, or something of the sort? Firefox proper?

Hmm. Yeah, I've got Brave, which is based on Chromium, as well Chrome itself. I'll test it on other browsers.
Edit: yep, broken on Firefox. Great.
Edit2: aaaand fixed. Turns out, Firefox does not know what max-width: fit-content; means. Should work now, though.

Updated

foxyshookhand said: So we have the giant-ass fav button, but still have to dig through several pages to blacklist a tag?

I am not sure why you are asking it in this thread.
This project re-styles the site's theme. That's it. I can't add functionality to the site.
Also, the fav button is pretty small when using this stylesheet.

wolfmire96 said: Just here for a quick question;What would disabling javascript do?

Best case scenario - it'll probably break some of the site's functionality.
Worst case - some people report not being able to see any post at all.

Either way, this project contains no Javascript and thus is not affected.

blacklistbaron said: I'm not a fan of the search bar redesign, the searched text is now too much pushed to the left (tested on FF and Opera just in case)

Yeah, that's not intentional. Fixed it in 1.51.2.

Today's inputs - this as reference:

-Firefox: the search/pool tabs under the image expands until they reach the screen's limit. When the image is too small (like here ), then they pile up with the text. Works on Chrome.
-The expandable header and blockquote have the same background now, distinguishable only by the strip color.

EDIT: and now I found a bug -not related to the theme- when usign links next to parenthesis+comma or dot, like this.

Updated

nonono2 said: Firefox: the search/pool tabs under the image expands until they reach the screen's limit. When the image is too small (like here ), then they pile up with the text. Works on Chrome.

Hmm. Interesting. Funnily enough, that's not a bug with this project, it's like that on the normal site too. Not sure how to fix it at the moment.
Got rid of the second part by chucking some padding on the search term, though. Should be fine for the time being.

nonono2 said: The expandable header and blockquote have the same background now, distinguishable only by the strip color.

Kind of intended, having a uniform look is not a bad thing. But being able to distinguish between them at a glance would be a good thing.
I've actually been playing around with the idea of having icons in the background of the blocks, kind of like this: https://i.imgur.com/KbRxutG.png
Not a finished look, though, I'll keep working on it.

nonono2 said: EDIT: and now I found a bug -not related to the theme- when usign links next to parenthesis+comma or dot, like this.

Yeah, I've seen it too. Sometimes, the parser is smart enough to recognize that the character isn't a part of a link, but sometimes it just fails.
IMHO, DText just needs a better link syntax. I'm partial to Markdown's take on it: [Google](https://google.com).

Updated

Popping again to say while many of the subtle changes through to 2.0 are nice,

- The giant quotes that appear inside the quote boxes while a nice idea in theory, are pretty obnoxious looking in practice, given it's a visual anchor to nothing on the opposite side of the screen. Maybe if they were half the size and a color that was closer to the quote box they're in so they blend into the background more unless you're actively wanting to see it.

- The fixed width in forums is one thing, the fixed width in posts is pretty nice (Except for when 'Size mode: Original' is active on anything that exceeds the fixed width, it looks pretty stupid to have everything offset to the right in that case. Ideally everything would center with consideration to the image width, with a cutoff on the lower end so tiny images don't make the overall width tiny.), but the fixed width in the search results is no bueno. If I'm looking for search results I don't want to be forced to scroll down if I have the screen space to be able to view everything at once. If I want to have the width limited I can manipulate my own windows thanks.

- The user account profile pages are still pretty bad, I don't know how much this can be fixed as what it really needs is more information on the screen like comments and more uploads (set horizontally, NOT vertically) to make use of the space provided and not have the message box that is frequently completely useless take up so much useless space, but it needs a look into.

Generally fixed width vs adaptive width is the kind of thing that needs a options menu per instance (forums, search, etc.) if you're gonna insist that it be a 'feature'. But otherwise, thanks for continuing to fix the absolute broken mess that is this new vanilla UI.

I can't say I'm a fan of the search results and image posts having their width being limited. I could get used to it on the search results I suppose, but on image posts it really feels restricting and like it's ignoring the available space to show the image (the default new site added a bit more more width to show the image, which was one of the nicer things about it, but this new update took that away and then some). Particularly with Scale To Fit, it's scaling the image down to stay in the set border, instead of using the available screen width to keep it as large as possible while not causing horizontal scrolling.

anonomn said: The giant quotes that appear inside the quote boxes while a nice idea in theory, are pretty obnoxious looking in practice

Fair enough. I tweaked those in 2.0.2, see if that helps.

anonomn said:
- The user account profile pages are still pretty bad, I don't know how much this can be fixed as what it really needs is more information on the screen like comments and more uploads (set horizontally, NOT vertically) to make use of the space provided and not have the message box that is frequently completely useless take up so much useless space, but it needs a look into.

The profile page is a real mess. It's completely unusable on the mobile at the moment, and fixing it with just CSS is a pain in the ass.
I will be working on it in the near future, but for now, I implemented the favorites and uploads sections horizontally: https://i.imgur.com/9nUxkBh.png
It's not perfect, but it's a start.

watsit said: I can't say I'm a fan of the search results and image posts having their width being limited.

anonomn said: The fixed width in forums is one thing, the fixed width in posts is pretty nice

I see where you are coming from, and I do agree (kinda). I've tweaked the breakpoints in 2.0.2, see if that's any better.
Unfortunately, I won't be maintaining two separate systems - adaptive on the forums, flexible on the image search. Not only is it bad UX, it's also a massive pain in the ass when trying to size elements properly. So, it's going to be one or the other. If having the page width fixed at breakpoins is such a deal breaker to people, I'll consider switching it back to being completely flexible. We'll see.

To be honest I didn't even know there were any break points as I have my main window far wider than the maximum break point, had to play with the window size far below any reasonable width even narrower to even see it kick in.

bitwolfy said:
Unfortunately, I won't be maintaining two separate systems - adaptive on the forums, flexible on the image search. Not only is it bad UX, it's also a massive pain in the ass when trying to size elements properly.

Maintaining two different systems when you could be recycling code for everything I can get, but "Bad UX design" I'd have to disagree with. Whatever works best for the situation should be "Good UX". The entire point of HTML being the way it is, is explicitly to be adaptive (flexible as you have it referred to as) to whatever width the monitor is. Having a fixed width is literally completely counter to that entire ideal. Despite that, when reading forum posts I can get wanting to limit things to the center so you're not type-writer-ing your neck across the screen to read a single post, but for search results, the more you can have on screen at one time the better.

I get the feeling this is happening because there may be an assumption everyone is on tiny 1080p displays, which I can assure you is absolutely not the case. To illustrate how silly the fixed width is, here (https://anonfile.com/R1j7e9hdo8/Examples_png) is what some of the areas of the site look like fullscreen on my monitor, which I don't even own the largest monitor in the world. (I was going to say something like 'Just look at how bad this is', but I hadn't quite updated the CSS yet before taking some of the screenshots and did so between taking the middle two examples, and thought it'd be somewhat disingenuous to use the older example for the search results as it is far better, but it's still not as good as having the full width, so my point still somewhat stands.) To be fair I don't usually have browser windows fullscreened, but it serves to illustrate how, odd, having massive chunks of unused UI is when assumptions are made about end user width and limiting based on that, at least before the changes.

anonomn said:
To be honest I didn't even know there were any break points as I have my main window far wider than the maximum break point, had to play with the window size far below any reasonable width even narrower to even see it kick in.

Holy hell, what is your screen resolution? The biggest breakpoint in 2.0.3 should be 2560px.
Are you browsing e621 on an 8k TV?

anonomn said:
Maintaining two different systems when you could be recycling code for everything I can get, but "Bad UX design" I'd have to disagree with. Whatever works best for the situation should be "Good UX". The entire point of HTML being the way it is, is explicitly to be adaptive (flexible as you have it referred to as) to whatever width the monitor is. Having a fixed width is literally completely counter to that entire ideal. Despite that, when reading forum posts I can get wanting to limit things to the center so you're not type-writer-ing your neck across the screen to read a single post, but for search results, the more you can have on screen at one time the better.

I get the feeling this is happening because there may be an assumption everyone is on tiny 1080p displays, which I can assure you is absolutely not the case. To illustrate how silly the fixed width is, here (https://anonfile.com/R1j7e9hdo8/Examples_png) is what some of the areas of the site look like fullscreen on my monitor, which I don't even own the largest monitor in the world. (I was going to say something like 'Just look at how bad this is', but I hadn't quite updated the CSS yet before taking some of the screenshots and did so between taking the middle two examples, and thought it'd be somewhat disingenuous to use the older example for the search results as it is far better, but it's still not as good as having the full width, so my point still somewhat stands.) To be fair I don't usually have browser windows fullscreened, but it serves to illustrate how, odd, having massive chunks of unused UI is when assumptions are made about end user width and limiting based on that, at least before the changes.

I can't really argue with that screenshot - it does looks pretty bad. But having a website stretch that far is also kind of absurd.
In fact, I've heard the exact opposite complaint - that having the page stretch as far as it can go is very uncomfortable to use.

For reference, this is what the search page looks like on my (pretty decently sized) monitor: https://i.imgur.com/KPNTNN8.jpg

I can add a configuration variable that, when activated, will remove the max-width from the body, so that the page content will fill the entire screen.
But I don't really like that solution.

Everything in that comment before the image link was before I updated it to 2.0.2/.3, so the first example in Examples.png is what I saw before the changes. I usually keep browser windows as floating windows to have other things happening on other parts of the display, but even then before the changes I had to shrink my normal window width to see the effects.

bitwolfy said:
Holy hell, what is your screen resolution? The biggest breakpoint in 2.0.3 should be 2560px.

1440p ultrawide, so 3440 pixels wide. Not quite 4k width, but pretty dang close, so any problems I may of had would have only been exacerbated by anyone browsing with a 4k display or larger.

bitwolfy said:
In fact, I've heard the exact opposite complaint - that having the page stretch as far as it can go is very uncomfortable to use.

For regular use with text ans such certainly, but when you encounter a really wide image with a decent resolution, or are searching for something and have the screen retail estate to have it all on screen at once, being able to use all of the screen is far better than limiting it/

bitwolfy said:
I can add a configuration variable that, when activated, will remove the max-width from the body, so that the page content will fill the entire screen.
But I don't really like that solution.

If possible that sounds like a pretty good compromise. Maybe not for forum posts and user profiles, where most of what you're dealing with is text, but everywhere else that sounds like a good way of doing it.

Yeah, text is certainly understandable to keep within a reasonable width so as not to stretch outside of your field of vision and slow down reading. But with images, the site already has a Sample viewing mode to have a down-sized at-a-glance view of the image, whereas it otherwise should be expected to use as much room as is available to be as big as the screen width allows (Scale To Fit) or to be pixel-perfect (Original). With search results, since you need to focus on specific thumbnails anyway, the number you can on-screen without scrolling is probably a bit more important than keeping each row in your field of vision (while also being careful that they don't squish too close together and become hard to differentiate).

The voting buttons no longer change color to reflect your present vote anymore when the Stylesheet is on, can you fix this please?

anonomn said:
If possible that sounds like a pretty good compromise. Maybe not for forum posts and user profiles, where most of what you're dealing with is text, but everywhere else that sounds like a good way of doing it.

I implemented a toggle in the companion script in version 2.0.5 - right under the theme selector.
Didn't get to implement it exactly the way I wanted to, with a CSS variable in the stylesheet so that the script isn't required, but the work on integrating the project into the site proper should begin pretty soon, and I don't think that the responsive page width is going to make it into that. So, all of that is pretty irrelevant anyways.

chronoswastaken said: The voting buttons no longer change color to reflect your present vote anymore when the Stylesheet is on, can you fix this please?

Yep, sorry about that. Fixed in 2.0.5.

Any chance at getting this to work again? Example images are in the last post on that thread.

https://e621.net/forum_topics/14592

The thumbnails are absolutely tiny on my 1440p display, and would love to get them large again so I can actually see what the pic is.

Use the zoom functionality of your browser. Even if having that as a mandated non-changable "option" across the board didn't screw things up for the rest of us that want more on our screens at one time and can see the previews just fine (there seems to be a overarching thread of thought of "One size fits all" with what changes are implemented with this CSS.), it changes nothing because it doesn't change the resolution of those previews, so as far as visible information goes it's exactly the same zoomed in or not zoomed in.

kemonophonic said:
I just tried to paste v.2.0.5 into the Custom CSS style text field and I keep getting the message:

"Maximum number of characters reached."

Huh, strange. It works for me. You fully remove the old stylesheet before pasting the new one, right? The stylesheet is just under 100,000 characters long - the limit is 500,000.

Yesterday, I mentioned the fact that there is no limit on stylesheet size right now, and Kira said that there is going to be one. I guess, here it is.
The good news is that the fixes are being actively integrated into the site right now. Won't need to use custom CSS soon enough.

Which is why there probably won't be any new releases of this project. Unless something is truly broken, of course.

Updated

bitwolfy said:
Huh, strange. It works for me. You fully remove the old stylesheet before pasting the new one, right? The stylesheet is just under 100,000 characters long - the limit is 500,000.

Yesterday, I mentioned the fact that there is no limit on stylesheet size right now, and Kira said that there is going to be one. I guess, here it is.
The good news is that the fixes are being actively integrated into the site right now. Won't need to use custom CSS soon enough.

Which is why there probably won't be any new releases of this project. Unless something is truly broken, of course.

it worked for me just now. themes didn't show up though

I don't really have anything valuable to add that will help you develop this further, but I did want to say that this fixes a lot of problems I had/have with the redesign and I appreciate you putting all the work you have into this.

I figure too often people who are happy with a thing won't speak up about it and that can make it seem like maybe "Wow is anyone even using this? Have I wasted my time?" (I know from my own projects how frustrating this can be).

So just saying I appreciate your work!

nedonedonedo said: it worked for me just now. themes didn't show up though

You need a companion userscript for that.

kemonophonic said: Yeah, I cleared the text field before pasting v.2.0.5. It won't accept v.2.0.6 either.

I just pushed out a hotfix that cuts down on the stylesheet size by about 20k characters. Don't ask how that happened, it's dumb.
See if that works. Maybe it's limited to 100k for you? Which is odd, since we are in the same user group.

clawdragons said: So just saying I appreciate your work!

Thank you, you have no idea how much this helps.
Finding motivation to keep working on a project is often incredibly difficult, but the idea that people actually enjoy my work keeps me going.

Just passing to say: it is awesome now! :). At the current pace, you'll have the base ready by the weekend, just having to fix minor stuff. Some inputs:

- I think the expandable/description boxes are huge now, probably because they are using the same size for quote blocks to accomodate the icons. Maybe decrease the icons a little bit more?
- The blips page uses different background color, that should be fixable with .blip {box-shadow: unset;background-color: rgba(31, 60, 103, 0.7); margin-bottom: 1em} -> made this from 2.0.5, don't know if you changed for .6.
- I was going to say about some tags that were bold and using the same general color, but apparently is fixed already.
-EDIT: The next/back buttons bar in posts goes until the screen's end like I said before, don't know if it's intentional (but frankly: I only care about their removal on normal posts, but CSS will not do that alone).

All in all, good job! The theme is basically the same like before but with some fashion lol

Updated

kemonophonic said: Works perfectly now. Thank you! \(^o^)/

You can thank Kira for that, it was like a 5 lines of code that cut down 25kb of styles.
It was mainly the fact that all the base64 encoded images were included twice, which bloated the stylesheet quite a lot.

nonono2 said:
Just passing to say: it is awesome now! :). At the current pace, you'll have the base ready by the weekend, just having to fix minor stuff. Some inputs:

- I think the expandable/description boxes are huge now, probably because they are using the same size for quote blocks to accomodate the icons. Maybe decrease the icons a little bit more?
- The blips page uses different background color, that should be fixable with .blip {box-shadow: unset;background-color: rgba(31, 60, 103, 0.7); margin-bottom: 1em} -> made this from 2.0.5, don't know if you changed for .6.
- I was going to say about some tags that were bold and using the same general color, but apparently is fixed already.
- EDIT: The next/back buttons bar in posts goes until the screen's end like I said before, don't know if it's intentional (but frankly: I only care about their removal on normal posts, but CSS will not do that alone).

All in all, good job! The theme is basically the same like before but with some fashion lol

- The expandables are huge. I kinda want to have all the elements (quote / code / expandable) to have the same padding. Not sure how much i can decrease that while still looking decent, but we'll see.
- Inconsistencies in html structure really piss me off, and the blips page is one big inconsistency. I fixed the background thing, but I won't touch the rest. For now, at least.
- The meta tags were missing styling. No idea why I missed that for so long.
- Edit: there is no good way of fixing those buttons without a little bit of HTML. if i have time, i'll try a few bad ways and see if one of them works.

I appreciate you feedback, as always. Did you get a chance to look at the other themes?

Updated

Looks like WebM/GIF distinction on search results has come back, so the two blips now clash against each other when the style is active (at least when using Stylus, not sure about using the custom CSS field in account settings).

As for the Hexagon Clean theme, it was basically like Hexagon, but with less padding and barely any edge rounding. It's actually the theme I preferred, since it felt less bloated and more modern. I hope that it will eventually be implemented. And to be honest, now it can be implemented as a "secondary theme" to apply those changes to all color themes.

Also, what plugin should I install to Chrome/Chromium to enable external image loading? I can't find anything like that.

helloanonmyoldfriend said:
Looks like WebM/GIF distinction on search results has come back, so the two blips now clash against each other when the style is active (at least when using Stylus, not sure about using the custom CSS field in account settings).

Yep. Those were implemented pretty late at night yesterday, and I didn't have a chance to fix them yet. Should be done some time today.
The built-in badges are also more accurate than the hack that I was using, since they are actually based on the file extension on on tags.

randomguy85 said:
As for the Hexagon Clean theme, it was basically like Hexagon, but with less padding and barely any edge rounding. It's actually the theme I preferred, since it felt less bloated and more modern. I hope that it will eventually be implemented. And to be honest, now it can be implemented as a "secondary theme" to apply those changes to all color themes.

Interesting. I'll consider doing that, especially since the new theming system that I wrote essentially allows you to have as many sub-themes as you want.

randomguy85 said:
Also, what plugin should I install to Chrome/Chromium to enable external image loading? I can't find anything like that.

There are several. You can easily find one by googling "chrome disable content security policy extension". I'm using the one made by Phil Grayson.
I don't want to link to one directly, since Content Security Policy is generally a good thing, and disabling it is really not recommended.

bitwolfy said:
Yep. Those were implemented pretty late at night yesterday, and I didn't have a chance to fix them yet. Should be done some time today.
The built-in badges are also more accurate than the hack that I was using, since they are actually based on the file extension on on tags.

Interesting. I'll consider doing that, especially since the new theming system that I wrote essentially allows you to have as many sub-themes as you want.

There are several. You can easily find one by googling "chrome disable content security policy extension". I'm using the one made by Phil Grayson.
I don't want to link to one directly, since Content Security Policy is generally a good thing, and disabling it is really not recommended.

Well, there's always the option of turning all the offsite images into Base64 strings in the userstyle, which will end up bloating it, but also making it more compatible. I'm sure it's a bad idea for pasting it in e621 settings, as it will clutter the server a tad bit more, but in case of using a client side userscript (which I do) it's not that big of a deal. I guess I'll do that myself, but the main script will stay as is, as this is too much of a change for general usage.

Right, after encoding all images into Base64, and putting them into :root variables in a separate userstyle section, I've managed to (almost) make it work. The themes change properly, all except Spring. The first section looks like this:

:root {
--leaves_bottom: url(base64);
--snow_bottom: url(base64);
--snow_top: url(base64);
--spring_bottom: url(base64);
--spring_bottom_fox: url(base64);
--spring_top: url(base64);
--aurora: url(base64);
--space: url(base64);
--stars: url(base64);
}

I've replaced the Base64 data strings with "base64" for the sake of readability, as the original code is 373684 characters long.

The second part is just e621 Redesign Fixes, but with the following changes:

[data-extras=autumn] div#page { background-image: var(--leaves_bottom); background-position: left bottom; background-repeat: repeat-x; padding-bottom: 6rem; }

[data-extras=winter] div#page { background-image: var(--snow_bottom), var(--snow_top); background-position: left bottom, left top; background-repeat: repeat-x; padding-bottom: 3rem; }

[data-extras=spring] div#page { background-image: var(--spring_bottom), var(--spring_bottom_fox), var(--spring_top), var(--spring_top_sky); background-position: left bottom, right bottom, right top, left top; background-repeat: repeat-x, no-repeat, no-repeat, repeat-x; padding-bottom: 3rem; }

[data-extras=aurora] div#page { background-image: var(--aurora); background-position: left top; background-repeat: repeat-x; }

[data-extras=space] div#page { background-image: var(--space); background-position: left top; background-repeat: repeat-x; }

[data-extras=stars] div#page { background-image: var(--stars); background-position: left top; background-repeat: repeat-x; }

Both sections apply to sites that match the following regex: http(s)://.*?e621.net.*?

As I said, it works perfectly, all except the Spring theme. I should also mention that I use the Stylus extension.

@bitWolfy you can have the CSS based version up on GitHub. They have version control as well as a full development management stack. Bug report forum included. And itโ€™s free. You could even offer the Stylus plugin for download from there as well. Itโ€™s at https://github.com

randomguy85 said: Well, there's always the option of turning all the offsite images into Base64 strings in the userstyle, which will end up bloating it, but also making it more compatible.

I'm mostly concerned with limitations on the custom CSS size. A user above reported a 100k character limit (I have 500k for some reason), so that's as much as I can go. I can improve the compression a bit, but the most it'll get down to with the compiled script is about 73k - base64 images will literally not fit. And I've already got rid of some images - the background on code/quote/expandable blocks now uses an icon font instead.
Not a problem while loading through an addon, of course. Although, developing anything using Stylus is an pain in the ass. I personally inject styles from a local file using Tampermonkey, but that's a bit excessive for normal users,

randomguy85 said: The second part is just e621 Redesign Fixes, but with the following changes:

You might want to grab the full version of the stylesheet - surely would be easier to read at least.
Or just clone the repo and compile it yourself.

randomguy85 said: As I said, it works perfectly, all except the Spring theme.

What's wrong with the Spring theme?

adamthepikachu said:
@bitWolfy you can have the CSS based version up on GitHub. They have version control as well as a full development management stack. Bug report forum included. And itโ€™s free. You could even offer the Stylus plugin for download from there as well. Itโ€™s at https://github.com

The repository is already on github: here
I was going to have a userstyle compatible version, but placing domain constraints in the file breaks it when pasting into the custom CSS field, and I never got around to figuring out how to get around that.

bitwolfy said:
I'm mostly concerned with limitations on the custom CSS size. A user above reported a 100k character limit (I have 500k for some reason), so that's as much as I can go. I can improve the compression a bit, but the most it'll get down to with the compiled script is about 73k - base64 images will literally not fit. And I've already got rid of some images - the background on code/quote/expandable blocks now uses an icon font instead.
Not a problem while loading through an addon, of course. Although, developing anything using Stylus is an pain in the ass. I personally inject styles from a local file using Tampermonkey, but that's a bit excessive for normal users,

You might want to grab the full version of the stylesheet - surely would be easier to read at least.
Or just clone the repo and compile it yourself.

What's wrong with the Spring theme?

The repository is already on github: here
I was going to have a userstyle compatible version, but placing domain constraints in the file breaks it when pasting into the custom CSS field, and I never got around to figuring out how to get around that.

The link shown on your github pages site for the fix returns a 404 error.
This link here: https://bitwolfy.github.io/e621-Redesign-Fixes/style.css

adamthepikachu said: The link shown on your github pages site for the fix returns a 404 error.

Oh, right, that's the link from simpler, more innocent times - last weekend.
I'll fix it in a sec.

bitwolfy said:
You might want to grab the full version of the stylesheet - surely would be easier to read at least.
Or just clone the repo and compile it yourself.

What's wrong with the Spring theme?

The repository is already on github: here
I was going to have a userstyle compatible version, but placing domain constraints in the file breaks it when pasting into the custom CSS field, and I never got around to figuring out how to get around that.

No, you see, I've modified it on my side to use Base64 encoded images instead of pulling the ones from your site, so that no additional extensions with questionable security are needed. The problem I've encountered is that for some reason the Base64 Spring theme images don't seem to load at all, while the rest of them load just fine. Now I know that this won't ever be implemented into the final release which is meant to be used in the custom CSS field of e6, but I wanted to make the additional themes work without loading them from external sites using methods that break the site's security.

Lines 83 to 89:

[data-th-main=pony] .border-highlight { border: 1px solid #5c428c; }
[data-th-main=bloodlust] .border-highlight { border: 1px solid #4d4d4d; }
[data-th-main=serpent] .border-highlight { border: 1px solid #fff9be; }
[data-th-main=hotdog] .border-highlight { border: 1px solid #d1625f; }

say "borer" instead of "border". It doesn't break stuff as far as I know, but Stylus was giving me warnings about it. It throws a bunch of warnings about expecting x but getting y too, you might want to check that: https://i.imgur.com/PzKzxa6.png

randomguy85 said: I wanted to make the additional themes work without loading them from external sites using methods that break the site's security.

I know, right. If only this site had an option to host their own images on its servers... Wouldn't that be great.
Kidding aside, unfortunately, posts hosted on e621 usually have to be some sort of artwork, not just some random designs. But it works with some things

helloanonmyoldfriend said: say "borer" instead of "border".

Thanks for letting me know. Not sure how that slipped through the net.
It won't break anything because it currently does not do anything. It's a proof-of-concept for helped classes intended to cut down on repeated code, but not implemented into the actual site yet. Feel free to either fix or delete those lines.
I'll fix it for good in the next patch.

Most recent version of this broke something and now the green notification message you get (such as when updating settings) is always present. A green bar hovers over every page with "." as the only text in it, and cannot be dismissed.

clawdragons said:
Most recent version of this broke something and now the green notification message you get (such as when updating settings) is always present. A green bar hovers over every page with "." as the only text in it, and cannot be dismissed.

As a temporary workaround till this gets fixed go into your settings where you pasted the css, search (ctrl+f) for #notice and remove the first line where it is

clawdragons said: Most recent version of this broke something and now the green notification message you get (such as when updating settings) is always present. A green bar hovers over every page with "." as the only text in it, and cannot be dismissed.

earlopain said: As a temporary workaround till this gets fixed go into your settings where you pasted the css, search (ctrl+f) for #notice and remove the first line where it is

Goddamn it, the bug in the custom CSS support (that a certain admin calls a feature) appending !important to every single property strikes again.
Should be fixed now.

Edit: I am totally not being pressured into retracting my statement about bugs features in the custom CSS functionality.

Updated

kemonophonic said: I'm getting that "Maximum number of characters reached." message again when trying to paste v.2.0.7.

Here is the minified version, just for you. That's 80kb, can't compress it any further.
If that doesn't work... Say, are you using themes? I can get you an unthemed version, which should be considerably smaller.

Hey not sure why but using the stylesheet in Firefox doesn't seem to do anything, I have the theming menu that shows up but nothing changes, it's using the latest version in the OP

sofurry said:
Hey not sure why but using the stylesheet in Firefox doesn't seem to do anything, I have the theming menu that shows up but nothing changes, it's using the latest version in the OP

If you have the theming menu, then you have the userscript running though Tampermonkey. Which does not include the actual stylesheet.
Did you follow these instructions?

bitwolfy said:

Installation:

- Open a stylesheet release page (links below), select and copy everything.
- On e621, go to Account > Settings > Advanced Settings > Custom CSS
- Paste the stylesheet there, then save.

bitwolfy said:
If you have the theming menu, then you have the userscript running though Tampermonkey. Which does not include the actual stylesheet.
Did you follow these instructions?

Oh right, sorry! I guess I misunderstood how it worked!

I'm using 2.0.7 for the last few days (mostly navigation) and I didn't see any problems, so for me is good as it is. I tested the themes too, but I didn't disable the security options, so I saw only the base. Other stuff is personal taste, like the option to remove the search bar from normal posts and move the pool buttons and child/parent to the side like before, but I can live with it. Also the expandable boxes are in a good size now, so thanks!

Good job :P

nonono2 said:
I'm using 2.0.7 for the last few days (mostly navigation) and I didn't see any problems, so for me is good as it is. I tested the themes too, but I didn't disable the security options, so I saw only the base. Other stuff is personal taste, like the option to remove the search bar from normal posts and move the pool buttons and child/parent to the side like before, but I can live with it. Also the expandable boxes are in a good size now, so thanks!

Good job :P

Thanks, that's good to hear.
I am currently working on a Tampermonkey script that makes the site a lot (and I mean A LOT) more user-customizable. But that's in an early alpha stage right now.
For the time being, I would recommend Earlopain's E6NG Helper, if you are not using it already.

Any way to add an "Add to set" button next to the green "Add to Favorites" button that appears under the post? That'd be fantastic.

bitWolfy

Former Staff

frans7:
Any way to add an "Add to set" button next to the green "Add to Favorites" button that appears under the post? That'd be fantastic.

Not with pure CSS, unfortunately. Easily done with Javascript, though.
I've added it into the upcoming project called re621. If you have any more feature requests, let me know.

Updated

As of today, running the custom CSS/userscript now causes issues when viewing my profile page.

bitWolfy

Former Staff

lafcadio:
As of today, running the custom CSS/userscript now causes issues when viewing my profile page.

As of today, this stylesheet has been integrated into the website proper. You can safely disable it.
... the profile page is slightly borked, but that's not my fault.

bitwolfy said:
stuff

How easy would it be in CSS to put an "Add to set" button next to the favorite button under a post's image? And can you add that?

bitWolfy

Former Staff

frans7 said: Any way to add an "Add to set" button next to the green "Add to Favorites" button that appears under the post? That'd be fantastic.

frans7 said: How easy would it be in CSS to put an "Add to set" button next to the favorite button under a post's image? And can you add that?

Which part of this did you fail to understand:

bitwolfy said: Not with pure CSS, unfortunately. Easily done with Javascript, though.

Does not matter how many times you ask, the answer is not going to change. It is not possible to detach that button from its position in the sidebar and attach it to another container under the image with pure CSS. It is also not possible to create a brand new button with the same functionality with pure CSS. The language simply does not allow for DOM manipulations like that.

bitwolfy said:
Which part of this did you fail to understand:

Does not matter how many times you ask, the answer is not going to change. It is not possible to detach that button from its position in the sidebar and attach it to another container under the image with pure CSS. It is also not possible to create a brand new button with the same functionality with pure CSS. The language simply does not allow for DOM manipulations like that.

No, you're right. I thought I might have already asked so I did a CTRL+F for my username and it didn't find anything somehow. So I ended up not realizing that I already asked. My mistake man, sorry!

edit:
And all right, understood as to why not.

bitWolfy

Former Staff

frans7:
No, you're right. I thought I might have already asked so I did a CTRL+F for my username and it didn't find anything somehow. So I ended up not realizing that I already asked. My mistake man, sorry!

No worries.

I just noticed that the site now uses this redesign as the default style, which means without you the site would probably still look like total **** at this point because nobody would've changed anything. Thanks man. ๐Ÿ‘

PS: Is there a CSS code one could use to reduce the global font size of the "new" style? The code in this doesn't seem to work anymore. I have to browse the site at 90% zoom in Firefox atm so I don't feel like a visually handicapped grandfather.

bitWolfy

Former Staff

blacklistbaron said:
I just noticed that the site now uses this redesign as the default style, which means without you the site would probably still look like total **** at this point because nobody would've changed anything. Thanks man. ๐Ÿ‘

PS: Is there a CSS code one could use to reduce the global font size of the "new" style? The code in this doesn't seem to work anymore. I have to browse the site at 90% zoom in Firefox atm so I don't feel like a visually handicapped grandfather.

I'm glad that this stylesheet got integrated as well.
For the font size, try this:

body { font-size: 80%; }

Might want to play around with the actual number, though. The default value for the new theme is 85%.

bitwolfy said:
Might want to play around with the actual number, though. The default value for the new theme is 85%.

Thanks so much! 78% looks right to me.

Any idea why the popular posts page displays posts in a 1-wide vertical line?

bitWolfy

Former Staff

frans7 said: Any idea why the popular posts page displays posts in a 1-wide vertical line?

You should stop using this stylesheet. It has been largely incorporated into the site proper.
Some things - like the horizontal alignment of posts on the user profile page - have been moved to the re621 userscript, but otherwise the Redesign Fixes project is no longer supported or needed.

bitwolfy said:
You should stop using this stylesheet. It has been largely incorporated into the site proper.
Some things - like the horizontal alignment of posts on the user profile page - have been moved to the re621 userscript, but otherwise the Redesign Fixes project is no longer supported or needed.

Just discovered re621 after asking. Didn't realize before

  • 1
  • 2