Imagen o color de fondo en el título del post y de la sidebar
Me consulta Mente Solitaria sobre como poner un fondo de color en el título de sus post, como ya tenía un post en "borradores" sobre el tema, no me ha costado mucho "retocarlo" un poco...
Para poner la imagen como fondo del titulo de las entradas del blog, buscamos esto en el CSS de nuestra plantilla:
.post h3 {
Justo debajo, añadimos esto:
background-image: url(DIRECCION (URL) DE LA IMAGEN);
border: 0px #FFFFFF; height: 30px;
Yo tengo border: 0px, si queremos que la imagen se vea bordeada cambiamos el cero por el número que queramos, a mayor número, borde más grueso.
He puesto height: 30px, que marca el alto de la imagen, si no ponemos nada la imagen se adaptará al alto del título que, para mi gusto queda estrecha...
Si cambiamos el 30 por un número mayor, la imagen se verá más ancha y viceversa.
Fijaros que el color que he puesto para el borde es ffffff, o lo que es lo mismo, blanco, si usamos la imagen con borde podemos cambiarle el color por el que nos guste.
Para poner una imagen en el título de la sidebar, buscamos esto en el CSS de nuestra plantilla:
.sidebar h2 {
Aquí he de aclarar que haciendo las pruebas en una de mis plantillas (Mínima), me encontré con que el .sidebar h2 { no aparecía por ningún lado, así que se me ocurrió añadirlo directamente, y funcionó. :-)
Lo añadí en la zona de /* Sidebar Content */ que es donde en la Mínima están las otras propiedades de la sidebar.
Después de .sidebar h2 }, añadimos lo mismo que para el título de las entradas, es decir, esto:
background-image: url(DIRECCION (URL) DE LA IMAGEN);
border: 0px #FFFFFF; height: 30px;
Los cambios que se pueden hacer son los mismos que en la imagen del título de las entradas.
Lo he probado en cuatro plantillas distintas y el resultado ha sido óptimo.
Si la imagen es más pequeña que el ancho de las entradas o la sidebar, esta se repetirá automáticamente hasta conseguir la medida adecuada, para evitarlo he utilizado una imagen del ancho de las entradas más o menos.
Si lo que queremos es simplemente darle un fondo de color a los títulos, haremos prácticamente lo mismo, pero el código que debemos añadir es este:
background:#0033FF;
He puesto en el ejemplo un tono de color azul, pero podemos cambiarlo por el que mejor quede con el blog.
En WebTaller podéis consultar una tabla de colores con sus respectivos códigos.
a las
Etiquetas:
Plantillas,
Trucos Blog
Vitua Radio
Foro SpamLoco
Seguir el Escaparate
67 comentarios:
GRACIAS, GRACIAS Y MIL GRACIAS. No sabes cuanto tiempo busque esta información. Eres sensacional. Saludos desde Viña del Mar, Chile y me pondré manos a la obra haber si me resulta lo que me explicaste. Chauuuu
Lo hice y me encanta como quedo Gracias y divierte en vacaciones
Hola Rosa, estuve visitando tu pagina, muy buena e informativa, me encanta el fondo de la imagen que utilizas en el blog, esta ideal con esa tonalidad de rojo, no se, si el codigo que mencionas en este post es para eso, pero tan pronto puedas dejame saber para colocar una imagen de fondo en mi blog, saludos desde el caribe.
Hola Rosa!
Aunque un poco tarde, ¡¡¡te deseo unas MUY FELICES Y MERECIDAS VACACIONES!!! De verdad que te las mereces por atendernos lo mejor posible siempre a todos.
Además de esto, debo preguntarte algo... Como alguna de las cosas de las que hablo en mi blog las saco de otros blogs o de otras webs, me parecería justo y lógico que añadiese después de cada entrada algo así como "Lo he sacado de... NOMBRE DE LA WEB (y poner la dirección de la web como hipervínculo)" --> ¿Sabes cómo añadir una nueva sección debajo de cada entrada para conseguir hacer lo que te he intentado explicar :P?
MUCHAS GRACIAS y disfruta de tus días de descanso. "No tengo prisa alguna", así que contesta cuando puedas y si puedes, jejee. ¡Ahora a disfrutar!
Hola Rosa, recientemente descubri tu blog y lo encuentro buenisimo, me ayuda bastante, felicidades. Necesito tu ayuda, estoy trabajando el diseño de mi plantilla, y necesito quitarle el fondo negro y colocarle un diseño que estoy desarrollando, he intentado con varios de los códigos que tu, gema y otros blog recomiendan y no me resulta, la plantilla pierde completamente el diseño, sin embargo cuando lo coloco en una sección del footer funciona, pero pierde el diseño de letras entre otras cosas, podrías hecharme una manita en esto; le escribe a gema pero no he recibido respuesta, estare trabando en eso durante los proximos dias. la plantilla es de blogy mundo (happy) gracias y disculpa el exceso de confianza, pero creo que eres tan buena gente como gema. cariños desde la isla del encanto en el caribe..
Hola Rosa!! ya con un poquitito mas de tiempo, me puse a "jugar" con el blog otra vez...
te consulto por lo siguiente, me gustaria, ponerle una imagen de fondo al titulo de las entradas, pero que varie segun la etiqueta.. no se si me explico..en nuestro caso, para las entradas de la fiesta del dia del niño, use la etiqueta eventos...(que no me gusta, pero no importa ya vere q nombre elijo?, la cuestion es que quisiera q todas las entradas de esta etiqueta tengan la misma imagen de fondo
Alguna idea??
Besitos
Silvia
Hola Asociación (no me gusta nada llamarte así, pero como no se tu nombre...) En fi, eso es lo de menos, lo principal es tu respuesta y siento decirte que en este caso no puedo ayudarte, he estado un rato dandole vueltas a tu petición y sinceramente no encontré la forma de lograr lo que me pides...:-(
Hola Rosa! gracias de todos modos por intentarlo.. Estoy haciendo pequeños retoques en los blogs, gracias a la informacion que brindas en tu Escaparate!! Por ejemplo, centrar el titulo, me encanto el dato de la pagina donde estan los codigos de los colores!! en fin siempre estoy tratando de mejorar la presentacion; agregue tu enlace..
Muchas gracias!!
Silvia
graxias por los tips solo una preguntita o mejor dos dime como le podes cambiar color en el lugar donde dice publicado por , etiquetas y donde tene tu photo.. graxias jocarl
Saludos jocarl!
Poner foto del autor:
http://elescaparatederosa.blogspot.com/2007/05/foto-del-autor-en-el-post-footer.html
Colorear el pie del post:
http://elescaparatederosa.blogspot.com/2007/03/adornar-el-pie-del-post-post-footer.html
¡Suerte!
Solo quiero que mis titulos tengan un bonito fondo pero no funciona busco el 1er codigo post h3 y despues background y el codigo del color, pero no funciona.
Que estoy haciendo mal?
Fernando, si lo que quieres es hacerlo en tu plantilla Rounders, el título de los posts es aquí:
.post h3 {
margin:0;
line-height:1.5em;
background:url("http://www.blogblog.com/rounders3/icon_arrow.gif") no-repeat 10px .5em;
display:block;
border:1px dotted #ffffcc;
border-width:0 1px 1px;
padding:2px 14px 2px 29px;
color: #333333;
font: normal bold 135% 'Trebuchet MS',Verdana,Arial,Sans-serif;
}
Como ves ya tienes un background, que es lo que hace que se vea la flechita antes de las entradas. Si quieres poner un fondo con una imagen, has de cambiar la url del background por url de la imagen nueva y borrar no-repeat 10px .5em , teniendo en cuenta que la flecha desaparecerá.
Creo q no me expliq bien.
Solo quiero un color de fondo en los titulos de mis sidebars.
Asi como lo tiene usted en la parte derecha de su blog.
A ver Fernando...tu plantilla es la Rounders ¿no? Pues busca esta parte, tu la tienes así:
#sidebar h2 {
color: #333333;
border-bottom: 1px dotted #333333;
}
Eso que ves que pone color: #333333; Es el color del texto del título de las secciones de la sidebar.
Lo que pone:
border-bottom: 1px dotted Es esa línea de puntos que está debajo de cada título de tu sidebar.
Te digo esto porque al poner color esa línea te quedará mal...aunque eso va en gustos claro, si quieres eliminarla tienes que borrar la línea o cambiar donde pone 1px por 0px
Ahí mismo, o sea, debajo de #sidebar h2 {
Pegas esto:
background: #a6c4e1;
Eso hará que el fondo de los títulos se vean del mismo color que en mi blog, usa la vista previa para verlo. Luego puedes cambiarlo por el color que quieras...
Tabla de colores
Si quieres poner un borde al color del fondo, justo debajo de esa línea que has añadido, pegas esta:
border: 2px solid #b2b2ff;
2px es el grosor del borde, puedes aumentar o reducir.
#b2b2ff; Es el color del borde.
solid. El borde es solido, si lo cambias por dashed se verá punteado.
¡Suerte!
Rosa
Ya tengo el color de fondo.
Ahora quiero te quede bordeado y no un rectangulo como lo tengo actualmente.
Mi plantilla es la minima
Ya n sidebar h2 y abajo de background y abajo de eso pongo
border: 0px #0066CC; height: 30px;
pero no da el efecto bordeado sigo con un rectangulo + grande.
(#0066CC; s el codigo d color q tengo)
Se q + o- por ahi va.
Q me esta saliendo mal?
x q no sale el efecto?
Gracias d antemano
Rosa
Ya tengo el color de fondo.
Ahora quiero te quede bordeado y no un rectangulo como lo tengo actualmente.
Mi plantilla es la minima
Ya n sidebar h2 y abajo de background y abajo de eso pongo
border: 0px #0066CC; height: 30px;
pero no da el efecto bordeado sigo con un rectangulo + grande.
(#0066CC; s el codigo d color q tengo)
Se q + o- por ahi va.
Q me esta saliendo mal?
x q no sale el efecto?
Gracias d antemano
Fernando el borde no te sale porque le has dado valor "0", tendrás que ponerlo así:
border: 1px #0066CC; height: 30px;
Si pones más de "1" será mas grueso.
Además yo le quitaría el height: 30px; no veo objeto en condicionar el título a esa anchura...pero bueno, eso cada uno lo decide...
Abajo de background:#0066CC;
pongo
border: 1px #0066CC; height: 30px;?
Para que quede bordeado o redondeado no se como se diga
Fernando, para que quede bordeado es así como te dije antes.
Para que quede redondeado, como yo lo tengo, hay que añadir:
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
Pero te aviso que solo se verá redondo en firefox con IE se verá cuadrado.
Como podria poner el texto de la sidebar centrado?
Es que he probado varias cosas pero no me sale (>.<)
También he puesto 1px de borde pero no lo veo, no sé si habrá que añadirle algo más.
Que guay me esta quedando! ya solo me faltan esos detallitos para tener la sidebar completa ^^
(Se trata de el Hentai, por si quieres pasarte a ver.)
Alexia Stark, has de poner el sidebar h2 así:
.sidebar h2 {
background:#fcd2f0;
border: 1px solid #cc56aa; height: 22px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
color: #555544;
text-align: center;
}
Que bonito!! Gracias Rosa ;)
Hola Rosa,
He conseguido poner en el sidebar un borde debajo de las entrada.
Ahora estoy intentando poner una imagen pero no me la pone en el blog.
Tiene que ser de algun tamaño ?? no se es que no se donde esta el error.
Cristina, podría ser el tipo de archivo...se me ocurre que ¿no estarás usando ImageShack verdad? Si es así, mira aquí:
http://elescaparatederosa.blogspot.com/2008/10/usando-la-url-correcta-en-imageshack.html
Rosa me salio ya con tu ayuda lo del fondo del titulo de la sidebar .. muchas gracias por eso !!!
Ahora lo que no me sale es la imagen de fondo de los titulos del post
Este es mi codigo.. no se que estoy haciendo mal .,..
.post h3 {
background-image: url(http://img152.imageshack.us/img152/8094/124hg7.jpg);
border: 2px #FFFFFF; height: 30px;
}
Esperare tu ayuda... Gracias por todo
http://partidosvinotintos.blogspot.com
Carledens , el código está bien de hecho acabo de probarlo en uno de mis blogs de pruebas y sale sin problemas, aunque la imagen algunas veces no se ve y otras si, quizás sea problema de Imageshack.
Rosa ya cambie la imagen a dos servidores y no me sale aun :/ ... la subi a fileden y a google pages y aun nada que me sale.. no se si tengo algo mal en otros codigos q se yo de esoo :/ igual no me agarra ni siquiera poner solo un color de fondo en los titulos, ni siquiera un icono al lado de el titulo, osea nada me salee ..
seguire intentando a ver .... :(
Rosa, cuando tengo abierta una entrada, los comentarios de esta, se ven con la imagén de fondo de la pagina, yo quisiera que se vieran los comentarios con la misma imagén de fondo que las entradas.
¿Como puedo hacerlo?
Besos.
Marga, localiza esto:
#comments-block {
margin:1em 0 1.5em;
line-height:1.6em;
}
Cambialo así:
#comments-block {
background: url(http://lh5.ggpht.com/_Eg-JPwWnV5E/SS0Yg1TUvgI/AAAAAAAABew/9Q39LDTtp94/Family07_back.jpg);
margin:1em 0 1.5em;
line-height:1.6em;
}
Rosa, muchas gracias, es justo lo que yo queria, el codigo que tu me has proporcionado le he añadido un borde y mas espacio en el margén izquierdo. Me ha quedado perfecto.
Este es el codigo:
#comments-block {
background: url(http://lh5.ggpht.com/_Eg-JPwWnV5E/SS0Yg1TUvgI/AAAAAAAABew/9Q39LDTtp94/Family07_back.jpg);
border:2px solid #99C9FF;
padding-left: 10px;
margin:1em 0 1.5em;
line-height:1.6em;
}
Mil gracias por tu ayuda.
Rosa, siempre con tu ayuda.
Besos.
Marga, ¡bien, así se hace!
Tienes que estar bien orgullosa de tus progresos chica:D ¿ves como vas poco a poco aprendiendo como hacer lo que quieres?
Rosa mi plantilla es minima y no esta
sidebar h2 tengo esto
#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
que puedo hacer para poner los colorillos esos gracias
RAUL, no te has parado a leer la entrada completa supongo:
Aquí he de aclarar que haciendo las pruebas en una de mis plantillas (Mínima), me encontré con que el .sidebar h2 { no aparecía por ningún lado, así que se me ocurrió añadirlo directamente, y funcionó. :-)
Lo añadí en la zona de /* Sidebar Content */ que es donde en la Mínima están las otras propiedades de la sidebar.
Ei hola, la verdad es que me estoy volviendo loco, porque por más reseñas y consejos que leo no consigo lo que pretendo, te explico, utilizo la plantilla que se llama rounders, la verdad es que me gusta pero hay un par de detalles que no me convencen y puesto que por más que leo por ahí no lo consigo, al final me he decidido a escribirte. He intentado eliminar las flechitas que aparecen junto al título de cada post, ¿de qué manera puedo hacer eso? Siempre me sale error de feed o artilugios o algo así. Por otro lado, el borde que aparece en el cuerpo principal de los post tampoco me gusta, me gustaría que fuera del mismo color que todo el cuerpo donde van los post.
¿Me puedes ayudar? Y te invito a una coca-cola vaaaaaaaa ;-) Un saludo.
Raul, localiza en la plantilla esto (no hace falta que expandas artilugios):
.post h3 {
margin:0;
line-height:1.5em;
background:url("http://www2.blogblog.com/rounders/icon_arrow.gif") no-repeat 10px .5em;
Elimina la línea que dice:
background:url("http://www2.blogblog.com/rounders/icon_arrow.gif") no-repeat 10px .5em;
En cuanto al borde que dices, no es un color, sino tres imágenes que forman el cuerpo de la entrada y que además son las que dan aspecto redondeado a las mismas, para cambiar el color habría que hacer unas imágenes nuevas del color que necesitas.
Lo he hecho tal y como comentas y tras decirme que no puede guardarme la plantilla me da el siguiente mensaje:
Se ha encontrado más de un artilugio con el ID: Feed2. Los ID de artilugio deben ser exclusivos.
¿A qué se debe esto? Me aparece ese mensaje cada vez que intento modificar el código html.
Oye, gracias por tu ayuda y tu atención, de verdad.
Perdona las molestias, ya lo he solucionado, lo acabo de leer en un post anterior, mil gracias y un abrazo.
Hola rosa kiero saber como pongo un fondo en las entradas pero que no tenga que poer en cada entrada si no que sea permanente para que se vea mejor y contraste con el fondo del blog...gracias me encanta este blog me a ayudado mucho...;)
Youth, localiza este código en la plantilla de tu blog :
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted #7f7f7f;
padding-bottom:1.5em;
}
Añade una línea para el color de fondo:
.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted #7f7f7f;
padding-bottom:1.5em;
background: #ddd;
}
Cambias #ddd que es un gris clarito, por el código del color que necesites.
ok rosa tu respuesta me sirvio de algo pero yo me referia a agregar una imaegen x cada gadget que pongo en mi blog :S
Wisin Si miras el código de tu plantilla con los artilugios expandidos, cada gadget al principio de su código tiene algo como esto:
<h2><data:title/></h2>
Corresponde al título y tendrás que cambiarlo en cada gadget por la imagen que vayas a usar:
<img src="url de la imagen"/>
ok gracias :D
hola rosa estoy intentando poner este fondo a los titulos del sidebar el url es este
http://img31.imageshack.us/img31/3766/polkadotsbannerivaalean.png
pero para empezar el css de la plantilla, se refiere al html sin expandir los artilujios? porque si es ahi ,no encuentro ni el.post h3 {
ni tampoco sidebar h2 { entonces no se si es que estare mirando donde no es
ELSA A eso me refiero. Y estar, están, yo misma los he visto en tu plantilla mirando desde el código fuente en mi navegador.
Hola..
Emm, esta bueno este, pero lo que ando buscando, es colocar una imagen diferente a cada Gadget sacando el titulo, ejem: secciones ,1 imagen, Música, otra imagen, y así , habría alguna manera de modificar este para adecuarlo para cada gadget? , porque este es como el que mas se acerca.
saludos.
Se me olvido esto..jeje, o alguna manera de modificar con la plantilla expandida o normal, directamente en las secciones
< div id= ' sidebar-wrapper ' > como modificar el titulo de las etiquetas y reemplazarlas por imágenes,eso lo integrare un rato mas, me falta crear 3 etiquetas + para las secciones, para que la hubieses visto, pero demás que sabes que es lo que digo..jeje..
Bueno, pero para no confundir, es lo que dije al principio..XD
ahora si..
saludos.
-¦-= Shadow†Sneak =-¦- Si hay una manera de poner una imagen distinta a cada gadget de la sidebar, pero es complicado explicarlo por aquí...tengo una entrada en borradores sobre el tema que publicaré en breve.
Directamente en las secciones no puedes hacer eso, y no entendí si quieres que cada etiqueta tenga una imagen o que...
Si es algo de eso, puedes verlo en Vagabundia, yo no tengo nada publicado sobre el tema:
http://vagabundia.blogspot.com/2009/05/colocar-una-imagen-asociada-una.html
No, lo de la etiqueta era un ejemplo , por si lo conocías, ese ya lo tengo listo, entonces esperare la publicación para ver si es..
saludos.
Rosa tengo un problema, cuando pongo la imagen en la cabezera ( usando el metodo del comentario 42 )la pregunta que puse en la encuesta dessapareció, como puedo solucionar ese problema, que aparesca la imagen y abajo la pregunta de la encuesta
Rosa tengo un problema, cuando pongo la imagen en la cabezera ( usando el metodo del comentario 42 )la pregunta que puse en la encuesta dessapareció, como puedo solucionar ese problema, que aparesca la imagen y abajo la pregunta de la encuesta. responde es urgente!!!
ArnaldoV Las encuestas es distinto, porque la pregunta que pones es su título y no hay otra forma de hacerlo... el gadget de encuestas no es como los demás, tendrás que usarlo tal como es, tampoco es un gadget que esté para siempre ahí, solo mientras dura la encuesta...no veo el problema, ni la urgencia en esto...
Rosa mira este blog
como veras en la parte donde dice encuesta es dada por una imagen aplicando el metodo de el comentario 42 pero como tu dice eso reemplaza la pregunta, como ellos tienen la pregunta debajo de la imagen???
ArnaldoV No es una encuesta de Blogger,es decir, es una encuesta de alguna página que da ese servicio y un código para mostrarla, cambian como en el comment 42 el título por la imagen y el código para la encuesta está añadido en un gadget HTML.
Rosa eres la mejor mi blog esta quedando chulo gracias a tu ayuda, no he revisado bien tu blog pero si no tienes un gadget/widget de mostrar entradas antiguas te agradeceria que me ayudaras a diseñarlo. gracias y felicidades por tu blog
Nightmare Genesis Hay publicados varios gadget de "Ultimas entradas" no de "Entradas Antiguas" y no sabría como ayudarte a diseñar algo así... ni siquiera se si es posible.
obrigado pela dicas fantásticas es a melhor
precisamos de um blog assim em PT :D
Hola otra vez:
Verás es que llevo ya un rato buscando algo en tu blog, pero no veo nada al respecto.
Es para saber cómo poner una linea debajo del titulo de las entradas, más o menos como tú lo tienes, aunque sin el número.
Si me pudieras decir donde encontrarlo... te lo agradeceria mucho.
SupernovasLocaliza esto en la plantilla:
.post h3 {
margin:.25em 0 0;
padding:0 0 4px;
font-size:140%;
font-weight:normal;
line-height:1.4em;
color:#cc6600;
}
Antes de esa última llave de cierre } añades algo así:
border-bottom: 1px solid #000;
En 1 si pones un valor mayor el borde será más ancho y en #000 cambias el color del borde.
Muchisimas gracias Rosa!!!!!! Eres un hacha!!!
Muchas gracias Rosa, estoy aplicando muchas cosas tuyas y el blog está quedando muy bien :)
Rosa cariño, no se lo que hice con la plantilla no puedo cambiar ni los colores del fondo del ningu titulo ni tampoco puedo cambiar el color de texto, si te da tiempo me revisas la plantilla. un beso
perdona, mi blog es: http://lomasnueve.blogspot.com
FILÁFíjate aquí:
#header {
margin: 0px;
border: 0px solid #cccccc;
text-align: center;
color:#663333;
margin: 0px;height:170px;
width:964px;
background-image: url();
background-align: center;
text-align: center;
color:#663333;
}
}
De las dos últimas llaves de cierre, una sobra, y creo que es eso lo que "corta" el paso a cualquier otro dato.
Rosa qite una de las llaves como me dijiste, pero sigue sin cambiar el color de los titulos, un saludo
FILÁ NOSOTRAS Justo antes de esto:
/* Headings
------------------------------------- */
Te falta otra llave de cierre }
Revisa el CSS, pues por lo que veo te has cargado alguna que otra llave o has colocado de más... siempre ha de haber una llave de cierre después de cada bloque de CSS
Rosa eres mareavillosa, solucionado me salvaste de una locura, muchisimas gracias
Publicar un comentario
Si vas a dejar una consulta, procura tener habilitado tu perfil en Blogger o deja la url del blog a revisar (no enlace).
Los comentarios están siendo moderados.
Comentar con el formulario antiguo