Personalizza il tema Matrix Gallery 2

• Aprile 29, 2024

Nell'ultimo tutorial, abbiamo iniziato a personalizzare il tema Matrix nel nostro tema per la Galleria 2. Continueremo impostando questo nuovo tema come tema predefinito per il nostro portafoglio e cambiando la grafica di sfondo.

All'interno della cartella del tema per ogni tema è presente un file immagine screeshot.png che è uno screenshot di quel tema. Abbiamo ancora il vecchio png del tema Matrix nella nostra nuova cartella dei temi. Potresti voler sostituire questo con un png per il tema della tua galleria. La dimensione media del png è di circa 500 x 200 pixel. Salverai il nuovo file screenshot.png nella cartella delle immagini.

C: \ xampp \ htdocs \ gallery2 \ Themes \ dCipollo \ immagini

Ora possiamo tornare al pannello di controllo dell'amministratore del sito. Innanzitutto, dobbiamo installare il nostro nuovo tema. Vai alla sezione Plugin e vedrai che il nostro nuovo tema è elencato in Temi in fondo alla pagina. Fai clic su Installa per installare il nostro nuovo tema. Successivamente, vai alla sezione Temi dell'area di amministrazione e modifica il modello predefinito da Matrix al nostro nuovo tema. Naturalmente, non noterai alcun cambiamento nel layout del modello a questo punto. Dobbiamo ancora apportare tali modifiche.

Mi piace prima apportare le modifiche grafiche al mio tema. Aggiungiamo un'immagine di sfondo. Questa può essere un'immagine piastrellata ripetuta. Ma per abbinare il mio sito web userò la stessa grande immagine di sfondo statica. Dobbiamo salvare il nostro jpg di sfondo nella cartella dCipollo nella directory gallery2.

C: \ xampp \ htdocs \ gallery2 \ dCipollo

Ora siamo pronti a cambiare il file theme.css per aggiungere la nostra grafica di sfondo. Se diamo un'occhiata al codice sorgente per il file main.php, vediamo che il tag body ha una classe di stile chiamata gallery.



Dovremo trovare questo stile body.gallery nel file theme.css.

body.gallery {
? ? margine: 0;
? ? imbottitura: 0;
}

Ora aggiungeremo i codici di stile di sfondo a questa classe e punteremo l'URL per l'immagine di sfondo sul jpg nella cartella dCipollo.

body.gallery {
? ? margine: 0;
? ? imbottitura: 0;
? ? colore di sfondo: #eeeeee;
? ? immagine di sfondo: url ('../../ dCipollo / BG1_Gallery.jpg');
? ? allegato-sfondo: scroll;
? ? background-repeat: nessuna ripetizione;
? ? posizione di sfondo: in alto a sinistra;
}

Se aggiorniamo la nostra pagina main.php per il nostro portfolio, non riusciamo ancora a vedere l'immagine di sfondo. Questo perché ci sono alcuni stili con lo sfondo impostato su bianco. Impostiamo questi stili su uno sfondo trasparente.

Ciò dovrebbe occuparsi della grafica di sfondo per il nostro portafoglio. Siamo pronti a modificare l'intestazione e il piè di pagina per la pagina Web.

Istruzioni Video: GEORGE FARMER AT THE NEW GREEN AQUA AQUASCAPING GALLERY AND STORE (Aprile 2024).