Hi guys! I made a custom CSS theme that's customisable and mobile-friendly.

I've made a separate site for it (to keep things organised) where you can find the full feature-list, installation instructions, credits and changelog. There's a theme code generator so that you don't have to do any coding yourself! Just following this link: https://hongske.github.io/subeta/custom-css/Modernised/

[box=#eeeeee]Disclaimer This CustomCSS is in development and I cannot guarantee it will work for everyone (please don't be mad if it doesn't work).

Also, there's a chance this might slow down your experience on Subeta, as I'm importing 2 external sources (the Roboto-font from Google + the FontAwesome icons) and this baby has a lot of code (+8k lines)...[/box]

Please let me know if you've got any feedback or find any bugs or even if you can think of any extra features! I doubt that I've styled all the pages on this little corner of the internet, as there's a lot of content, but I think that I've gotten the most-used ones.

[edit] Last update: ">2025/02/06 (click for the full changelog)

Super cool! I'll try it out and watch for any issues :D

For anyone reading, remove everything between the "@" and "import" from the install code. Subeta thinks was trying to ping someone. (ancient bug that will never be fixed)

Oh dang, this is gorgeous! Gonna try it out for a bit and see if anything needs fixing. ^^

Thanks for the feedback , that's very helpful ❤ I also updated the first post (forgot about that bug, it's been so long lol).

Thanks ! Feel free to let me know if you have any questions or requests!

The only thing I would say is that it's difficult to select anything other than pets on the Personal drop-down. You have to hover over Personal, then quickly move the mouse around to the other options since Pets expand over the drop-down. It might be better to move the Pets hover to the side since there's no way to scroll past them.

I know that might not be the best visually, though, since it would be different from the other hovers.

Just noticed that the boxes for stat increases in the Coli are kind of cut off. Might be a Firefox only problem, not sure!

: Button-spacing for Ruffie Raffle has been added!

: Ah, I hadn't considered that as I only have 1 pet... I'll try to add them to the side like in the original layout, and I'll let you know once that's done! Same for the stat-boxes in coli.

I'm currently restructuring a big part of the CustomCSS, as my old way of listing it by page is not working out (as the design patterns overlap too much), so it might take a me a few days before I get to new things, sorry!

[edit] : I made the dropdowns drop open to the side again, instead of underneath the navigation. You can also use the CSS variables --number-of-menu-pets, --number-of-menu-friends and --number-of-menu-shops to control how many pets/friends/shops you want to show. Current default is 10 items for each of those. I've also added some styling for the Spend Exp page! I checked it in Firefox and it looks the same like in Chrome (at least for me). Could you go see if the boxes for stat increases are better for you now? If they're not better, could let me know what screen resolution you're surfing on?

Thank you for the update! Both the dropdown and the stat increase page look great. :)

You're very welcome ! Let me know if you want to see any other pages restyled, if you have any suggestions for features/options or of course if there's any other bugs!

Pretty coding illiterate here, so am wondering, can I add this to existing CustomCSS, or does it matter?

Hi ! You could add this to existing code, but there's a big chance that whatever I've written might conflict with what you already have. If you give me your current CustomCSS, then I could find out for you! Or you can also just try and see what happens ;)

Ok, thank you. I think I'll begin without the prior CustomCSS, then go from there. I absolutely love the look, so am anxious to see it live!

You're very welcome! Please let me know if you experience any issues or if you have any suggestions for features or pages to do!

It's absolutely beautiful!! I don't know what else to say, but I am using it and everything is styled with such care and thought. Thank you for sharing this! 😭

I'm glad you like it ! Feel free to let me know if there's any pages or features you'd like to see (I haven't styled everything yet as I don't actually use everything hahaha).

[edit] Hope you guys don't mind me pinging you for this, but I made a theme code generator! So instead of having to copy/paste multiple codes, you can just set the options you want and have it generate the final code. I'd be very thankful if anyone could test this out for me... I tried it myself and it seems to work, but you never know 😅

You can view the theme code generator by clicking on this link.

I love the look, and the ease of use (takes some getting used to, after all the years of traditional Subeta sidebar... hehe). I think for me, it's a learning curve, because I'm so code illiterate. I just used the generator, and copy and pasted. On my phone, it's difficult for me to see, but I'm going to play around with the colors, and see if I can find a combo that works. I love yellow, but it doesn't love me back. My eyes could never adjust. Now on my laptop, it's perfect. I love the layout, and how uniform it is! I'm still playing around with adding my other CustomCSS, such as the floaters in the top left, etc. You ROCK!! Thank you so much for all your hard work!

i've only been watching this thread but i wanted to say thank you for sharing your work!!! it's really user friendly and the effort you put in is impressive. and i say i've only been watching because i know it will be really hard for me to tear myself away from the custom css i've been using for years lol... but i think i will give your layout a try and see how it works! [edit]so just in trying it for a bit i have a few suggestions:

• can there be an option to display user avatars in the forums? or maybe headshots (though i don't know if that's possible)
• for some reason when i am viewing my own shop/gallery, all the items appear in a really long single column. it only happens for my own, and it still happens when i remove the tiny bit of scode i was using for them. this happens for all categories, including the "none" one.

and this isn't really a suggestion, just an observation i guess - it is all definitely a lot more cramped than i am used to, though i imagine that is to make it mobile friendly. i will continue poking around with it - it's really nice!

I made the generator for people who have no or less experience in code, and also because the amount of options were getting out of hand, so I'm glad you got to try it out! Concerning your other points:

• I have added an option to set a separate accent/theme colour for mobile, which is called "Main theme colour (mobile)"
• I have added a picker to ""General » Misc" so you can chose your own alignment of the floating items. If you don't pick anything, it will be centered by default, but you should be able to set the items now to be floating in the top left!

I'm really happy to hear your feedback!

• I've added an option to display user avatars in the forums, but only as headshots (full avatars are too long for the layout). If you want to add it manually to your options, it's "--forum-post-avatar: block;"
• Shop layout should be fixed! It didn't show properly because you have categories in your shop and I hadn't accounted for that.
• With cramped, are you talking about the spacing between elements, or about the width of the layout on desktop? Either way, I've added 4 experimental variables to the styles. Try giving those some custom values to make the layout less cramped. Beware that this is highly experimental, which is also why I haven't added these to the generator yet. The 4 variables are:[ul]
• --whitespace-x
• --whitespace-y
• --whitespace-x-mobile
• --whitespace-y-mobile

oh thank you! yeah i figured full size avatars might break it, but seeing something there really helps me to keep track of the posts, if that makes sense. so the headshots work for that just fine, thank you!! and i didn't realize the other random user shops i looked at didn't have categories lol. so that's what it was! thank you for fixing it!

as for the variables there... i did try that and (predictably) managed to break the entire site for myself so i think i better not touch that for now. >_> the cramped feeling i think was mostly coming from the layout width (since i'm on desktop) so there was a lot of unused space to the sides. here are some images showing what i normally use and then one with just your default layout. i resized the images a bit but hopefully you can see what i mean?

HOWEVER, i know what you have made looks the way it does because that's how you intended it to be. so that's why i say it's not a suggestion even (and definitely not a criticism), since it's just personal preference for me to have the page content taking up more of the screen. so it's not really something you have to look at just for me - i think i'm just very set in my ways of my old layout lol.

The headshots were a good suggestion, now that I added the option I find myself using it as well to keep better track of the posts!

Thanks for the screenshots, they do show clearly what you meant! When I made the layout, I did indeed set it to a smaller width on purpose, for my own personal preference. Both of my screens are 4K, and really wide layouts are more exhausting for me to look at. However, I forgot that not everybody has the same issues as me (thankfully) and I did store the page-width in a variable in my code to begin with. SO! With some tweaking, the page-width is now customisable as well :D

• I added a variable called "--page-width", which takes sizes. If you use "--page-width: 1600px;" then the page content will be 1600px wide (instead of the current 1300px). This has also been added to the code generator (Note for advanced usage: "--page-width: calc(100vw - 120px);" is also valid, but not possible through the generator).
• I added a variable called "--number-of-items", which takes values like "var(--col-2)", "var(--col-3)", ... up to "var(--col-8)". This changes the number of items in a row for things like shops and items. This has also been added to the code generator.
• I removed the experimental whitespace-variables.

This is such a lovely code! I love it so much. I used a generator called Coolors to help me pick the colors I wanted and the generator you made to customize the code was very straight-forward to use. Big fan of this!

Thank you <3