Vai al contenuto principale

Come personalizzare Regiondo Ticketshop o Booking Widget con Custom CSS?

Kay Endörfer
  • Aggiornato
Nota
Calendar Widget non può essere personalizzato tramite Regiondo CSS poiché viene caricato come <div>.
Il fornitore può personalizzarlo all'interno del suo codice sorgente personale all'interno del tag <style>.
 

Personalizzazione tramite Shop Editor

Regiondo Ticketshop o Booking Widget è facilmente personalizzabile tramite lo Shop Editor, 

È possibile effettuare ulteriori personalizzazioni modificando il colore di elementi specifici, utilizzando vari caratteri, nascondendo elementi o inserendo icone. Questo può essere ottenuto utilizzando Custom CSS.

Personalizzazione tramite Custom CSS

Nota
È richiesta una conoscenza di base di CSS. Se non ti senti sicuro nel seguire in autonomia la seguente guida, suggeriamo di assumere un esperto. Regiondo non offre assistenza tecnica per la personalizzazione CSS e non può garantire che il CSS personalizzato sia compatibile con tutti i miglioramenti futuri delle funzionalità e della grafica. Pertanto, ricordati di testare la compatibilità del tuo CSS personalizzato con le versioni di Regiondo.

Possiamo, pur non avendo alcun obbligo di farlo, monitorare, modificare o rimuovere i contenuti che a nostra esclusiva discrezione riterremo illegali, offensivi, minacciosi, calunniosi, diffamatori, pornografici, osceni o altrimenti riprovevoli o che violino la proprietà intellettuale di qualsiasi parte.
 
Esplora Configura shop > Integrazione sul sito > Custom CSS
 
 
Su questa pagina puoi vedere:

Seleziona la lingua - box di selezione che ti consente di selezionare uno dei tuoi negozi, in cui verranno applicati i CSS personalizzati. La funzionalità "Global" predefinita indica che il CSS verrà applicato a tutti i negozi.

Codice CSS - area di testo in cui è possibile fornire codici css con cui sovrascrivere le regole css predefinite di regiondo, sovrascrivere le impostazioni css da Shop Editor o per apportare ulteriori modifiche a elementi specifici all'interno dell'iframe di Regiondo.
 
Nota
Il campo Codice CSS comprende l'evidenziazione di sintassi CSS integrata, che può essere molto utile per identificare possibili problemi o errori nel codice CSS. Tutti i tag HTML non sono consentiti e verranno eliminati prima dell'output all'interno di Ticketshop/Widget. Se carichi immagini o contenuti aggiuntivi, questi devono essere inseriti tramite https://
 
Ad esempio, se desideri sostituire la famiglia di font primaria e regolare la dimensione del carattere in tickethop e widget a livello globale, seleziona "Global" dalla casella di selezione e includi semplicemente il carattere specificando il nome del font come mostrato di seguito:
 
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
body,
button,
.product-shop,
.product-shop select {
    font-family:'Open Sans', Helvetica, Arial, sans-serif;
}
 
Risultato:
 
Qui stiamo usando il carattere "Open Sans" dalla Directory Font di Google (https://fonts.google.com/), dove puoi trovare quello che si adatta meglio al design del tuo sito web. Oppure puoi usare @font-face per specificare il tuo font. Il carattere stesso può essere inserito nel tuo sito o in qualsiasi altro luogo dopo essere stato caricato su un apposito spazio web. L'URL deve essere corretto nel percorso del file della dichiarazione @font-face:
 
@font-face {
    font-family:'Custom Font';
    src:url(https://www.your-website.com/fonts/Custom-Font.otf);
    font-weight:400;
}
body,
button,
.product-shop,
.product-shop select {
    font-family:'Custom Font', Helvetica, Arial, sans-serif;
}
In alternativa, se punti ad alte prestazioni di velocità di caricamento del tuo sito web, puoi semplicemente utilizzare lo stack di font predefinito. Puoi aggiungere Helvetica allo stack per i dispositivi iOS per utilizzarlo su un font Arial come segue:
 
body,
button,
.product-shop,
.product-shop select {
    font-family:"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
Selezionando l'opzione Global o scegliendo uno dei tuoi negozi, puoi specificare facilmente caratteri diversi per ogni negozio.
 

Come individuare i CSS che desideri modificare

Per individuare il CSS che desideri modificare, puoi utilizzare "Ispeziona/Esamina elemento". Se hai un browser webkit come Chrome, Firefox, Safari o Opera, Ispeziona Elemento è disponibile dal menu di contesto e aprirà un pannello nel tuo browser mostrandoti la marcatura sulla sinistra e gli stili sulla destra. Si noti che questo strumento è disponibile in Safari solo se si abilitano gli strumenti di sviluppo. Gli utenti di IE devono avere la versione 11 o successiva.
 
 
L'ispettore ti aiuterà a identificare il selettore o lo stile originale che contiene le proprietà che desideri modificare. Una volta identificato il CSS che desideri modificare, copialo nell'area CSS personalizzata e regolalo come preferisci.

Ad esempio, supponiamo di voler nascondere un elemento sul Booking Widget. Fai clic con il tasto destro del mouse su un elemento, seleziona "Ispeziona", individualo nel codice HTML della pagina e cerca i selettori esistenti per questo elemento (oppure possiamo crearne nuovi): 
 
Copia il selettore ".booking-content .tab-info" nell'area Custom CSS e imposta la proprietà display su "none":
 
.booking-content .tab-info { display:none; }
 
Result:
Ciò nasconderà l'elemento "tab-info" nelle schede Ticket e Gift del widget. Se vogliamo nasconderlo solo per la scheda Ticket, dobbiamo sovrascrivere la proprietà display per la scheda Regalo, poiché entrambi hanno lo stesso nome di classe:
 
.booking-content .tab-info { display:none; }
.booking-content .gift-container .tab-info { display:block; }
Una volta salvate le modifiche, con la proprietà display impostata su "block" per .gift-container .tab -info, l'elemento sarà nascosto solo per la scheda Ticket e verrà mostrato nella scheda Gift. Questo è un semplice esempio di come il widget può venire personalizzato sovrascrivendo le sue precedenti regole CSS.
 

Tesare le modifiche

Puoi semplicemente modificare e visualizzare l'anteprima di stili specifici nella barra laterale dell'Inspettore Brower facendo clic sullo stato della proprietà, facendo clic o facendo doppio clic sullo spazio vuoto alla fine dell'ultima proprietà per aggiungerne una nuova. Questo aiuta anche a trovare il selettore di stile corretto.

Una volta salvate le modifiche nella pagina Custom CSS, queste avranno effetto immediatamente e verranno applicate anche sul tuo Ticketshop e Booking widget. Attenzione quando modifichi le regole CSS per i tag global ed evita di farlo quando il testo di colore bianco può apparire su sfondo bianco.

Esempi avanzati

Ecco esempi avanzati di "Custom CSS" che mostrano come puoi cambiare l'aspetto di Ticketshop/Widget.
 

Come modificare lo sfondo e i colori dei bordi del Booking Widget?

 

Copia e incolla questo snippet di codice css nel campo di testo del codice CSS personalizzato:
.product-shop { background:#ddeeff !important; border:2px solid #336699 !important; }
Nota
Come puoi vedere, abbiamo usato !importante regola CSS per sovrascrivere la dichiarazione assegnata in linea sull'elemento .product-shop. La regola !important viene utilizzata per sovrascrivere il CSS precedentemente assegnato o le dichiarazioni in linea impostate nell'attributo di stile dei tag HTML. 
 
Risultato:
 
Queste modifiche avranno effetto sia sul Booking Widget che su Ticketshop. Se vuoi dichiarare le classi solo per widget o solo per tickethop puoi separarle in elementi unici, che sono presenti nel Widget ma non nel codice di Ticketshop. Per esempio:
 
<!-- CSS Rules only for Booking Widget: -->
#widget-wrapper .product-shop { background:#ddeeff !important; border:2px solid #336699 !important; }

<!-- CSS Rules only for Ticket Shop: -->
#page-wrapper .product-shop { background:#ddeeff !important; border:2px solid #336699 !important; }

 

Come modificare i colori delle schede di Booking Widget?

.tabs .tab { background:#336699; }
.tabs .tab h2 { color:#fff; }
.tabs .tab.active { background:transparent; }
.tabs .tab.active h2 { color:#336699; }
 
Risultato:

 

Come modificare gli stili dei pulsanti Aggiungi al carrello?

.product-shop .add-to-cart .button {
    background:none; border:2px solid #336699; color:#336699;
}
.product-shop .add-to-cart .button:hover {
    background:#336699; color:#fff;
}
Se aggiungi elementi di stile a link o pulsanti, non dimenticare di aggiungere regole per :hover state ovvero quando il mouse dell'utente passa su questi link o pulsanti. 

Risultato:
 

Come si aggiunge l'immagine di sfondo alla pagina intera di Ticket Shop?

 

#shell,
.whitelabel > body,
.wl-background-main,
.wl-background-around { background:none; }

html.whitelabel { background:#fff url(images/bg.jpg) no-repeat center top fixed; background-size:cover; }
Per prima cosa cancella tutti gli sfondi per impostare solo uno sfondo per il tag html. Dopodiché aggiungiamo la regola in cui inseriamo l'URL dell'immagine e lo impostiamo per coprire l'intera pagina centrata, allineata in alto e fissa.

Per aumentare la velocità di caricamento della pagina, puoi utilizzare un'immagine diversa per risoluzioni diverse, come segue:
@media screen and (max-width:1024px) {
    html.whitelabel { background-image:url(images/bg-1024.jpg); }
}
@media screen and (max-width:640px) {
    html.whitelabel { background-image:url(images/bg-640.jpg); }
}

 

Come modificare i titoli degli step del Booking Widget?

.a-title-option:after { content:'Select an Option:'; }
.a-title-date:after { content:'Select a Date:'; }
.a-title-time:after { content:'Select a Time:'; }

.a-label.a-title-option:after { content:'Selected Option:'; }
.a-label.a-title-date:after { content:'Selected Date:'; }
.a-label.a-title-time:after { content:'Selected Time:'; }
È possibile specificare un testo diverso per il titolo dello step attuale, e per il titolo dello step successivo, come mostrato sopra.

 

Come modificare l'icona di "modifica" degli step del Booking Widget?

.booking-content .a-edit:before { background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAyUlEQVQ4T6XTMU5CQRCA4Y/GhsOgiRUJBbHWRhoOYUc4AS0NBafQitpY2csxOAA9meRNsjzh7UOn2c1m/39nsjMD/4xBT36ILd6xK5k+goADmjbgA35SUhMkPMIzVoj9U0q6BCWcQJ49YoL9NcElOLMe4xtrLC4JuuB7fMbLTUnHtuAmOFIqBTfDpeBPcCnY4A1nf4xfNbcbL0uIDrvDS3GhCpcZhCBi1qy94LbgFR9NJtF1X/lVXfOSJcwRgowDljjWhq02CzXeCYkkNxFv6LDiAAAAAElFTkSuQmCC) no-repeat 50% 50%; }
Qui abbiamo usato base64 per caricare l'immagine allineata. Ciò può aiutare a ridurre le richieste http aggiuntive per pagina, ma non è consigliabile utilizzarle con immagini più grandi, poiché le immagini di base64 non vengono memorizzate nella cache dal browser. 

Risultato:

 

Come modificare gli stili dei menu a tendina?

select { padding:2px; color:#336699; background:#fff; border:1px solid #336699; }
 
Risultato:
Questo verrà applicato globalmente a tutti i campi selezionati, compresi i campi di checkout. Se si desidera specificare tale stile solo per il booking widget o solo per le sezioni di checkout, è possibile utilizzare selettori come ".product-shop select", ".sc-content select" ecc.

 

Qual è il codice per modificare la frase nel widget di prenotazione con la quale si chiede al cliente di scegliere una data e un'attività?

 

.tab-info {
 visibility: hidden;
}

.tab-info:after {
Content: 'Enter text here';
visibility: visible;
display: block;
position: absolute;
top: 45px;
}

 

Come è possibile modificare il colore dello sfondo del messaggio di valutazione/controllo?

 

Impossibile modificare il colore dello sfondo del messaggio di valutazione/controllo nello shop editor. È però possibile modificarlo su personalizza CSS con un codice semplice.
 
 .form-box { 
            background-color: #002f53 !important; 
}
È possibile copiarlo e incollarlo su personalizza CSS. Modifica il codice colore dello sfondo. Devi salvare le tue nuove impostazioni.

 

Letture consigliate

Per maggiori informazioni, consulta le seguenti risorse:

Articoli correlati