Guida introduttiva al CSS per chi usa WordPress

Guida Css per chi usa Wordpress

Ecco la guida CSS che cercavi, se il tema installato sul tuo sito ti piace ma vorresti modificare qualche dettaglio grafico.

Uno dei grandi vantaggi di WordPress è l’estrema flessibilità: in qualunque momento, potrai lavorare sui codici e fare tutte le modifiche che desideri.

Nello specifico, per modificare elementi grafici e formattazione del tuo sito, dovrai lavorare sui file CSS.

Dopo diverse richieste da parte dei lettori del blog, ho deciso di creare una guida CSS per chi usa WordPress e vuole iniziare a fare qualche modifica ai codici.

Questo corso CSS è piuttosto lungo e ricco di codici e nozioni. Non temere se, ad una prima lettura, qualche codice non ti è chiaro: ti consiglio di arrivare fino in fondo ed eventualmente leggere la guida una seconda volta.

Inoltre, suggerisco di esercitarti usando gli strumenti che consiglio nei paragrafi conclusivi.

Gli argomenti di questa guida CSS:

  1. Che cos’è il CSS
  2. Come funziona il CSS
  3. Sintassi
  4. Selettori
  5. Dichiarazioni CSS
  6. Applicare le regole CSS al tuo sito WordPress
  7. Ispezionare il CSS delle pagine web
  8. Verificare i tuoi codici CSS

Non ci resta che iniziare.

1. Che cos’è il CSS

CSS è l’acronimo di Cascading Style Sheet.

WordPress usa principalmente codici PHP, HTML e CSS. Il PHP è usato per implementare tutte le funzionalità del sito, mentre L’HTML è il linguaggio markup usato per far apparire sulle pagine i contenuti veri e propri (testi, immagini, eccetera).

Il CSS è invece usato per formattare i contenuti e modificare le pagine a livello grafico. Per esempio, viene usato per configurare font, misura dei testi, colori, bordi, ombre e molto altro ancora.

Questo linguaggio è stato sviluppato per poter gestire la formattazione delle pagine separatamente dai contenuti. Infatti, lavorando sul CSS potrai fare modifiche a livello grafico senza rischiare di perdere contenuti o generare errori negli altri codici del tuo sito WordPress.

Ecco un esempio di codici CSS (ciascun blocco di codice viene chiamato regola):

h1 {
 font-size: 30px; 
 font-style: italic; 
 font-weight: bold;
 color: #d00000;
}

h2 {
 font-size: 20px; 
 font-style: oblique; 
 font-weight: 100; 
 color: #3300cc; 
}

Qui sotto vedi:

  • A sinista, un’esempio di contenuto HTML senza CSS.
  • A destra, lo stesso contenuto a cui è stato applicato il CSS dell’esempio sopra.

contenuto senza e con CSS

I codici usati in questo esempio sono molto semplici. Alla fine di questa guida CSS sarai in grado di leggerli e replicarli senza difficoltà.

2. Come funziona il CSS

All’interno dei file CSS si trovano le cosiddette regole. In ciascuna regola, viene definita la formattazione per un particolare selettore (nella sezione 4 approfondiremo cosa sono i selettori).

Tutti i contenuti del sito che, all’interno dell’HTML, vengono associati a tale selettore assumono automaticamente la formattazione definita nel file CSS.

In questo modo, è possibile applicare la stessa formattazione a molteplici contenuti all’interno del sito, senza che questa debba essere definita ogni volta.

Allo stesso modo, quando fai una modifica al file CSS, i cambiamenti vengono automaticamente applicati a tutti i contenuti associati al selettore su cui hai lavorato.

3. Sintassi

Una tipica regola CSS ha il seguente aspetto:

.testo-grassetto {
font-weight: bold;
}

Nel dettaglio, ecco gli elementi che compongono una regola CSS:

Sintassi CSS

Nota: la lingua utilizzata nel CSS è l‘inglese americano.

4. Selettori (elementi, id, classi, selettore universale)

Il foglio di stile CSS viene usato per definire le caratteristiche grafiche dei vari componenti di una pagina.

I contenuti a cui deve essere applicata la formattazione definita nella regola CSS vengono identificati tramite il selettore.

Come abbiamo già visto nella sezione precedente, la formattazione definita per un particolare selettore nel foglio di stile CSS, viene applicata a tutti gli elementi che sono identificati con tale selettore all’interno dei contenuti HTML.

Sfruttando l’esempio precedente, tutti i contenuti HTML a cui sarà associato il selettore .testo-grassetto, assumeranno la formattazione font-weight: bold; .

Vediamo ora i vari tipi di selettore:

Elementi

Il selettore “elemento” applica le regole CSS ai contenuti HTML, identificati all’interno del CSS con il loro stesso nome.

Per esempio, puoi definire la formattazione dei titoli h1 in questo modo:

h1 {
font-size: 30px;
}

In questo stesso modo, possono essere formattati gli elementi h2, h3, h4, h5, h6, p (come paragrafo) e altri ancora.

Vediamo ora i due selettori che userai più spesso all’interno del tuo foglio di stile:

Classi

Nell’esempio precedente, .testo-grassetto è un selettore di classe.

Le classi sono identificate dal punto, seguito dal nome della classe: .nomeclasse .

Una volta definito nel foglio di stile CSS, il selettore di classe può essere utilizzato per formattare molteplici elementi all’interno delle pagine web.

Per esempio, per rendere grassetto un intero paragrafo di un articolo, dovrai prima aggiungere la dichiarazione CSS  nel tuo file di stile. Quindi, aprire il tuo post con l’Editore di Testo e, in corrispondenza del paragrafo che vuoi rendere grassetto, aggiungere il riferimento alla classe all’interno del tag <p>, in questo modo:

<p class=”testo-grassetto>Il tuo paragrafo</p>

ID

Il funzionamento del selettore ID è molto simile a quello delle classi.

Per quanto riguarda la sintassi, al posto del punto viene utilizzato il cancelletto, in questo modo:

#nome-id {
font-weight: bold;
}

Come le classi, la formattazione degli ID viene definita attraverso regole CSS all’interno del foglio di stile.

La differenza tra ID e Classi

La principale differenza tra ID e classi è che gli ID devono essere unici, mentre le classi no.

Questo significa che:

  • Un elemento può avere un solo ID e lo stesso ID può essere usato una sola volta all’interno di una pagina.
  • Un elemento può avere molteplici classi e la stessa classe può essere usata su molteplici elementi.

Selettore universale

Esiste un altro tipo di selettore, chiamato universale. Questo serve a formattare tutti i contenuti del tuo sito web.

Un selettore universale viene indicato mediante un asterisco *, in questo modo:

* {
font-weight: bold;
}

5. Dichiarazioni CSS

In questa sezione faremo una panoramica delle dichiarazioni CSS più comuni. In questo modo, potrai riconoscerle, modificarle ed aggiungerle all’interno del tuo foglio di stile.

Per ogni gruppo, trovi la lista delle principali proprietà ed i valori che possono essere assegnati a ciascuna di esse. Cambiando il valore assegnato alla proprietà, cambierai la formattazione sulla pagina.

Testi (font, stile e grandezza dei testi)

font-family

Questa proprietà serve a definire il font utilizzato per testi, titoli, eccetera.

h2 {
font-family: "Times New Roman", Times, serif;
}

Come vedi, il valore è composto da tre parti separate dalla virgola: “Times New Roman”, Times, serif.

Times New Roman indica il font preferito, quello che desideriamo appaia sulla pagina. Tuttavia, non tutti i browser sono sempre in grado di mostrare il primo font indicato nel foglio di stile. Per questo motivo, ne indichiamo un secondo (Times) che verrà usato se il browser non riconosce il primo. Al terzo posto, abbiamo indicato una famiglia molto generica, serif, da usare se gli altri due font non possono essere visualizzati.

Come vedi “Times New Roman” è tra virgolette: se il nome di un font è composto da più parole, dovrai usare le virgolette. Altrimenti, esse non sono necessarie.

font-style

Questa proprietà serve a definire lo stile del testo: normale, corsivo o obliquo (quest’ultimo è usato molto raramente).

Rispettivamente, i valori da utilizzare sono: normal, italic e oblique.

h2 {
font-style: normal;
}

Usando questa regola, il testo apparirà nella versione normale, la più semplice.

h2 {
font-style: italic;
}

Usando questa regola, il testo apparirà in corsivo.

h2 {
font-style: oblique;
}

Usando questa regola, il testo apparirà nella versione obliqua, simile al corsivo.

font-size

Questa proprietà serve a determinare le dimensioni del testo. Nel campo del valore si può indicare la dimensione in pixel o in em.

Gli em sono un’unità di misura comunemente usata dagli sviluppatori al posto dei pixel. Un em corrisponde a 16 pixel.

font-size (pixel)

h2 {
font-size: 24px;
}

font-size (em)

h2 {
font-size: 1.5em;
}

font-weight

La proprietà font-weight è usata per determinare il “peso” del testo. Come valore per font-weight potrai usare valori testuali come lighter, normal, bold e bolder, oppure numerici di cento in cento da 100 a 900 (400 è il valore che equivale a normal).

Ecco alcuni esempi:

h2 {
font-weight: normal;
}
h2 {
font-weight: 700;
}

(il valore 700 equivale a bold, cioè, al grassetto standard).

Color

La proprietà color serve a definire il colore del testo. Nel CSS, i colori sono indicati con valore esadecimale (HEX) . Se non conosci questa convenzione, ti consiglio di visitare questa pagina dove trovi molti esempi ed equivalenti valori RGB.

Questa è la sintassi della regola CSS per quanto riguarda il colore del testo:

h2 {
color: #ababab;
}

Sfondo

Alcuni elementi del tuo sito saranno caratterizzati da uno sfondo. Che tu voglia usare come sfondo un colore oppure un’immagine, sarai comunque in grado di determinarlo nel tuo foglio di stile.

background-color

Questa proprietà è utilizzata per configuare il colore di sfondo. Come per la proprietà color, il valore sarà espresso con il codice HEX corrispondente al colore.

body {
background-color: #ababab;
}

background-image

Se, invece di un colore, vuoi usare come sfondo un’immagine, dovrai usare la proprietà background-image. Come valore, dovrai inserire l’URL dell’immagine che vuoi utilizzare. Questa è la sintassi:

body {
background-image: url(“url dell’immagine”);
}

L’immagine di sfondo può essere personalizzata ulteriormente con altre proprietà:

  • background-repeat per ripetere o meno l’immagine. I valori da utilizzare sono repeat (per ripetere l’immagine in orizzontale e in verticale), repeat-x (per ripetere l’immagine solo in orizzontale), repeat-y (per ripetere l’immagine solo in verticale) e no-repeat (per non ripetere l’immagine).
  • background-position, per determinare la posizione dello sfondo sulla pagina.
  • background-attachment, per configurare se l’immagine di sfondo deve scorrere con i contenuti o rimanere fissa sulla pagina.

Il box del CSS

Nel CSS, tutti i contenuti sono racchiusi in un rettangolo invisibile formato da più strati, come vedi nel grafico qui sotto:

Box del CSS

Il contenuto è circondato dal padding, un’imbottitura trasparente, a sua volta circondata da un bordo. All’esterno del bordo si trova il margin, un margine anch’esso trasparente.

Usando il CSS potrai determinare spessori, stile e colori di questi elementi.

Padding

I contenuti hanno il padding su quattro lati: top (superiore), right (destro), bottom (inferiore) e left (sinistro). Seguendo quest’ordine, puoi definire lo spessore del padding usando i pixel come valori nella dichiarazione CSS. Ecco un esempio:

.image {
padding: 20px 30px 10px 40px;
}

I contenuti associati alla classe .image avranno un padding superiore pari a 20px, destro pari a 30px, inferiore pari a 10px e un padding di 30px sulla sinistra.

In alternativa, puoi creare una dichiarazione per ciascun lato, in questo modo:

.image {
padding-top: 20px;
padding-right: 30px;
padding-bottom: 10px;
padding-left: 40px;
}

Attenzione!

Ricordati di concludere ogni dichiarazione CSS con il punto e virgola.

Bordi

Il bordo è un elemento del box CSS caratterizzato da spessore, colore e stile.

Come il padding, il bordo ha quattro lati: top, right, bottom e left.

Le principali proprietà relative ai bordi sono:

border-width

Questa proprietà serve a determinare lo spessore del bordo. Anche in questo caso, può essere usato un valore di tipo testuale (thin – sottile, medium – medio, thick – spesso) oppure un valore in pixel.

.box-with-border {
border-width: thick;
}
.box-with-border {
border-width: 10px;
}

border-style

La proprietà border-style è invece utile per determinare lo stile del bordo: solid (solido), dashed (tratteggiato), dotted (puntato) , double (doppio), eccetera.

Ecco un esempio di regola CSS per creare un bordo puntato con spessore 10px:

.box-with-border {
border-width: 10px;
border-style: dotted;
}

border-color

Anche in questo caso, usa un valore hex per impostare il colore del bordo.

.box-with-border {
border-width: 10px;
border-style: dotted;
border-color: #120A8F;
}

Il codice qui sopra farà apparire, attorno agli elementi associati alla classe box-with-border, un bordo puntato di spessore 10px e colore blu.

Come per il padding, i valori indicati nella dichiarazione possono essere applicati a tutti e quattro i lati oppure ad un lato singolo, utilizzando come proprietà border-top, border-right, border-bottom o border-left.

border-radius

Questa è un’altra proprietà molto utile. Serve, infatti, ad arrotondare gli angoli di un bordo. Nel campo valore potrai usare pixel oppure em. Più alto sarà il valore, più arrotondati saranno gli angoli.

.box-with-border {
border-width: 10px;
border-style: dotted;
border-color: #120A8F;
border-radius: 30px;
}

Margin

Le proprietà margin funziona esattamente come quella padding. Per ciascun lato, usa un valore in pixel seguendo l’ordine top, right, bottom, left.

In alternativa, crea una dichiarazione per ciascun lato.

.box-with-margin {
margin: 10px 20px 30px 40px;
}

E’ equivalente a:

.box-with-margin {
margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;
}

Commenti

Concludiamo la quinta sezione di  questa guida CSS parlando dei commenti.

Quando crei un foglio di stile contenente molte regole, è utile inserire delle note per ricordarti a cosa servono i vari codici oppure spiegarli a chi lavora con te sul sito.

Per contrassegnare il tuo testo come commento, dovrai usare /* all’inizio e */ alla fine. In questo modo, il tuo commento sarà visibile solo all’interno del foglio di stile e non sulla pagina visibile online.

Ecco un esempio:

/* La seguente classe è usata per ingrandire il font utilizzato per i titoli h1 */
h1 {
font-size: 30px;
}

Ora che consci alcune delle proprietà più importanti, passiamo alla prossima sezione di questo breve corso CSS. Imparerai come usare i codici che hai imparato nel tuo sito WordPress.

6. Applicare le regole CSS al tuo sito WordPress

Il Foglio di stile style.CSS

Su WordPress, tutte le regole CSS sono contenute in un file chiamato style.css. Questo è anche chiamato foglio di stile.

Puoi visualizzare il foglio di stile del tuo tema navigando in Aspetto > Editor.

In teoria, potresti  fare le modifiche e le aggiunte necessarie direttamente nel tuo foglio di stile. Tuttavia, se decidi di lavorare direttamente sul file style.css, ogni volta che effettuerai un aggiornamento del tema tutte le modifiche andranno perse.

Tema Child

Una prima soluzione è quella di usare un tema child, cioè, un tema che eredita le caratteristiche del tema genitore e che può essere modificato senza che tutti i cambiamenti vengano persi ad ogni aggiornamento.

Vuoi avere più informazioni su un tema child? Ecco come creare, configurare ed usare un tema child.

Campo Custom CSS

Una seconda soluzione è quella di utilizzare lo spazio Custom CSS (cioè, CSS personalizzato) che è ormai una funzionalità presente nella maggior parte dei temi WordPress.

Solitamente, questo campo si trova all’interno delle sezioni per la configurazione del tema. Per esempio, sul tema Enfold, si trova in Theme Options > General Styling (in questo tema, il campo è chiamato Quick CSS)

Campo Custom CSS Enfold

Sovrascrivere le dichiarazioni CSS

Per ottenere gli effetti desiderati,  dovrai sovrascrivere dichiarazioni CSS già presenti all’interno del file style.css.

Talvolta, il box custom CSS presente all’interno del tema (come descritto nella sezione precedente) va a sovrascrivere automaticamente il foglio di stile.

Se però noti che le modifiche non hanno effetto, dovrai indicare manualmente che le tue nuove dichiarazioni devono avere priorità.

Per farlo, usa la dicitura !important alla fine della dichiarazione, prima del punto e virgola. 

Ecco un esempio:

h2 {
font-size: 20px !important ;
}

Questa dichiarazione andrebbe a sovrascrivere le altre dichiarazioni relative alla misura del font dell’elemento h2 all’interno del foglio di stile.

Dichiarazioni “Inline”

Se hai bisogno di modificare il CSS di un singolo elemento, potrai farlo direttamente all’interno dell’Editore di Testo, senza dover creare una nuova classe o ID nel foglio di stile.

Semplicemente, aggiungi le dichiarazioni CSS all’interno del tag HTML che precede il contenuto, usando la dicitura “style=”  così:

<h2 style="color:#ababab;font-size:40px;">Questo è un sottotitolo.</h2>

Come vedi, dopo il tag h2 è presente la dicitura style= . All’interno delle virgolette, sono racchiuse due dichiarazioni CSS (color: #ababab e font-size:40px), ciascuna chiusa dal punto e virgola.

In questo caso, la regola CSS sarà applicata esclusivamente a questo sottotitolo h2.

7. Ispezionare il CSS delle pagine web

Il modo migliore per imparare il CSS è esercitandosi. Con la pratica, usare i codici CSS diventerà sempre più facile.

Oggi, abbiamo la fortuna di poter utilizzare strumenti fantastici per ispezionare i codici CSS di qualunque pagina web e anche testare temporaneamente le nostre modifiche, senza che i cambiamenti siano definitivi.

Questi strumenti sono molto utili anche per trovare le classi e gli ID associati ai contenuti delle tue pagine. Una volta trovato il nome della classe su cui vuoi lavorare, potrai creare per essa nuove dichiarazioni che andranno a sovrascrivere quelle già presenti nel file style.css

Chrome DevTools per browser Google Chrome

Se usi come browser Google Chrome, hai a disposizione Chrome DevTools.

Su qualunque pagina web, clicca il tasto destro del tuo mouse e seleziona ispeziona elemento. Si aprirà nella parte inferiore della pagina una finestra suddivisa in due parti: sulla destra, l’HTML della pagina. Sulla sinistra, il CSS.

Per ispezionare nel dettaglio un elemento specifico della pagina, clicca sulla piccola lente d’ingrandimento che si trova nell’angolao in alto a sinistra del box DevTools. Quindi, seleziona sulla pagina l’elemento di tuo interesse.

Vedrai che i codici nel box si aggiorneranno con quelli relativi all’elemento selezionato (puoi sempre usare la barra di scorrimento per muoverti verso l’alto ed il basso e selezionare elementi all’interno del codice stesso).

Una volta individuate le dichiarazioni CSS su cui vuoi lavorare, clicca due volte sul codice. In questo modo, si attiverà un campo per modificare il codice oppure disattivare del tutto le dichiarazioni CSS.

Questo sarà un ottimo modo per esercitarti e testare tutte le modifiche che desideri.

Chrome DevTools

Firebug per browser Mozilla Firefox

Se invece usi come browser Mozilla Firefox, ti consiglio Firebug. Questa è una vera e propria estensione che aggiunge al tuo browser diverse funzionalità molto utili per analizzare e modificare codici HTML e CSS.

Per installare Firebug, visita il sito ufficiale e clicca Install Firebug in alto a destra. Avvia il download e segui il procedimento per aggiungere l’estensione alla barra degli strumenti del tuo browser.

Per attivare Firebug, clicca il simbolo a forma di insetto in alto a destra: questo farà aprire un box nella parte inferiore della pagina, similare a quello Chrome DevTools.

Anche qui, sulla sinistra vedrai il codice HTML, sulla destra quello CSS.

Per visualizzare tutto il CSS della pagina, clicca la tab CSS.

Per selezionare un elemento specifico sulla pagina, clicca il simbolo con il piccolo rettangolo e il puntatore che si trova nella barra degli strumenti della finestra Firebug.

Firebug

8. Verificare i tuoi codici CSS

Quando si sta imparando ad usare il CSS, non è raro dimenticare qualche parentesi o punto e virgola.

Un ottimo strumento per testare la validità dei tuoi codici è il CSS Validation System del W3C, la comunità internazionale che si occupa di sviluppare gli standard relativi ai codici sul web.

Semplicemente, inserisci le tue regole CSS all’interno del campo di testo e clicca “Verifica”. Se i tuoi codici sono corretti, apparirà “Congratulazioni. Nessun errore trovato.” Se invece ci sono errori, apparirà un messaggio contente la riga da correggere.

Conclusione

Siamo arrivati alla fine di questa guida introduttiva al CSS. Ricorda che il modo migliore per imparare a codificare è fare pratica: ti consiglio di iniziare ispezionando le pagine web suggerite nella penultima sezione. Avendo letto questa guida, sarai già in grado di comprendere il significato di molte dichiarazioni.

Hai già provato a modificare il CSS del tuo sito web? Oppure fino ad ora i codici ti sono sembrati del tutto incomprensibili? Come sempre, per qualunque domanda o suggerimento, ti invito a lasciare un commento sotto all’articolo.

Cerchi aiuto su qualsiasi aspetto che riguardi il tuo sito WordPress?

Se hai bisogno del supporto di un professionista rapido e dal costo accessibile, ti suggeriamo di provare il servizio di assistenza di SOS WP.

Andrea Di Rocco

Andrea Di Rocco

Ciao! Sono Andrea, il webmaster di SOS WordPress. La mia missione è di aiutarti a diventare autonomo nel creare il tuo sito web, posizionarti sui motori di ricerca e guadagnare online grazie al tuo progetto. Oltre a questo voglio far si che tu spenda il minor quantitativo di soldi e tempo mentre raggiungi i tuoi obiettivi sul web. Conosciamoci nell'area commenti di questo articolo!
Andrea Di Rocco

Latest posts by Andrea Di Rocco (see all)


PROMOZIONE HOSTING WORDPRESS SITEGROUND

SiteGround - Miglior hosting per Wordpress
35 commenti
  1. dice:

    Ciao Andrea,

    ho visto la proprietà Margin e provata ad applicare nel foglio Style per fare margini esterni al body pari a 100 px su tutti e quattro i lati,ossia sopra,sotto,destra e sinistra. Però non succede nulla e ho provato anche a svuotare la cache. Probabilmente sbaglio il punto esatto dove metterlo, giusto? Dove andrebbe messo?

    Grazie

    Rispondi
  2. dice:

    Ciao Andrea,
    ho provato a modificare l’altezza di un determinato post seguendo i tuoi consigli e utlizzando il Costum Css e ispezionando gli elementi, ma nulla non mi fa apportare tale modifica. Cosa può essere? Ho capito bene che bisogna agire solo sul CSS oppure bisogna intervenire su un altro file?

    Grazie, Marco

    Rispondi
  3. dice:

    Ciao ragazzi,
    posso farvi una domanda che non c’entra del tutto con questo articolo? A me servirebbe che la barra superiore del menù si nascondesse all’apertura del sito per poi comparire al primo scroll del mouse. Ho a disposizione anche una barra Top Drawer Type e la mia home page è creata con Compositore Visivo. In pratica nello spazio superiore ho un video che parte in automatico all’apertura dell’home page. Il video è inserito con Slider Revolution. Però ho la barra del menù sopra che mi copre parte del video. Sapete se esiste un plugin o come altro posso fare? Non mi intendo troppo di CSS. Grazie

    Rispondi
  4. dice:

    Buongiorno Andrea,
    per il mio sito ho scelto il tema “Sela” (sono alle prime armi quindi volevo provare con qualcosa di free) al momento sono riuscita a destreggiarmi abbastanza bene e le possibilità che offre per il mio tipo di sito sono sufficienti, l’unica cosa che vorrei riuscire a modificare però è la barra del menù rosa. Vorrei capire dove devo andare a modificare i colori esadecimali nei codici CSS.

    Grazie
    Un saluto

    Rispondi
    • dice:

      Ciao Fiammetta, li dovrai modificare nel file style.css del tema.
      Verifica la classe del menu, con l’inspector del browser, e poi fai la modifica nel foglio di stile. Se hai difficoltà, scrivici a supporto@sos-wordpress.it.
      T consiglio in ogni caso di creare un tema child, in modo che le modifiche non siano sovrascritte ad un prossimo aggiornamento del tema.
      Un saluto!

      Rispondi
  5. dice:

    Ciao Andrea,ho appena fatto una copia del mio sito da remoto a locale ma mi sono accorto che molti bottoni ed icone hanno cambiato colore hai qualche suggerimento da darmi per riportare il colore di prima,grazie

    Alessandro

    Rispondi
    • dice:

      Ciao Alessandro,
      in realtà nel trasferimento non dovrebbe essere modificato lo stile..
      Controlla meglio tutti i passaggi!

      Rispondi
  6. dice:

    Buongiorno Andrea,
    in primis complimenti per le guide su Wp davvero eccellenti e a prova di neofita come me!

    Vorrei una dritta: non riesco a modificare sul mio blog con tema catch box la scritta in basso a destra (quella appunto del “tema di catchbox” e poi segue il nome del tema come link).
    Da Firebug trovo i comandi da modificare ma poi se vado sul footer o sul style.css non ci sono!
    Sono comandi nascosti? Come posso fare?
    La ringrazio.

    Rispondi
    • dice:

      Salve Pierpaolo,
      prima di tutto, grazie dei complimenti che ci fanno molto piacere ;-)
      Sicuro che siano valori da modificare sul footer, e non in altro file del tema?
      Un saluto!

      Rispondi
      • dice:

        Ah, è una bella domanda…dopo aver scorrazzato su google quasi tutti gli “esperti” indicano il footer.
        Cosa mi consiglia?
        Grazie ancora e un saluto!

        Rispondi
  7. dice:

    Salve! io ho un problema da due giorni che non riesco a risolvere! per esercitarmi faccio sempre siti wordpress con tema child! sugli stessi siti dove non ho mai avuto problemi a cambiare stili, i browser non mi leggono piu le modifiche fatte ai css!! (a meno che non svuoto la cache, ma 1) non posso farlo per ogni modifica e 2) fino a due giorni fa non avevo problemi). Non so che fare: ho ripristinato i browser alle impostazioni originali 2) ho aggiornato mamp 3)ho reinstallato dreamweaver. Davvero non so più come fare! purtroppo mi succede solo con siti wordpress (quando faccio siti in html le modifiche ai css le vedo senza problemi! non so veramente cosa può essere! Non ci sono errori ne al functions.php e ne allo style.css perchè se svuoto la cache le modifiche le vedo (dopo aver aggiornato almeno 5 volte la pagina). avete soluzioni? grazie infinite

    Rispondi
      • dice:

        si certo! tutto aggiornato! ora va meglio se svuoto la cache.. il problema è che se non la svuoto ogni 10 min i css non si modificano. quello che mi chiedo è il perchè visto che fino a una settimana non avevo problemi.

        Rispondi
  8. dice:

    ciao! una sola domanda:

    diciamo che voglio cambiare la classica frase che esce sotto i miei siti gratuiti “hosted by altervista” quando faccio ispeziona lui mi seleziona:

    Hosted by AlterVista

    Cambiando ovviamente Hosted by altervista in prova prova il sito mi mostra la modifica funzionante… ma vorrei sapere dove andare a modificare per renderla effettiva. Mi aiuti a capire?

    Rispondi
    • dice:

      Salve Carmine,
      non so se tu abbia i permessi necessari, per poter togliere tale scritta.
      Dovresti avere pieno accesso ai file, contatta il supporto di Altervista per verificare questa possibilità.
      Un saluto!

      Rispondi
  9. dice:

    Ciao Andrea,
    ma quindi l’uso del Custom CSS è alternativo alla creazione di un tema child? Il mio tema è Schema di mythemesho e finora ho sempre apportato le modifice via custom css: se faccio l’update tali modifiche rimarranno?
    Grazie mille!

    Rispondi
    • dice:

      Ciao Primo!
      No, se aggiorni il tema, e non hai creato un tema child, le modifiche apportate tramite il Custom CSS non saranno salvate.
      Ti consiglio quindi di salvarle preventivamente, incollandole magari su un editor di testo.
      Un saluto!

      Rispondi
  10. dice:

    Ottima guida, mi è stata veramente utile come supporto e assistenza per la realizzazione del mio sito web personale. Quali altre consigliate per chi deve ottimizzare al meglio il proprio sito wordpress?

    Rispondi
  11. dice:

    Bellissima guida! volevo chiedervi, come mai quando sostituisco il valore all’interno di un contenuto per esempio:
    font-size: 16px;
    font-weight: 300;
    sostituisco con
    font-size: 36px;
    font-weight: 400;
    una volta che aggiorno il file e poi aggiorno il sito non vedo le modifiche?…me lo fa per qualsiasi modifica che provo ad apportare, provo a cambiare il valore ma non cambia assolutamente niente all’interno del sito! come mai? dove sbaglio?

    Rispondi
    • dice:

      Ciao Vincenzo,
      hai pulito la cache del browser dopo aver apportato la modifica? Fammi sapere e grazie mille dei complimenti alla guida sul CSS :-)

      Rispondi
  12. dice:

    Grazie infinite! Sto cominciando a pasticciare col mio sito in wordpress e alcune modifiche al CSS le stavo facendo “a capocchia”! :D
    Adesso almeno alcune cose mi sono più chiare (alcune sono quasi intuitive, oserei dire :D )
    torno a curiosare il tuo sito ;-)
    Grazie, ciao!

    Andrea

    Rispondi
  13. dice:

    ciao Andrea,
    complimenti per la guida, ben chiara ed efficace !
    una domanda, ho iniziato a costruire il mio sito con wordpress, utilizzando il tema customizr, poi ho scaricato il plugin qtranslate per rendere il sito bilingue (IT-EN)… tutto bene in generale (nelle impostazioni delle pagine trovo i due campi/tab per inserire il testo in italiano e inglese, non riesco invece a personalizzare la descrizione che metto nelle photogallery… come posso fare ?
    grazie mille in anticipo

    Rispondi
  14. dice:

    Ciao Andrea, sto studiando, grazie della guida. Ti chiedo una cosa: nella library media, per ogni immagine c’è anche un settore css.per ottimizzare le immagini senza plugin, si potrebbe utilizzare? e se si, mi sai dare qualche indicazione o dirmi dove trovarle?
    Ti ringrazio.

    Rispondi

Lascia un Commento

Vuoi partecipare alla discussione?
Fornisci il tuo contributo!

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *