Personalizar el contenido de un gadget

8/7/15

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... 




Sin embargo, para otros gadgets quizá es un poco más complicado,  pero no imposible. Para saber la ID del gadget que vas a personalizar, tienes que ir a tu plantilla y allí buscar <b:section-contents id='sidebar-right-1'>. Debajo de este código estarán todos los gadgets que tienes añadidos, por ejemplo, si tienes un gadget de texto encontrarás lo siguiente:
<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:
#HTML1 .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*/
}
Y ya está, no tiene más complicación. Ahí puedes añadir lo que quieras: espaciado, interlineado, fondo, distintos colores y fuentes...

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.  

6 comentarios:

  1. Más o menos ya sabía todo :D ¡de todas formas gracias por compartirlo!
    ¡Un besazo enorme!

    ResponderEliminar
    Respuestas
    1. ¡Genial! Igualmente, si alguna vez te hace falta sabes que lo tienes aquí.

      ¡Besos!

      Eliminar
  2. Gracias por el tutorial, me lo apunto por si lo necesito!! :)

    ResponderEliminar
  3. guardado para el futuro rediseño del blog

    ResponderEliminar

No 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.

¿Colaboramos?
Estudio
Galería
Mery's Notebook © Todos los derechos reservados