Cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 

CSS refuses to load

I have absolutely no idea what the problem is here. I am unable to get the app to load CSS styling in any way - it's as if the stylesheet doesn't even exist.

 

I've just started so there's not a whole lot on the frontend, but here's my index.gui and styles.css at the moment:

 

```

// index.gui

<svg>

  <rect id="background" />

 

  <defs>

    <link rel="stylesheet" href="styles.css" />

  </defs>

</svg>

```

 

```

/* styles.css */

#background {

  width: 100%;

  height: 100%;

  fill: fb-red;

}

```

 

Nothing appears visually and a console.log of the element's `style` property in the js portion of the app produces an empty object. The same happens with text or any other element. I've even tried moving the stylesheet link outside of <defs>, but still no dice. Is there something I'm missing here?

Best Answer
0 Votes
6 REPLIES 6

Ignore the colon after #background, that's a mistake on my part when retyping into the thread. The actual CSS should look like this:

 

#background {

  width: 100%;

  height: 100%;

  fill: fb-red;

}

 

My apologies.

Best Answer
0 Votes

I am using the template generated by fitbit studio.

In my template, the CSS import is defined inside widgets.gui file and not in index.gui.

 

Have you tried a simple template from fitbit studio?

 

I didn't have an issue with the import... but when the CSS syntax is broken the file is not loaded and no error is visible

Best Answer
0 Votes

I'm actually basing this project off of the settings template. I've tried leaving the link in both the original widgets.gui and separately in index.gui and it still doesn't want to work.

Best Answer
0 Votes

Interestingly enough, it looks like when using a template, the CSS that comes with said template works perfectly on the first launch, but after changing anything the CSS is then completely ignored. Even uninstalling the sideloaded app and restoring the CSS to a direct copy+paste of the original fails after that. Is this an issue with FitBit Studio or something?

Best Answer
0 Votes

I have used Fitbit Studio and did not have issues with the CSS... I guess that you have an error in the CSS.

 

Try with the most simple css and build from that.

For example, in the digital watchface example change the background from red to blue and see if you still have issues

 

good luck!

Best Answer
0 Votes

Thanks alot, it helped me!

Regards,

BBBootstrap

Best Answer
0 Votes