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.

Escríbe un comentario

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

5 comentarios en “Dale formato a tus RSS Feed con CSS”

  1. oye viejo dejate de joder poniendo “aqui estan las respuestas” para luego poner tus anuncios adsense, si vas a ofrecer informacion hazlo de buena gana, si el visitante esta interesado en el anuncio hará click no es necesario juego negro…

  2. hola, disculpa, siempre leo tu blog, lo tengo como uno amigo, es muy interesante.
    Necesito saber como agregar iconos de esos que tantos hay en la web, como follow me?
    He bajado los paquetes comprimidos en zip. Pero no sé como seguir. me ayudarias?