Website widgets can be customized on the website where they are placed. This article provides some CSS code that might help you specifically with floating widgets.
For further information on Cloudbeds PMS widgets, please visit this article: Cloudbeds Booking Engine website widgets.
These codes are given for reference and may not work for all websites. They might need to be customized according to your website's code. Please consult with your web developer for any additional assistance. Please note that Cloudbeds doesn't provide support for personal website development.
Per default, the floating widget is positioned at the top of your website. To move it to the bottom of your website, add these styles between <body> and </body> tags (in your website).
<style>
.CloudBedsWidget.floatWrapper {
padding-bottom: 0;
}
.CloudBedsWidget .float_bg2 {
position: fixed !important;
top:inherit;
bottom: 0;
border-bottom: none;
}
</style>To continue customizing your widgets, please ask for assistance from an experienced web page developer.
By customizing this code, you can change the look of the floating widget. Add this CSS to the source code of your website where the widget is placed.
<style>
.float_bg2 {
background: #fff;
width: 100%;
z-index: 50001;
left: 0;
top: 0;
display: block;
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
font-weight: 600;
border: none;
border-bottom: 2px solid #fff;
box-shadow: 0 3px 5px #fff;
}
</style>With this code, you can change the look of the «Search» button on the floating widget.
<style>
.CloudBedsWidget .widgetHotelsForm input[type=submit],.CloudBedsWidget .widgetHotelsForm button[type=submit] {
border-radius: 0 !important;
background: #d2a917;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
font-weight: 600;
color: #fff;
padding: 4px;
min-width: 100px;
margin-top: -5px;
text-shadow: none;
white-space: normal;
cursor: pointer;
}
</style> If you need to modify the displayed text or continue customizing your widgets, please ask for assistance from an experienced web page developer.
Transitioning to Booking Engine Plus! The Cloudbeds Booking Engine has been reimagined to a new upgraded version called the Cloudbeds Booking Engine Plus. We now offer customization services for this new version. Would you like to learn more? Please check out these articles:
Comments
Please include information on how to change the text displayed by the floating widget
The css to change the search button is not working at all, please provide the correct code.
Also include information on how to change the text displayed
Hello, canales!
Thank you so much for sharing your feedback!
We will review the indicated content and code to apply the corresponding adjustments. If you need further assistance, please do not hesitate to contact our Support Team.
Regards!
Please sign in to leave a comment.