Dale formato a tus RSS Feed con CSS

Icono RSS feed
Es fácil darle un mejor aspecto a tus rss feed en wordpress con con CSS (hojas de estilo de cascada). Te voy a mostrar un tutorial de 10 minutos, puedes ver el resultado mirando el feed RSS de este sitio. También lo puedes hacer con estilos XSL pero por el momento lo vamos a hacer con CSS que es más sencillo. Para empezar es necesario agregar la etiqueta xml-stylesheet a tu RSS feed, para ello abre el archivo wp-rss2.php y después de la línea:

<?php echo ‘<?xml version="1.0" encoding="’.get_settings(’blog_charset’).’"?’.'>’; ?>

agrega:

<?php echo "\n<?xml-stylesheet type=\"text/css\" href=\""; ?>
<?php bloginfo(’stylesheet_directory’); ?>
<?php echo "/rss.css\" ?>"; ?>

Luego tienes que crear el archivo rss.css y lo colocas en el directorio de tu theme, dentro de este archivo vas a definir cómo se van a mostrar las etiquetas RSS, un ejemplo del contenido de este archivo es el siguiente:

rss {
	display: block;
	font-family: verdana, arial;
	font-size: x-small;
}
channel link {
	display: block;
	margin: 5px 6px;
}
channel description {
	display: block;
	margin: 5px 6px;
}
item {
	background: #E8F8FD;
	display: block;
	margin: 10px 30px;
	padding: 5px;
	border: 1px dotted #aaa;
}
title {
	font: bold large Arial, Helvetica, sans-serif;
	display: block;
	margin: 5px;
	padding: 2px;
	color: #333;
	border-bottom: 1px solid silver;
}
item title {
	font-size: medium;
	color: #666;
}
channel item link {
	display: block;
	margin: 0;
}
comments {
	display: block;
}
docs {
	display: block;
	margin: 20px;
	text-align: center;
	padding: 5px;
	color: #7f7f7f;
	border: 1px solid silver;
}
channel item description {
	display: block;
	background: #fff;
	border: 1px dotted #f5f5f5;
	margin: 5px 3px;
}
/* para las etiquetas que ocultamos */
language, lastBuildDate, ttl, guid, category, pubDate, generator {
	display: none;
}

Al parecer el Internet Explorer 7 Beta, que no recomiendo utilizar no se muestran las hojas de estilos de los RSS, en cambio te muestran los RSS con un formato propio de ellos, en Firefox se ve de maravilla.

7 Comentarios (Agrega el tuyo)

  1. anonimo
    Comentado 7 de Abril de 2008 a las 10:17 | Permalink | Responder ↓

    Muy ocurrente el blog, sobre todo la parte final del link http://www.carlosleopoldo.com/feed/ dónde aparecen vínculos a la viagra!!!

  2. Comentado 8 de Abril de 2008 a las 1:34 | Permalink | Responder ↓

    @anonimo gracias por el aviso, no tengo idea de cómo esos enlaces de spam aparecían ahi, reemplacé la instalación de wordpress y se corrigió.

    ¿Alguién ha tenido ese mismo problema antes?

Escribe un Comentario

Su correo nunca será publicado ni compartido. Los campos requeridos están marcados *

*
*

5 Trackbacks (URL del trackback)

  1. Por Sentido Web en 5 de Septiembre de 2006 a las 5:24

    Los mejores textos sobre CSS y estándares web en castellano…

    Uno de las obsesiones de Sentido Web es que la mayoría de la información se encuentra en inglés. A raíz de esta lista, hemos realizado, junto a José Luis Antúnez, esta selección de los que consideramos los mejores artículos sobre……

  2. Por Juglar :: Formato legible de tu feed RSS :: October :: 2006 en 24 de Octubre de 2006 a las 14:05

    [...] Mundo Geek - Cómo transformar los feeds en formatos legibles para el usuario Carlos Leopoldo â?? Dale formato a tus RSS Feed con CSS « Anterior: Editores online de imágenes [...]

  3. [...] Dale formato a tus RSS Feed con CSS [...]

  4. [...] de SPAM en el Feed y el template del blog y terminaba por darme cuenta demasiado tarde o hasta que alguien me avisaba, y por culpa de esos enlaces perdí PageRank de tener un PageRank de 5 ahora tengo PageRank 2. Este [...]

  5. Por » Textos sobre CSS y estándares web en Español en 2 de Julio de 2008 a las 21:12

    [...] Dale formato a tus RSS Feed con CSS [...]

La gente que ha leido este artículo buscó:

- - - -