Contact Us

If you still have questions or prefer to get help directly from an agent, please submit a request.
We’ll get back to you as soon as possible.

Please fill out the contact form below and we will reply as soon as possible.

    Italian
    US English (US)
    FR French
    DE German
    ES Spanish
    IT Italian
    JP Japanese
    • Home

    Personalizzazioni di Locator + Pagine tramite CSS

    Questa è una raccolta delle possibili personalizzazioni tramite css

    Written by Sven Pierschalla

    Updated at December 15th, 2022

    Contact Us

    If you still have questions or prefer to get help directly from an agent, please submit a request.
    We’ll get back to you as soon as possible.

    Please fill out the contact form below and we will reply as soon as possible.

    + More

    Table of Contents

    Informazioni

    Alcuni aspetti della personalizzazione non sono disponibili in modo intrinseco nel prodotto Locator + Pagine. Questo articolo mostra come farlo utilizzando gli stili css.

    Si noti che man mano che il prodotto si evolve, alcune delle personalizzazioni seguenti potrebbero diventare funzionalità ufficiali disponibili per la personalizzazione negli attributi del widget. In tal caso, il CSS verrà sostituito da riferimenti ad articoli che spiegano come eseguire questa personalizzazione con il widget.

    Informazioni

    Tieni presente che i seguenti esempi potrebbero entrare in conflitto con il tuo attuale CSS. Servono come esempi puri e potrebbero richiedere aggiustamenti per funzionare nell'HTML del tuo sito web.


    Uberall non garantisce che gli aggiustamenti css sul nostro locator saranno supportati da iterazioni in corso del locator!


    Aggiunta di codice CSS al widget

    Gli stili css devono essere aggiunti al codice html dopo il widget, come qui :



    Modifica dei font

     #store-finder-widget div.ubsf_locations-list-inner *, #store-finder-widget .ubsf_main-page-content-inner *, .ubsf_filter-toggle *,  #store-finder-widget input[type=text].geosuggest__input, .geosuggest__item.ubsf_fixture-item, .ubsf_select-menu-inner *, .ubsf_storefinder-search-box * {
           font-family: YOUR FONT !important;
           color: FONT COLOR !important;
         }

    Rimuovi lo sfondo bianco di un logo come pin

    #store-finder-widget .custom-pin-default{
       background: none
       }
    
    
     #store-finder-widget .custom-pin-highlighted{
       background: none
       }

    Modifica larghezza e altezza della mappa (esempio)

    Per impostazione predefinita, il widget Locator + Pagine utilizza una larghezza massima impostata sulla pagina in cui è implementato. Per fare in modo che il localizzatore utilizzi il 100% della larghezza disponibile dal suo contenitore, aggiungere il seguente attributo al widget: data-showfullwidth="true".

    #store-finder-widget .ubsf_store-finder-column {
    
        height: 700px;
    }

    Utilizzo di un Content List come casella di testo

    Se desideri aggiungere un'altra sezione di tipo "descrizione" al Locatore, potresti voler riutilizzare l'Elenco contenuto persone o l'Elenco contenuto personalizzato per farlo. Per utilizzare il seguente Css, devi assicurarti che l'elenco dei contenuti in questione contenga al massimo 1 elemento.

    Content list personalizzati 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>

    Content list persone 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>
    Elimina


    stile personalizzazioni

    Was this article helpful?

    Yes
    No
    Give feedback about this article

    Articoli recenti

    • Profilo aziendale Google: stati di rivendicazione delle inserzioni
    • Apple Business Connect Insights Report

    Copyright 2025 – uberall.

    Expand