Linked image in extra css using theme file

Community Usage questions
1

Hi everyone !

I am trying to create an extra css class in a theme file which is linking an image from a folder.
It's working properly when I'm working directly on the session but not when I put it in a theme file.

This is what I have in my theme file:

.my_image_class { 
background-image: url("images/my_image_class.png");
}

I'm also getting the following error when I try to make it work:

Screenshot 2021-10-26 at 12.59.11
Screenshot 2021-10-26 at 12.59.11736×104 4.61 KB

How can I fix this issue ?

Swayrian

2

That's a bug, relative file urls are not properly resolved in themes, it's fixed in v1.11.0 (on its way).

1 Like
3

Hi there,

Just for info for those searching how to implement:
I have it working using this in the theme file

.rstBtn.button-container {
    border-radius: 3px;
    --color-widget: #dfebf5;
    color: #f0e91a;
    background: url(/Images/rest.png) no-repeat;
    background-position: top center;
}

Took me a while to work out that you need to have the images directory in the themes folder
I can't get it to work with a full path to somewhere else on the computer but that would probably be cleaner as I have all my other image files saved with the .json and custom module.

4

Images can be located in the session directory as well. The requested file paths are resolved in this order:

  • session path
  • theme path
  • absolute path (or remote-root if the server's option is set)
5

Hi,

I can't figure out how or what to write to get an image using and absolute path. I'm on a mac.
This are the options I have set:
Widget type: image

Value: data:image/Start of my path/...

6

There should be no data:image before the path.