Come definire un bordo personalizzato per un elemento della tabella ?

 Obiettivo

Quando modificate un WebBlock e inserite uno degli elementi della tabella, è possibile definire una misura per il bordo modificando le “Proprietà della tabella”.
>>

Tuttavia, la resa dei bordi HTML non offre una visuale molto confacente, poiché il bordo si applica sia alla tabella che alle celle contenute in essa. È quindi necessario ricorrere al CSS per creare dei bordi sottili intorno ad un elemento della tabella.

Bordo HTML Bordo CSS

Esistono due metodi per applicare un bordo CSS ad un elemento Tabella :

 
 Inserimento di un bordo dal campo inline style (metodo semplice)

La soluzione più semplice per applicare un bordo su di un elemento della tabella è quella di utilizzare il campo inline style delle proprietà dell'elemento tabella. Assicuratevi che il campo dimensione del bordo sia definito come 0, poi aggiungete la regola CSS suguente nel campo inline style :



Il codice colore può essere personalizzato o sostituito con il nome del colore(in inglese). Esempio :





Notate che il risultato sarà visibile solo in modalità [Previsualizzazione] o quando il WebBlock verrà visualizzato nel sito.

Notate, inoltre, che questo "trucchetto" sarà applicabile anche ai webBlocks destinati ad essere inviati nelle newsletters.

 
 Inserimento di un bordo tramite classi CSS (metodo avanzato)


È possibile assegnare delle classi o degli ID associati ad elementi della tabella, modificando le "proprietà della tabella". Ciò permette di applicare un identificativo che sarà possibile “stylare” tramite una regola definita nel CSS.

Vantaggi di questo metodo : la struttura verrà applicata a tutti i webBLocks in cui verrà utilizzato l'identificativo. In questo modo, se deciderete un giorno di cambiare il colore dei bordi di tutti i WebBlocks del sito, una solo aggiornamento del CSS sarà sufficiente!

Attenzione : Questa soluzione non è indicata per un webBlock destinato ad essere inviato come newsletter. Infatti il CSS del sito non sarà richiamato dai programmi di messaggeria : il bordo non verrà visualizzato.
  • Tappa 1 : Assegnare un nome di classe alla tabella

    Per inquadrare un elemento di tabella del vostro WebBlock, cliccate sull'icona delle "proprietà della tabella" e definite un nome di Classe CSS associato. Questa classe potrà essere definita in modo identico per tutte le tabelle a cui vorrete applicare gli stessi bordi.

    Nel nostro esempio, il nome donato a questa classe è : bordo


  • Tappa 2 : Definire la regola CSS

    • Caso 1 : utilizzate una presentazione CSS personalizzata.

      Modificate il contenuto CSS cliccando sul menu [Sito\Presentazione], tasto [Gestisci presentazione personalizzata] e modificate la presentazione.
      Aggiungete la regola seguente nel contenuto CSS (il "." è molto importante).



    • Caso 2 : utilizzate una presentazione avanzata HTML o uno Smartskin

      Andate nei punti d'insrimento HTML del sito ( menu [Sito\Proprietà per lingua] ), zona "Intestazione HTML” e aggiungete il seguente script :



    Notate come sarà spesso indispensabile svuotare la cache e ripulire i cookies per visualizzare le modifiche apportate.
 

Aggiungi ai preferiti: http://www.oxatis.com/Help/HelpCenterContent.asp?ActionID=1024&TID=55235&MID=55584%7C53001&LangID=4
© 2001-2019 Oxatis. Tutti i diritti riservati.