12-30-2018 16:41 - edited 12-31-2018 11:32
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

12-30-2018 16:41 - edited 12-31-2018 11:32
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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?

12-30-2018 16:47
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

12-30-2018 16:47
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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.

12-30-2018 17:23
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

12-30-2018 17:23
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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

12-30-2018 17:38
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

12-30-2018 17:38
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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.

12-31-2018 11:36
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

12-31-2018 11:36
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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?

01-01-2019 10:00
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

01-01-2019 10:00
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post
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!

12-26-2019 23:32
- Mark as New
- Bookmark
- Subscribe
- Permalink
- Report this post

