Feed2JS: appliquez un style à votre fil
Une fois que vous avez construit votre code pour votre fil, vous pouvez voir comment l'affichage du contenu du fil RSS généré par Feed2JS peut être personnalisé en appliquant différentes feuilles de style. Chaque partie du fil a un identifiant, vous permettant d'ajouter des styles à la boîte contenant le fil, le titre, l'item, et la date de publication. Quelques exemples de styles sont fournis ici; pour plus d'info voir le Feed2JS Style Center (en anglais).
Utiliser une Feuille de Style
Vous devrez incorporer le code CSS ou le lien dans vos propres fichiers HTML; il y a deux façons de faire :
- Insérer le CSS directement dans le HTML pour la page qui affichera le fil. Cette methode est la meilleure pour les sites qui affichent le fil sur une ou quelques pages. Utilisez le formulaire ci-dessous to trouver le style que vous desirez, copiez le CSS, et collez le quelque part dans la section <HEAD>...</HEAD> du fichier HTML qui contient le code Feed2JS, entouré les balises <style>...</style>.
<style type="text/css" media="all"> <!-- Copiez ici le code CSS --> </style>
- Lier une feuille de style externe. Cette méthode est la meilleure si vous utilisez le fil sur de nombreuses pages, le CSS étant stocké de manière externe, vous permettant ainsi de modifier l'affichage de plusieurs pages en éditant un seul fichier. Copiez le code CSS et collez le un nouveau fichier texte. Enregistrez le sous un nom comme "monfil.css". Réfléchissez bien à l'endroit où stocker ce fichier, car les autres pages HTML devront y accéder. De nombreux sites crééent un répertoire nommé style et y stockent toutes leurs feuilles de style.
Quoiqu'il en soit, pour relier le fichier HTML qui contient le code Feed2JS à une feuille de style externe, insérez cette ligne dans la section <HEAD>...</HEAD> de votre HTML.<link rel="stylesheet" href="style/myfeed.css" media="all">
N'oubliez pas que la valeur de href= doit être un chemin relatif valide (ou une URL valide comme http://www.monsite.com/style/monfil.css) du fichier HTML au fichier CSS.
Les classes CSS
Ce schéma représente les classes CSS créées par Feed2JS.
- rss-box définit le div de l'ensemble de l'affichage - utilisé pour définir les bordures, le remplissage, etc.
- rss-title le titre du fil et du lien. Utilisé avec les variantes telles rss-title a:link, rss-title a:hover, etc
- rss-items definit la liste non ordonnée <ul>...</ul> pour les items du fil - utilisé pour définir les padding/marges des items.
- rss-item affichage de chaque item du fil (contenu et titre), <li>...</li> de même que la description du fil (channel description), si affichée.
- rss-item a: variante pour le titre et le lien de chaque item
- rss-date definit l'affichage des dates de publication
Techniques avancées: deux styles sur une page
Si vous avez plus d'un fil affiché par page, vous pouvez associer des styles différents à chacun d'eux. Vous devez avoir une solide connaissance de CSS et de l'héritage pour faire marcher ça !.
En donnant une valeur pour la classe CSS personnalisée dans le formulaire de construction vous pouvez maintenant créer des classes différentes de premier niveau. La valeur donnée créera une classe CSS rss-box-XXXX où XXXX est cette valeur. Ceci implique que pouvez devoir spécifier d'autres classes spécifiques pour les autres classes listées ci-dessus, ou utiliser les classes de premier niveau rss-box-XXXX pour définir par exemple un background différent.