Personalizaciones de Locator + Pages mediante CSS
Esta es una colección de las personalizaciones posibles usando css
Algunos aspectos de la personalización no están disponibles de forma nativa en el producto Locator + Pages. Este artículo muestra cómo hacerlo utilizando estilos CSS.
Ten en cuenta que a medida que el producto evoluciona, algunas de las personalizaciones siguientes podrían convertirse en funciones oficiales disponibles para personalizar en los atributos del widget. Si es así, el CSS será reemplazado por referencias a artículos que expliquen cómo realizar esta personalización con el widget.
Información
Por favor, ten en cuenta que los siguientes ejemplos podrían entrar en conflicto con tu CSS actual. Sirven como ejemplos puros y podrían necesitar ajustes para funcionar en el HTML de tu sitio web.
¡Uberall no garantiza que los ajustes CSS en nuestro localizador serán soportados por iteraciones futuras del localizador!
Añadir código CSS al widget
Los estilos CSS deben añadirse al código HTML después del widget, como aquí:
Cambiar fuentes
Ejemplo
#store-finder-widget * {
font-family: 'Times New Roman', Times, serif !important;
color: red !important;
}
Eliminar el fondo blanco de un logo como marcador
#store-finder-widget .ubsf_custom-pin-default{
background: none
}
#store-finder-widget .ubsf_custom-pin-highlighted{
background: none
}
Alinear texto
Ejemplos:
yourElementHere {
text-align: center;
}
yourElementHere {
text-align: left;
}
yourElementHere {
text-align: right;
}
yourElementHere {
text-align: justify;
}
Resultado final:
#store-finder-widget .ubsf_location-page .ubsf_location-page-info-wrapper .custom-content-lis {
text-align: left;
}
Cambiar ancho y alto del mapa (ejemplo)
class="article-insert-fragment inser-answer-1313060">Por defecto, el widget Locator & Pages utiliza un ancho máximo establecido en la página i...
By default, the Locator & Pages widget uses a set maximum width on the page it's implemented on. To make the the Locator use 100% of the width available to it from its enclosing container, add the following data-attribute to the widget: data-showfullwidth="true"
#store-finder-widget .ubsf_store-finder-column {
height: 700px;
}
Usar una lista de contenido como cuadro de texto
Si quieres añadir otra sección de tipo «descripción» al Locator, puedes reutilizar la lista de contenido de Personas o la lista de contenido personalizado para hacerlo. Para utilizar el siguiente CSS, debes asegurarte de que la lista de contenido en cuestión tenga como máximo 1 elemento.
CSS de lista de contenido personalizado
<style>
.ubsf_content-list-item.ubsf_customitems-list-item.ubsf_has-photo, .ubsf_content-list-item.ubsf_customitems-list-item{width:unset !important; flex:auto !important;}
.ubsf_content-list-item.ubsf_customitems-list-item.ubsf_has-photo > .description.ubsf_content-list-item-description, .ubsf_content-list-item.ubsf_customitems-list-item > .description.ubsf_content-list-item-description{max-height: unset !important;}
</style>
CSS de lista de contenido de Personas
<style>
.ubsf_content-list-item.ubsf_person-item.ubsf_has-photo > .description.ubsf_content-list-item-description, .ubsf_content-list-item.ubsf_person-item > .description.ubsf_content-list-item-description{max-height: unset !important;}
</style>