search

bastienwirtz / homer

A very simple static homepage for your server.
https://homer-demo.netlify.app/
Apache License 2.0
9.38k stars 785 forks source link

Custom CSS loaded but not rendered - Dracula #565

Closed ForecastHealth closed 5 months ago

ForecastHealth commented 2 years ago

Hi there,

I have Homer running in docker using the Yacht template from the selfhosted templates.

I have:

Added this in the config.yml in the same directory:

stylesheet:
  - "assets/custom.css"

Interestingly, this loads the custom.css file in, which I can observe in the Network tab of chrome. However, none of the styles seem to render, and instead I believe the CSS being rendered is from: http://192.168.1.103:8902/resources/index.41a7d45b.css

the index....css file is loaded first, then the custom.css file. I'm not that familiar with web programming, but is something interfering with the updating of CSS?

ForecastHealth commented 2 years ago

Closing this as the issue seems to have resolved. I resolved it by copying the entire default config.yml and uncommenting the stylesheet section.

It's not clear to me why having a full config would allow the custom.css to be loaded, and not just the relevant lines of the config.

bastienwirtz commented 1 year ago

Hi there,

Hum that weird indeed :thinking: Did you check your CSS file for any possible typo / error (with this for example)

I see your reopen the issue, is the problem still there?

JCapriotti commented 1 year ago

I stumbled on this behavior as well... stylesheet was loading but it didn't seem like it was being used. It was driving me crazy, then noticed it was only one computer that was doing this.

It turns out I completely missed the little light/dark mode switch in the upper-right part of the dashboard. Once I put it in dark mode the theme looked as I expected.

In my case, I was also trying to use a dark theme (Catppuccin) and just assumed it would just look dark all the time. I'm not sure that I really noticed the switch until now. I'm not sure how it is supposed to interact with custom stylesheets, but at least I found my problem!

ambarusa commented 1 year ago

@JCapriotti Wow, you are right 😂. It was (kind-of) working on some devices, but I would have never figured out that it's due to light/dark modes. However, the dracula-background.png is still not showing up. Do you have any idea why?

If anyone is running Homer in Docker container, you just have to put the files on the same level as the config.yaml (that is mapped already to /www/asset)

mrclschstr commented 4 months ago

I am currently struggling with the same problem as described by @ForecastHealth.

I have a installation of homer with default settings running and wanted to try a stylesheet from Catppuccin and Dracula. I have followed both instructions and I can also see in the Firefox Developer Tools that the corresponding stylesheet is loaded, but the design of the page does not change. Switching from dark to light does not change anything either. I'm currently at a bit of a loss as to what I'm doing wrong...

Addition: The problems only occur with the latest tag of homer. If I use the tag v24.05.1, everything works as expected! Could this be related to the revised theming system? See https://github.com/bastienwirtz/homer/commit/359f1ffb53cdb3476acbfcb8c1af70dff2eaf403