[BUG] Custom CSS cannot be applied.

[94tiger]

Environment

Self-Hosted (Docker)

System

Docker

Version

2.1.1

Describe the problem

style.css

@font-face {
  font-family: "NanumBarunpenB";
  src: url("/fonts/NanumBarunpenB.ttf");
}

conf.yaml

appConfig:
  externalStyleSheet: ['/assets/style.css']

I saved the above to a file. And applied like. --font-body: "NanumBarunpenB", serif;
However, css was not applied, and when the same content written in style.css was applied in the UI, it was applied.
This is not permanently applied, but only applied temporarily when the 'Save Changes' button is pressed, and restored when refreshing.

css applied after pressing 'Save Changes' button

Additional info

No response

Please tick the boxes

• You have explained the issue clearly, and included all relevant info
• You are using a supported version of Dashy
• You've checked that this issue hasn't already been raised
• You've checked the docs and troubleshooting guide
• You agree to the code of conduct

[liss-bot]

If you're enjoying Dashy, consider dropping us a ⭐
_{🤖 I'm a bot, and this message was automated}

[liss-bot]

This issue has gone 3 months without an update. To keep the ticket open, please indicate that it is still relevant in a comment below. Otherwise it will be closed in 5 working days.

[liss-bot]

This issue was automatically closed because it has been stalled for over 6 weeks with no activity.

[CrazyWolf13]

can confirm, something there is either broken or the documentation outdated, to less detailed.

[Lissy93]

@lopiv2 CC'ing your ticket, #1242 into here.

[codevski]

seem to have this issue as well I think its done correctly so this is my docker:

  - /var/local/dashy/gruvbox.scss:/app/src/styles/user-defined-themes.scss

My scss file:

html[data-theme='gruvbox'] {
  --primary: #d79921;
  --background: #282828;
  --background-darker: #3c3836;
  --item-group-background: #504945;
  --item-background: var(--background);
  --item-background-hover: var(--background-darker);
  --item-hover-shadow: 0 1px 3px #d79921b3, 0 1px 2px #d79921bf;
  --font-body: 'Cascadia Code', 'Fira Code', monospace;
  --font-headings: 'Source Han Serif VF', 'Georgia', serif;
  --text-color: #ebdbb2;
  --text-color-subtle: #bdae93;
  --border-color: #7c6f64;
  --notification-bg: #cc241d;
  --modal-bg: #3c3836;
  --button-bg: #98971a;
  --button-text: #282828;
}

and finally the appConfig

appConfig:
  theme: gruvbox
  cssThemes:
    - gruvbox
  customCss: >-
    @media (min-width: 1780px) { .home
    .item-group-container:not(.item-size-large) { grid-template-columns:
    repeat(3, 1fr); } } .home .item-group-container.item-size-large
    .item-group-grid, .home .item-group-container.orientation-vertical
    .item-group-grid { display: flex !important; }
  auth:
    enableGuestAccess: true

[CrazyWolf13]

Hi
This problems seems to be related to dashy not automatically rebuilding on changes, see #1479 and #1290 (comment)
A new release has just been published, which should fix this issue, so please upgrade to the latest version.
If this is not the case just respond back to this ticket and I'll reopen this issue.
Thanks and have a nice day.

[EliasGagnef]

I'm having a similar issue, when I change to my custom theme and reload the page the colors are still blue, here's screenshots:

First one:

after changing from default to custom

and second one is after reloading my tab, I could be doing something wrong though, I have tried rebuilding with the theme on but it just goes blue

[Lissy93]

Oh interesting, @EliasGagnef - how did you make your theme, was it a custom stylesheet, or just setting custom colors?

I'm guessing that it could be appConfig.customColors isn't being saved correctly. Do you mind sharing that part of your conf.yml with me?

Also, that is a sick dashboard, I love it! 😍

[EliasGagnef]

Oh interesting, @EliasGagnef - how did you make your theme, was it a custom stylesheet, or just setting custom colors?

I'm guessing that it could be appConfig.customColors isn't being saved correctly. Do you mind sharing that part of your conf.yml with me?

Also, that is a sick dashboard, I love it! 😍

Thank you so much :D

I set the custom colors in the UI, but I have also edited the dashy_conf.yml, I probably did something wrong :p

I'm not sure what part so I'll just send the whole file here it is:

appConfig:
  backgroundImg: https://i.imgur.com/oErxY4Z.jpg
  theme: custom
  layout: auto
  iconSize: large
  language: sv
  startingView: default
  defaultOpeningMethod: newtab
  statusCheck: false
  statusCheckInterval: 0
  faviconApi: allesedv
  routingMode: history
  enableMultiTasking: false
  widgetsAlwaysUseProxy: false
  webSearch:
    disableWebSearch: false
    searchEngine: duckduckgo
    openingMethod: newtab
    searchBangs: {}
  enableFontAwesome: true
  enableMaterialDesignIcons: false
  hideComponents:
    hideHeading: false
    hideNav: false
    hideSearch: false
    hideSettings: false
    hideFooter: false
  auth:
    enableGuestAccess: false
    users: []
    enableKeycloak: false
  showSplashScreen: false
  preventWriteToDisk: false
  preventLocalSave: false
  disableConfiguration: false
  disableConfigurationForNonAdmin: false
  allowConfigEdit: true
  enableServiceWorker: false
  disableContextMenu: false
  disableUpdateChecks: false
  disableSmartSort: false
  enableErrorReporting: false
  customColors:
    custom:
      primary: '#ebb75c'
      background: '#2d2200'
      background-darker: '#130d00'
pageInfo:
  title: Cayuga
  description: ''
  navLinks: []
  footerText: ''
sections:
  - name: Media
    icon: hl-duckdns
    displayData:
      sortBy: default
      rows: 1
      cols: 1
      collapsed: false
      hideForGuests: false
    items:
      - title: Jellyfin
        icon: hl-jellyfin
        url: http://localhost:8096/web/index.html#!/home.html
        id: 0_480_jellyfin
      - title: Qbittorrent
        icon: hl-qbittorrent
        url: http://192.168.1.21:8080/
        target: null
        id: 1_480_qbittorrent
      - title: Sonarr
        icon: hl-sonarr
        url: http://192.168.1.21:8989/
        target: null
        id: 2_480_sonarr
      - title: Radarr
        icon: hl-radarr
        url: http://192.168.1.21:7878/
        target: null
        id: 3_480_radarr
      - title: Bazarr
        icon: hl-bazarr
        url: http://192.168.1.21:6767/series
        target: null
        id: 4_480_bazarr
      - title: Prowlarr
        icon: hl-prowlarr
        url: http://192.168.1.21:9696/
        target: null
        id: 5_480_prowlarr
  - name: Admin
    icon: hl-jellystat
    displayData:
      sortBy: default
      rows: 1
      cols: 1
      collapsed: false
      hideForGuests: false
    items:
      - title: Cockpit
        icon: hl-cockpit
        url: https://192.168.1.21:9090/
        target: null
        id: 0_489_cockpit
      - title: Portainer
        icon: hl-portainer
        url: https://192.168.1.21:9443/#!/2/docker/dashboard
        target: null
        id: 1_489_portainer
  - name: wiidget
    widgets:
      - type: gluetun-status
        useProxy: true
        options:
          hostname: http://localhost:8000
          visibleFields: >-
            public_ip,region,country,city,location,organisation,postal_code,timezone
        id: 0_749_gluetunstatus
      - type: image
        options:
          imagePath: https://i.imgur.com/VoVqUld.gif
        id: 1_749_image

[Lissy93]

Thanks :)

This is indeed a bug, so I'll re-open.

As a workaround, your config works fine if you set the theme to default and then also put your colors under default (instead of custom). This will also work using any other theme as the base theme (except custom).

appConfig:
  # .....
  customCss: '.settings-outer { background: transparent !important; }'
  customColors:
    default:
      primary: '#ebb75c'
      background: '#2d2200'
      background-darker: '#130d00'
      settings-background: 'transparent'

[EliasGagnef]

Thanks :)

This is indeed a bug, so I'll re-open.

As a workaround, your config works fine if you set the theme to default and then also put your colors under default (instead of custom). This will also work using any other theme as the base theme (except custom).

appConfig:
  # .....
  customCss: '.settings-outer { background: transparent !important; }'
  customColors:
    default:
      primary: '#ebb75c'
      background: '#2d2200'
      background-darker: '#130d00'
      settings-background: 'transparent'

Thank you, I put the colors under "bee" since that one has the fonts I like :D (also fits perfectly with Adventure Time), works perfectly!!

Also thank you so much for making Dashy, it really makes using my computer/server much more fun :)

[the1ts]

I have also had a little issue getting a user-defined-themes.scss live. Its mounted inside the container fine. I've added the appsConfig.cssThemes to add it to the dropdown. But all the css is still the default theme, even when switching between themes.
I docker exec'd into the container and ran yarn build and my new css theme sprang to life.
Looks like the addition/change to this file isn't causing a rebuild even on container restart, should it?

[CrazyWolf13]

@the1ts
Could you test this again with re-pulling the :latest tag? That should actually be resolved.

[the1ts]

Confirmed it builds by:

1. blanking my user-defined-themes.scss restarting and theme not present
2. putting theme file back in place, restarting, I see checking, then building and the theme appears.

Thanks again.