Anpassungen des Locator + Pages via CSS
Das ist eine Sammlung der möglichen Anpassungen mit CSS
Einige Aspekte der Anpassung sind im Locator + Pages-Produkt nicht nativ verfügbar. Dieser Artikel zeigt dir, wie du das mit CSS-Stilen umsetzt.
Beachte, dass mit der Weiterentwicklung des Produkts einige der folgenden Anpassungen zu offiziellen Funktionen werden könnten, die in den Widget-Attributen verfügbar sind. In diesem Fall wird das CSS durch Verweise auf Artikel ersetzt, die erklären, wie du diese Anpassung mit dem Widget durchführst.
Info
Bitte beachte, dass die folgenden Beispiele mit deinem aktuellen CSS kollidieren könnten. Sie dienen als reine Beispiele und könnten Anpassungen benötigen, um in deinem Website-HTML zu funktionieren.
Uberall garantiert nicht, dass CSS-Anpassungen an unserem Locator durch laufende Locator-Iterationen unterstützt werden!
CSS-Code zum Widget hinzufügen
Die CSS-Stile müssen nach dem Widget in den HTML-Code eingefügt werden, wie hier:
Schriftarten ändern
Beispiel
#store-finder-widget * {
font-family: 'Times New Roman', Times, serif !important;
color: red !important;
}
Weißen Hintergrund eines Logos als Pin entfernen
#store-finder-widget .ubsf_custom-pin-default{
background: none
}
#store-finder-widget .ubsf_custom-pin-highlighted{
background: none
}
Text ausrichten
Beispiele:
yourElementHere {
text-align: center;
}
yourElementHere {
text-align: left;
}
yourElementHere {
text-align: right;
}
yourElementHere {
text-align: justify;
}
Endergebnis:
#store-finder-widget .ubsf_location-page .ubsf_location-page-info-wrapper .custom-content-lis {
text-align: left;
}
Breite und Höhe der Karte ändern (Beispiel)
class="article-insert-fragment inser-answer-1313060">Standardmäßig verwendet das Locator & Pages-Widget eine festgelegte maximale Breite auf der Seite 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;
}
Content List als Textfeld nutzen
Wenn du einen weiteren „Beschreibungs"-Bereich zum Locator hinzufügen möchtest, kannst du entweder die People Content List oder die Custom Content List dafür nutzen. Um das folgende CSS zu verwenden, musst du sicherstellen, dass die betroffene Content List maximal 1 Element enthält.
Custom Content List CSS
<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>
People Content List CSS
<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>