Cómo personalizar el widget flotante (tope de la página)

Seguir

Los widgets de su portal de Internet pueden personalizarse dentro de la página en la que estén colocados. Este artículo presenta varios códigos en CSS para modificar el widget flotante (o el que se integra en el tope de su página web).

Para obtener más información sobre los widgets de myfrontdesk, consulte el siguiente artículo: Widgets de mybookings para portales de Internet.

Este código se le proporciona como referencia y puede que no funcione para todos los portales de Internet. Es posible que este deba personalizarse de acuerdo con el código de su sitio web, por lo que le recomendamos consultar con su desarrollador web para obtener asistencia adicional. Tome en cuenta que Cloudbeds no brinda a sus clientes soporte adicional para el desarrollo de sus portales de Internet.

Cómo cambiar el widget al pie de página

El widget flotante se integra en la parte superior o tope de su página web. Si desea moverlo a la sección inferior de su página web, deberá agregar estos códigos entre las etiquetas (o tags) de <body> y </body> (de su portal de Internet).

<style>
.CloudBedsWidget.floatWrapper {
padding-bottom: 0;
}
.CloudBedsWidget .float_bg2 {
position: fixed !important;
top:inherit;
bottom: 0;
border-bottom: none;
}
</style>
Cómo personalizar la apariencia del widget flotante

La personalización de este código permite cambiar la apariencia de su widget flotante. Agregue este código de CSS al código fuente de su portal de Internet, donde se integrará el widget.

<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>

Este código le permitirá cambiar la apariencia de la barra de «Buscar» en el widget flotante.

<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> 

Para continuar modificando sus widgets, solicite la asistencia de un desarrollador de páginas web con experiencia.

Have more questions? Enviar una solicitud

Comentarios

Tecnología de Zendesk