22 de mayo de 2016

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!

16 comentarios:

  1. Una gran tutorial°!!!gracias
    saludos

    ResponderEliminar
  2. Holaaaa!!!
    interesante!!! oye que lindo el blog!! jajajaja tenia tiempo hee!!! XD

    kizz

    ResponderEliminar
  3. ¡Hola, bella! Que genial entrada! Muy básica y necesaria para iniciar en el diseño de plantillas *O* jeje
    Que tengas una hermosa semana~
    ¡Saludos!

    ResponderEliminar
  4. Gracias por el tutorial!!
    Ayudará mucho XD
    Saludos!!

    ResponderEliminar
  5. buen tutorial gracias ^^

    ResponderEliminar
  6. Excelente tutorial
    Gracias! :)

    ResponderEliminar
  7. super tutorial aunque algunas cosas no las entendí jajaja
    Besos

    ResponderEliminar
    Respuestas
    1. Aiix D: al menos lo he intentado :V jajaja

      Eliminar
  8. No entendí nada, pero me encantó. xD

    ResponderEliminar