LIBRO WEBMASTER... Strategie per programmare siti web e portali Acquistalo su AMAZON... CLICCA corsi online per webmaster

Temi WordPress: Modificare il CSS con Firebug

Temi WordPress: Modificare il CSS con FirebugUtilizziamo lo strumento Firebug di Firefox per modificare il file style.css del tema grafico installato come predefinito.Firebug è una delle tante estensioni del browser Firefox che utilizziamo per analizzare il codice delle nostre pagine web al fine di apportare modifiche a file css contenuti nel tema di WordPress (naturalmente l’applicazione vale per tutti i cms e non è limitata solo a WordPress).

Firebug è molto potente perchè ci permette di individuare precisamente il codice del tema che desideriamo modificare, provare le modifiche in virtuale senza compromettere l’aspetto della pagina web, e quindi renderle effettive mediante l’editor interno di WordPress oppure con l’ausilio di programmi già installati all’interno del nostro computer.

Proviamo a descrivere alcune fasi del funzionamento di Firebug. L’estensione deve essere installata mediante l’opzione “Componenti Aggiuntivi” di Firefox. Dopo la sua installazione in alto a destra del browser troveremo l’icona di un insetto, come quello mostrato nella figura di questa pagina.

Per analizzare il codice css di una pagina web realizzata con WordPress bisogna cliccare sull’icona di Firebug. Nella parte inferiore si aprirà l’editor dell’estensione che ci aiuterà a individuare il codice da modificare.

Temi WordPress: Modificare il CSS con Firebug

Importanza di primo piano riveste l’opzione di Firebug “Strumento di selezione” (indicato nella precedente immagine) per mezzo del quale riusciamo ad individuare precisamente l’area del tema che desideriamo modificare. Ad esempio se il nostro obiettivo è modificare lo sfondo dell’area dell’HEADER (parte superiore) del nostro tema grafico (per il nostro esempio abbiamo utilizzato il tema “Twenty Fourteen” contenuto nell’archivio dei temi gratuiti di wordpress), cliccare lo strumento di selezione e selezionare la parte superiore del tema. Firebug individuerà a sinistra il codice html della pagina e a destra il codice css e dunque l’area di sfondo da modificare: immagine successiva:

Temi WordPress: Modificare il CSS con Firebug

La caratteristica importate di Firebug è quella di permettere di eseguire modifiche virtuali al codice css consentendo all’utente di provare diverse modifiche prima di applicarle definitamente. Infatti se a destra proviamo a cancellare il codice esadecimale del colore nero #000000 con un’altro a piacere, la modifica verrà applicata all’header. Se aggiorniamo la pagina tutto tornerà alla situazione normale.

Dopo aver stabilito la modifica da applicare al codice CSS possiamo rendere definitive le nostre azioni andando ad agire effettivamente sul codice CSS del file style.css del nostro tema. Per fare questo abbiamo de possibilità:

  • L’Editor di Wodpress all’interno del pannello di controllo
  • Utilizzare un software in locale per le modifiche del file style.css

Nel primo caso clicchiamo su “Aspetto”, “Editor”, selezioniamo il file style.css (in genere di default si presente già automaticamente), cerchiamo il codice corrispondente al colore di sfondo dell’header con lo strumento trova di Firefox e modifichiamo il codice esadecimale. Apportata la modifica salviamo l’editor del file style.css e il colore di sfondo della parte superiore del tema verrà cambiato in modo definitivo.

Nel secondo caso possiamo utilizzare un editor testi già installato all’interno del nostro computer. Si può partire con blocco note di Windows o il suo analogo per sistemi operativi diversi, utilizzare editor gratuiti come ad esempio Notepad++ (software consigliato) o Dreamweaver di Adobe. L’azione da compiere è quella di prelevare il file all’interno della cartella dei temi di WordPress del nostro server, modificare il file style.css con l’editor preferito e riportare con un software FTP (Filezilla ad esempio) lo stesso file nella directory originale.

Analogamente a Firebug possiamo utilizzare opzioni simili per altri browser come ad esempio “ispeziona” di Google Chrome.

VUOI APPROFONDIRE L’ARGOMENTO? IMPARA A MODIFICARE IL FILE CSS DI UN TEMA WORDPRESS CON LA VIDEO GUIDA: WORDPRESS, CSS CON FIREBUG

Temi WordPress: Modificare il CSS con Firebug

Tre video lezioni per una durata di 40 min. in cui verrai guidato passo passo alla modifica di un Tema di WordPress utilizzando Firebug. Le lezioni sono in modalità streaming, fruibili all’interno della nostra piattaforma online, ma possono essere scaricate in Mp4 e visualizzate offline tramite il proprio computer. Durante tutte le lezioni potrai rivolgere domande al docente. Di seguito argomento e durata delle lezioni con un video di presentazione della Guida online. Le lezioni sono a qualità più elevata (HD) rispetto alla demo di Youtube sotto riportata e possono essere seguite con diversi device (Computer, Smartphone, Tablet) essendo in formato Mp4.


VIDEO 1 (La struttura di un tema WordPress e l’estensione Firebug per Firefox) – 13,10 min

 VIDEO 2 (Come e dove modificare il tema di WordPress con l’Editor di WordPress e Firebug) – 17,48 min

 VIDEO 3 (Come e dove modificare il tema di WordPress con Notepad++) – 7,52 min


contattaci3

VIDEO LEZIONI SEMPLICI ED EFFICACI, CON ASSISTENZA, ESERCITAZIONE FINALE E ATTESTATO DI FREQUENZA.


VIDEO GUIDA FIREBUG con PDF e EBOOK WordPress
€ 14,00
(in PROMOZIONE PER POCHI GIORNI)

Questa video guida è Gratuita con l’acquisto del video corso Gantry per WordPress fino a Domenica 12/03/2017

Pagamenti sicuri tramite la piattaforma PayPal

VIDEO GUIDA FIREBUG con PDF e EBOOK WordPress € 14,00

 


 SOLO EBOOK PDF FIREBUG € 2,99

frontcoverpic
SOLO PDF FIREBUG € 2,99
Effettua il pagamento con PayPal cliccando sul pulsante “Paga Adesso” ***IMPORTANTE*** Invieremo tutti i dati per accedere all’area riservata (e fruire delle lezioni o degli Ebook) all’indirizzo email indicato nel modulo PayPal – Successivamente al pagamento provvederemo a configurare l’area riservata. Riceverai una E-mail con tutte le istruzioni per l’accesso alla piattaforma e-Learning del portale. All’interno del modulo PayPal ricordati di specificare gli estremi per la fattura, se sei un privato metti il codice fiscale o una Partita Iva negli altri casi. Se vuoi indicarci un altro indirizzo email dove ricevere i dati, al termine della procedura di acquisto sarai reindirizzato in automatico alla pagina di ringraziamento dove potrai lasciare la tua email e altri dati anagrafici. In alternativa puoi inviare un messaggio tramite il Form contatti del sito.
Inviando il modulo ed effettuando il pagamento si autorizza al trattamento dei dati personali in base alla normativa sulla Privacy vigente. I dati possono essere utilizzati solo dallo Studio Progettimultimediali.com

Articolo letto (325) volte

Sono Daniele Venditti (Responsabile di Progettimultimediali.com e Corsi-online.it) mi occupo di formazione informatica dal 2001. Ho conseguito anni di specializzazione in sviluppo siti web con una serie di studi predisposti alle nuove tecnologie…. ho svolto dal 2001 ad oggi più di 8.000 ore di corsi tra preparazione al conseguimento della patente europea del computer (anche come esaminatore AICA) e corsi specifici di grafica web e corsi multimediali. Ho lavorato per grandi società del settore informatico come la Zucchetti Formazione (Milano – Perugia – Frosinone), Media e Services (Frosinone), Scuola di Formazione (Frosinone), e collaborato con scuole di formazione pubbliche nel settore della new ecomomy per la formazione finanziata da fondi regionali e comunitari. Ho dunque maturato una vasta esperienza nella realizzazione di siti web, produzioni multimediali come grafica e video on-line. Ritengo la Formazione online un aspetto essenziale per l'accrescimento professionale.

Comments

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>