Personalizar el contenido de un gadget
Image Source |
El lunes hice una entrada sobre cómo poner un menú vertical en la sidebar del blog y dije que hoy haría una para personalizar un gadget en concreto, esto es para que si has puesto ese menú, puedas personalizarlo a tu gusto con este tutorial. Claro que también se puede aplicar a cualquier otro.
Para ello sólo tienes que tener clara cuál es la ID (identificación) del gadget que quieres personalizar. Si es un gadget HTML es más fácil hacerlo, ya que con sólo colocar el puntero del ratón sobre el icono de las herramientas que te sale para editarlos, te saldrá al pie de tu pantalla: HTML1, HTML2, HTML3...
<b:widget id='Text1' locked='false' title='Título del gadget' type='Text'/>Lo que está señalado en rojo es la ID del gadget y es lo que usaremos para personalizarlo. Normalmente si sólo tienes un gadget de cada tipo, te saldrá con el número 1, como por ejemplo HTML1. En el momento en el que añadas uno más del mismo tipo, empezará a numerarse consecutivamente : HTML1, HTML2... Pero no te preocupes, no es tan difícil como suena.
Una vez hayas encontrado tu gadget, supongamos que has añadido uno de texto, lo único que tendrás que hacer es buscar ]]></b:skin> y antes de este, pegaremos lo siguiente:
#Text1 .widget-content{
color: #515151; /* Color del texto */
font-family: Montserrat; /* Fuente */
font-size: 12px; /* Tamaño la fuente */
letter-spacing: 1px; /*Espaciado entre las letras*/
}
¿Te has fijado en que lo que está marcado en rojo es igual? Intenta copiar y pegar la ID en el código nuevo para que no tengas ningún tipo de problema.
Igual sería en caso de que el gadget que quieres editar sea HTML, sólo deberías cambiar lo que está en rojo por el ID de tu gadget HTML. Veamos un ejemplo:
Es posible que os resulta un poco lioso, porque lo es, así que no olvides nunca hacer una vista previa antes de guardar los cambios. Y sobre todo, antes de hacer nada, haz una copia de seguridad de tu plantilla, no queremos tener disgustos.
Igual sería en caso de que el gadget que quieres editar sea HTML, sólo deberías cambiar lo que está en rojo por el ID de tu gadget HTML. Veamos un ejemplo:
#HTML1 .widget-content{Y ya está, no tiene más complicación. Ahí puedes añadir lo que quieras: espaciado, interlineado, fondo, distintos colores y fuentes...
color: #515151; /* Color del texto */
font-family: Montserrat; /* Fuente */
font-size: 12px; /* Tamaño la fuente */
letter-spacing: 1px; /*Espaciado entre las letras*/
}
Es posible que os resulta un poco lioso, porque lo es, así que no olvides nunca hacer una vista previa antes de guardar los cambios. Y sobre todo, antes de hacer nada, haz una copia de seguridad de tu plantilla, no queremos tener disgustos.
7 comentarios
Más o menos ya sabía todo :D ¡de todas formas gracias por compartirlo!
ResponderEliminar¡Un besazo enorme!
¡Genial! Igualmente, si alguna vez te hace falta sabes que lo tienes aquí.
Eliminar¡Besos!
Gracias por el tutorial, me lo apunto por si lo necesito!! :)
ResponderEliminar¡A ti por pasarte! :D
Eliminarguardado para el futuro rediseño del blog
ResponderEliminarOhhhhhhhhhhhh ¡Espero que avises!
Eliminar¿Podrias subir capture de como a quedado el resultado del tutorial?
ResponderEliminarNo está permitido en este blog dejar enlaces en los comentarios. Tu nick es un enlace directo a tu perfil, donde si queremos, podemos visitar tu blog.
Somos librófagos, pero si haces spam también te comeremos.
En caso de no cumplir con esta norma, tu comentario será dirigido directamente a la carpeta SPAM.