Tutorial básico para personalizar tu tema WordPress (III)

03
Mar
10
Escrito a las 14:26:46 por Marina Fornes

Y seguimos comentando los arreglos que podemos hacer a nuestro tema para personalizarlo :)

En esta imagen podeis comprobar el aspecto que tenían mis entradas cuando instalé el tema (que por cierto, para el que le guste: Wisdom Tree). No me seducía nada ni la tipografía (1), ni el interlineado (2), ni el tratamiento que recibían determinadas imágenes (3).

más cambios.png

 

Así pues, llegó el momento de trastear con la Hoja de estilos (Style.css). No hace falta saber gran cosa para retocarla… lo que es imprescindible es tener un novio que maneje :P y luego una pringá como yo a la que le dé por compartirlo en la red ;) (y vosotros no necesitais al primero). Vamos allá:

  • ¿Dónde está la Hoja de estilos? Dentro de wordpress, con nuestra cuenta de administrador, pinchamos en Aspecto, y paso seguido en Editor. En la columna de la derecha, debajo de las plantillas (que ya retocamos mínimamente aquí y aquí), encontramos la Hoja de estilos (aunque seguramente sea lo que nos aperece directamente al pinchar en editor, no nos cuesta nada hacer click de nuevo para cerciorarnos ;) ). Por supuesto, también puedes editar el archivo style.css en tu propio ordenador, que estará dentro de la carpeta del tema que subiste al servidor. Pero para eso necesitarás un software editor de CSS y demás. Yo supongo que será mejor hacer eso que retocar directamente en la web de wordpress, especialmente porque se tiene la posibilidad de hacer pruebas antes de subir nada y arriesgarte a cargarte la página :P Pero francamente, para las 4 o 5 chorradillas que estamos tratando aquí, no veo yo peligro alguno ;) con permanecer atentos tendremos todo bajo control.
  • ¿Qué tenemos que editar en ella? De nuevo, juega un papel importante el “quién es quién“. Nosotros queremos trabajar sobre el texto del post (de las entradas que publiquemos) y el tratamiento de las imágenes incrustadas en dichas entradas. Por tanto, debemos buscar esos bloques dentro de la hoja de estilos. 
    • Tipografía e interlineado: Haciendo un poco de scroll llegaremos a la parte que nos interesa, como se muestra a continuación:

texto inicial.png

 

Tendremos que añadir dos nuevas líneas que definan tanto el interlineado que queremos como las tipografías preferidas, como sigue:

 

tipografias e interlineado.png
A mí me ha valido con un interlineado 1.5em, pero puedes ir probando para ver cual es el que más te gusta para tu página ;) . Algunas cosas a tener en cuenta respecto a las tipografías: empiezo destacando la importancia del orden en que las escribamos. La primera de todas, será la que vea un visitante de nuestra página que tenga instalada la fuente Century Gothic. Si no la tuviera, vería la fuente Verdana, y si tampoco ésta estuviera instalada, con la Tahoma. Como podemos comprobar, un funcionamiento muy sencillo; por otro lado, no debemos olvidar que las tipografías de nombre compuesto deben ir entre comillas (como es el caso de “Century Gothic”).
  • Imágenes incrustadas: Tendremos que buscar el bloque que sigue:

borde original.png

 

Lo primero que tenemos que hacer es eliminar la sentencia float: left; ya que lo que está haciendo es obligar a que las imágenes estén fijas a la izquierda, y puede notarse la desconfiguración del texto que se deriva de esto en la primera imagen adjunta de esta entrada. Por otro lado, si tampoco estamos de acuerdo con el borde que se aplica por defecto, no tenemos más que editarlo como sigue:

 

borde 2.png

 

No olvideis pinchar el botón Actualizar Archivo cuando finaliceis de editar .
Y yo creo que con esto ya está todo lo que quería contaros de momento :) Si teneis alguna petición o pregunta más, yo estaré encantada de intentar ayudar ;)
Ánimo al que le meta mano a este tema!!
¡Comparte esta entrada!:
  • E-mail this story to a friend!
  • Print this article!
  • Turn this article into a PDF!
  • Bitacoras.com
  • Meneame
  • Digg
  • del.icio.us
  • Google Bookmarks
  • Tumblr
  • Technorati
  • Facebook
  • Twitthis

Etiquetas:
votar





Comentarios

10
  1. Fer dice:
    4 de Marzo de 2009 a las 20:36 h.

    Muy bien, te lo estás currando mucho, sigue así!! :)

    Reply to this comment
  2. Marina dice:
    5 de Marzo de 2009 a las 01:32 h.

    muchas gracias por los ánimos hombre xD ;)

    Reply to this comment
  3. Ameixiña dice:
    6 de Marzo de 2009 a las 21:29 h.

    Bueno bueno bueno, la ameixiña tiene un blog! Estás hecha toda una internauta.

    Biquiños!!!

    Reply to this comment
  4. Marina dice:
    7 de Marzo de 2009 a las 04:16 h.

    @ Ameixiña : jajajajaja es que la ameixiña es una pedazo de friki como la copa de un pino xD qué bien, me aparecerá Galicia también en el mapa de Google Analytics jajjajajajaja un “biquiñazo” de los míos pa mi galleguiño favorito!!! :D

    Reply to this comment
  5. Arbilla dice:
    22 de Abril de 2009 a las 03:01 h.

    @ Fer : Hello there!!! :mrgreen:

    Reply to this comment
  6. TaZZiTo dice:
    26 de Abril de 2009 a las 00:31 h.

    Me acabo de llevar una grata sorpresa… gran blog, gran diseño y mejores contenidos…

    Sorpresas te da Twitter, el Twitter te da sorpresas…

    Añadido a mis favoritos, sin duda, muy buenos articulos sobre personalización de WP…

    Un saludo

    Reply to this comment
  7. Marina Fornes dice:
    26 de Abril de 2009 a las 00:39 h.

    @ TaZZiTo : Muchísimas gracias :D La verdad es que estoy disfrutando muchísimo con esto!! qué te voy a contar a tí… :P De verdad, gracias!!! :D

    Reply to this comment
  8. cambiosocialya dice:
    29 de Abril de 2009 a las 23:15 h.

    Pues acabo de descubrir tu blog a través del enlace de tu presentación en EntreBlogs.
    La verdad, llevaba mucho tiempo buscando a alguien que explicara estos temas de manera amena y asequible para los no expertos.
    Y acabo de encontrarlo :)
    Ahora me voy a la cama, que no son horas…pero espero recorrerlo un poco más cuando tenga tiempo.
    Además ya tengo decidido que mi próximo ordenador será un Mac.
    Así que razón de más para seguirte.
    Un saludo.

    Reply to this comment
  9. Marina Fornes dice:
    29 de Abril de 2009 a las 23:25 h.

    muchísimas gracias! es justo lo que pretendía, hacerlo un poquito más accesible a los usuarios como yo! :D ya escribiré algún artículo más, que he ido descubriendo más truquillos :P

    Reply to this comment
  10. Marina Fornes dice:
    29 de Abril de 2009 a las 23:30 h.

    @ cambiosocialya : por cierto, no has podido tomar mejor decisión! a ver si te switcheas pronto :P

    Reply to this comment

¡Suscríbete a los comentarios de esta entrada! ó pon un enlace a la misma ∞

Comenta lo que quieras ♠ ♣ ♥ ♦

XHTML: Puedes usar éstas etiquetas: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

¡Hola! ¡Espero que tengáis un día estupendo! Sígueme en twitter
  • Publicidad por aquí





Real Time Web Analytics