Hi,
I saw on the " CSS tips and tricks (Advanced)" on how to change the background color behind header but I didn’t find on how to change the background color behind the booking instructions…
What the CSS code for that?
Thank you.
I am not sure what theme you are using, but you can try using:
.content {background-color:#000;}
That should change the background of all of the text within the booking process. If you just want the booking form you can try this:
.bookingForm {background-color:#000;}
Hi Carl!
I am using Softcell theme, it didn’t work for what I was looking for…
I am trying to change this silver background to white, I can do for the header but for the Booking Instructions I can’t…
Thanks for clarifying that. This should work for you:
.instructions{background-color:#fff!important;}
If not let me know!
1 Like
It did!!!
Wow, thank you have been racking my brain on that for so long.
1 Like
Do you know about the Flat-minimal theme?
I was trying to change that gray area color, the actual background but none work…
Thank you!!
This one is a bit tricky. You can try this:
html{background-color:#fff;}
To remove the box shadow:
.content{box-shadow:none;}
Carl, do you know how I could center the text of the Booking Instructions (body) on the Flat-Minimal theme? I have tried many codes but didn’t work
CSS is some powerful stuff, but it can get a bit crazy to navigate. If you haven’t already I would suggest taking a look at some resources on Code Academy, or this video Booking Grid Customization
This code may help you out:
.instructions p { text-align: center; max-width: 100%; }
That essentially is pulling out the paragraph text within the instructions to center it. Adding the max-width ensures it covers 100% of the space so it is the exact center.
Hi Carl! I was trying to check the link you sent but it’s not working anymore… do you know where I could find that video of Ben explaining how to inspect the page to find how to customize how you want with the CSS? was really helpful! thank you Booking Grid Customization
Hi @danielrosenbay since we are moving toward the new booking experience the old resources for CSS have been taken down. To inspect an element essentially you right click or command click and choose inspect. From there you can hunt for the CSS class or ID you are needing to modify. Is there something specific you are looking to adjust (with the exception of the text that cannot be translated at this time)?
Hi @Ben ! thank you again for the reply, at the moment the top priorities were the text, we really like customizing our booking pages to match the brand of our clients even though we don’t understand a lot of coding haha! We will be looking forward to the new translations and options to modify the text