How to start with Orioly?

Add Custom CSS to your “Book Now” button

This tutorial is meant for those users who are looking to customize their Book Now buttons even more than the text, text-color and background-color changes that are available within the Orioly application.

Custom CSS for HTML/WordPress based websites

Step 1. Copy the HTML code for your button by navigation to the Activities section on your account and clicking on the Edit button on the activity you wish to get the HTML code for. Once you have done that navigate to the 4th step labeled Book Now and click on the Copy HTML to Clipboard button.

Step 2. Open up your .html file (e.g. example.html) where you want to add the Book Now button and paste the previously copied button code into it.


Step 3. To remove the predefined styles of the Book Now button you need to add the data-button-do-no-style attribute to each of the buttons you want to add the custom CSS.


Step 4. This step is optional but recommended, and it is to remove the inline CSS from the button code so you can add those styles within your .css file ( e.g. example.css).


Step 5. Once you have done all the previous steps you can move to your .css file and add your custom parameters for your Book Now buttons.

You are done. Your Book Now buttons will now have your custom CSS which will help you match the buttons to the design of your website.




Was this article helpful?

Related Articles

Orioly referal tracker