Set up your accountSet up your Orioly account | Suppliers Create a Repeating Daily Event | Suppliers Create an Open Date Event | Suppliers Create a One-time Event | Suppliers Create a coupon | Suppliers Add a payment gateway | Suppliers Add translations for your activities | Suppliers Add a Book Now Button to HTML websites | Suppliers Add a Book Now Button to WordPress websites | Suppliers Add a Book Now Button to Wix websites | Suppliers Add custom CSS to your Book Now Button | Suppliers
Manage your accountManage your departures and activities | Suppliers Manage your bookings | Suppliers Manage your coupons | Suppliers Manage your contacts | Suppliers Manage your company user accounts | Suppliers Manage and generate reports | Suppliers
Add custom CSS to your Book Now Button | Suppliers
This tutorial is meant for those HTML/WordPress 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.
To customize a Booking Now Button, follow the instructions below:
Step 1. Get the standard HTML code for your button.
- Sign in to your Orioly account .
- Access the Widgets & Plugins section .
- Click Generate button.
- Choose the activity for which you would like to generate a Book Now Button.
- Click Copy HTML to clipboard.
Step 2. Open up your .html file (e.g. example.html) for which 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-not-style attribute to each of the buttons you want to add the custom CSS.
Step 4. This step is optional but recommended, and it consists of removing 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 gone over 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.
Now that your Booking Now Button is customized and ready to be used, take a look at How to manage your bookings and make the most of your Orioly application.