Títulos de la sidebar personalizados II: imágenes e íconos


Hace un tiempo vimos cómo personalizar los títulos de la sidebar con colores, bordes, diferentes tipos de fuente, etc. Ahora, personalizaremos los títulos con imágenes. Empezamos?

IMAGEN DE FONDO

Una forma de personalizar el título de la sidebar con imágenes sería añadiendo una de fondo ,para ello trabajaremos con el código base que les di en la entrada anterior (ver detalles) que era este.

.sidebar h2{
background:#FFF;
margin:0;
padding-left: 3px;
padding-top: 1px;
padding-bottom: 5px;
}


Para añadir la imagen de fondo deberemos de cambiar #FFF; por url(url-de-la-imagen); de manera que el código quede así:

.sidebar h2{
background:url(url-de-la-imagen);
margin:0;
padding-left: 3px;
padding-top: 1px;
padding-bottom: 5px;
}


Y el resultado será el siguiente:



ÍCONO AL COSTADO DEL TÍTULO

Otra forma de personalizar un título de sidebar con imágenes sería añadir algún ícono al costado del título, algo parecido a agregar un ícono a los títulos del post.

Para ello, en nuestro código base, deberemos de cambiar background: #FFF; por background: url(url-de-la-imagen) no-repeat;

El resultado será el siguiente, que pueden apreciar en mi blog de pruebas:



En fin, hay muchas formas de usar las imágenes para obtener un título bonito, personalizado y original. Ahora toca que personalicen sus títulos, ya sea con colores y borde, con imágenes e íconos o con una combinación.Hay que dejar volar la imaginación

28 opinaron:

Mariana

Gracias por la ayuda; me parece que voy a personalizar los títulos :)

Responder
Jéssica YK

Mariana: si deseas puedes dejar algún link a tu blog. Espero que te sea útil la información .

S@lu2

Responder
squirrel

Muy bueno ;)

Besos

Responder
Yessmi

Excelente tutorial!!! Bien explicado

Un besote :)

Responder
Jéssica YK

» squirrel: gracias por la visita .

» Yessmi: gracias ;)

S@lu2

Responder
Fabiana

Qué lindas opciones para personalizar la sidebar! Gracias Jéssica, ya voy a poner manos a la obra en mi blog de pruebas. Me van a venir muy bien porque mi sidebar está un poco descuidada y sin gracia, aprovecharé tus claras explicaciones.

Responder
Jéssica YK

Fabiana: gracias por la visita y si tienes alguna duda puedes hacérmela saber para poder ayudarte.

S@lu2

Responder
G

Aprendí mucho con este tutorial, pero, cómo hago para poner imágenes diferentes para cada título de la sidebar?¿es posible?

Besitos

Responder
Jéssica YK

G: por supuesto, es posible, mañana sacaré un tutorial precisamente para responder tu pregunta. Te pido un poquito de paciencia ;)

S@lu2

Responder
Anónimo

find air beds in wisconsinbest air beds in wisconsincloud air beds

best cloud inflatable air bedssealy air beds portableportables air bedsrv luggage racksaluminum made rv luggage racksair bed raisedbest form raised air bedsbed air informercialsbest informercials bed airmattress sized air beds

bestair bed mattress antique doorknobsantique doorknob identification tipsdvd player troubleshootingtroubleshooting with the dvd playerflat panel television lcd vs plasmaflat panel lcd television versus plasma pic the bestadjustable bed air foam The best bed air foam

hoof prints antique equestrian printsantique hoof prints equestrian printsBuy air bedadjustablebuy the best adjustable air bedsair beds canadian storesCanadian stores for air beds

migraine causemigraine treatments floridaflorida headache clinicdrying dessicantair drying dessicant

Responder
milf

new houston house houston house txstains removal dyestains removal clothesstains removalteeth whiteningteeth whiteningbright teeth

jennifer grey nosejennifer nose jobscalebrities nose jobsWomen with Big NosesWomen hairstylesBig Nose Women, hairstyles

Responder
Liila

:(( no puedo... hago todo lo que dices pero la imágen no se vé.

mi correo liila.8@hotmail.com

por favor necesito el título de la sidebar...

Responder
Jéssica YK

Liila: he visto que has dejado dos mensajes, asi que necesito saber si deseas poner una misma imagen de fondo para todos los títulos de la sidebar o diferentes imágenes de fondo? De acuerdo a eso podré ayudarte :)

No desesperes

S@lu2

Responder
ArTeSaNiC´a

hola puedo dejar el color de fondo del titulo y agregar el icono sin borrar el color?
Gracias !!!!

Responder
ArTeSaNiC´a

Me pasa lo mismo que a lila, la imagen no se ve, le agregue height: xxpx; pero tampoco, me puedes ayudar?

Responder
Jéssica YK

ArTeSaNiC´a: sí, puedes poner un color de fondo y encima un ícono; sólo agregas esto, debajo de .sidebar h2 {

background:#7AB604 url("AQUÍ-URL-DE-LA-IMAGEN")no-repeat left ;

Si deseas que el ícono esté en la derecha, cambia left por right.

En cuanto a la imagen, dime si deseas que todas las imágenes sean iguales o diferentes para que pueda ayudarte.

S@lu2

Responder
Strokera

Hola :D me gustó mucho lo de la imagen al costado... es lo que yo buscaba. Pero mi problema es que el ícono no se ve al costado, si no que tras el título :(( y es bastante incómodo :S
Ayudame porfa :o Gracias

Responder
Jéssica YK

Strokera: para que no se vea como fondo, agrega lo que está en negrita:

background:url(aquí-imagen) no-repeat right;

Éso solucionará el problema.

S@lu2

Responder
Strokera

Muchas gracias Jéssica ;) y gracias también por ese otro consejo ;)

Responder
Jéssica YK

Strokera: gracias a ti por la visita y ánimo :)

S@lu2

Responder
Anónimo

Hola,

Me gustaría saber cómo se puede hacer para poner un icono diferente por ejemplo para Archivo, otro para Etiquetas, otro para Encuesta....

Muchas gracias!

Nuria

Responder
Jéssica YK

Anónimo:
Esta entrada te puede servir.

Si necesitas más ayuda, me avisas, por cierto la próximas vez que comentes, trata de tener tu perfil habilitado o deja un link a tu blog para poder visitarte :)

S@lu2

Responder
Karina

muchas gracias :D
tení tiempo buscando esto para esconder una categoría de un blog de un amigo xD

lo gurdaré en delicios para no perderlo (:

Responder
Jéssica YK

» Karina:
Me alegra que el tutorial te haya servido de ayuda!

S@lu2

Responder
Alison Shanick
Este comentario ha sido eliminado por el autor.
Responder
Alison Shanick

Hola, Primero que nada te felicito por tu tema es muy hermoso.
Necesito preguntarte algo, a lo mejor puedas ayudarme.

Necesito editar el titulo del sidebar. Quedo por arriba de la imagen y lo necesito por debajo. Ya probe de todo y nada de nada esta mas fijo que :?
Espero que puedas ayudarme T.T
Saluttes ♥

Mi correo es alisonshanick@hotmail.com

Responder
Alison Shanick

Gracias, modifique el diseño .__.

Jéssica YK

» Alison Shanick:
Me alegra que hayas podido modificarlo y que el post te haya sido de ayuda.
S@lu2

Responder

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

inicio