Para lograr esto se requiere conocimientos básicos de CSS por lo que no será complicado.
Paso 1: Identificando el ID del gadget:
Para llevar a cabo esto, debemos saber el nombre del gadget que deseemos personalizar, en mi caso utilizaré mi gadget ''Categorías'':
Primero, debemos ir a ''Diseño | Edición HTML'', en donde marcamos ''Expandir plantillas de artilugios''. Una vez realizado esto buscamos el nombre del gadget a personalizar (en mi caso buscaré ''Categorías'').
Nos aparecerá un resultado muy similar a este código:
<b:widget id='Label1' locked='false' title='Categorías' type='Label'>
El código de color verde corresponde al ID del gadget el cual trabajaremos, en mi caso este gadget se llama ''Label1''.
Paso 2: Personalizando el Gadget:
Una vez que ya sabemos el ID del gadget a personalizar, creamos la variable con la que trabajar, la variable contiene el siguiente formato:
#Label1 {Esta deberá ser creada arriba de ]]></b:skin>, la cual corresponde a nuestra zona de estilos.
}
Hecho esto, añadimos los estilos que deseemos.
Añadiendo una imagen de fondo:
Añadimos la propiedad background a la variable en la que trabajaremos:
background: #fff url('URL IMAGEN') center;
De tal forma que quede así:
#Label1 {
background: #fff url('URL IMAGEN') center;
}
Personalizando el color del texto:
Añadimos la propiedad color en la variable CSS:
color: #000;
Deberá quedar así:
#Label1 {
background: #fff url('URL IMAGEN') center;
color: #000;
}
Personalizando otros elementos del gadget:
Podemos dar formato a distintas cosas como a los enlaces, viñetas, título, etc. Para ello debemos conocer cómo se escriben cada parte:
- h2 (Corresponde al título del gadget)
- a (Corresponde a los enlaces.)
- a:hover (Corresponde al enlace al pasar el mouse)
- li (Corresponden a las viñetas)
Existen muchos valores, por lo que me detendré a trabajar sólo con estos.
Primero, creamos la variable de la misma manera que hicimos la anterior, pero esta vez añadiremos lo que deseemos modificar, en este caso personalizaré el título:
#Label1 h2 {Una vez creada la variable, añadiremos los estilos que deseemos:
}
#Label1 h2 { /* TITULO*/
color: fff; /*Color de la fuente*/
padding-left: 20px; /* Espaciado a la izquierda*/
font-size: 20px; /* Tamaño de la fuente*/
}
Utilizaremos otro ejemplo, en este caso el de los enlaces con el cursor encima:
#Label1 a:hover { /* ENLACES*/
color: 000; /*Color de la fuente*/
}
Pueden ver un ejemplo de un sólo gadget personalizado:
No hay comentarios: