Curiosidades, entretenimiento y explicaciones cuasi-científicas

Cómo cambiar el diseño de tu página web

Aprender a cambiar el código de tu página web

Este artículo viene de la continuación de Cómo crear un blog con WordPress donde analizábamos punto por punto cómo llegar a tener un blog desde el inicio. Una de las cosas que nosotros hemos ido aprendiendo a través de la experiencia es a cambiar algunas cosas del código sin llegar a ser realmente editores o informáticos. ¿Quieres saber cómo?

Cuando tenemos lista para empezar a escribir nuestra página web habrá algunas cosas que estemos descontentas con nuestra plantilla. «Ay si este cuadro estuviese un poco más a la derecha» o «que color más feo, ojalá me diese la opción de cambiarlo». Todas estas cosas no están en manos de los inexpertos (¿o si?) y si la plantilla de tu página web no te da la opción de ello, como cambiar el color, aumentar el tamaño o tipo de letra o desplazar cualquier cosa de un lado a otro, seguramente nos las tengamos que tragar o avisar a un programador y tendremos que soltar el monedero.

Una forma de ir aprendiendo poco a poco el funcionamiento del código es a través de Inspeccionar elemento.

¿Qué es exactamente Inspeccionar elemento y dónde puedo encontrarlo?

Primero sitúate en cualquier parte de una página web y pulas botón derecho. Automáticamente nos sale las típicas opciones (deshacer, rehacer, copiar, pegar, cortar, etc). Pues estando en chrome si miramos la última opción vemos que pone algo así como inspeccionar elemento. Pínchale sin miedo.

inspeccionar elemento página web

Cuando le demos nos aparecerá un cuadro inferior lleno de símbolos y colores que la mayoría de personas no sabremos interpretar. Todo eso es el código de la página web. Concrétamente te estás situando en la parte de código donde has pinchado. Pero tranquilo, no jugamos a ser hacker, es una herramienta muy útil para los programadores y no te permite alterar el funcionamiento de las páginas, ya que sólo se ve el estilo o el código html.

¿Jugamos a ser Dios con las páginas Web?

Una técnica muy estúpida y poco aprovechable (seamos sinceros ;)) es gastarle bromas a tus amigos o familiares cambiando las palabras de cualquier página web. Como hemos dicho antes, lo que cambies desaparecerá cuando actualices de nuevo. Vamos a hacer la prueba con una página web muy conocida por todos, el diario Marca.

Nos situamos en la portada en el que por cierto aún se sigue comentando el problemático penalti que se pitó a Pepe en el Elche-Real Madrid. He aquí una parte de la portada:

fragmento página web diario marcaVemos este trozo de la página Marca donde Rosell dice que aún no se lo cree en alusión al partido del Real Madrid. Para nuestra opinión pensamos que debería preocuparse de sus cosas (¿Se ha notado mucho que somos madridistas? ;)). Pues vamos a cambiar el titular por uno que nos convenga más a los madridistas. Los culés que no se cabreen que la finalidad del artículo es explicar el modo en que inspeccionar elemento nos puede ayudar a cambiar la estética de nuestra página web ;).

Lo dicho, tal como hemos visto antes, situamos el cursor encima de la frase de Rosell y le damos botón derecho, inspeccionar elemento. Automáticamente nos saldrá un código raro que poco a poco vamos a ir interpretando.

Si lo hemos hecho bien, nos aparecerá en azul justo la zona donde queremos cambiar el código. Podéis probar con cualquier noticia o página web aunque la noticia de Rosell muy probablemente ya no esté en la portada de Marca para cuando este artículo salga. No importa, funciona con todas las webs.

En nuestro caso nos sale un código así:

código cambiar estética página webSi miramos lentamente todo lo que dice el código vemos que pone algo como title= «Rosell: «Aún no me lo creo» que es exactamente lo que queremos cambiar. Tan sólo tendremos que hacer doble clic y escribir a nuestro antojo. Vamos a ello:

comentario Marca

Y aquí tenemos el resultado ;). Hemos cambiado complemente las declaraciones de Rosell afirmando justamente lo contrario de lo que realmente dijo. Imagínate cambiar muchas mas cosas y enseñárselas a tus amigos o familiares.

Vale, como broma está bien pero…¿Y qué hay de lo de cambiar la plantilla de mi web?

Cambiar algunas cosas de la plantilla de tu web

Ahora mismo tendrás algunas dudas y es culpa nuestra. Antes te hemos dicho que los cambios que hacíamos en inspeccionar elemento no se guardaban (¡menos mal porque si no…!) por lo que no nos sirve de cara a nuestra web…¿o sí?

Si tenemos nuestra página en WordPress tal y como explicamos en el artículo de cómo crear un blog, en el editor hay una cantidad ingente de código en php que rige todo el funcionamiento de la página web. Ahí es donde irremediablemente tendremos que tocar y «cagarla», de ahí que en ese artículo mencionásemos la importancia de hacer copias de seguridad.

Vamos directos al grano. Poniendo como ejemplo la vida cotidiana vamos a explicaros un cambio sencillo de color. Si os fijáis la barra de nuestra categoría es de un color azul claro y las letras blancas. Vamos a cambiarlas al color…ummmm ¡verde! Va a quedar un poco feo pero para explicarlo vale.

Nos situamos con el cursor encima de las letras y hacemos clic derecho e inspeccionar elemento, como siempre. Nos saldrá un código parecido al de antes, aunque ahora nosotros tendremos que ir a la parte derecha donde están todas las funciones del estilo.

funciones la vida cotidianaVemos que pone color y aparece el blanco, que queda definido como #FFFFFF. Tan sólo tendremos que pinchar en el cuadro del color y cambiarlo a nuestro gusto. Nos aparecerá una barra de colores que tan sólo tendremos que pinchar y elegir el mejor color. Aunque no sólo podemos cambiar el color, también podemos modificar el padding, la tipografía, el tamaño (font-.size), etc. Es cuestión de probar y ver los cambios con la seguridad de que no pasará nada en absoluto y todo volverá a la normalidad en cuanto actualizemos.

¿Cómo hacer efectivos estos cambios?

El código de nuestra web tiene algo parecido aunque bastante menos claro e intuitivo en forma de código php. En el caso de que queramos modificar cosas como estas las encontraremos en el estilo. Si nos vamos a apariencia, editor, al final de todo encontraremos un archivo que seguramente ponga style.css.  Ahí está todo el código que administra el estilo, simplemente tendremos que buscar la parte donde está el color y cambiarlo. ¿Difícil de encontrar? No, hay un truco..

cambio código style

Aquí es donde podemos realizar los cambios que serán permanentes

Arriba del cuadro que hemos puesto arriba, aunque está tapado por el recuadro rojo que hemos puesto nosotros pone algo como menu secundary. Ya sabemos que tendremos que buscar algo en nuestro código que ponga exactamente eso o parecido. otro truco es buscar con CONTROL+F, poner el color y buscar el que corresponda. Sustituimos el #FFFFFF por cualquier otro que queramos y le damos a guardar. Automáticamente observaremos los cambios. Si lo hemos hecho bien, buscaremos otra más complicada que hacer y si nos hemos cargado la web, es cuestión de volver a cargar el archivo style.css a nuestro ftp. Probar, cagarla, mejorar. Probar, cagarla, mejorar. ¡Así funciona! 😉

Espero que os haya servido esta guía un tanto curiosa sobre modificar la estética de nuestra página web.

Un saludo. La vida cotidiana.

¡Vota este artículo!

Leave a Reply

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *