Vocabulary dictionary

Kanji dictionary

Grammar dictionary

Sentence lookup

test
 

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

Top > renshuu.org > Announcements



avatar
マイコー
Level: 307

This is our first attempt at a contest that isn't art related, so I hope it goes well!


What: renshuu, both the app and the website, use HTML/CSS under the hood to style up the crazy amount of content present. Over the years, I've had tons of users offer changes to the way things are laid out, and I wanted to make a way for those familiar with CSS to help the community out!

This contest is for any CSS that you want to add to renshuu, whether it's a new color scheme, some small change you've always wanted to see on a tiny part of one page, and everything in between.


How to enter:
1. You'll need a desktop/laptop for this. Most people will want to use an extension like Greasemonkey or Tampermonkey, which allows you to inject CSS into a website.
2. Log into renshuu.org (you can use the same user account as the renshuu app), then get to making all those changes you always wanted to!
3. When finished, please post on this thread, with the following pieces of info:
--- What it does / where it affects
--- Screenshot
--- Link to online website containing the CSS (for example, https://pastebin.com/)

When:

Entries will be accepted during all of October 2025. Winners will be announced in November.


What you can win!
We'll be choosing ten winners!
The #1-3 entries will receive both 6 months of renshuu pro.

The #4-6 entries will receive 4 months of renshuu pro.

The #7-10 entries will get 2 months of renshuu pro.

All participants will get a little something for their Kao Garden.



Important notes:

1. If you are not familiar with CSS, but have a visual change you'd like to request, please use the request thread: https://new.renshuu.org/forums...

2. If more than one person fulfills a request, the earliest one will be considered unless significant changes were made.

3. You allow renshuu the ability to use your contribution to make renshuu better for everyone!

4. Only CSS, no Javascript. No external sources allowed (links to remote fonts, etc.)

5. You can enter as many times as you'd like.

6. My apologies in advance for the mess that is renshuu's CSS, should you go looking.


New feature from this contest!

If we get enough entries, I plan on making a "style" selector section in renshuu's settings where you can turn on user-made (after verification from renshuu) style changes! I hope we can built up a library of user "mods" to renshuu's style/layout open to all users!

23
8 days ago
Report Content
avatar
マイコー
Level: 307

Submissions, comments, and questions can all go in this thread :)

1
8 days ago
Report Content
avatar
ハデクヨン
Level: 129

This looks like it'll be fun! kao_great.png

I'm pretty busy right now but hopefully pretty soon I'll have the time to try writing up some CSS for a submission. Been a little while since I last used CSS, so it'll probably take a little figuring out again for me. kao_worry.png

Also I'm for the most part (okay, basically entirely) satisfied with how Renshuu currently looks, so my own CSS probably would keep a lot the same. I wouldn't be changing up much.

Lastly, you mention putting it on a separate site. I assume putting it on github.com would be fine?

1
8 days ago
Report Content
avatar
マイコー
Level: 307

Sure! Any publicly accessible link will be just fine.

0
8 days ago
Report Content
avatar
3Neko
Level: 308
family-guy-css.gif


Sounds like a fun contest 😆😅

7
8 days ago
Report Content
avatar

Just CSS, no adding new HTML, and no JS? For example - changing the colour of the progress-bar?

1aa3f811ee1d163d0872f43f.png

This would be accepted, but if I wanted to write some code that dynamically changes the colour based on EXP, that wouldn't, right? I'm not really sure what I'd change. I guess I'll be looking at the request thread 😄

0
8 days ago
Report Content
avatar
マイコー
Level: 307

Due to the additional potential complexity of mixing JS into what renshuu already has, and because this is the first time we're running a contest/project like this, I think I'd like to keep the scope a bit more limited, and perhaps expand it out in the future.

2
8 days ago
Report Content
avatar

Got it! Is the idea for each entry to be something more expansive, or are minor changes also welcomed? For example I don't really like the look of the "boxes" for the Daily Challenges (in Dark mode). Would something like this be fine?

b3194d5bed20d4309c73770b.png

All I did was edit the colours for "--progress_border: # a5accb;" and "--challenge_bg: # 2b3243;" - so it doesn't really warrant a pastebin.

Sorry for asking so many questions 😅 (if something like this is fine, you can count it as my first submission).

I'll make an actual skin when/if I have the time :)

2
8 days ago
Report Content
avatar
マイコー
Level: 307

Entries can be a short as a single line. However, if you have several changes to a single area, probably better to submit them together.

1
8 days ago
Report Content
avatar

I made a full (mostly) skin/theme. It needs Dark Mode in order to work properly. Theme is "Dark Sakura". You can see what it changes in the screenshots (although not showing everything). Only other thing I did was take a request from @いのしし to make the kao-coin showcase section larger (doubled the fixed height and increased the size of the coins by 30%). Probably doesn't break anything.

c9f9d9283926edcd96c4c984.png

Here's the CSS: https://pastebin.com/EFxp5yfZ

Update: Here's a video (didn't like how the screenshots looked) - https://streamable.com/k6fo9u

Let me know if you want me to trim it fully (only leave what I've actually changed), write proper comments or format it better.

Imma go sleep now kao_lazy.png

15
7 days ago
Report Content
avatar
フィーラル
Level: 204

Funny to see this happen.

Following up on my suggestion from a week or two ago, a better looking conjugation table, though this time it will work on both portrait and landscape screens. It has some minor effects on other tooltips (notably the "has done x vocab today" hover TT) as it shares the same div with all others despite being an entirely different format.

I have also had a look at the rest of the stylesheets and maybe it would be better to clean those up at some point

kao_shocking.png
968f4e3ec198ad94690f856d.png

works on wide..

08d43305d1e345350af3cfbb.png

..and also on tall screens

Source Repo

9
6 days ago
Report Content
avatar

I made another Dark mode theme. This time it's more or less complete. Haven't tested it too much on mobile, but there don't seem to be any issues on PC (at least not for me). I've also written a lot more comments this time around. Might do one Light theme, and then move on to UX.

651df687a68c6bdbbc601276.png

Feature list:

  • Changed Dashboard icons (those are just borders 😁).
  • Overall muted colour scheme.
  • Always show 'Save mastery level' button when changing mastery level (request).
  • Shifted the edit button for Mnemonics so you don't hit your name by mistake (request).
  • Fixed a bug with the bottom right animated bar.
  • Fixed a span of the grey part of the kao progression line overlapping with the completed line when directly at the start of the circle (should be fixed in base Renshuu soon).
  • Kao-coin display fixed size is doubled, and the coins are 30% larger (same as before).
  • Added subtle on-hover animation to user avatars (profile pictures).

New location of Edit and Delete buttons for your own Mnemonics (marked with a red square)

95a1c8502cc7758aa7a7860e.png

Short video: https://streamable.com/i2z80q

Link to CSS: https://pastebin.com/Efq3NdX1

(version 1.0.1)

Hotfix: "Submit answers" button for the "Complete the vocab" questions type was blending into the background.

6
1 day ago
Report Content
Getting the posts




Top > renshuu.org > Announcements


Loading the list
Lv.

Sorry, there was an error on renshuu! If it's OK, please describe what you were doing. This will help us fix the issue.

Characters to show:





Use your mouse or finger to write characters in the box.
■ Katakana ■ Hiragana