Menu

Using CSS to Customize the Booking Page (Advanced) | Checkfront’s 2 Minute Check-Ups

0 Comment


Hi, my name is Charles with Checkfront and this is a quick video on how you can use CSS in order to change certain elements on the booking page. What I mean by that, is we’ll see that many items here on the booking page or sections such as ‘New Booking’, the buttons, the buttons here, the header, pricing, and text, are all considered elements on a webpage and using CSS we can trigger certain those in order to change what they look like in certain aspects. So for example, if we want to change all of these buttons here, availibility, to red, we can do so by right-clicking and finding it’s selector by clicking the ‘Inspect’. Once we’ve opened this, we’re actually going to get the details here of how to actually locate the details of that item. So class and the class that it actually has. Now, once we have those details, we can go into the back end of the site. Click on ‘Manage’, ‘Layout’, ‘Booking’, ‘CSS Editor’, and add those details here. Now, in my case I have some details already written out, and that’s quite easy. So the ‘.’ stands for class, one of the class words, and then the details that I’m going to change. I’m going to change the background to red, and the height to 80. Give this a quick save. And then reload the page. And we’ll see that the buttons have a height of 80, and they are red. And we can change other things such as the colour of the text, and other elements such as the width, or other details. So definitely, one of the best resources is to go w3schools.com, which is a website entitled to help people with CSS questions and they have many examples, of what you can change and what you can manipulate with CSS. I hope the video was helpful, if you guys have any other questions, feel free to contact our support team, and we’ll be more than happy to assist. Thank you, bye for now.

Tags: , , , , , , , , , ,

Leave a Reply

Your email address will not be published. Required fields are marked *