Tweaking ktistec's CSS when using Docker

[es9o]

I'm successfully running a ktistec container using the provided Docker run command, but can't figure out how to tweak the site's CSS with either of the mounted volumes.

Is this possible?

[toddsundsted]

@es9o i can't speak to the docker piece, but generally if you edit any of the javascript or css/less styling you need to rebuild the assets: npm run build --production

[JayVii]

For #17 I edited /app/public/3rd/semantic-2.4.1.min.css within the container and simply added my custom CSS to the end of that file. If you mount the /app or /app/public directory to your host, you can also keep the content in container restarts. Either way, it would be nice to have an empty custom.css somewhere, which you can hot-edit and which is loaded as last style file by the frontend.

[JayVii]

Another addition:

In my ktistec-tweaks repository, I also have a little description on how to include custom CSS within docker-containers.

For this, I decided to write custom rules in their own CSS file and push them to the container in the /app/public/3rd/ directory. I then add a section to the semantic-2.4.1.min.css file that loads my custom rules. However, the custom rules need to be called **before** any other rule is defined, i.e. it needs to be at the top of semantic-2.4.1.min.css`.

Let's assume your container's name is ltistec and you wrote you curstom rules into the local file custom.css:

docker cp ./custom.css ktistec:/app/public/3rd/custom.css
docker exec -ti ktistec sh -c "
    echo \"@import url('custom.css');\" > /app/public/3rd/tmp && \
    cat /app/public/3rd/semantic*.css >> /app/public/3rd/tmp && \
    mv /app/public/3rd/tmp /app/public/3rd/semantic-*.min.css
"

You can find more infos about that in the repository linked above. It also contains a nifty custom CSS ruleset for automatic bright/dark mode (See: #17).

I suppose with @toddsundsted's answer #69 (comment) and my comments above this issue is solved?

[toddsundsted]

Either way, it would be nice to have an empty custom.css somewhere

would this be best implemented as literally a file named custom.css, or could it also be some css that's stored in the database and added to every page (easier to customize on the fly without rebuilding anything)?

another alternative is to edit src/assets/css/main.less which is used to generate the application-specific css, but it does use less instead of pure css. is that an option?

[JayVii]

I think either way has pro's and con's:

• custom.css: Super easy to implement (just need to reference an additional css file), allows instant changes on-the-fly (which is nice if you want to tinker) BUT requires the user to make changes on the backend side, i.e. literally changing files on disk
• main.less: "Cleaner" way, does not need any changes to ktistec whatsoever, BUT requires rebuild(?) and is a bit more technical. IMO nice for permanent changes, but not so good for tinkering
• CSS stored in DB: super convenient for the user as it could be handled from within the ktistec frontend (see example screenshot below on how miniflux presents it to the user), could have performance advantages over custom.css, reading from DB might be faster than loading custom.css or if the CSS is inlined, basically all advantages from custom.css BUT requires a lot more implementation effort in ktistec