Con Aruba, a lezione di e-commerce

Vuoi modificare l’aspetto del tuo negozio online? Impariamo ad usare il CSS – Parte 1

È più facile che mai!

A volte, infatti, nonostante le limitazioni di design che si potrebbero incontrare ,

grazie all’integrazione del codice CSS nel codice sorgente del tuo negozio online, puoi ottenere i risultati che desideri.

Vediamo insieme… …ciò che è possibile fare,

…come si determina il codice necessario e …dove è necessario inserirlo.

Cosa sono esattamente i CSS ?

CSS è l'acronimo di Cascading Style Sheets

CSS è un linguaggio di markup che si usa per modificare l'aspetto dei contenuti GIA’ PRESENTI nel negozio online, ma non consente di aggiungere nuovi contenuti o modificarne le funzioni.

Per impostarlo, è necessario prima specificare cosa deve essere modificato.

Tale componente è noto come SELETTORE.

Viene poi specificato tra parentesi ciò che sta per accadere alla voce selezionata.

Questo comando è costituito da due elementi: una proprietà e un valore.

Intro

3

Vediamo come si struttura…

Ecco un esempio del cambio del colore di fondo nel colore rosso (espresso come valore esadecimale):

Se desiderate assegnare un'altra proprietà a un elemento, è sufficiente specificare tale proprietà tra il punto e virgola e la seconda parentesi.

Usiamo l'esempio di cui sopra. Non solo il colore di sfondo dovrebbe diventare rosso , ma il colore del font deve essere blu scuro.

4

Avremmo potuto digitare tutto in una sola riga, ma abbiamo messo articoli su linee diverse per rendere il tutto più facile da leggere.

Non importa per il browser, in entrambi i casi, ciò che conta è ciò che appare tra le parentesi graffe. Un browser non riconosce le interruzioni di riga.

{……;……….;}

È tuttavia importante che un punto e virgola sia presente alla fine di ogni voce, poiché funge da delimitatore.

5

Ora che abbiamo esaminato come è strutturato il codice CSS, possiamo considerare la prossima sfida.

Supponiamo di voler nascondere manualmente un articolo nel nostro negozio.

Come possiamo individuare il giusto selettore per nasconderlo?

Un add-on di Firefox ci aiuterà: Firebug.

Clicca su questo link per installarlo: https://addons.mozilla.org/it/firefox/addon/firebug/

Come trovare il selettore giusto

6

Facciamo un ESEMPIO per mostrare come è strutturato.

Nei negozi creati con le nostre soluzioni, il breadcrumb - il percorso di un prodotto - è visualizzato sopra il prodotto in questione ed è separato dal resto dell'immagine prodotto per mezzo di una linea tratteggiata.

Cercheremo ora di nascondere questa linea.

Firebug ci permette di navigare nel dettaglio gli elementi del nostro negozio online

all'interno del browser e di trovare il selettore corretto per ogni elemento.

Per farlo, dobbiamo aprire la “vetrina” del nostro negozio in Firefox e selezionare un prodotto per visionare i dettagli. Sopra i dettagli del prodotto, vedremo un breadcrumb e una linea.

7

Ora possiamo usare Firebug per esaminare la pagina. Lo facciamo sia cliccando sul simbolo appropriato nella barra dei menu in alto a destra nel browser, o cliccando sull’elemento con il tasto destro del mouse scegliendo "Esaminare voce".

Firebug si aprirà nella parte inferiore del browser.

Se vogliamo avere uno sguardo più da vicino sui singoli elementi, dobbiamo prima selezionarli. Per fare ciò, si clicca sul seguente simbolo:

8

oppure

(nella barra dei menu di Firebug)

Ora posizioniamo il cursore su un elemento del nostro negozio online, che apparirà con un bordo blu. Allo stesso tempo, il contenuto nella finestra Firebug cambierà e il

codice sorgente aggregato per l'elemento in questione verrà mostrato.

9

Vediamo il codice sorgente

del prodotto nella finestra in basso a sinistra

e

i comandi CSS utilizzati per

modificare l'aspetto del

prodotto a destra.

Siamo in grado di giocare con i comandi CSS che abbiamo già usato e, per esempio,

modificare le dimensioni solamente per eseguire un TEST.

• Lo facciamo inserendo un valore diverso per la proprietà "height".

Questo ti permette di avere una prima impressione di come risulterebbe un elemento se si dovesse modificare - senza in realtà apportare modifiche al codice sorgente.

• Si può anche provare nuovi stili.

Per farlo, è necessario fare clic con il tasto destro del mouse nella finestra di destra, quindi aggiungere una nuova proprietà.

Ad esempio, per nascondere la linea separatrice, dobbiamo inserire la seguente nuova proprietà nella finestra a destra - "visibility: hidden;". La linea tratteggiata sotto la barra di navigazione sarà invisibile.

10

In questo caso, consideriamo che questo cambiamento al nostro negozio sarà permanente: ciò richiede di inserire il comando all’interno del codice sorgente. Per fare ciò, abbiamo bisogno: - del PERCORSO ESATTO della voce in questione, in modo da poterlo modificare; - del COMANDO in modo da poterlo nascondere.

Abbiamo già il secondo, manca solo il percorso esatto della voce. Lo troviamo utilizzando il selettore di Firebug, facendo clic per evidenziare la linea tratteggiata. La parte rilevante del codice compare nuovamente nella finestra in basso a sinistra.

Possiamo già vedere il percorso CSS della voce nella barra dei menu di Firebug. Clicchiamo con il tasto destro e selezioniamo "Copia percorso CSS".

Modificare il codice sorgente

11

Il seguente percorso è memorizzato nella cache del nostro computer:

html.mozilla body.epages div.Layout1 div.Middle div.ContentArea div.ContentAreaInner div.ContentAreaWrapper hr.Separator

12

Se analizzate il percorso da sinistra a destra, vedrete che appaiono, dopo ogni punto informazioni sempre più precise.

L'ultima voce è "hr.Separator" – la linea separatrice.

Se utilizziamo l'intero percorso, allora possiamo essere certi che solo questo elemento venga modificato - e non ogni altro elemento altrove nel sito che si chiami "Separator".

Ora abbiamo tutto quello che ci serve. Passiamo ora al nostro back office e - in "Impostazioni avanzate" scheda nel menu "Impostazioni / Impostazioni generali" - inserite tutte le informazioni nel codice sorgente della nostra pagina.

Il codice appare come segue:

<style type="text/css">

body.epages div.Layout1 div.Middle div.ContentArea

div.ContentAreaInner

div.ContentAreaWrapper div.Separator

{

visibility: hidden !important;

}

</style>

Una volta inserito il codice, cliccate su "Salva" e aggiornate la cache pagina del vostro negozio. Se navigate attraverso la “vetrina” del vostro negozio, vedrete che la linea tratteggiata è stata nascosta in modo permanente.

13

Via <style type="text/css"> specifichiamo che vogliamo apportare modifiche al CSS; concludiamo con il codice </style >. Nel mezzo, la voce da modificare è specificata (il percorso prima di div.Separator) e seguita - tra parentesi – dalla modifica da apportare (visibility: hidden !important;).

Via <style type="text/css"> specifichiamo che vogliamo apportare modifiche al CSS; concludiamo con il codice </style >.

Nel mezzo, la voce da modificare è specificata (il percorso prima di div.Separator) e seguita - tra parentesi – dalla modifica da apportare (visibility: hidden !important;).

Una volta inserito il codice, cliccate su "Salva" e aggiornate la cache pagina del vostro negozio. Se navigate attraverso la “vetrina” del vostro negozio, vedrete che la linea

tratteggiata è stata nascosta in modo permanente.

14

Se avete intenzione di sperimentare il CSS assicuratevi di

prendere prima confidenza con le funzionalità CSS.

CSS è la soluzione ideale se si vuole andare oltre i parametri consentiti

dalla versione standard del vostro negozio.

MA ATTENZIONE! Se improvvisamente il vostro negozio risulta comportarsi stranamente, determinate se la causa è

forse il nuovo codice inserito, a titolo di prova, e provvedete ad eliminare il codice sorgente.

Accertatevi sempre che le modifiche effettuate tramite CSS rispondano correttamente.

15

Buone modifiche e

buona vendita online!

e-commerce.aruba.it

16

17

Grazie