Utilizzo di un CSS personalizzato

Creato il: 05.03.2019
Sulla piattaforma ecommerce Ready Pro e' possibile utilizzare un proprio CSS personalizzato in alternativa al CSS fornito di default.

In questo caso però occorre tenere presente che:
SE SI UTILIZZA UNA SKIN PERSONALIZZATA, AD OGNI AGGIORNAMENTO DEL TEMPLATE CI SI DEVE PREOCCUPARE DI VERIFICARE IL CORRETTO FUNZIONAMENTO DEL PROPRIO CSS E DI MODIFICARLO PER ADATTARLO AD EVENTUALI MODIFICHE PRESENTI NELLA NUOVA VERSIONE

PURTROPPO NON E' TECNICAMENTE POSSIBILE GARANTIRE CHE UN CSS PERSONALIZZATO (OVVERO MODIFICATO MANUALMENTE DALL'UTENTE) CONTINUI A FUNZIONARE NEL TEMPO SENZA DOVERLO MODIFICARE ULTERIORMENTE


N.B. La seguente sezione del manuale richiede conoscenze tecniche avanzate ed e' dedicata agli utenti che sanno cos'e' un CSS e come si modifica e come si accede tramite FTP al proprio web server.

Per utilizzare un CSS personalizzato va innanzitutto duplicata la cartella di un CSS preesistente, localizzato nella cartella ReadySkins del sito.

L'operazione va fatta direttamente sul web server, quindi è consigliabile utilizzare un programma FTP client semplificato come CuteFTP, WSFTP, Filezilla, ecc.

Le skin predefinite per la piattaforma ecommerce Ready Pro vengono caricate nella cartella /ReadySkins del sito.

Alla prima pubblicazione il contenuto della cartella sara' simile al seguente:
Di base sono presenti diverse cartelle con i CSS predefiniti per vari tipi di elementi (megamenu, ecc.). Questi elementi CSS sono fissi e non personalizzabili.

La skin base invece e' contenuta nella cartella chiamata wonder e questa e' la parte e' che possibile personalizzare
N.B. NON vanno modificati direttamente i file presenti in questa cartella, ma andrà prima creato un duplicato da questa.

La prima cosa da fare quindi è di duplicare la cartella wonder, crando una nuova cartella che chiameremo ad esempio skinPersonalizzata
All'interno della cartella duplicata troverete due sottocartelle:
- css : contiene i file CSS della skin
- img : contiene i file immagine utilizzati dalla skin
Il file con la skin, che si potra' utilizzare come base per la personalizzazione, e' contenuto nel file /css/screen.css

N.B. Il file screen.css e' compresso, quindi per poterlo rendere leggibile e' consigliabile utilizzare un beautifier CSS (come ad esempio https://www.cleancss.com/css-beautify/)
A questo punto quello che dobbiamo fare è di indicare al template qual'è la skin da utilizzare.

Questo va fatto modificando le opzioni evidenziate in figura:
A questo punto possiamo iniziare a personalizzare il file screen.css (dentro la nostra cartella /skinPersonalizzata) per adattarlo alle nostre esigenze.

Login