COME ELIMINARE PARTI DEL TEMPLATE IN PAGINE SINGOLE

Dimensione: px

Iniziare la visualizzazioe della pagina:

Download "COME ELIMINARE PARTI DEL TEMPLATE IN PAGINE SINGOLE"

Leo Dini
8 anni fa
Visualizzazioni

1 COME ELIMINARE PARTI DEL TEMPLATE IN PAGINE SINGOLE Con questa guida impareremo come eliminare delle singole zone del template che utilizziamo all'interno di una pagina specifica. Questo metodo torna utile ad esempio per creare un'introduzione al sito direttamente senza dover utilizzare gli altri metodi proposti nelle guide precedenti. Per la guida si ringrazia che ha spiegato il metodo sul sito Va precisato che in questa guida si agirà direttamente sulla zona Modifica head, il che vuol dire che vi conviene avere un minimo di esperienza con i linguaggi HTML e CSS dato che le modifiche che apportate potrebbero essere poi irreversibili se fatte male. Per il tutorial abbiamo bisogno di Google Chrome dato che utilizzeremo lo strumento integrato Developer tool. 1) Iniziamo entrando nel nostro sito web aprendolo in 2 schede del browser. In una entriamo con la password, nell'altra no

2 2) Dalla toolbar laterale clicchiamo nel menù Impostazioni e selezioniamo Modifica header 3) Inseriamo ora questo codice <style type="text/css"> /*<![CDATA[*/ Il codice qui /*]]>*/ </style> In questo modo abbiamo la possibilità di intervenire sulla parte CSS del template in uso

3 4) Andiamo nella finestra che contiene il sito aperto senza aver effettuato l'accesso con la password e clicchiamo in un punto a caso con il tasto destro del mouse 5) Selezioniamo l'opzione ispeziona elemento, questo aprirà il developer tool, uno strumento utile che consente di visualizzare tutti gli elementi di una pagina web, dai codici alle immagini

4 6) Apriamo ora il blocco note, o uno strumento simile, dobbiamo prendere diversi appunti 7) Quello che ci interessa sapere è che ogni singola pagina, così come ogni singolo elemento del sito, ha un proprio indirizzo specifico espresso con un numero unico. Lo strumento Developer tool in questo ci aiuta. Avendo aperta la pagina in cui siamo entrati senza aver effettuato l'accesso al sito dobbiamo per prima cosa trovare e copiare il numero della pagina. Lo trovate sempre all'inizio alla fine del campo Body che in genere è così composto <body class="body cc-page cc-page-index ccindexpage cc-pagemode-default cc-content-parent" id="page *"> (la zona in rosso e grassetto è quella che ci interessa). Una volta trovato annotiamolo nel blocco note *per chi non sapesse leggere, quel numero in particolare fa riferimento solo al mio sito, il vostro lo ha differente

5 8) Dato che i singoli layout possono variare tra loro abbiamo ora bisogno di sapere come vengono chiamate le varie zone in quello che attualmente abbiamo montato nel sito. Per conoscere il nome delle varie aree dobbiamo semplicemente passare il mouse nel codice HTML mostrato dal developer tool. Questo procedimento evidenzierà in azzurro nel sito le varie aree, in questo modo sapremo quali prendere in considerazione. Dobbiamo annotarne i nomi nel blocco note. Ovviamente ci interessano tutte tranne la zona del contenuto, altrimenti non possiamo inserire nulla 9) Chiudiamo ora il developer tool e andiamo nel sito in cui abbiamo effettuato l'accesso

6 10) Al posto della frase inserisci il codice qui inseriamo questa stringa #page{display:none;} 11) Ora, vicino al trattino di page- dobbiamo inserire il numero della pagina che abbiamo annotato prima nel blocco note, il codice diventerà quindi così #page {display:none;}

7 12) Dopo il numero ora dobbiamo inserire uno spazio e mettere questa nuova parte di codice #page div# {display:none;} 13) Dopo il simbolo del cancelletto (#) inseriamo ora il nome della zona che ci interessa, che abbiamo sempre annotato nel blocco note. Ad esempio otterremo quindi #page div#cc-tp-header {display:none;}

8 14) Ora dobbiamo anche nascondere le altre zone del template che abbiamo annotato. Per farlo possiamo o continuare con quel codice mettendo una virgola, oppure copiare il codice vuoto e ripetere i passaggi da 10 a 13. Se scegliete di proseguire nello stesso codice dovete mettere una virgola (,) dopo l'elemento della pagina inserita e scrivere nuovamente il codice #page div# cambiando questa volta il codice della sezione. Otterrete quindi questo tipo di codice #page div#cc-tp-header, #page div#cc-tp-sidebar, #page div#cc-tp-emotion, #page div#cc-tp-footer {display:none;} 15) Premiamo su Salvare ed aggiorniamo la pagina che contiene il sito in cui non abbiamo effettuato l'accesso, così vedremo le modifiche

9 Perchè NON dobbiamo chiudere né modificare la pagina in cui abbiamo la zona Modifica head aperta? Perchè così se il risultato non ci piace, possiamo modificarlo subito senza problemi semplicemente rimuovendo il codice 16) Ora non ci resta che eliminare lo sfondo, se presente, e sostituirlo con quello che vogliamo, nel mio caso il colore bianco. Come fatto in precedenza dobbiamo andare nella scheda con aperto il sito senza password e con lo strumento Developer tool identificare tutte le zone che contengono lo sfondo ed annotarle

10 18) Inseriamo ora questo tipo di codice #page div#cc-tp-background, #page div#cc-tp-container, #page div#cc-tp-main {background:none;} Ovviamente dove vedete cc-tp-header, ecc... dovete sostituirci le zone che avete identificato nel passaggio precedente, in questo modo gli annullerete lo sfondo 19) Dobbiamo ora mettere lo sfondo bianco, per farlo dobbiamo utilizzare questo tipo di codice #page {background:#ffffff!important;} Ovviamente dovete cambiare il numero della pagina

11 20) Con lo stesso metodo ora possiamo eliminare altri elementi presenti come la bordatura ed allargare l'area del contenuto. Per questa tipologia di modifiche vi consiglio di consultare la guida Modificare i templates di base di Jimdo Andando poi in una pagina secondaria del sito potete vedere che le modifiche lì non sono state apportate

12 Questo è tutto il codice inserito nell'area modifica head per il tutorial <style type="text/css"> /*<![CDATA[*/ #page div#cc-tp-header, #page div#cc-tp-sidebar, #page div#cc-tp-emotion, #page div#cc-tp-footer {display:none;} #page div#cc-tp-background, #page div#cc-tp-container, #page div#cc-tp-main {background:none;} #page {background:#ffffff!important;} #page div#cc-tp-main {border:none;} #page div#cc-tp-content {width:900px;} /*]]>*/ </style>

Documenti analoghi

Tutorial: Adattare le skin del web a Jimdo. Per postare questo tutorial su altri blog/siti/forum inviatemi una e-mail o un pm

Tutorial: Adattare le skin del web a Jimdo Tutorial creato da: marte9020 Tutorial creato per: http://jimding3.jimdo.com Programma utilizzato: Google Chrome (Qualsiasi Browser va bene) Per postare questo