Custom CSS comes to kumos!

this is a big ole' beta for now - but I wanted to bring CustomCSS to the kumos site, but build on it a little bit, and have an opportunity to celebrate the people who've been making these CSS changes through the years for the site.

So - introducing Custom CSS snippets. These only work on kumos.subeta.net and are separate from your legacy customCSS. You can browse the popular snippets, which right now is just my "Cyberpunk CSS" theme, that changes the colors of the site and removes the header image. If you click view CSS you can see how easy that is! I've also seperated out my header remover.

Snippets can be something as big as a full theme rewrite, to just a simple line like removing the header. Making it public means other users can see and subscribe to it, and you can have multiple snippets turned on at a time.

Hopefully I've made the language for editing on Kumos really easy - at least to get started. And while things are changing every day, the majority of things like .card have been set in stone. Just changing the primary and secondary colors has a huge impact across the site.

This came out of starting to build the settings page, and wanting to make sure customization is still built into the heart of Subeta. Even if you move around those floating pumpkins ;p

https://kumos.subeta.net/account/settings/

Hurray for Custom CSS! :D Thanks, Keith. Looking forward to seeing what people do with this.

loves it

cant wait to give it a go

Being able to make custom CSS public seems like both a very useful & fun feature to add! At the moment, however, the "try it out" part of the public snippets doesn't seem to be working? I had to subscribe to a snippet to actually see what it looked like because the "try it out" page made no changes to the layout. A couple other things that don't seem to be working yet are the "fork" option when viewing a snippet or the ability to move snippets up & down on the subscriptions page; those both give a 500 server error.

Also, the navigation of the whole custom CSS section feels a little weird - like, the "my subscriptions" and "popular snippets" don't have a link back to the main page where you can see your own snippets, while the "create a snippet" page only links back to the main page and not the other two sections. I feel like maybe all four sections should just constantly be linked? And, on the subscriptions page, it might be nice if it was more obvious which code was yours and which was someone else's.

I do really like that the code creation page is a live preview, it definitely makes coding a much quicker process!

Lastly, in regards to the ease of modifying the kumos code - the legacy site seems to have an id selector for the majority of elements in the layout, while kumos seems to be using mostly (all?) class selectors instead. It would be nice to include more ids if possible, just because it makes it so much simpler to make very specific changes.

[edit] After messing around a bit more, here's a few more comments:

• Both the creation & edit pages occasionally time out, forcing you to refresh and lose everything you've been working on.
• The live preview doesn't seem to work on the edit page when modifying a snippet that is currently active.
• Does unsubscribing from a snippet you've created delete it? Or is there no way to delete a snippet?
• It might be nice to have the "active/inactive" toggle for your own code on the main page, as well.[ul]
• Honestly - since your own code shows up on the subscriptions page as well - it feels a little weird/slightly redundant to have the main page show just your own created codes. Especially since I imagine a lot of users will only be using code created by someone else.

I've been using my own layout/css on the legacy site for so long I honestly forget how it really looks sometimes xD most of the things i changed were the colors, headers, and icons. (soothing sunset sherbert vibes haha) i'm excited to see what we'll be able to do with this feature in the future

Hm, I can't seem to add my own image to the header like I can on the legacy site. I tried adding in the url for it in header-bg but every time the url just gets eaten and disappears. Don't know if I'm missing a trick here because I'm just trying to use the code I use on the legacy site (and works perfectly there)... Only difference really is that I changed the header id into the header-bg class. The rest of the code I'm using for that bit being {background: url(my actual url being here) no-repeat ;}

While I like the idea, this is incredibly confusing to me, and doesn't seem to work on my end.

"Try it out" does nothing. I see no changes on the page. "Preview Mode" + Combined with Current CSS - This Snippet Only X Hide this Snippet All these do nothing also.

Subscribe does... what exactly? I can't tell. "Fork" is a term that isn't explained at all so I clicked on it not knowing what it does. I guess I ended up creating a copy of someone else's css snippet with no way to delete it? x_X Embarrassed

Yes, yes yes!! I added something ages ago to help floating items appear above fold for me, and have no idea what or where that code is anymore. SO something like this would be fantastic. I haven't looked it over yet but YES to this idea.

Awesome! I especially love the fact that you subscribe to these snippets and so also automatically get any updates! Like the others are reporting, though, the "Try it out" option doesn't seem to do anything.

Subscribing to a snippet is basically activating it for your account and then subscribing to any changes made to it. So like if there's a bugfix, you'll get the fix without having to put any updated code in a box (as you had to do with the old system, unless you worked with an externally-hosted custom css).

"Fork" is a term that's used in code repositories, like github. Forking a piece of code means you make your own copy of the code, on which you can then make changes. Not sure how to delete snippets either, as I haven't tried making any myself yet. And if you "Subscribe" to a snippet, it basically means you

Ok, that's gonna be awesome. Thanks for explaining!

(Though I do think the page itself should have some short explanations about what those options do!)

Not sure if it's just me not knowing what I'm doing or if it's designed not to be changed atm, but I've been trying to make the sidebar smaller (like almost half of what it is) but can't seem to get it to work. Atm I believe it says that the sidebar is like 320px wide and I would much prefer it to be like 170-175px wide. I can resize the widgets just fine (got it down to like 165px at one point) but the size of the parent sidebar id I can't seem to change. I, personally, would prefer for it to be smaller because it just looks so weird to have it be so wide as to almost be able to fit 3 full avatar images on there...

the !important didn't help, but I went back to try and figure it out and actually solved it this time. I was just using the normal width when it turns out that I needed to set the max-width of the sidebar to change the size of it! :)

some of my customcss no longer works because of html entity encoding - it's been like this for a few days so i'm not sure if it was an intentional change or not?

mostly i was using "div[wire:key="0-notepad"]" and similar which no longer work so there's no way to target specific sidebar widgets :(

wasn't sure if this was better in the layout feedback or here, lol i made a list of all the little things i've found - mostly colours that don't adjust with your cyberpunk skin css (i'm using my fork, for reference) because they're defined by text-grey-100 or whatever. i know you mentioned somewhere you were going to look into this (i can't find the post..) so hopefully this is helpful ^^

• backgrounds + border colour on the replybox toolbar buttons (including hover)
• borders of the replybox
• replybox "preview" background
• hr color - it's set to "inheret" so it's the default text colour, but might be better to change to something else because it ends up standing out way too much on dark background/light text?
• the user pop-out hover has no colour set for the h3 text (the name + title). so on the gold account yellow gradient it's really hard to see, because my default text colour is white
• the p element on pop-out hover
• when questions in the help forum are answered, there's that little "Accepted Answer" box. you have the colour classes set to "bg-success/20 text-success-content" - having the background at 20% opacity makes it impossible to read using my skin (edit: same issue with the quests "Out of time!" box)
• the dividers for topics/pinned posts in the forums
• the hovers on the pinned posts on the topics page
• the topic tags (#/answered etc) on the topics page
• {code} in posts
• all the profile modules use static colours everywhere, would love if they matched the theme as well

also:

• in the news comments, .card-subitle affects the user pop-out hovers, making the font slightly transparent
• in some places, ".card-body :where(p)" affects the user pop-out hovers, making the "p" elements grow vertically (eg the main page of the forums)

thank you! will knock those out as much as I can tomorrow - have been trying to not do that!

also - pushed a bunch of fixes / improvements to the snippets area, including allowing you to delete your snippets.