El blog de Vinagre Asesino » hojas http://www.vinagreasesino.com Informática fácil y paso a paso. Vinagre Asesino Thu, 09 Feb 2012 21:52:20 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 Dar estilo al código en WordPress http://www.vinagreasesino.com/articulos/dar-estilo-al-codigo-en-wordpress.php http://www.vinagreasesino.com/articulos/dar-estilo-al-codigo-en-wordpress.php#comments Fri, 27 Jun 2008 11:20:18 +0000 Vinagre Asesino http://www.vinagreasesino.com/?p=343
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” [...]]]>

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”:

.codigo{
background-color:#f8f3f3;
color:blue;
font-family:’Courier New’,Courier,monospace;
font-weight:normal;
margin-top:10px;
padding:10px 2px 10px 10px;
border-left: 2px solid blue;
}

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:

<html>
<head>
<title>Hola</title>
</head>
</html>

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.

]]> http://www.vinagreasesino.com/articulos/dar-estilo-al-codigo-en-wordpress.php/feed 12