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

I don’t have a lot of experience with coding so I wouldn’t enter but if anyone’s struggling, it would be nice if the kao coin section was made bigger, maybe it could be zoomed in somehow? Also (this might be hard but) you could change a setting to have an image of the word on vocabulary questions as a helper. Maybe a timer option as well for people who want to challenge themselves Again these are just ideas for people and would be available to turn off in the settings so shouldn’t be too intrusive.

むじな は 10月1日, 16:38に

Well, this is silly, but since this is a request thread... and if someone wants to participate and has no idea...

While I love Renshuu's clean, tidy aspect and how well the dark theme works, I feel like there's a whole lot of blue and very little green in its overall design - matter of personal preference, really. I've actually been trying to use tutorials online to learn how to replace the muted blue of its 1) top bar, 2) buttons, 3) links and 4) study progress bars with a rich green like what I'm currently using in my Ubuntu theme - probably #3b6901 with #4b8501 as a lighter accent.

Below is a screenshot of what it would look like, though being a noob I've only been able to change the colour of a few features with Mozilla's inspector and, of course, they won't stick. I've also found someone's script for pasting into CSS Override, but it doesn't seem to work as intended.

I don't even know, am I managing to explain what I have in mind?

と言いました。

I'll look into it after I finish my weird "Dark Sakura" or whatever theme :) If you give me a good idea of what colour you want where, I can make one for you. Actually, I guess you already explained it quite well, my bad.

I should really stick to programming, my designing skills aren't great... Might get rid of the gradient background, not sure.

@いのしし we can't use JS in this contest, no timers or anything cool, sadly

Ah, I see… oh well, by the way the gradient background looks nice. It adds some funky vibes and I love it I mean obviously it’s not mine to decide but I think you should keep the gradient

Don't worry about it, I'm not pushing myself or anything. There's plenty of time. As for how I'm making the skin/theme, it's just Stylus (extension), and the Dark/Night stylesheet as the base. It's quite nice, you can see the changes in real-time. In your case the :root selector should be enough. Maybe you can give it a go?

Edit: I might be underestimating the difficulty. For me it's easy, but I have a lot of experience

You're welcome! Make sure you have it set up properly (URL bit at the top). You can also use something other than Stylus, that's just what I use.

Also, any feedback on my work in progress would be appreciated :)

It's almost 100% functional (including details like the ON/OFF sliders). It's just meant to be a more muted, minimalist Dark theme. Also has way more (and better) comments.

Honestly, I kinda wanna make a website (or offline app) where you can customise and generate your own theme, that would be pretty cool. My own artistic talents are quite limited.

Of course! Can you give a visual, just so I have a better idea? I get the garbage can, but how do you hit your name? On mobile right?

Adding a bit of margin isn't difficult. Pretty sure it doesn't break anything. I don't think it looks very aesthetic though.

-

If I'm limited to CSS, I can't touch the "actions" (JS handlers). Unfortunately CSS can't target the previous element (just the next with +), otherwise I could just hide your name 😁

Don't know how you'd test it on mobile anyway. I'm not sure how injecting CSS works over there. I have been testing mobile layouts, so that's not a problem. Just wondering how you'd try them out on mobile.

PS: Targeting these stupid buttons only with CSS is torture

Oh - I WILL allow JS in the future. I just don't want to bite off more than I can chew at the very beginning. I am really warming up to the ideas of "mods" in the same way that games have mods, with ratings, a way for users to comment on mods (report issues), etc.

Victory! Stylus still won't work for whatever reason (extension conflict? don't have that many though, it's probably me doing something wrong), but CSS Override applies the changes no problem. Below are screenshots of the Dark Sakura theme and my own kludged attempt at a greenish theme. I'll delete the original suggestion and the long posts as I was trying to make sense of it, so the thread is easier to read.

Once again, お礼を申し上げます to @ギョルギ九十三 for all the effort invested in this! With the stuff in your pastebin on page 1, I think anyone can play around with the interface colours. (Btw, you've inadvertently created a monster. I can't stop messing with the design now!)

@マイコー

You know how that single # ttip div is used for a bunch of things - mouseover tooltips, adding words, the conjugation table, etc.?

Because it's shared, you can't really make any CSS changes without breaking something else.

What if each JS function that uses it temporarily added its own .class (after clearing any others)? That way, you could accurately target it based on its current role without interfering with the other uses.

For example, the wordConj() function could add .ttip-conjugation, and that would give us a way to style the conjugation table without breaking every other use of # ttip on the platform. When you trigger # ttip anywhere else, that would remove .ttip-conjugation and add its own class.

Just something I wanted to run by you.

I probably will not be able to add any temporary classes (like ttip-conj), only permanent ones. The tip/popup system is SO messy that it is one of those "I fix one thing, I break three others", and I am hesitant to add conditional classes that I'd need to remove elsewhere. Not impossible, just not something I can add in a few minutes.