[FEATURE REQUEST] Ability to Edit CSS

[hernandito]

Just tried this and it is love at first sight. Thank you!

It would be nice to be able to edit the CSS of the UI, to make for better legibility. Change fonts, bold/italic, sizes, colors. I went into the docker container and could not find any .css file.

Perhaps some of this is doable via the Themes configuration, but the samples show very few items to control. Is there better documentation of all the parameters that are editable in the Theme parameters?

Thank you again.

[hernandito]

To illustrate what I mean above, take a look at the image below:

1. Ability to edit font color, weight, would help readability.
2. Ability to change font family, size and weight (color is editable per your samples)
3. Change color of "read" items so it does not blend too much with items 1.
4. Ability to make these headers different font/weight/color/height would help highlight the different sections.

After some tweaks to the UI using the Inspect Element in the browser, I can get this. Much better readability (for me). Still could also have improvements

5. Separate code so these two items can be separate colors.
6. Reduce this gap , for better differentiation between topics. One could also reduce gap between topics to be able to see more topics at the same time.

The below I tweaked in Photoshop as the changes could not be done within the web browser. You can see how it is more readable. I get that it is not as hip/hacker style with the use of the Monospace font, but it make a difference.

Thanks.

[svilenmarkov]

Hey,

You can use a custom CSS file using the custom-css-file property:

theme:
  custom-css-file: /assets/my-style.css

More about it in the docs.

The stylistic choices I've gone for are admittedly opinionated but also quite deliberate.

Widget titles purposefully don't stand out because once you set everything up the way you want it you become familiar with the layout and you no longer even need to look at the titles. You know where and what everything is so the titles are just noise.

Titles of visited posts purposefully blend in with the subtext because as per the name, I wanted to be able to see the top/most important/latest things at a glance and things I've already seen are neither of those so I don't need them taking my attention. The subtext is also purposefully not a different color since I see it as "conditional information" - I don't look at the number of points or comments for every post, only some, so I don't need them standing out all the time.

The font choice is subjective - I chose it because that's what I use in my code editor and I find it fairly legible but I do think it also helps with providing a unique look as monospace fonts are rarely used outside of displaying code. I haven't provided an option to change it because dealing with different fonts in a consistent way on the web is a pain in the ass and the only sane solution has no support anywhere.

The amount of white space is also somewhat subjective. I tend to avoid densely packed information as I find it hard to read and focus on. I think the current amount is fair, but I do acknowledge that some people prefer as little as possible.

Ultimately, I have to draw the line somewhere. I can't make everything customizable but you are free to make your own changes as you see fit.

[hernandito]

I completely missed the custom CSS file...! You have thought of everything.

I see that main.css is in the repo; so I will download and tweak away.

I figured you were going for a particular look and feel. It has a "vibe" to it. I was almost embarrassed showing you my edits above as they look quite bland/generic.

This is perfect.

Thank you!

[svilenmarkov]

Just a quick tip - the custom-css-file property doesn't replace the existing CSS file but rather append an additional CSS file provided by you. This means that you don't need to place everything from within the existing one into your custom one, only the changes you want to make.