Personalizando los Posts & Gadgets [HTML]

Hoooola! Cómo están? Yo hoy os traigo una entrada de la sección HTML! Ya estoy preparando otra distinta con recursos y cositas hechos por mí que podáis usar ^^

La entrada de hoy es una cosa sencilla y que os puede quedar genial... Personalizar los posts y gadgets en color, bordes, efecto, etc etc!

Personalizar los posts

Para los posts basta con ir a Plantilla > Editar HTML y buscar .date-outer {
Una vez lo tengas, elimina los códigos de debajo señalados en la imagen:

Esos son los CSS de la sombra y los bordes redondeados del exterior del post.

Una vez los elimines puedes añadir lo que quieras a partir de ahi! Los codigos que hay antes corresponden al color de fondo y el borde del post:

  background-color: $(post.background.color);   >>> Color de fondo
  border: 1px solid $(post.border.color);   >>> Tamaño, forma y color del borde del post.

Para editarlo simplemente sustituye el $(post.background.color) por el color en cuestion.

  background-color: #fff;   >>> Color de fondo
  border: 1px solid #fff;   >>> Tamaño, forma y color del borde del post.

Entonces podrás editar el color a traves el HTML. Para más formas de editar estos códigos, mira el Nivel 1 de la Sección HTML, donde lo explica más detalladamente.

Para añadir cualquier efecto más, añade justo después de los anteriores... Por ejemplo:
Box-shadow: inset 0 0 0px #fff, 0 0 2px #fff;        < Para difuminar el exterior del post.
border-radius: 10px;           < Para redondear las puntas el post.
opacity: 0.90;           < Para quitarle opacidad al post.

Y muchos más, que puedes encontrar en las entradas de esta sección [Nivel 1, 2 y 3] ^^

Cuando lo tengas, mira en Vista Previa, y si te gusta como queda, guarda y lo tendrás en tu blog!

Personalizar los gadgets

Para editarlo, vamos a Plantilla > Editar HTML > y buscamos:
/* Widgets

Una vez lo tengas, pon esto debajo del /* Widgets ----------------------------------------------- */

.sidebar .widget h2 {
CÓDIGOS PARA PERSONALIZARLO
}

Revisa que todo este correcto con Vista Previa, y guarda!

Personalizar titulos del post y/o gadget!

Este es mucho más sencillo! Simplemente ve a Plantilla > Avanzados > CSS > y añade estos codigos dependiendo lo que quieras editar.

Para el titulo del post, pon el siguiente código con todos los colores y efectos dentro:

.post-title {

CÓDIGOS PARA PERSONALIZARLO

}

Para el titulo del gadget, pon el siguiente código con todos los colores y efectos dentro:

.sidebar h2{

CÓDIGOS PARA PERSONALIZARLO

}

Hover

En el caso que quieras que al pasar el cursor por encima del post o gadget esté cambie de color o de cualquier efecto, debes hacer lo siguiente....

 Para el post, debes ir a Plantilla > Avanzado > CSS > y añadir este código:

.date-outer:hover {
Los colores y efectos que quieras que tenga
}

 Para los gadgets, debes ir a Plantilla > Avanzado > CSS > y añadir este código:

.sidebar h2:hover {

Los colores y efectos que quieras que tenga

} 

PD: Por si las dudas... No debes poner solo los efectos que quieres que cambie, si no todo de 0 con los cambios incluidos.

Y esto ha sido todo! Cualquier problema o duda me comentan por aquí o email (Kyaru9@gmail.com), estaré encantada de ayudaros ^^
No se si no lo explicado suficientemente claro, espero que os sirva y se entienda!