[Userstyle] Transparent theme for forums

WaniKani API And Third-Party Apps
1

Thought the forums were a bit bland, so I made a userstyle for it. It’s a transparent theme for use with a background image of your choosing.

I made this for myself, with a specific background in mind, so it will probably not look great with just any image, but I’m sure you can find one which looks good if you’re willing to compromise. The background image URL is located at the top of the style so it’s easy to change, though there is also an option to set it permanently. Currently there are a few other options available as well, though they might not work exactly as intended; as I am not using them myself they have not been extensively tested.

If you have any thoughts or complaints feel free to voice them.

Screenshots

Front page

1421×703 363 KB

Browsing

1421×703 260 KB

User summary

1421×703 298 KB

Writing replies

1421×703 276 KB

Notifications

1421×703 349 KB

The theme can be installed through userstyles.org

Version history

v.1.2.19. Lots of bug fixes due to changes in the Discourse platform
v.1.2.18. Removed the annoying message about private messages not being private
v.1.2.17. Fixed tracking glyph colors and the tracking menu
v.1.2.16. Fixes after recent forum changes
v.1.2.15. edited for compatibility with my Spongebob time cards script
v.1.2.14. added compatibility with my Spongebob time cards script
v.1.2.13. Fixed some things after forum updates
v.1.2.12. Fixed color of visited threads in ‘Latest’ tab and changed the color of categories in a few places
v.1.2.11. Fixed dropdown selections… for the third time. Made topic titles white on black
v.1.2.10. Fixed the colour of the “who liked” text and made categories slightly less white
v.1.2.9. Styled the new “Also writing” box
v.1.2.8. Fixed a few changes in colour due to recent forum update
v.1.2.7. Changed the loading spinner into a rotating heart instead to match the default
v.1.2.6. Changed the loading spinner into a fading heart and added background image option
v.1.2.5. And the user summary page
v.1.2.4. Made ticked box mark green in notifications as well
v.1.2.3. Fixed the white bar in topic maps
v.1.2.2. Made solved thread markers green again
v.1.2.1. Fixed clicking on spoilers
v.1.2.0. Added some options
v.1.1.5. Fixed a bunch of stuff which broke after forum updates
v.1.1.4. Refixed the solutions thing
v.1.1.3. Fixed the new “solution” thing; fixed the thread timeline for smaller screens
v.1.1.2. Fixed mentions’ text colour in preview and added color to recent edits
v.1.1.1. Fixed a # autocomplete that I thought I had already fixed
v.1.1.0. Reorganised the code, fixed bugs, edited some small stuff.
v.1.0.6. Added moderator highlights, fixed show replies button hover background, fixed 0 review count color.
v.1.0.5. Number of lessons in header are now the right color
v.1.0.4. Fixed oneboxes in quotes, a button border, and something else
v.1.0.3. Made the header static when opening images.
v.1.0.2. Removed a margin edit which caused problems on the front page for some. Fixed a few unstyled elements in preview when writing replies.
v.1.0.1. Fixed tracking settings hover. Styled advanced search, which I had missed.
v.1.0.0. Finally done, still need to make the css itself look a bit less like puke

17 Likes
2

Thank you for this. Now, I just need to spend the next week or two deciding which image to use for the background…

3

Everything about this is so pretty. I see you got rid of that small box in the reply window.

4

Or, you know, you could always make a theme specifically for the background you want :wink:

@alexbeldan yeah, I couldn’t change its colour at all, but display: none on the element we discussed did the trick

1 Like
5
1 Like
6

<I love you too (⁄ ⁄^⁄ᗨ⁄^⁄ ⁄)>

1 Like
7

(/ω＼)

1 Like
8

That’s a nice proposition, but I still need at least a week to choose the background. Because I have too many.

9

1409×709 99.8 KB

now this is more like it ( ͡° ͜ʖ ͡°)

10 Likes
10

Haha, I just used the same I did for my MAL, so I had already gone through that some time ago

11

Nice theme. :thumbsup:

Just one thing I noticed:
Are the topics supposed to be below the categories?
Doesn’t quite look right.
Maybe it’s just a browser issue on my end.

1363×733 252 KB

2 Likes
12

Oh. Those are supposed to be to the right. I have a feeling that’s happening because I set the .topic-list margin-left to 4.1% instead of the original 4.0%. It looks fine to me, though. Maybe it would be better to set it to 46px. Would you mind trying to set it to 46px instead?

edit: nvm. It seems it jumps down when the width reaches 570px when the margin is 4%, 820px when 4.1% and even larger when it’s 46px. 4% doesn’t give the right overlap, though, so I guess the theme isn’t going to work if you have a small screen

13

I had to set it to at least 44px for it to appear on the right.

The problem is probably that the .topic-list also has a width set to 48%.

14

Oh, yeah, that sounds plausible. Do you know how I could best make the overlap to the right perfect without it jumping down? 4.1% and 46px margin were the two options that I found worked.

15

Just tested it with margin 4.1% and width 47.9% and it seems to work just fine like this.

16

The overlap is a few pixels off to the right with 4.1% margin and 47.9% width for me

Maybe I should just leave it at 4% and 48% so that it looks like it would without the theme. The poor overlap is barely noticeable

17

I think I am missing something…

18

A background and this userscript, it seems

19

Yeah, I can see a difference between Firefox and Chromium rendering.

Weird.

20

Yeah I was trying to be funny. I fixed it now :wink:

1208×827 314 KB

4 Likes