Quanto segue non riguarda la scelta di un Tema WordPress, ma trovare gli stili CSS all’interno del vostro Tema attuale. Spesso un problema si verifica in una parte del layout o del template. Per esempio, c’è un bordo che non vuoi tra il menu della barra laterale e il resto della pagina. Cerchi e cerchi ma non riesci a trovare alcun riferimento al bordo. E adesso?

Giocare al detective CSS

Cominciamo a giocare al detective CSS. Sapete dov’è il problema, ma non riuscite a trovarlo. Nell’esempio precedente, dovete cercare un bordo errante.

Iniziate esaminando attentamente una pagina generata (o una pagina di prova) e cercate del testo identificativo nella barra laterale, vicino al bordo errante. Diciamo che nella barra laterale c’è il titolo di un post chiamato “All About Harry”. Sai che troverai quel titolo nella tua barra laterale quando visualizzi il codice sorgente della pagina.

Per visualizzare il codice sorgente di una pagina, vai sulla barra dei menu del tuo browser e scegli VIEW > PAGE SOURCE o VIEW > SOURCE. Si aprirà una pagina con il codice sorgente della pagina.

Utilizza il tuo pratico strumento investigativo, Ctrl+F, per attivare la tua ricerca. Digita “all about harry” e clicca su TROVA. Probabilmente, a meno che tu non abbia le parole “all about harry” nel tuo post, ti porterà alla prima visualizzazione della frase “all about harry” che probabilmente è nella tua barra laterale. Se non è così, premi FIND di nuovo finché non hai trovato la frase giusta nell’area giusta.

Se stai usando Internet Explorer, un metodo alternativo è quello di usare la barra degli strumenti di sviluppo di Internet Explorer, che ti permette di vedere e selezionare visivamente gli elementi, gli ID e le classi nella pagina. Mostra gli elementi nella gerarchia della pagina, i loro attributi CSS e può delineare DIV, tabelle, ecc. Potete scaricare la Toolbar da Microsoft.

Una volta trovata la frase, è il momento di giocare al detective CSS. Cercate nel codice della frase “All About Harry” una delle due cose. Assomiglierà a una di queste, usando parole come sidebar, menu o sidecolumn:

<div>or<div class="sidebar">

Questa è la sezione principale che contiene il vostro menu della sidebar. Hai trovato il primo sospetto.

Ora, apri il tuo file style.css e fai un’altra ricerca per sidebar o qualsiasi sia il nome risultante che hai scoperto. Di solito viene identificato in due modi:

#sidebaror.sidebar

Guarda negli stili sotto questi selettori CSS e vedi se c’è una menzione di border, spesso simile a questa:

#sidebar {position: relative; float: right; width: 170px; color: blue; font-size: 90%; border-right: solid 1px blue; }

Ecco il tuo border, il criminale! Se questo è il colpevole, cancellate il riferimento al bordo e siete a posto.

Se non lo è, la caccia continua.

A volte il colpevole è quello che meno sospettate. Forse il bordo non è causato dall’ovvio sospetto, la barra laterale, ma dalla sezione del contenuto. Torna al codice sorgente della pagina generata e cerca le prime parole del tuo post. Cercate sopra qualcosa come:

<div>

Potrebbe essere chiamato content, page. post, maincolumn, widecolumn, o avere un altro alias, ma dovrebbe essere il contenitore CSS che contiene le informazioni del vostro post. Ora, tornate al foglio di stile e controllate se c’è un bordo in quella sezione.

Rischiate il foglio di stile

Se tutti questi fallimenti, il detective CSS non abbandona mai la caccia. Torna al nascondiglio di tutti gli stili, il file style.css, e perquisiscilo facendo una ricerca per “border” e guarda attentamente ogni sospetto. Prendete nota del nome ID del selettore, come sidebar, menu, content e page, e poi tornate al sorgente della pagina generata per vedere se quello potrebbe essere il vostro colpevole.

Potete anche selezionare il sospetto border che avete trovato sul foglio di stile e tagliarlo e incollarlo in un file TXT (come Notepad) che sta aperto sul vostro computer come un blocco note. Prendi nota del nome del selettore da cui l’hai rimosso come questo:

Removed border: solid 2px green from #content

Poi salva lo style.css modificato e caricalo sul tuo sito. Aggiorna il post di prova generato e vedi se il bordo indesiderato è sparito. Se è così, hai trovato il colpevole. In caso contrario, tornate al Notepad e copiate il codice e rimettetelo nel vostro style.css nella sezione “content”, rimettendo le cose dove le avete trovate.

Se trovate il colpevole, fate una piccola danza, gridate e applaudite, e rendete gli altri sospettosi e nervosi quando vi stanno intorno. Il detective CSS risolve un altro crimine CSS!

Altro aiuto per la risoluzione dei problemi CSS

  • CSS che risolve i bug del browser
  • Risoluzione dei problemi CSS