掲示板 Forums - 1st annual renshuu style (CSS) contest!

Hi, I'm quite new here,
I don't necessarily want to win anything, but to share some ideas :

Pastebin CSS File : https://pastebin.com/Mrsp0JGZ

It changes the homepage (dark theme), the tooltips, some inputs, the stats tab, the garden tab and the kana charts.
Theres slight adjustments and small animations.
I might post an update for further improvements and fixes.

FYI I took some ideas from ギョルギ九十三 , so if it wasn't legit I give all credit to ギョルギ九十三

ギョルギ九十三
I'll take a look, but I kept its default value max-width: 500px;
What is the extension upgrade ? Is it the premium plan or a browser extension ?

there's a lot to improve, I'll do this when I have the time for it :)

Hey. I have made my own personal style for renshuu and, while I believe it on it's own won't win any contest, I think some features would be cool if they were on the normal renshuu website. For clarification, I really like the colorscheme catppuccin (see https://catppuccin.com/), and use it everywhere including all my tools, and websites, so with that, I made one for renshuu some time back. That resulted in this, a purple colorscheme made to match the Mocha flavour with the Mauve accent color. One thing i really like about this (though it isn't perfect) is that a background gradient looks surprisingly better than a plain black background

I've also done a few changes to the quizzing area. One thing that always bothered me was the spaces inbetween words on word block questions, as I believed it would be better to challenge myself to get used to living without spaces inbetween words in japanese, so I made it as such

I've also put the question explanation thing to be justified towards the middle. The reason for this is that usually when quizzing kanji, I find it less hard to miss what type of question the question actually is, which helps me since I have the option to click to unhide answers enabled; I also admittedly really like text being centered. Before this, I'd oftentimes unintentionally ignore the question type and try to guess the kanji's meaning when I should've been guessing the reading.
Otherwise, the theme just changes a bunch of little things - Button sizes, colors, etc. It isn't perfect, particularly due to my difficulty going through renshuu's CSS, and I don't think it'll particularly win anything, as it wasn't made with a contest in mind, but I thought I should post it for any other purple lovers out there; My profuse apologies for the bad looking css. Link @ https://pastebin.com/pe0jXXhX - I should mention I used an extension called Stylus to implement this (which i do recommend over messing around with tampermonkey or other injectors) so I'm not sure if this will work for others, though it should work fine. Good luck to everyone else posting and I hope renshuu gets to look even more pretty and colorful with all your great styles - I'm already seeing some pretty cool stuff in here!

Hi Everyone,

I'm new to Renshuu, I just started using it a few weeks ago in fact! I had been using Duolingo, but I found Renshuu to be much better for learning Japanese. As an aspiring web developer and someone who enjoys tinkering with UIs, I thought this would be a fun contest to enter. So, without further ado, here it is: KaBluey Light Theme, a light theme with lots of blue! It's not just a theme but also rearanges elements of the UI. It works on mobile as well. I haven't tested in dark mode, so it will probably have some issues there. I've tried my best to test it, however, Renshuu does have a ton of content, so if you spot a bug, please let me know.

Feature List:

- Several elements are now different shades of blue.

- I did away with the visible content wrapper entirely, so now the whole page background is white.

- Moved sidebars all the way to the very left of the page. I also made their position fixed, so you don't have to scroll back up to the top of the page to access them.

- Added borders, rounded corners, and padding to various components of the site.

- All pop-up panels are now at the very right of the screen, have no borders, and have a drop shadow.

- Navbar and pulldown menus have shadows, and rounded bottom corners.

- The daily challenge boxes in Adventure Mode and the action boxes on a new term intro get a little bigger when you hover over them.

- Quiz answer choices are now centered in their buttons.

- Centered the schedule list at the end of a quiz.

- Radical Chart is a table when there's enough room on the screen, not just a list.

- I'm not the first one to do this, but I did make the Kao Coin area taller. I believe this should work, although I wasn't able to test it because I don't use Kao Coins, and when I tried enabling them I found I didn't have enough to be able to see it take effect.

There are several more small changes that KaBluey makes, please check out the source code!

Here's a demo video: https://drive.google.com/file/d/1ZCRjv8KAemIcwm7h5R5YpGZ4IZaawka6/view?usp=drive_link

Here's my commented code: https://gist.github.com/LightbulbProjects/efbf967c80d813f01dcda2a62c1be693

Screenshots:

I hope you like and enjoy the theme! :)

Thank you, I'm glad you like it! Thanks for posting the screenshot, it was very helpful.

Hi all!

I'm relatively new, started learning Japanese the end of summer this year as a hobby and I've come to really like the app. :)

My CSS snippet focuses on redesigning and rearranging a very specific place in the page, which I use quite often, namely the Compact tab on the Schedule Viewer, since it is not as Compact as I would myself like it to be, I thought I'll do a little makeover.

My problem is that it feels a little cluttered, the buttons are a bit over the place, there is a lot of empty space in parts of the term boxes. With this snippet I aim to compact the term boxes even more, also making the buttons their own distinct place.

Main features include:

• Rearranged settings section to the top right with a background to highlight the actions.
• Rearranged mastery section below the settings with the dropdown menu closed.
• The mastery section is overlayed, so it doesn't use up space.
• Rearranged the audio player icon next to the settings section and made it bigger because it is super useful, I use it all the time.
• Added a lower highlighted part for the buttons and arranged them.
• Reduced paddings and margins around and all over the term boxes.
• A little bit of coloring here and there to make the parts of the text a bit more distinguishable. The colors can be easily changed from the first lines of the snippet. I chose these colors mainly because they look okay both in the light and dark theme, they get the job done but I'm sure there are better options.
• For the snippet itself: I commented every selector and some things that I felt needed commenting, I hope this snippet at least will come in handy if anyone wants to use selectors around this part of the page because they were a bit time-consuming to get right and not make it too long.

Here are some screenshots:

And here is the snippet itself