Come fare una discesa Fusion Tema Trasparente

March 15

Come fare una discesa Fusion Tema Trasparente


Fusion è un potente e completo quadro tema per il sistema di gestione dei contenuti Drupal che offre built-in opzioni di personalizzazione e di layout, che lo rende una scelta popolare per i web designer. Con l'aggiunta di ", Skinr" modulo di progettazione di Fusion, è possibile modificare i colori o le dimensioni della maggior parte degli elementi del tema Fusion. Gli elementi non si può facilmente cambiare dal pannello di controllo Aspetto possono essere modificati modificando i fogli di stile del tema. Per rendere il menu di navigazione trasparente, ad esempio, è necessario determinare quale classe utilizza il menu, e poi o riscrivere la classe, o commentare il colore di sfondo.

istruzione

1 Scarica una copia del vostro tema Fusion. Aprire la cartella del tema, quindi fare doppio clic sulla cartella "css". Questa cartella contiene i fogli di stile che definiscono il look del tuo tema. Tutti i temi di fusione avranno un file "style.css" con il nome del tema aggiunto all'inizio del nome del file, come ad esempio "magazeen-style.css" o "fusion-Acquia-ardesia style.css". Individuare "style.css" del vostro tema e aprirlo in un editor di testo o HTML.

2 Scaricare e installare il Firebug add-on per Firefox, o aprire la pagina iniziale del browser Opera. Entrambe le opzioni consentono di fare clic destro sull'elemento del menu che si desidera modificare e scegliere "Inspect Element". Apparirà una finestra di codice che mostra gli stili HTML e CSS associati al vostro elemento prescelto. Utilizzare questo metodo per determinare il nome del selettore associato con il menu del vostro tema. In tema di "Magazeen" di Fusion, il selettore si chiama ".primary-menu". In "Acquia," si chiama "primario-menù #".

3 Tornare al documento "style.css" e individuare il selettore del menu principale. Ci saranno gruppi di stile più per il selettore, ciascuno dei quali contiene un proprio insieme di proprietà. Cercare la proprietà "background-color" "background" e. Queste linee influenzano il colore o la struttura del menu e sotto-menu sfondi.

4 Rimuovere le proprietà dello sfondo, o modificare i valori su "Nessuno", al fine di eliminare ogni traccia di colore per un effetto trasparente. Un esempio di come si dovrebbe modificare lo stile del menu tema "Acquia Slate" potrebbe essere:

primaria menu ul.menu li.sfHover ul.menu li {

sfondo: none;

margin-left: 0;

padding-left: 5px;

width: 155px;

}

primaria menu ul.menu li.active-trail {

sfondo: none;

}

primaria menu ul.menu li ul.menu li a: link {

sfondo: none;

}

5 Fare un backup dei file del tema, quindi salvare il foglio di stile modificato. Caricarlo cartella del tuo tema sul server Web. Ricarica la tua pagina iniziale per verificare le modifiche. Se un colore di sfondo rimane, torna al tuo foglio di stile e continuare a modificare o rimuovere le proprietà sfondo per il tuo selettori di menu fino a trovare quella giusta.

Consigli e avvertenze

  • Usando Firebug, è possibile deselezionare le singole proprietà CSS nella finestra "stili" passando il mouse a sinistra della proprietà fino a quando appare la casella di controllo. Questo vi permetterà di vedere gli effetti di rimuovere immediatamente la proprietà. Lo svantaggio di questo metodo è che gli stili nel riquadro di anteprima non sempre corrispondono ciò che è effettivamente nel documento "style.css", modificando quindi il foglio di stile direttamente e tramite tentativi ed errori possono essere più efficaci per l'apprendimento quali elementi i tuoi cambiamenti influenzano.

Articoli Correlati