Cambiare il colore di selezione del testo in una pagina web usando lo standard CSS 3


Molto richiesta nel sondaggio la possibilità di cambiare il colore di selezione del testo nel blog, per dare un tocco personale in più al nostro spazio personale. L’operazione è semplicissima, ma comincio subito dai lati negativi: nonostante il codice per farlo è previsto nello standard CSS 3, Internet Explorer non lo supporta (tanto per cambiare), quindi questa modifica sarà apprezzata solamente dagli utenti che usano un browser diverso.

Tuttavia essendo uno standard, è possibile che nelle prossime versioni del browser di Microsoft venga supportata anche questa feature.

Il codice CSS per cambiare il colore della selezione

In un foglio di stile, per cambiare il colore di selezione del testo basta inserire queste righe:

::selection {
    background: #7AFFAF;
    }
::-moz-selection {
    background: #7AFFAF;
}

Sostituendo il codice evidenziato in rosso col valore esadecimale del colore che vogliamo utilizzare, utilizzando la codifica RGB dei colori.

L’istruzione è duplicata perchè la prima (::selection) viene supportata dai browser che utilizzano Webkit (Safari e Chrome, per fare un esempio), mentre la seconda (::-moz-selection) da Firefox.

Cambiamo il colore su Blogger

Nel caso di Blogger, andiamo in Layout->Modifica HTML e incolliamo il codice subito sopra questa riga:

]]></b:skin>

Ecco l’effetto che otterremo:

image

In questo caso il colore di selezione del testo è diventato verde chiaro. Rimangono comunque delle tracce di azzurro a causa della struttura predefinita dei template di Blogger. Volendo eliminare quest’effetto, si può cercare nel codice del template questa riga (dopo aver selezioniato “Espandi i modelli widget”):

<div style='clear: both;'/> <!-- clear for photos floats –>

e sostituirla con questa:

<!--div style='clear: both;'/--> <!-- clear for photos floats –>

che praticamente la rende inattiva, ottenendo questo risultato:

image

Quest’ultimo codice che abbiamo modificato serve per evitare che il testo del post si sovrapponga alle immagini in particolari condizioni, quindi se doveste avere effetti collaterali, ripristinate la riga com’era originariamente e fate pace con quel poco di azzurro che purtroppo è rimasto.

La modifica che ho proposto ha effetto su tutto il template del blog, quindi tutte le sue parti evidenziate avranno il nuovo colore:

image

Un modo in più per personalizzare il proprio blog.

Condividi su Facebook, Twitter o Google Buzz:
Condividi su Facebook Condividi su Twitter Pubblica su Google Buzz

Per ricevere direttamente in posta i nuovi articoli, inserisci il tuo indirizzo email:
oppure puoi iscriverti al feed per tenerti sempre aggiornato sui nuovi contenuti del blog!
Per maggiori informazioni sui feed, clicca qui!

18 commenti:

Antonio - ASOP Blog ha detto...

grandissimo! lo stavo cercando da tempo sto "hack"..grazie tante

Cem ha detto...

Grazie

Cem ha detto...

"L’istruzione è duplicata perchè la prima (::selection) viene supportata dai browser che utilizzano Webkit (Safari e Chrome, per fare un esempio), mentre la seconda (::-moz-selection) da Firefox."

Quindi se nel primo blocco (::selection) mettiamo nella codifica RGB verde, e nel secondo blocco (::-moz-selection) rosso, in teoria in Safari e Google Chrome dovrebbe la selezione del testo dovrebbe essere verde, mentre in Firefox rosso. O mi sbaglio?

Den ha detto...

Grazie! Io sono uno di quelli che hanno votato per questa modifica, perchè la trovo molto particolare e può essere personalizzata da ogni blogger.

ANhIMA ha detto...

Caro Tenino sai quanto io apprezzi il tuo blog e per questo che mi chiedevo se potresti spiegare sti benedetti fogli di stile soprattutto per chi come me ha un blog non leggerissimo. Forse è un argomento troppo esteso partendo da 0?

Tenebrae ha detto...

@anonimo: si, io non ho provato ma dovrebbe funzionare così

@paolo: esatto, è un discorso molto ampio... una volta avevo cominciato a dare lezioni di html qui, ma non hanno avuto molto successo... cmq se vuoi accelerare il caricamento del blog snellendo i css, puoi provare questo

armanda ha detto...

Scusami ti faccio una domanda che non centra nulla con il tuo post ,
come faccio ad eliminare un lettore fisso nel mio blog? è una persona indesiderata ,posso farlo? aspetto un tuo consiglio grazie

ciao armanda

ANhIMA ha detto...

:X

RINGRAZIO UFFICIALMENTE IL SIG. ORAZIO ALIAS TENEBRAE PER AVERMI FATTO CAPIRE STI BENEDETTI FOGLI DI STILE GRAZIE AL SUO POST SUDDETTO.

Adesso il sito carica all'istante, anzi carica na volta e basta e il mondo sembra più bello, pace per tutti e chiù pilu (anche).

ANhIMA ha detto...

Questo Il post sui fogli di stile

Den ha detto...

@ Armanda: (Tenebrae, scusa se mi intrometto) tempo fa ho pubblicato
questo post che spiega proprio quello che ti serve...

Unknown ha detto...

Info molto utili

http://www.casinoonlineplus.com
http://www.casinoonlineplus.net

Tenebrae ha detto...

@amanda: ha risposto l'operativissimo Den alla tua domanda :)

@auto: :)) contento che tu sia contento, è una modifica che faccio anch'io in genere ai template che uso... anzi, ancora devo farla a questo :)

Alessandro ha detto...

:)) ;)) ;;) :D :p :(( :) :( :X :-o :-/ :-* :|

chenlina ha detto...

CHENLINA20160308
michael kors outlet online
kate spade handbags
coach outlet
giuseppe zanotti
michael kors outlet online
ray bans
cheap jerseys
celine bags
asics outlet
cheap air max
oakley outlet
air max 90
uggs for women
air jordan 8
christian louboutin sale
kate spade outlet
cheap nfl jerseys
ray ban sunglasses outlet
louis vuitton
louis vuitton
ralph lauren outlet
christian louboutin outlet
longchamp handbags
christian louboutin
rolex watches
coach outlet online
prada outlet
discount jordans
air jordan shoes
nike sb dunks
ugg boots outlet
louis vuitton outlet stores
gucci handbags
louis vuitton outlet
tods outlet online
michael kors handbags
louis vuitton
cheap oakley sunglasses
ralph lauren outlet
jordan 3 white cenment
AS

Unknown ha detto...

toms shoes
nike air max 90
louis vuitton handbags
louis vuitton handbags
christian louboutin
ghd hair straighteners
michael kors uk
nike factory outlet
louis vuitton outlet
michael kors outlet online
burberry outlet
oakley sunglasses
jordan 3
nike air force
kate spade handbags
coach factory outlet
louis vuitton
christian louboutin outlet
oakley vault
fitflops
michael kors outlet
coach outlet online
michael kors handbags
oakley sunglasses
hollister kids
true religion outlet
christian louboutin outlet
michael kors outlet
longchamp bags
michael kors outlet
jordan 8s
michael kors outlet
ralph lauren polo
michael kors outlet
kate spade outlet
kate spade outlet
coach factory outlet
michael kors outlet clearance
toms
tory burch outlet
20165.4wengdongdong

chenlina ha detto...

michael kors uk
cheap oakley sunglasses
nike roshe flyknit
jordan 4 toro
coach outlet store online
ralph lauren uk
louis vuitton borse
air jordan pas cher
oakley sunglasses
cheap cartier watches
michael kors outlet online
cheap oakley sunglasses
fitflops sale clearance
oakley sunglasses
moncler pas cher
ugg boots
coach factory outlet
michael kors handbags
uggs
ugg uk
coach outlet online
ralph lauren outlet
hollister clothing
nike air max 90
louis vuitton handbags
true religion jeans
louis vuitton outlet
michael kors
louis vuitton
fitflop sandals
burberry outlet online
coach outlet store online
ray ban pas cher
tory burch outlet
celine outlet
cheap uggs
coach outlet
ugg slippers
ralph lauren polo
christian louboutin outlet
chenlina20160823

Unknown ha detto...

true religion jeans with
carolina jerseys This
jacksonville jaguars jersey Friday
christian louboutin outlet my
michael kors handbags working
nike free tool.
san antonio spurs jerseys it
eagles jerseys could
salomon shoes extra
nike roshe how

ane semprul ha detto...

This blog is so nice to me. I will continue to come here again and again. Visit my link as well. Good luck
cara menggugurkan kandungan
obat aborsi


Prima di lasciare un commento, leggete qui

Posta un commento

Nota. Solo i membri di questo blog possono postare un commento.