custom.css not being read?

[jefft]

Hi All,

I've been trying - without success - to make some changes to my dashboard via custom.css, but all the evidence suggests that the custom.css file isn't being parsed at all. This is really frustrating me now!

I put some complete garbage in the file to make sure it would throw up an error, and no error appeared in the browser console.

Code: Select all

/* custom.css */
// check that it's really reading the file...
body {
    background-color: pink !important;
}

!loadofnonsense ! ! #

// these don't work either
.block_VentSys .off {
    color: red !important;
}

.block_VentSys .on {
    color:#00ff00 !important;
}

The file permissions are 644 domoticz.domoticz and the folders down to it are 755 domoticz.domoticz; dashticz runs in docker but I've no idea which host system user it's mapping to, but it clearly is able to read other dashticz files that have the same permissions. The only other thing I've noticed that might be related, is that if I change a setting from the dashticz UI, it doesn't stick - CONFIG.js is not altered.

Is dashticz perhaps trying to open the files for write rather than read access (makes sense for CONFIG.js but shouldn't be the case for custom.css), and running as anonymous or some other user? [Edit: even changing the files to 666 permissions doesn't eliminate the css or UI config problem, so it's not that simple!]

Is there anything else could mean that custom.css isn't parsed or is ignored?

[HansieNL]

// is not allowed for comments in a css file. css comment should be used like: /* Comment */
For saving setting to CONFIG.js via Dashticz UI be sure the file has the right write permissions.
I hope this info will help you solving the problems.

[jefft]

If the comments were invalid, then surely the file would have thrown up a syntax error in the browser console? That supports my concern that the file is not being parsed, as my deliberate garbage in the file didn't cause any error either. As for CONFIG.js - as I noted, even 666 permissions didn't make that work. Something is broken here, but so far I can't find what!

[jefft]

So, I re-ran make for the dashticz docker and now I can make some things in custom.css work... it's strange. Still no errors in the console from the 'loadofnonsense' line! Same in Chrome and Edge.

<code>
* this one doesn't work */
body {
background-color: pink !important;
}

/* check that it's really reading the file... */
!loadofnonsense ! ! #

/* these don't work! */
.block_UPSAlert .off {
color: green !important;
}

.block_UPSAlert .on {
color:#ff0000 !important;
}

/* but this one works... */
.block_UPSAlert .title {
color: blue !important
}
</code>

[HansieNL]

1. css file with errors will be loaded, but there will be no error in the console.
2. body background is by default an image.
3. For .block_UPSAlert .off { color: green !important; } what do want to change? background color, icon, some text?

[jefft]

1. Ah, I didn't expect that! So errors will just be ignored and anything it likes gets processed? Ugh.
2. Yes, but cannot custom.css override that?
3. Either the icon colour or the text colour, or both. I took the css snippet from the dashticz documentation. Also tried some variations like .on .state, but those didn't work either.

Thanks!

[HansieNL]

1. Not only ignored, but can give strange effects.
2. I don't know. What you can do is create your own image.
3. Can you try without the loadofnonense line if the css works as it should? On will work only for an font icon and not an image icon.
Can you post your UPSalert block config so I can see what the config is?

[jefft]

Thanks, appreciate your help! So many little things that do or don't work together, I'm learning

The UPSAlert and VentSys both use PNG images rather than icons, so that may be the problem there. Now you say it, makes sense that the colour of image can't be changed, but I didn't realise that the icons were fonts. I just tried .on with a switch that uses the default icon and it works as hoped. I guess I need to create some little coloured images or look for suitable icons!

Is it possible to change the colour of the state text for on/off?

[HansieNL]

Can you try with...

Code: Select all

.block_UPSAlert.off .state {
color: red !important
}
.block_UPSAlert.on .state {
color: green !important
}

[jefft]

Way hey! That did the trick. Thanks so much for your help, Hansie!