I'm just getting set up for the first time with a basic license, and I have limited technical know-how, but I am not trying to do anything crazy...
I've set some customizations in your menu (text colors etc) and I'm finding that the CSS doesn't render, after using the shortcode for the booking widget. From the inspector (what little I understand) I think I can see that the CSS is there but it's being overridden/superseded by other classes.
I have researched your articles and found some notes about the customized CSS, and already done the recommended reset in the customization page. I confirmed the color values being passed did change back to the default (via in the inspector) but even with cleared cache etc. the default values are not rendering either.
So first thought is that maybe this is not compatible with the boldgrid plugin (central to my theme), or with the new (to me) "block editing" in WP. Can you confirm or tell me otherwise?
Second thought is ... ha I don't have any other ideas.
There is a warning in the console, but I know nothing of these things... I think it's just saying that the CSS is not able to do something to overcome the template CSS but that already seems obvious, and beyond that I'm really grasping.
Uncaught TypeError: Cannot read property 'replaceChild' of null at XMLHttpRequest.s.onload (amelia-booking-booking-1ed4eab4543f1dba662e.js:1)
Screenshots:
Console error
cursor-highlighted text to prove it's actually there - white on white, showing styles overridden in the inspector
I hope you can offer some insight. Will please find all the gory details I can think of below, and thanks in advance.
Kind regards,
Alicia
===============================
System details:
OSX 10.15.7
Chrome version 88.0.4324.182 (Official Build) (x86_64)
Could you please tell me what are the colors you set on the Amelia -> Customize page? Or you have there the default Amelia colors? If the default colors are applied, it is probably a CSS conflict with your theme or something else there, but this should be solvable with adding some custom CSS directly to the page where you have Amelia, we will help out with this just please confirm first that you have the default colors on the Customize page for Amelia (send a screenshot of the setup/customize page).
Don't worry about this error:
Uncaught TypeError: Cannot read property 'replaceChild' of null
at XMLHttpRequest.s.onload (amelia-booking-booking-1ed4eab4543f1dba662e.js:1)
it can show up in the console log, but it doesn't affect the plugin's nor the website's functionality. Our developers will try to remove it from the future updates of Amelia.
This is either a conflict with your theme's CSS or some custom CSS you added is causing the issue. You can try adding this custom CSS to the page for changing the text color in Amelia:
I have added your CSS, and I do see a change that is forcing the background colors, and therefore a change in the theme's default text color (light to dark), but it's still not catching the expected text colors from Amelia. (Using custom colors now, rather than the defaults.)
In my screenshots you'll see how the amelia CSS text colors are still being overridden. Also including one to show the definition that's winning is coming from the root <html> tag. "Light-text" / "dark-text" defaults are being used instead of amelia CSS values.
The CSS class you gave me, does that privilege everything in the customization tool, or just parts of it?
Apologies for replying a bit later, we don't work on weekends.
Amelia's CSS is overridden either by your theme's CSS or another plugin's, or some custom CSS you added to the theme.
You can change the color for the text in the custom CSS that you applied to the color that you want (to get the color set in the customize section as well, if you don't want the black), so for example:
These CSS that I send are for some elements on the page for which I've seen there is a conflict and they are not properly seen, there isn't another way of changing the overridden colors, unfortunately.
I understand better now what the CSS you shared is doing. I try to fiddle with this and hopefully will find a way to get it where I want without worrying too much about how it will maintain. Many thanks for your responsiveness.
Hi Amelia Team,
I'm just getting set up for the first time with a basic license, and I have limited technical know-how, but I am not trying to do anything crazy...
I've set some customizations in your menu (text colors etc) and I'm finding that the CSS doesn't render, after using the shortcode for the booking widget. From the inspector (what little I understand) I think I can see that the CSS is there but it's being overridden/superseded by other classes.
I have researched your articles and found some notes about the customized CSS, and already done the recommended reset in the customization page. I confirmed the color values being passed did change back to the default (via in the inspector) but even with cleared cache etc. the default values are not rendering either.
So first thought is that maybe this is not compatible with the boldgrid plugin (central to my theme), or with the new (to me) "block editing" in WP. Can you confirm or tell me otherwise?
Second thought is ... ha I don't have any other ideas.
There is a warning in the console, but I know nothing of these things... I think it's just saying that the CSS is not able to do something to overcome the template CSS but that already seems obvious, and beyond that I'm really grasping.
at XMLHttpRequest.s.onload (amelia-booking-booking-1ed4eab4543f1dba662e.js:1)
Screenshots:
I hope you can offer some insight. Will please find all the gory details I can think of below, and thanks in advance.
Kind regards,
Alicia
===============================
System details:
Plugins:
Hi Alicia,
Thank you for your purchase.
Could you please tell me what are the colors you set on the Amelia -> Customize page? Or you have there the default Amelia colors? If the default colors are applied, it is probably a CSS conflict with your theme or something else there, but this should be solvable with adding some custom CSS directly to the page where you have Amelia, we will help out with this just please confirm first that you have the default colors on the Customize page for Amelia (send a screenshot of the setup/customize page).
Don't worry about this error:
it can show up in the console log, but it doesn't affect the plugin's nor the website's functionality. Our developers will try to remove it from the future updates of Amelia.
Hi Marija,
I am using the default colors currently, but my custom colors had the same result. Screenshot attached.
Thanks in advance,
Alicia
Hi Alicia,
This is either a conflict with your theme's CSS or some custom CSS you added is causing the issue. You can try adding this custom CSS to the page for changing the text color in Amelia:
.amelia-app-booking p, .el-form-item__label {color:initial !important;}You can add it as HTML if you don't have a custom CSS option on the page:
<style> .amelia-app-booking p, .el-form-item__label {color:initial !important;} </style>Let me know if this helped!
Hi Marija,
I have added your CSS, and I do see a change that is forcing the background colors, and therefore a change in the theme's default text color (light to dark), but it's still not catching the expected text colors from Amelia. (Using custom colors now, rather than the defaults.)
In my screenshots you'll see how the amelia CSS text colors are still being overridden. Also including one to show the definition that's winning is coming from the root <html> tag. "Light-text" / "dark-text" defaults are being used instead of amelia CSS values.
The CSS class you gave me, does that privilege everything in the customization tool, or just parts of it?
Thank you again,
Alicia
Hi Alicia,
Apologies for replying a bit later, we don't work on weekends.
Amelia's CSS is overridden either by your theme's CSS or another plugin's, or some custom CSS you added to the theme.
You can change the color for the text in the custom CSS that you applied to the color that you want (to get the color set in the customize section as well, if you don't want the black), so for example:
.amelia-app-booking p, .amelia-app-booking .el-form-item__label {color:red !important;}I added the amelia selector to .el-form-item__label as well, so it applies to Amelia only.
For the buttons, you can try adding this CSS:
#am-back-button, #am-continue-button, {background-color: initial !important;}
.el-button.el-button--default {color:initial !important;}
These CSS that I send are for some elements on the page for which I've seen there is a conflict and they are not properly seen, there isn't another way of changing the overridden colors, unfortunately.
Thanks Marija,
I understand better now what the CSS you shared is doing. I try to fiddle with this and hopefully will find a way to get it where I want without worrying too much about how it will maintain. Many thanks for your responsiveness.
Best wishes,
Alicia
You are welcome, Alicia.
Glad to see that, if you have any questions or issues with this let me know and I will gladly help out.
If you have any other questions or concerns feel free to open a new ticket and we will gladly help out.