Customize floating widget

Website widgets can be customized on the website they are placed. This article provides some CSS code that might help you specifically with floating widget.

For further information on myfrontdesk widgets please visit this article: Mybookings Website Widgets

This code is given for reference and may not work for all websites. It might need to be customized according to your website code. Please consult with your web developer for any additional assistance. Please note that Cloudbeds doesn't provide support for personal website development"

Change the position of the widget to bottom

<style>
.CloudBedsWidget.floatWrapper {
padding-bottom: 0;
}
.CloudBedsWidget .float_bg2 {
position: fixed !important;
top:inherit;
bottom: 0;
border-bottom: none;
}
</style>

Per default floating widget is positioned on the top of your website. To move it on the bottom of your website add these styles between <body> and </body> tags (in your website).

Customize the look of the floating widget

By customizing this code you can change the look of floating widget. Add this CSS to the source code of your website where 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 "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>