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 {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:
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;
}
background-color: $(post.background.color);Y quedará algo así...
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/*
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 {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.
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/*}
Guardamos y listo! :D
Cualquier duda me dicen! Hasta pronto~ y espero que os haya gustado el tutorial ^^
Me encanta el efecto!Es precioso!Muy buen trabajo Kyaru!
ResponderEliminarGraciias >w<
EliminarEs muy bonito este efecto ^^, muchas gracias por el tutorial ^^
ResponderEliminarsaludos n.n
Graciiias *^* me alegra que te guste!
Eliminar¡Gracias por el tutorial! en definitiva lo pondré en práctica
ResponderEliminarsaludos :3
Graciias, espero que te guste :D
Eliminar