FOLLOW ME!

SOCIAL NETWORK

AFILIAME
Not A Single Song
Para más botones, haz clic aquí

Cómo hacer una plantilla: el título de las entradas

21 abr 2014

**Un par de novedades hasta el final!**

¡Hola! Vamos a seguir tratando de entender nuestra plantilla... hoy veremos cómo modificar el título de las entradas. Así que si tienen ganas de aprenderlo, los invito a seguir leyendo.



Como siempre digo, primero lo primero.
¿Cuál es el código que hace alusión al título de las entradas? 
Bien, será cualquiera que haga contenga h3 (dato: esto es así en la gran mayoría de las plantillas por no decir todas)

En nuestro caso vamos a abrir el buscador (recuerden hacer clic en el cuadro de código, luego CTRL+F)y buscamos .post h3

Esto sirve cuando vemos el título de una entrada desde el link directo a la misma; es decir si la vemos desde la página principal (donde vemos todas las últimas entradas publicadas), estaríamos viendo el título como un link (ya que si le hacemos clic nos lleva a la entrada) y eso toca definirlo en un apartado diferente que explico más abajo. 

Nos vamos a encontrar esto, pueden modificar lo que esta señalado
.post h3 {
  margin:.25em 0 0;
 padding:0 0 4px;
 font-size: 140%; / * - Tamaño de letra, recomiendo cambiarlo por un valor en px - * /
 font-weight: normal; / * - Cambia normal por bold si quieres que poner la letra en negrita - * /
  line-height: 1.4em;
  color: $titlecolor; / * - Cambia $titlecolor por el código de un color, ej #ff0000 - * /
}
Te recomiendo también agregar font-family: Georgia; cambiando el Georgia por el nombre de la letra que quieres que tenga tu título. Solo puedes poner nombres de letras comunes como Arial, Trebuchet, Georgia, Courier, etc. Si quieres poner una letra diferente que tengas en tu PC puedes hacerlo siguiendo este tutorial.

Otra cosa que pueden agregar, y que me preguntan mucho, es la propiedad de alineación del texto que será text-align: left/center/center; (una sola opción; izquierda, centrado o derecha)
Inmediatamente debajo encontraras .post h3 a y .post h3 a:visited y pelín más abajo .post h3 a:hover Estos sirven ahora sí para cuando ves las entradas desde la página principal ya que desde allí si ven como un link.

.post h3 a y .post h3 a:visited son para el link normal y para el link después de que fue visitado, es decir después de que se le hizo clic. Aparecen juntos, así que se verán igual. 

Lo que si puedes poner diferente es el .post h3 a:hover que es para cuando le pasas el mouse al link por encima. De nuevo, modifica a tu gusto en cada caso sólo lo que marco.
.post h3 a, .post h3 a:visited, .post h3 strong {
 display:block;
 text-decoration:none; / * - Puedes poner italic, underline o bold, ¡solo una! - * /
 color:$titlecolor; / * - Cambia $titlecolor por el código de un color, ej #ff0000 - * /
 font-weight:normal; / * - Cambia normal por bold si quieres que poner la letra en negrita - * /
}
.post h3 strong, .post h3 a:hover {
color:$textcolor; / * - Cambia $titlecolor por el código de un color, ej #ffff00 - * / }
Y con eso modificamos lo básico del título de las entradas. Existen miles de efectos que pueden poner si juegan con los valores y otras propiedades; si las conocen, las pueden aplicar. Más adelante haré una entrada con propiedades CSS que pueden usar para sus títulos.

Bueno y hasta aquí por hoy, había pensado en hacer en conjunto el título de las entradas en conjunto con el título de los gadgets pero este último tiene una pequeña complicación que prefiero explicar en una entrada aparte, con otra cosa.

Como siempre, cualquier duda, espero sus comentarios. O sin dudas, simplemente para hacerme saber que leen estos tutoriales ya que los pidieron muchisimo y la verdad es que muy poca gente anda comentando en ellos... la verdad, hacerlos para nadie sería una pérdida de tiempo :(

Y antes de irme, les comento para los que no me siguen en twitter (@notasinglesong) o para quienes que no lo hayan visto que estoy preparando un nuevo theme descargable :) Creo que a partir del fin de semana estará disponible para descargar!

Besos mileeees :)

3 comentarios :

  1. hola.. te hago una pregunta... he diseñado mi blog un poco a mi estilo pero ahora cuando quiero hacerlo otra vez.. no puedo usar el ctrl+f xq no m aparece el buscador ni hacerle nada nuevo a mi blog.. podrias ayudarme???????

    ResponderEliminar
    Respuestas
    1. Que raro... estas haciendo clic dentro de la caja del código y luego aprietas ctrl+f? La verdad si lo haces, no se que pueda ser.. :/

      Eliminar
  2. Me super hiper mega encantantan estos tutos :3

    ResponderEliminar