
De los viejos cassettes, a los CD, de los antiquísimos VHS a los DVD. Todo cambia con el avance tecnológico, y obviamente que las fotos no fueron la excepción, de aquellos viejos tiempos en que las cámaras de foto eran enormes, pesadas, y no cualquiera tenia una, a nuestros tiempos donde son cada vez mas pequeñas, livianas y están al alcance de todos nosotros.
En esta ocasión hablaremos de los marcos, claro uno antes tenia que llevar el rollo fotográfico a la casa de revelados, esperar unas horas o un día entero para recién ahí poder ver sus fotos, hoy en día es instantáneo, pero lo que pasaba además en las tiendas de revelado era que nos ofrecían infinidad de opciones en cuadros para enmarcar nuestras fotografías, en esto la fotografía digital también ha dado un paso gigante, permitiéndonos elegir entre miles de diseños, o marcos digitales, los cuales podemos descargar gratuitamente si buscamos por Internet.
Desde este enlace tendremos 25 Marcos de diferentes estilos para darles un toque especial a nuestras fotos!
Ahora que ya sabemos como mostrar código en WordPress vamos a ver como se le da estilo para que aparezca de la forma que más nos guste.
Lo primero que tenemos que hacer es abrir la hoja de estilos de nuestra plantilla, que normalmente es “style.css” o en su defecto otro con la terminación “css” (Cascading Style Sheets u Hojas de Estilo en Cascada).
Una vez localizado añadiremos el siguiente código para crear la clase “codigo”:
Ahora veremos lo que hace cada parte de este código para que se adapte a tu gusto:
1º) background-color: aquí puedes elegir el color que quieres para el fondo de tu código.
2º) color: aquí puedes elegir el color de la fuente.
3º) font-family: aquí puedes elegir la familia de fuentes que utilizaremos para representar el código.
4º) font-weight: aquí elegimos el grosor de la fuente. Para elegir otro grosor lee ésto.
5º) margin-top: con esto conseguimos dejar un pequeño margen entre el texto y el código. Cambia el valor 10px si quieres que tener más o menos espacio. Si quieres aumentar el espacio al final del código solo tienes que añadir la línea magin-bottom:*px; y sustituir el asterísco por el valor que quieras.
6º) padding: los valores asignados a este campo crearán un margen interno dentro del contenedor que contiene el código. Los valores corresponde, en este orden, a los márgenes internos superior, derecho, inferior e izquierdo.
7º) border-left: con esta propiedad creamos un borde a la izquierda de nuestro contenedor con un grosor de 2 pixeles, con trazo continuo (solid) y de color azul (blue). Si quieres modificar estos valores lee ésto.
Ahora cuando queramos escribir algo de código en uno de nuestros posts crearemos un contenedor metiendo el código entre las etiquetas <div class="codigo"></div>.
De esta forma si escribimos en nuestro post algo como ésto:
<div class="codigo">
<html>
<head>
<title>Hola</title>
</head>
</html>
</div>
Cuando el post se publique obtendremos esto otro:
Bueno pues ya sabéis como dar estilo a vuestro código con la ayuda de las hojas de estilo. Iremos viendo más cosistas. Saludos avinagrados.