How to customize the frontend of the reservation page? There is in the ticket linked CSS- codes but there is not explained where to insert the code. I used first CSS snippet and it broke the whole site. I found the code of the Amelia- plugin, but I am uncertain should I insert it there and if yes to what location.
Also is there possibility to reduce the text fields in the frontend? I will use the describtion in the page itself, dont need in the calendar widget. Also don't need the "capacity" nor the name of the employer.
Also, I have only 2 fonts available from where to choose from. Is there a way to get more fonts?
There's one comment which is not visible to you in that ticket. The customer simply shared the code, but there's further explanation from me below it:
.amelia-app-booking #am-service-booking .am-service {
background: transparent !important;
padding-top: 70px !important;
}
.amelia-app-booking div, .am-modal.am-in-body div, div.am-service > div.am-service-info > div > div:nth-child(2) > div > div > span {
color: white !important;
}
div.am-service-gallery {
display: none !important;
}
And the form will look like this:
However, the next steps in the form are rolling over this, and making that transparent too will reveal some previous steps, like the "Continue" button. Unfortunately, that would require some significant styling, and unfortunately custom work like that would take a lot of time, so I can't help you much with that.
The colored 250px segment you're referring to is there for Service gallery, so if you have some images in that gallery, they will appear in there.
Our development team is working on new customization feature, with which you'll be able to have more control of how the form looks like on front-end.
All other comments are public, so you can use it freely. To add custom CSS to front-end, please take a look at this thread.
If you don't need the description in Amelia, simply don't insert it.
Capacity and employee can be hidden with this CSS:
div.am-service > div.am-service-info > div > div:nth-child(1) > div:nth-child(4) {
display: none !important;
}
div.am-service-info > div > div:nth-child(2) > div {
display: none !important;
}
div.am-confirm-booking-data.el-row > div:nth-child(1) > div > div:nth-child(1) {
display: none !important;
}
Changing the font can also be achieved only with Custom CSS. You can use this CSS rule on the page where you will overwrite font from our plugin.
Thank you for the answer. I managed to take out the colored segment and make the background transparent.
However, even if I inserted the css-code for removing the extra texts, nothing happened in the frontend. I used Simple Custom CSS- plugin for inserting the code. Here is the page: https://ikioleva.fi/syntymakartta/ Actually, I would need only the calendar without all the texts and elements. Would appreciate to have this kind of code.
I found the problem from the code and it works. However, would like to also the rest of the elements. Please see the attached image. Specially the elements marked by red, but also if possible the element marked by green.
I have the exact same question as in this ticket: https://tmsplugins.ticksy.com//ticket/2457172/
How to customize the frontend of the reservation page? There is in the ticket linked CSS- codes but there is not explained where to insert the code. I used first CSS snippet and it broke the whole site. I found the code of the Amelia- plugin, but I am uncertain should I insert it there and if yes to what location.
Also is there possibility to reduce the text fields in the frontend? I will use the describtion in the page itself, dont need in the calendar widget. Also don't need the "capacity" nor the name of the employer.
Also, I have only 2 fonts available from where to choose from. Is there a way to get more fonts?
Hello Martin
Thank you for your purchase.
There's one comment which is not visible to you in that ticket. The customer simply shared the code, but there's further explanation from me below it:
.amelia-app-booking #am-service-booking .am-service { background: transparent !important; padding-top: 70px !important; } .amelia-app-booking div, .am-modal.am-in-body div, div.am-service > div.am-service-info > div > div:nth-child(2) > div > div > span { color: white !important; } div.am-service-gallery { display: none !important; }And the form will look like this:
However, the next steps in the form are rolling over this, and making that transparent too will reveal some previous steps, like the "Continue" button. Unfortunately, that would require some significant styling, and unfortunately custom work like that would take a lot of time, so I can't help you much with that.
The colored 250px segment you're referring to is there for Service gallery, so if you have some images in that gallery, they will appear in there.
Our development team is working on new customization feature, with which you'll be able to have more control of how the form looks like on front-end.
All other comments are public, so you can use it freely. To add custom CSS to front-end, please take a look at this thread.
If you don't need the description in Amelia, simply don't insert it.
Capacity and employee can be hidden with this CSS:
div.am-service > div.am-service-info > div > div:nth-child(1) > div:nth-child(4) { display: none !important; } div.am-service-info > div > div:nth-child(2) > div { display: none !important; } div.am-confirm-booking-data.el-row > div:nth-child(1) > div > div:nth-child(1) { display: none !important; }Changing the font can also be achieved only with Custom CSS. You can use this CSS rule on the page where you will overwrite font from our plugin.
.amelia-app-booking input[type="text"], .am-modal.am-in-body input[type="text"], .amelia-app-booking input[type="email"], .am-modal.am-in-body input[type="email"], .amelia-app-booking input[type="tel"], .am-modal.am-in-body input[type="tel"], .amelia-app-booking input[type="url"], .am-modal.am-in-body input[type="url"], .amelia-app-booking textarea, .am-modal.am-in-body textarea, .amelia-app-booking select, .am-modal.am-in-body select, .amelia-app-booking .form-control, .am-modal.am-in-body .form-control, .amelia-app-booking .am-stripe-card, .am-modal.am-in-body .am-stripe-card, .amelia-app-booking h1, .am-modal.am-in-body h1, .amelia-app-booking h2, .am-modal.am-in-body h2, .amelia-app-booking h3, .am-modal.am-in-body h3, .amelia-app-booking h4, .am-modal.am-in-body h4, .amelia-app-booking p, .am-modal.am-in-body p, .amelia-app-booking span, .am-modal.am-in-body span, .amelia-app-booking div, .am-modal.am-in-body div, .amelia-app-booking section, .am-modal.am-in-body section, .amelia-app-booking ul, .am-modal.am-in-body ul, .amelia-app-booking li, .am-modal.am-in-body li, .amelia-app-booking a, .am-modal.am-in-body a {font-family:fantasy !important;}
We insert font fantasy just for example, but you will replace it with the font that you need.
Best regards.
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables
Thank you for the answer.
I managed to take out the colored segment and make the background transparent.
However, even if I inserted the css-code for removing the extra texts, nothing happened in the frontend. I used Simple Custom CSS- plugin for inserting the code.
Here is the page: https://ikioleva.fi/syntymakartta/
Actually, I would need only the calendar without all the texts and elements. Would appreciate to have this kind of code.
I found the problem from the code and it works. However, would like to also the rest of the elements. Please see the attached image. Specially the elements marked by red, but also if possible the element marked by green.
Hello again Martin
When I check your website I can see this:
So, it looks like you were able to resolve this over the weekend?
Kind Regards,
Aleksandar Vuković
[email protected]
Rate my support
wpDataTables: FAQ | Facebook | Twitter | Instagram | Front-end and back-end demo | Docs
Amelia: FAQ | Facebook | Twitter | Instagram | Amelia demo sites | Docs | Discord Community
You can try wpDataTables add-ons before purchasing on these sandbox sites:
Powerful Filters | Gravity Forms Integration for wpDataTables | Formidable Forms Integration for wpDataTables | Master-Detail Tables