HADashboard Theme Background

Third party integrations HADashboard
1

Hello all,

I have the dark1 theme working except the background image does not load. I’ve tried different browsers, different devices, clearing the cache on my browser, restarting appdaemon and restarting HASS but still no luck.

I have my images saved here \HASSIO\config\appdaemon\custom_css\dark1\img and the following in my dashboard.css, (the name of the image below is the same as in the /img folder).

body::after
{
  background-image: url(/custom_css/dark1/img/gradient-background-_edited.png);
  background-size:cover;
  content: "";
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1; 
}
2

try setting the background in body instead of body::after
but even better is to set the body in .gridster like:

.gridster {
  margin: 0px auto;
  background-image: url(/custom_css/waterdrops/img/greydrops.jpg);
}
3

I threw it in gridster but still does not show the background image

.gridster {
    margin: 0px auto;
    background-image: url(/custom_css/dark1/img/gradient-background-_edited.png);
}

image
image847×209 10.4 KB

4

the only thing that i can imagine why this isnt working is that the filerights are wrong because of the way you copied it.

5

Thanks for you help. Maybe someone else will have an idea

6

did you check the filerights from the png file? because you did it the right way.
rereading i think i can think of something else:

the - sign in the name could cause the trouble.

7

I’m not sure how to check file properties using Hassio.

I tried saving a new picture in the img/ folder with a basic name, “blue.png” but that didn’t work either.

8

i am pretty sure that it is a fileright situation.
the program you used to copy the file probably has given the file other properties then needed.
but i dont know hassio well enough (actually i dont now very much about hassio) to tell you how to set filerights.
it might be wise to open a new topic in the hassio section to ask, how you can change filerights. (after searching the forum, if there isnt such a topic already)

9

I will try that, thanks for your help and suggestions.

I updated hass to the latest version and the background “blue” worked, but then I tried changing it to the “gradient-background-_edited.png” background and it didn’t work. I tried reverting back to “blue” but it doesn’t work either, only that first time after updating.

10

are you tying to change the background from HAdashboard or from hass?
if your talking about dashboard:
when changes dont take effect, but it did after a restart then probably you need to put “dash_force_compile: 1”
in your appdaemon.yaml
or you can have a cashing problem in your browser.

11

Unfortunately that did not work either. I also cleared the cache and tried different browsers on phone and computer.

12

did you restart appdaemon after you changed the appdaemon.yaml?
and did you put “dash_force_compile: 1” on the right place? (in the hadashboard section)

13

Yes I restart appdaemon, hass, and cleared the cache in my browser.

Here’s my appdaemon.yaml

log:
  logfile: /config/appdaemon/appdaemon.log
  errorfile: /config/appdaemon/error.log

appdaemon:
  threads: 10
  app_dir: /config/appdaemon/apps
  plugins:
    HASS:
      type: hass
      ha_url: https://xxxxxxxxx.duckdns.org:8123
      ha_key: secret
hadashboard:
  dash_url: http://192.168.0.196:5050
  dash_dir: /config/appdaemon/dashboards
  dash_password: secrett
  dash_force_compile: 1
  dash_compile_on_start: 1
14

do other changes in the css file take effect?

15

Yes I believe so, when I change the skin the colours and font do change as per the css.

Default Skin

image
image1943×1199 583 KB

Dark1 Skin

image
image1847×1192 518 KB

16

did you find out if the filerights are set correctly?
because i think that can be the only cause.

17

Does anyone have any ideas? Background still not showing up on latest HASS and latest appdaemon.

18

Move these two lines to the body section instead of the body::after section:

background-image: url(/custom_css/dark1/img/gradient-background-_edited.png);
background-size:cover;

That seemed to fix it for me.

19

Can you post your entire dashboard.css?

I tried your suggestion and it still doesn’t work for me.

20

html {
font-size:100%;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
padding:0;
}

body {
margin:0;
background-color: #000;
background-image: url(/custom_css/dark1/img/gradient-background-_edited.png);
background-size:cover;
font-size:12px;
color:#ffffff;
padding:0;
font-family:‘Helvetica Neue’,‘Helvetica’,‘Open Sans’,‘Arial’;
}

body::after
{
background-image: url(/custom_css/dark1/img/gradient-background-_edited.png);
/* background: #000;
background-image:
-webkit-radial-gradient(80% 10%, circle, #4d6776, transparent),
-webkit-radial-gradient(80% 50%, circle, #27282a, transparent),
-webkit-radial-gradient(20% 80%, 40em 40em, #161d23, transparent),
-webkit-radial-gradient(10% 10%, circle, #212d3d, transparent); */
background-size:cover;
content: “”;
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}

b,strong {
font-weight:700;
}

a {
text-decoration:none;
color:inherit;
}

img {
border:0;
-ms-interpolation-mode:bicubic;
vertical-align:middle;
}

img,object {
max-width:100%;
}

iframe {
max-width:100%;
}

table {
border-collapse:collapse;
border-spacing:0;
width:100%;
}

td {
vertical-align:middle;
}

ul,ol {
padding:0;
margin:0;
}

h1, h2, h3, h4, h5, p {
padding:0;
margin:0;
}

h1 {
margin-bottom:6px;
text-align:center;
font-size:100%;
font-weight:200;
}

h2 {
font-size:220%;
font-weight:400;
/ color:#646464;
}

h3 {
font-size:125%;
font-weight:300;
color:#646464;
}

.dashboard_main {
margin: 0px auto;
}

.gridster {
margin: 0px auto;
}

.icon-background {
pointer-events:none;
width:100%!important;
height:100%;
position:absolute;
left:0;
top:0;
opacity:.1;
font-size:1375%;
text-align:center;
margin-top:82px;
}

.list-nostyle {
list-style:none;
}

.gridster ul {
list-style:none;
}

.gs-w {
width:100%;
display:table;
cursor:pointer;
z-index: auto !important;
}

.widget {
padding:0px 0px;
text-align:center;
width:100%;
display:table-cell;
vertical-align:middle;
/*border-radius: 12px; */
background-color: rgba(0, 0, 0, 0.5);
/*background-color: #161d23; */
}

.title
{
color:#646464;
z-index: 1;
/*background-color: rgba(255, 255, 255, 0.2);
margin-top: -5px;
height: 35px;
padding-top: 5px;
padding-bottom: 6px; */

}

.title2
{
z-index: 2;
margin-top: 0;
}

.icon-inactive {
color:#888;
font-size:300%;
top: 54px !important;
}

.icon-active {
font-size:300%;
top: 54px !important;
}

.icon
{
font-size: 300%;
/* top: 56px !important; */
}

#container {
padding-top:0px;
}

.unit, .level {
font-size:120%!important;
vertical-align:baseline!important;
color: #646464 !important;
}

.value
{
color: inherit;
}

.valueunit
{
/*top: 62px !important; */
}

.state_text
{
/* bottom: -3px !important; */
text-transform: capitalize;
}

.levelunit
{
bottom: 0px !important;
}

.secondary-info
{
font-weight: 400 !important;
}

.modalDialog {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 9999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
}

.modalDialogOpen {
opacity:0.95;
pointer-events: auto;
}

.modalDialogClose {
opacity:0;
pointer-events: none;
}

.modalDialog > div {
width: 275px;
position: relative;
margin: 3% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
}

.modalDialogCloseButton {
line-height: 50px;
position: absolute;
right: -25px;
text-align: center;
top: -20px;
width: 50px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
border-radius: 25px;
}

.modalDialogCloseButton:hover { background: #222; }