Pubblicato il 25/09/12 - aggiornato il  | 12 commenti :

Come cambiare il colore del testo selezionato con il mouse.

Come modificare il colore della selezione di un testo sul nostro blog.
Se selezionate un testo con il mouse di default questo si visualizzerà di colore bianco su sfondo celeste. E' una colorazione comune a tutti i browser. Volendo si può cambiare il colore della selezione di un testo in tutto il blog o in un solo post o pagina statica. La personalizzazione funzionerà con tutti i principali browser con l'eccezione di Internet Explorer dove la selezione continuerà a vedersi nello stesso identico modo.

Per modificare il colore della selezione in tutto il blog, dopo aver salvato il template, si va su Modello > Modifica HTML > Procedi e si cerca la riga ]]></b:skin>. Subito sopra si incolla questo codice

::-moz-selection  {
background: #940F04;
color: white;
}
::selection   {
background: #940F04;
color: white;
}

Si salva il modello. Se adesso qualcuno selezionerà una porzione di testo il colore dello sfondo sarà così

testo-selezionato

Si possono ovviamente cambiare i codici dei colori evidenziati di rosso, uno inserito con il codice HEX e l'altro con il suo nome inglese. Se vogliamo limitarci a un solo post basterà incollare quest'altro codice

<style type="text/css">
::-moz-selection  {
background: #940F04;
color: white;
}
::selection   {
background: #940F04;
color: white;
}
</style>

in modalità HTML prima del contenuto dell'articolo.


12 commenti :

  1. Ciao, ottima questa possibilità di modifica del colore. Io che ho però uno sfondo scuro credo di dover invertire i colori, giusto?

    RispondiElimina
  2. Bella personalizzazione... e questa tonalità di rosso sta bene anche nel mio blog. ;)

    Volendo, funziona anche incollando il codice in Designer Modelli > avanzato > css.

    RispondiElimina
  3. @niconico
    @bastetladeagatta
    La risposta è sì per entrambi

    RispondiElimina
  4. Non so perchè ma non riesco a farlo funzionare ne inserendo il codice sopra ]]> ne incollandolo in Designer Modelli > avanzato > css. Funziona solo se inserito nei singoli post prima del testo, ma a dover modificare ogni post non se ne parla :P

    RispondiElimina
  5. stavo cercando come modificare la visione del link, al passaggio del mouse, come in questo caso... http://acasadisimo.blogspot.it/ ma non riesco a trovarlo.

    RispondiElimina
    Risposte
    1. @ tilli
      Vale a dire mostrarlo in grassetto quando è puntato dal cursore? Basta che tu incolli nel modello questo codice

      a:hover {
      font-weight:bold;
      }

      prima di /* Header
      Dovrebbe funzionare, spero :)

      Elimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy