How to refer images on custom themes
According to:
we could modify the look and feel of the Web UI uploading a theme via /jazz/admin?internal#action=com.ibm.team.repository.admin.configureTheming.
So, we created our theme .zip file containing:
- css/login.css
- images/logo.png
and filled the CSS file as:
.jazz-app-LoginWidget .illustration {
background-image: url("/jazz/_theming/resource/images/logo.png");
}
We see our custom CSS theme is loaded but image URL is not...!
It seems other devs had got this issue: https://jazz.net/forum/questions/156217/cannot-get-images-to-work-in-custom-ui-theme/156220. However, we are already using absolute path on our URL.
Any advice?
Thanks in advance.
Accepted answer
Finally it works! :D
We notice network response for '/jazz/_theming/resource/images/logo.png' reports type 'text/plain' instead of 'png', as in case of the default Jazz image (i.e., '/jazz/sprite/jazz-app-LoginWidget?etag=GIlq8YTKp').The problem was the Preview function, which we were using, because it returns an empty document for images request instead of the actual image. Maybe a bug?
So, now we can confirm that:
- relative image path works.
- uploading theme on Jazz application only works even for login page.
- you need a Ctrl + F5 hit after theme activation due to browser cache.
Comments
Maybe a bug?
@SEC Servizi you saved my day, i spent 3 hours trying to preview the theme, activate works for me.
1 vote
2 other answers
Are you trying to replace the background image of the login page? If true, make sure you're making the theming in JTS as the login page comes from it. Also, in my CLM 6.0.3 iFix003 environment, relative path for an image works perfectly. The CSS file that I use has the below content.
.jazz-app-LoginWidget .illustration {
background-image: url("resource/images/logo.png");
}
And here is the result.
Are you trying to replace the background image of the login page?
Yep (apologize, it wasn't clear on our post).
make sure you're making the theming in JTS as the login page comes from it.
Uhm, are you sure on that? Because we never see network requests for /jts/ context root on login.
Anyway, we tried uploading our custom theme on both Jazz and JTS applications, but images did not show up in any case. :(
Also, in my CLM 6.0.3 iFix003 environment, relative path for an image works perfectly.
In fact, even on RTC v4.0.7 relative path seems to be correctly resolved if we see at the network request and response.
We notice network response for '/jazz/_theming/resource/images/logo.png' reports type 'text/plain' instead of 'png', as in case of the default Jazz image (i.e., '/jazz/sprite/jazz-app-LoginWidget?etag=GIlq8YTKp').
Any advice?
Thanks in advance.