Modificar el estilo de la página web

1 Flares Twitter 1 Facebook 0 Google+ 0 LinkedIn 0 Buffer 0 Email -- 1 Flares ×

A todos nos gusta personalizar la apariencia de nuestro  blog o página WEB. En principio lo más fácil es cambiar la plantilla y ya está. Desde luego es una de las ventajas de herramientas como WordPress.

Pero a mí me da pereza el tener que adaptarme a una plantilla determinada. Por ejemplo, alguna de las que más me gustan implican tener una imagen destacada de cada artículo y yo no he empezado a añadir imagen destacada a los artículos hasta hace unos pocos meses. Precisamente empecé ese hábito cuando vi las tendencias que muestran las plantillas más modernas.

Twenty Ten - Modificar el estilo de la página web

Si embargo, mientras decido cuál será mi futura plantilla, yo utilizo todavía la primera que tuve, la famosa twentyten, retocada gracias al plugin Style Tweaker ((Ya hablé en el pasado de este plugin, concretamente en mi artículo Featured post + Style tweaker. Por cierto, que el plugin no ha sido modificado en dos años y tal vez sería mejor encontrar otra solución, pero a mí me sigue funcionando)). Esta plantilla, antigua en concepto tiene sin embargo una gran ventaja, y es su velocidad de carga. Desde el punto de vista de que Google quiere ofrecer un buen servicio a sus usuarios, es normal que premie las páginas que mejor se cargan; por eso intento en la medida de lo posible que mi página se cargue rápidamente. Otra interesante opción es activar el plugin WP Super Cache u otro similar.

Bueno, y cómo se modifica un estilo. Por ejemplo, cómo cambio el color del texto de este y otros artículos.

Ajustando estilos

Lo primero que hay que recordar es que el blog acude a unos ficheros de estilo para indicar a nuestro navegador cómo pintar las cosas. Te recomiendo que abras tu página favorita con Mozilla Firefox, te sitúes sobre un texto, imagen o cualquier otro elemento de la página y pulses con el  botón derecho del ratón. Aparece un menú, cuya última opción debería ser Inspeccionar elemento con Firebug. Pulsas en ella y aparece la consola de desarrollador del Firefox, que normalmente mostrará el código HTML1 a un lado y el estilo que se utiliza para mostrar en pantalla a la derecha2.

Con el enlace indicado en la nota anterior es más o menos fácil intuir que elemento del código de estilo se debe modificar. Por ejemplo, este mismo texto que estoy escribiendo ahora podría estar como

#content p

El propio Firefox permite modificar los parámetros y hacer pruebas. Estas pruebas solo afectan a lo que se ve en pantalla. Así que podemos probar todo lo que queramos.

Ahora podemos ir al plugin de style tweaker en introducir el siguiente código en la ventana Public style tweaks:

#content p{color: #6600cc;}

Le damos a guardar y recargamos la página. Veremos como el texto del párrafo de todos nuestros artículos pasan a un color morado.

…y si no te gusta, no pasa nada, sólo tienes que borrar la línea que introdujiste en style tweak y guardar, claro.

Yourself

Otra opción mucho más interesante si no tienes conocimientos de CSS es ThemeYourself3. Este sensacional plugin permite modificar prácticamente cualquier estilo de nuestra web, tocando las diferentes características de sus elementos.

yourself wordpress theme - Modificar el estilo de la página web

Si algún lector quisiera más información, solo tiene que dejar un mensaje y contestaré lo antes posible.

Saludos.

1 Flares Twitter 1 Facebook 0 Google+ 0 LinkedIn 0 Buffer 0 Email -- 1 Flares ×
Notas:
  1. Véase http://es.wikipedia.org/wiki/.HTML []
  2. Más información sobre estilos CSS en mi web favorita al respecto: http://www.w3c.es/Divulgacion/GuiasBreves/HojasEstilo []
  3. Véase http://es.themeyourself.com/ []

Acerca de Vicente Millán

Technology and consulting lover
Esta entrada fue publicada en Mi software favorito, Wordpress y etiquetada , , . Guarda el enlace permanente.