While this is not possible using the Wordpress Plugin, it is possible if you use the cut and paste Droplet instead (in Manage > Layout > Add-ons > Website Integrations > Droplet).
Simply add a 'tracking ID' and target that ID in your CSS in order for that styling to apply to only that Droplet code. Example code below:
Hi Brittany, I've tried this droplet method and it isn't working.
Edit: Don't worry I have resolved it. I didn't realise that 'tid' is appended to the beginning of the class, regardless of what tracking ID you use. For example, I used tracking ID 'cf-rock' but I had to target 'tid-cf-rock' with my CSS.
Hi, I have a generic booking page style, then I would like to style some individual widgets differently, for example I have this code to for the Booking button
.btn-primary {
background: #E6BA73 !important;
color: white !important;
border-color: #E6BA73 !important;
margin: 0 !important;
} I have given the widget the id nac and tried using
There are two divs on the customer booking page: the 'page' and the 'modal'. The unique identifier from the TID is only applied to the 'page' div. So, to target the 'modal' div, the CSS is a bit more complex. Something like this should work:
Comments
Thank you for your question!
While this is not possible using the Wordpress Plugin, it is possible if you use the cut and paste Droplet instead (in Manage > Layout > Add-ons > Website Integrations > Droplet).
Simply add a 'tracking ID' and target that ID in your CSS in order for that styling to apply to only that Droplet code. Example code below:
.tid-test {font-size: .8em;
color: red;
background-color: blue;
}
I have created a quick demonstration of this here.
I hope this helps and please let us know if you have any follow up questions.
Kind regards,
Brittany
Checkfront Support Team
Edit: Don't worry I have resolved it. I didn't realise that 'tid' is appended to the beginning of the class, regardless of what tracking ID you use. For example, I used tracking ID 'cf-rock' but I had to target 'tid-cf-rock' with my CSS.
I have given the widget the id nac and tried using
but it has no effect?
Thanks for your question!
There are two divs on the customer booking page: the 'page' and the 'modal'. The unique identifier from the TID is only applied to the 'page' div. So, to target the 'modal' div, the CSS is a bit more complex. Something like this should work:
div.tid-test + div.modal #sub_btn { background: #E6BA73 !important; color: white !important; border-color: #E6BA73 !important; margin: 0 !important; }Please note that custom code is not in our typical scope of support so further implementation and maintenance would be up to you.I hope this helps!
Cheers,
Brittany
Technical Support Specialist & Operations Lead
Checkfront | www.checkfront.com/contact | Email: support@checkfront.com