Come eliminare la sfumatura dal menù delle pagine di Blogger.

Come personalizzare il menù delle pagine statiche di Blogger per eliminare la sfumatura.

Giusto ieri mi è stata posta una domanda in un commento riguardo alla personalizzazione del Menù delle Pagine Statiche di Blogger. Visto che il tema potrebbe interessare altri lettori ho deciso di pubblicare un post esemplificativo della modifica che mi era stata richiesta nel commento.

In alcuni blog di Blogger il menù delle pagine statiche ha una sfumatura che a qualcuno sicuramente piacerà ma di cui altri ne farebbero a meno. Tale sfumatura non viene inserita con un tag HTML del gradiente di colore ma tramite l'URL di una immagine dei server di Blogger.

L'aspetto di un menù siffatto è simile a questo

 

che come vedete ha una sfumatura che rende più chiari i colori della parte alta del menù. Visto che i modelli sono spesso diversi per essere sicuri di operare con il giusto codice bisognerebbe usare i tool Ispeziona Elemento di Chrome o Analizza Elemento di Firefox per trovare il selettore del menù in modo da apportarvi delle modifiche. Cliccando con il destro del mouse nella pagina del blog aperta con Chrome e scegliendo Ispeziona si aprirà un riquadro nella parte bassa della pagina

Si clicca sulla icona in alto a sinistra a forma di freccia che diventerà di colore azzurro. Successivamente si va sull'elemento da ispezionare, in questo caso il menù delle pagine, che a sua volta verrà evidenziato di celeste. Bisognerà evidenziare tutto il menù e non solo una sua parte. Nel riquadro in basso, esattamente nella colonna posta a destra, sarà visibile il codice dell'elemento

che ne determina l'aspetto. Come vedete dallo screenshot il blog di test ha il codice seguente.

.tabs-inner .widget ul {
    background: #940f04 url(http://www.blogblog.com/1kt/simple/gradients_light.png) repeat-x scroll 0 -800px;

Tale codice è puramente indicativo. Dopo aver salvato il template si va su Modello > Modifica HTML e si cerca tale codice. Non ci sarà la parte evidenziata di giallo perché è quella che rileva il browser. Nel modello ci saranno invece i Tag dei Dati per i Layout

.tabs-inner .widget ul {
  background: $(tabs.background.color) $(tabs.background.gradient) repeat-x scroll 0 -800px;
  _background-image: none;
  border-bottom: $(tabs.border.width) solid $(tabs.border.color);

simili a quelli del codice precedente evidenziati di verde. Per eliminare la sfumatura basterà modificare la seconda riga di tale codice in questo modo

.tabs-inner .widget ul {
  background: $(tabs.background.color) repeat-x scroll 0 -800px;
 _background-image: none;
  border-bottom: $(tabs.border.width) solid $(tabs.border.color);

lasciando il tag del colore evidenziato di giallo e eliminando $(tabs.background.gradient) che è quello del gradiente. Dopo aver salvato il modello otterremo un risultato come il seguente

Concludo ricordando che i selettori potrebbero essere diversi da modello a modello e quindi la classe colorata di viola non è detto che sia quella giusta per tutti i template.