Informática fácil, manuales y tutoriales paso a paso, wallpapers, Wordpress, promoción, blogs ......... y algunas cosas más en VinagreAsesino.com

Dar estilo al código en WordPress

............................................................................................................................

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:

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.

Etiquetas: Blogs, WordPress, Blogger ..., código, css, estilo, hojas

Entradas relacionadas

Publicado el 27 - 06 - 2008 en Blogs, WordPress, Blogger ...

Hay 12 comentarios sobre “Dar estilo al código en WordPress”

Rogelio ha comentado:
27 - 06 - 2008 [6:54 pm]
Javi y ese boton?
:_(
happy tears
Enlaces Dominicales XX | Trazos Web ha comentado:
29 - 06 - 2008 [7:40 am]
[...] Dar estilo al código en WordPress. [Vinagre Asesino] [...]
Kronyen ha comentado:
29 - 06 - 2008 [4:49 pm]
Muy bueno Vinagre!! sigue así, es una gran ayuda para la infinidad de blogs que están hechos con wordpress….
XeroLinks VI | XeroBlog - Blogging - SEO - Consejos y Recursos para Bloggers ha comentado:
29 - 06 - 2008 [8:18 pm]
[...] Dar estilo al código en WordPress – VinagreAsesino [...]
Mas de 700 trucos, tutoriales y consejos para Wordpress | uLove-Tech - Blog sobre Ganar Dinero en Internet, SEO, Marketing, Blogging y Posicionamiento web ha comentado:
06 - 07 - 2008 [1:16 am]
[...] Dar estilo al código de Wordpress [...]
Colorear código en Wordpress | Blog de un estudiante de ingeniería de sistemas. | G2 Blog ha comentado:
07 - 07 - 2008 [8:26 pm]
[...] en el post de Vinagreasesino donde se buscaba dar estilo al código en WordPress he encontrado un plugin para Wordpress y paso a [...]
Todotutoriales.es ha comentado:
09 - 07 - 2008 [9:08 am]
Mostrar código en WordPress…

A menudo nos pasa esto a los usuarios de WordPress. Queremos mostrar código html en un post y nos encontramos con que los caracteres que utiliza HTML para definir sus etiquetas “<” y “>” son interpretados como tales y no …
Como escribir código en WordPress ha comentado:
13 - 10 - 2008 [9:35 pm]
[...] ya no tendrás problema a la hora de insertar código en tus posts de WordPress. Ahora puedes ver como dar estilo al código para que se diferencie del resto del contenido. Saludos avinagrados. Publicado el 24 – 06 – [...]
amigasclarisas ha comentado:
12 - 11 - 2008 [3:36 pm]
Hola desearia saber como se pone en una de las plantillas Parchment de WordPress un divider o separación para que no esten tan unidos los post.
Espero puedas ayudarme , gracias.

ana
Muchos trucos, tutoriales y consejos para Wordpress | Lo Tecnologico ha comentado:
11 - 07 - 2009 [6:27 pm]
[...] Dar estilo al código de Wordpress No TweetBacks yet. (Be the first to Tweet this post) Compartelo Entradas SimilaresPendrive transformerEl largo camino que le espera al Internet Explorer 8En los EEUU analizan regular los blogsEn Argentina los usuarios de Twitter se verán cara a caraLa "ñ" y otros caracteres alfabeto español podrán utilizarse en dominio ".eu"Algunos Trucos para transformar tu blog de BloggerSi te gusto este temaSuscribete a nuestro feed! [...]
Un montón de trucos, tutoriales y consejos para Wordpress | http://trukos.net ha comentado:
16 - 08 - 2009 [4:24 am]
[...] Dar estilo al código de Wordpress No TweetBacks yet. (Be the first to Tweet this post)Compartelo Mas Trukos de Interestrucos varios para el manejo de Twitter [...]
Trucos, Tips y Tutoriales para tu Blog Wordpress | trukos! ha comentado:
05 - 12 - 2009 [5:49 pm]
[...] Dar estilo al código de Wordpress [...]