Este "truco" es para cambiar el color de fondo que aparece al seleccionar un texto, esto es para poder personalizar más su blog y poder usar un color que combine o contraste con los colores de su página. Ya que por defecto el navegador nos da un color predeterminado, generalmente azul.
Para personalizarlo necesitamos un poco de CSS, vamos a Planilla | Edición de HTML y antes de ]]></b:skin> pegamos lo siguiente:
/* Color texto seleccionado */
::selection {
background: #ccc;
}
::-moz-selection {
background: #ccc;
}
El color lo pueden cambiar por el que ustedes quieran, sólo ingresan el código de color en background. En el ejemplo el color cambia a gris.
Puedes ver cómo queda seleccionando cualquier parte de texto en esta entrada, el color que yo he puesto es gris oscuro.
(23/ABR/09) ACTUALIZACIÓN:
Este efecto funciona sólo para Firefox, Safari, Google Chrome, Konqueror, Opera y Flock.
Ciudad Blogger
Ya había visto este efecto en algunos otros sitios, y siempre lo quise aplicar a mi blog, pero no sabía como...
ResponderEliminarDefinitivamente sencillos trucos CSS que ayudan mucho a mejorar la imagen del blog.. acabo de implementar el de.. a:focus {outline: none;}
Para no mostrar el cuadro al hacer clic a un link, en lo personal.. no me gustaba..
Saludos!
Coincido contigo, creo que igual lo implementaré en mi blog.
ResponderEliminarSaludos.
si, muchas gracias por este truco de CSS, me gustó mucho, a por cierto, gracias a ti tambien 'Turko' porque lo que dijiste en ese comentario es algo que estaba buscando hace años!!!
ResponderEliminarEl potro™: tu blog es genial y siempre lo será, me encantan los diseños, ese fosforeado al principio de la sidebar y del main, es genial, los titulos, el buscador al lado del header, yo si me propusiera hacer eso tal vez lo haga, lastima que nunca tengo tanto tiempo con esto del liceo y eso, pero bueno, algo es claro, me encata tu blog, al igual que muchos otros, y te mereces que te diga esto porque ser un hombre que trabajó tanto en blogger, jaj, simplemente genial!!!
Por sierto, deberias pasarte por mi blog y dime que tal esta, quiero (si tienes tiempo claro) que me digas que te parece que debería poner para que quede exelente, como dije antes, solo si tienes tiempo o si quieres, ok? bueno, te seguire visitando, saludos
Ascesino96
Hola Ascesino96,
ResponderEliminarDe verdad mil gracias por tus comentarios, me da gusto saber que mi esfuerzo puede servir de ayuda para más gente.
Tu blog lo veo bien, aunque podrías jugar un poco más con los colores, quizá otra combinación de tonos podría darle más "vida".
Cualquier cosa estoy a tus órdenes.
Saludos!!!
Gracias Potro, aquí otro truco que andaba buscando, sólo lo googlee y resulté de nuevo en tu blog. Es genial. Mil y mil gracias.
EliminarLion
www.bitacolion.blogspot.com
Excelente truco!. Hace rato andaba buscando esto.
ResponderEliminarhéchale un vistazo a mi blog ;)
Saludos.
Estupenda elección de color ;)
ResponderEliminarPotro! como puedo cambiar el color del título de mi blog!!
ResponderEliminargraciaS!!!
Busca en tu blog esta línea:
ResponderEliminar#header h1 {
Debajo de ella agrega esto:
color:#ccc;
Cambia #ccc por el código del color que quieras.
Saludos.
Me ha ayudado mucho, ¡gracias!
ResponderEliminarGracias a ti por tu visita.
ResponderEliminarHola, espero que estes bien quisiera saber como puedo cambiar el color del texto del menu de mi pagina que es http://www.musicaconcalibre.net
ResponderEliminarespero tu respuesta please
Busca esta parte en tu plantilla:
ResponderEliminar#catmenu li a, #catmenu li a:link, #catmenu li a:visited {
color:#000;
Cambia lo que está en negrita por el código del color que deseas.
gracias mee funciona a mil eres un caballo en esto!! sigue hazi pana :D GRACIAS MIL
ResponderEliminarCuando quiero publicar una entrada y a una parte del texto cambiarle la fuente y el color, no me deja.- La plantilla que uso ese minima stretch. no tengo idea porqué no me deja.- espero tu respuesta :]
ResponderEliminarDesde hace unas semanas el editor antiguo tiene ese problema, incluso yo lo tenía y me tuve que cambiar al editor actualizado para poder editar las entradas sin esos conflictos.
ResponderEliminarPara cambiar el editor entra en Configuración > Básico, y hasta abajo donde dice 'Seleccionar editor de entradas' elige 'Editor actualizado (recomendado)'
Con ese podrás darle formato a los textos sin ningún problema.
Hay alguna manera que las palabras al seleccionarlas cambien de color?
ResponderEliminarClaro, sólo agrega debajo de ambos background: #ccc; esto:
ResponderEliminarcolor: #fff;
Gracias :D
ResponderEliminarGracias potro como siempre El MEJOR!!!!!
ResponderEliminarGracias a ti por tu visita!
ResponderEliminarcomo siempre me sirvio :) y aparte hice un tutorial con su respectivo credito http://kronzio.blogspot.com http://kronzio.blogspot.com/2011/04/cambiar-el-color-del-texto-marcado.html
ResponderEliminarEs de esos truquillos super simples pero que favorecen en mucho la personalización :)
ResponderEliminarbuenisimo truco potro grasias fijate que yo lo uso para que no seme seleccione nada y me funciono igual no saves si ay manera de que no se me seleccione el slide show y los iconos por que al pasar el raton es lo unico que se me selecciona o nomas funciona con el texto.
ResponderEliminarÚnicamente aplica para el texto, pues aun cuando le pongas none como background seguirá seleccionando los demás elementos que no sean texto :/
ResponderEliminarmuchas grasias potro ala orden
ResponderEliminarHola Potro yo de nuevo, espero me ayudes una vez mas, como puedo cambiar el color de la letra de mis entradas o post asi claro el titulo tambien, por el fondo de mi blog siento que no se lee claro, aca te pongo la direccion para que lo veas y me expliques como puedo hacer, el link es http://www.totalkaraoke.co.cc, mil gracias como siempre
ResponderEliminarEn esta área puedes cambiar el color de los títulos:
ResponderEliminar.title {
margin: 0 0 8px 0;
padding: 0px;
line-height: 22px;
font-size: 24px;
font-family: Arial, Helvetica, Sans-serif;
color: #B3B3B3;
font-weight: bold;
}
.title a {
text-decoration: none;
color: #B3B3B3;
}
.title a:hover {
color: #2596AC;
}
El color de las entradas me parece que se cambia aquí:
body {font-size:75%;color:#222;
Por cierto, desde hace unos días Google dejó de indexar los dominios .co.cc así que te recomiendo que regreses a blogspot de lo contrario tendrás visitas casi nulas.
Saludos.
Uy, eso si esta malo, gracias por prevenirme, como revierto o como me devuelvo a Blogspot, sigo siendo novato y quien te da mas trabajo, que pena
ResponderEliminarya me devolvi a blogspot Potro, gracias por la informacion, Crees que se recuperara el co.cc, mejor dicho que corrijan el problema
ResponderEliminarPues no lo sé, eso depende de Google, quizá más adelante los indexen de nuevo.
ResponderEliminarahh no puede ser ya maten a iexplorer :@
ResponderEliminarLo sé, ya sabes cómo es de necio Microsoft con no adaptarse a lo que el usuario necesita.
ResponderEliminarBuenas potro.
ResponderEliminarVamos a ver esto puedo parecer una idiotez, pero yo te pregunto por si acaso.
Fijémonos en como tienes configurado esto en tu página.
Tu pagina las letras son negras y no tienen fondo. Cuando seleccionas el texto tus letras cambian al blanco y el fondo a gris oscuro.
He instalado el CSS pero cuando selecciono el texto en mi web el fondo me sale en marron tal y como quería, sin embargo las letras siguen en negro cuando en blanco quedarían mucho mejor.
¿Qué debo modificar para poner las letras blancas cuando selecciono texto?
Gracias como siempre.
Hola William,
ResponderEliminarAhí mismo se le puede agregar la propiedad del color:
::selection {
background: #ccc;
color:#fff;
}
::-moz-selection {
background: #ccc;
color:#fff;
}
Muchas gracias potro voy a probarlo ^^
ResponderEliminarHola Amigo!...
ResponderEliminarMe interesó este post, y ya lo puse a prueba, pero fijate que tambien se me ocurrió que tal vez seria posible poner un Texto que cambie de color solito, como una especie de color arcoiris, bueno, la verdad lo necesito para colocar un texto que llame bastante la atención, en algun gadget HTML/Javascript algo como "click aqui"...
Potro porfa, si tienes algun post asi, me ayudarias a encontrarlo o si no me ayudarias a descubrir un codigo similar???
Gracias por adelantado!...
Andas de suerte porque aquí hay uno ;)
ResponderEliminarhttp://ciudadblogger.com/2009/06/mensaje-con-efecto-arcoiris.html
Gracias Amigo, te debo unas cuantas!.. jejeje ;)
ResponderEliminarweiii yo quieroo poner otro colores y nose como son los codigo
ResponderEliminarEn el menú de Ciudad Blogger hay una pestaña que dice Colores, ahí puedes seleccionar el color que quieras y saber su código.
ResponderEliminarGracias, excelente!!! Lo aplique a mi blog.
ResponderEliminarSi mi color es " #D8BCD6 " donde lo debo colocar D: ? plea se e e
ResponderEliminarCambia donde dice #ccc por el código que has elegido, en este caso #D8BCD6
ResponderEliminarexelete potro cada q busco algo de css en google te encuentro XD
ResponderEliminarYO LE APLIQUE ESTE
background: yellow;
color: black;
text-shadow: none;
Tendré que pasarle un cheque a Google entonces :D
EliminarPotro! hago todo el procedimiento pero no se me guarda o... yo no lo puedo ver en mi blog! :S
ResponderEliminarhttp://egoluegoexissto.blogspot.com.ar/
Lo que pasa es que más arriba tienes este código:
Eliminar.post-body img {
Justo arriba de eso te falta una llave de cierre }
Por eso nada de lo que pongas debajo hará efecto.
Ya me había funcionado y de pronto ya no sale más, le tengo en otro color y no aparece..
ResponderEliminar/* Color texto seleccionado */
::selection {
background: #e1adc3;
}
::-moz-selection {
background: #e1adc3;
}
También intenté con este código que encontré, pero no funciona :(
qué hago?
::-moz-selection {
Background: #e1adc3;
color: #5E5E5E;
text-shadow: none;
}
::selection {
background: #e1adc3;
color: #5E5E5E;
text-shadow: none;
}
Hola Diana, yo sí lo veo funcionando en el blog "Dianisther".
EliminarHola, muchísimas gracias por compartir este efecto, pero quería comentarte que no me funciona y no sé qué hacer.
ResponderEliminarHola, ¿en cuál blog lo has puesto?
EliminarEn este: http://sugoikawaiilife.blogspot.com.es/
EliminarEste comentario ha sido eliminado por el autor.
EliminarElimina, esto:
Eliminarbig {font-size:90px; /*tamaño de la letra*/
font-style:bold;
color: #B40431; /*Color de la letra*/
line-height:30px;
float:left;}
Parece estar sobrando y perjudicando esos estilos.
Aquí tienes otro error:
::-webkit-scrollbar-thumb {
background-image:url(http://i.imgur.com/2Y9Lg.png);
-Moz-border-radius-bottomRight: 50px; border-bottom-right-radius: 50px; -Moz-border-radius-topLeft: 50px; border-top-left-radius: 50px;
{
La llave de cierre es } no {
Y aquí otro error:
#Followers1 .widget-content{
height:auto;
width:auto;
background-image:url(http://i1085.photobucket.com/albums/j433/Annyz-chan/cutefondobyannyzblog.gif);repeat; repeat; padding: 5px;
border: 2px dashed #F0CDFC ;
border-radius: 8px;
}
Ahí has puesto tres veces un punto y coma ; en una misma declaración. Cambia esto:
background-image:url(http://i1085.photobucket.com/albums/j433/Annyz-chan/cutefondobyannyzblog.gif);repeat; repeat; padding: 5px;
Por esto:
background:url(http://i1085.photobucket.com/albums/j433/Annyz-chan/cutefondobyannyzblog.gif) repeat;
padding: 5px;
Muchas gracias, Potro. Ya funciona ^^ Y me disculpo por molestarte :)
EliminarUn abrazo.
No ha sido ninguna molestia ;)
Eliminar