Unlock a world of possibilities! Login now and discover the exclusive benefits awaiting you.
Hi all,
I've been using a custom theme made by myself based on the focus/card theme since a few months. It's working fine for a client who is on the april 2019 version, but now that I've uploaded it to our own server that has the June 2019 version, it is no longer working correctly.
So what happens? Well, if an app is on the Sense Focus theme and I switch it to the custom theme, it switches for a split second but then returns to a slightly different version of the classis theme layout/CSS wise. The changes in the JSON file do work, but the layout/CSS changes don't. However, if I then press the same custom theme again, the layout works as intended. The issue is that when I publish the app that has the custom theme working (which happens after a 2nd consecutive click on the theme), the published version misses the layout changes again.
The strange thing about this is that it does work when I press the same custom theme two times consecutively. Did anything change in CSS styling? To summarise... it seems that the JSON file does work properly, the issue seems to be with the CSS.
Thanks in advance!
Hi,
I have the same issue with a qv-card custom CSS :
- It was working fine form June 2018 to April 2019
- Since June 2019, my custom styles in CSS (border/shadow/spacing) on cards are inactive
- JSON is working fine
Does the main page styles changed ?
Does the styling become active again if you select the theme twice?
I'm having the same issue, what do you mean about selecting it twice?
Once my app is published I cannot access the document panel where the theme selections can be made.
I'm overlooking something
Please verify that the css theme doesn't clash with the built-in theme.
There should be a fix for the problem in the next versions and for when this happens, but a proper workaround would be to make the css differently so that it doesn't clash with the built-in theme.
In the theme.json the CSS can be referenced as below instead:
"customStyles": [
{
"cssRef": "card.css",
"classRef": "custom-card"
}
],
And in the card.css all occurrences of .qv-card can be replaced with .custom-card instead.