Hello Franziska,

Thank you for reaching out to us.

Please try the following CSS and change the "red" part to the color that you want:

.amelia-v2-booking #amelia-container .am-ec {
    box-shadow: rgb(209, 213, 215) 0px 2px 2px -1px, rgba(209, 213, 215, 0.3) 0px 0px 11px, red 8px 0px 0px inset !important;
}

Looking forward to your reply.

Hello Franziska,

Please add the following CSS as well and let me know if it works or not.

Looking forward to your reply.

Hi Franziska,

Uros is on vacation at the moment, so i will take over this ticket until he is back.

Yes, it seems he was sending you some CSS, but we can't find it right now.

We will check this with him if we are unable to solve it in the meantime, but we should be able to help you.

I am just looking at your screenshots;

i understood that you changed the color from blue to green on this "edge" of the element;

but now when you highlighted it, it seems to me that you are again pointing to the "green border",

i am not sure which side bar are you referring to,

could you try to elaborate a bit more on which element you need to change?

When I look at the image, I can just see this "gray area" as a possible side element that was not there when compared to your previous screenshot?

And if you could please send us an URL of the page where this is happening, so we can take a closer look at the HTML and CSS there, if that is OK?

If you send any sensitive data, if you don't wish this URL to be publically visible, just send it as a PRIVATE reply, for safety, then only we can see it.

Thanks.

Hi Franziska,

thank you for the Video, i think i understand now.

Basically, you like how the color changes to blue, but you needed it just for that 'initial Events view' before it goes to the Event Details,

but in the Event Details you want us to remove this new way how the green bar appears over that text, right?

Can you please try adding this CSS, but make sure to add it after the previous lines,

because in CSS, the 'last line' will override the previous ones, if that makes sense :

.amelia-v2-booking #amelia-container .am-ec.am-no-border {
    padding: 0;
    box-shadow: none !important;
}

I tried adding all this CSS on our Demo site, and it seems to work,

it just sets that blue box shadow on the initial view from Events, but in the Event Details it hides it.

Let us know if that works.

Hi Franziska,

Yes, all this started happening after you initially added the Uros's CSS,

then the "box-shadow" property got applied to the elements,

but with that CSS selector, the box shadow is applied to both initial Events and the "detail view" ,

but in the detail view, of course, it looks ugly like that;

we don't currently have a way to add box shadow, but to somehow "separate" it to look nice;

At this time, I think this is the best solution to eliminate box shadow just inside the Event Detail View.

I am happy that it works as intended.

In the future, we will do our best to add more customization options for use cases like this.

If you have any suggestion what you need us to add,

Please feel free to search through our feature suggestion page, 

 to see if someone may be already suggested this feature. If you can't see it, feel free to add your suggestion there, and as more people vote, the feature will move higher on the priority list.

You can certainly follow our changeLog page if you'd like, where we state any changes/new features/bug fixes during updates;

and our newsletter, so you're informed about new features, bug fixes, freebies, etc.

Hi Roshan,

no problem, we will explain what was done on this ticket, and then you can apply the CSS and modify it as needed for your use case.

 For the initial Event List view,

this is the CSS,  just change the "red" part to the color that you want:

.amelia-v2-booking #amelia-container .am-ec {
    box-shadow: rgb(209, 213, 215) 0px 2px 2px -1px, rgba(209, 213, 215, 0.3) 0px 0px 11px, red 8px 0px 0px inset !important;
}

Or, if you want to completely remove the box shadow just change the entire property to "none", with an !important clause, like this :

.amelia-v2-booking #amelia-container .am-ec {   
 box-shadow: none !important;
}

And for the next 'more details for the Event' screen, add this to remove the box shadow there, as

.amelia-v2-booking #amelia-container .am-ec.am-no-border {
    padding: 0;
    box-shadow: none !important;
}

Custom code needs to be applied to the page where the booking form is. Depending on what you're using (Gutenberg blocks, or some page builder), adding the CSS or JS can be done in a few different ways. 

If you need help with adding custom CSS to the page, please take a look at this article.

I hope that helps.