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

Seguir

Los widgets de su portal de Internet pueden cambiarse de tamaño y lugar. Cloudbeds no ofrece soporte de desarrollo de Internet, así que por favor comuníquese con su diseñador de páginas web para personalizar la apariencia de su widget. 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).

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