3 sept. 2015

[Tutorial] Personalizar entrada #2 [100% mío]

Hiiii chic@s! Como están? Yo ya estoy pensando otro diseño para el blog~ :P
no me he quedado del todo satisfecha con este... Así que pronto empezaré uno nuevo!
Alguna sugerencia para el tema de la nueva planti? *^*

Bueno, os traigo otra manera de personalizar sus posts ^^
Este es el estilo de hoy~ VISTA PREVIA!

POST
Empezaremos editando la forma del post...
Primero, vamos a Plantilla > Editar HTML > Buscamos [Ctrl + F]
.date-outer {
Entonces encontraremos algo como esto:
.date-outer {
  position: relative;
  margin: $(date.space) 0 20px;
  padding: 0 15px;
  background-color: $(post.background.color);
  border-left: 4px solid #f886a8;
  border-right: 4px solid #f886a8;
  border-bottom: 1px dotted #f886a8;
  border-top: 1px dotted #f886a8;

Debereis borrar todo lo que diga a partir del segundo párrafo (la parte en rojo, puede salir un párrafo o más). Entonces, en la parte eliminada pones este código:
background-color: $(post.background.color);
border: 5px solid #f3f3f3;    */Color del borde ancho/*
box-shadow: inset 0 0 40px #fc6f71, 0 0 3px #ee3d3d;  */Tamaño y Color del alrededor del borde, el primero es el interior y el segundo exterior/*
Y quedará algo así...

Para asegurarnos, antes de guardar miramos en Vista Previa si el efecto esta bien. Si es así, guardamos, si no, volvemos a hacer el tutorial!

TITULO
Una vez tengamos el cuerpo editado, pasaremos al titulo!
Este es mucho más sencillo... Simplemente nos vamos a Plantilla > Personalizar > Avanzado > CSS > y pegamos el siguiente código:
h3.post-title {
text-align: center;    */Sitio del titulo; Right/Center/Left/*
margin-top: 10px;
text-transform: uppercase;
border-bottom: 3px double #ffa1a1;    */Color de la linea inferior/*
text-shadow: 1px 1px #fff;     */Color de la sombra del texto/*}
Una vez tenemos eso, solamente nos queda personalizar el tamaño, color y fuente de letra para el titulo en Avanzado > Titulo de la entrada. En el caso de mi ejemplo, yo he puesto 30px como tamaño para el texto, de color #ffa1a1 y con la fuente Cuprum.
Guardamos y listo! :D

Cualquier duda me dicen! Hasta pronto~ y espero que os haya gustado el tutorial ^^

6 comentarios:

  1. Me encanta el efecto!Es precioso!Muy buen trabajo Kyaru!

    ResponderEliminar
  2. Es muy bonito este efecto ^^, muchas gracias por el tutorial ^^
    saludos n.n

    ResponderEliminar
  3. ¡Gracias por el tutorial! en definitiva lo pondré en práctica
    saludos :3

    ResponderEliminar