Donnez un style à votre flux RSS en Javascript


Après avoir récupéré le code javascript pour votre flux, 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).

Essayez une Feuille de Style


URL Indiquez l'URL du flux RSS auquel vous désirez donner un style; Si vous n'en avez pas, vous pouvez utiliser celui ci-après, de Braveo.

Selecteur de Style
Voici quelques exemples de feuilles de style - vous pouvez les modifier ou en créer de nouvelles. Pour un affichage sans style, sélectionnez "No Style / Blank Template".

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 :

  1. 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">

<!--  C'est ici que vous collez le code CSS fourni par ce formulaire -->

</style>
  2. Lier une feuille de style externe. C'est la meilleure méthode 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.

Pour chaque flux RSS 2.0, FeedJS fournit un lien Play XXX, où "XXX" correspond à l'extension du fichier multimédia, comme "mp3", "m4a", etc. Les styles utilisés sont basés sur la méthode Well Styled's Inline Buttons (en anglais). 

<div class="pod-play-box">
<a class="pod-play" href="podcastURL"><em>Play</em><span> File</span></a>
</div>


Des couleurs personnalisées peuvent être définies en éditant les couleurs de premier plan ou d'arrière plan appropriées, à partir des styles de base (en gras ci dessous) :

.pod-play {
   _width:12em;
   margin: 0 0.2em; padding: 0.1em 0; _padding:0;
   
   white-space:nowrap;
   text-decoration: none;
   vertical-align:middle;
   background: #fb6;
   color: black;
   }
.pod-play em {
   _width:1em; _cursor:hand;
   font-style: normal;
   margin:0; padding: 0.1em 0.5em;
   background: white;
   color: #222;  
   }
.pod-play span {
   _width:1em; _cursor:hand;
   margin:0; padding: 0.1em 0.5em 0.1em 0.3em;
   }
.pod-play:hover {
   background: #666;
   color: white;  
   }
.pod-play:hover em {
   background: black;
   color: white  
   }

Techniques avancées : 2 styles sur une seule 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 génération vous pouvez maintenant créer des classes différentes de premier niveau. La valeur donnée créera une classe CSS rss-box-XXXX where 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.

Pour illustrer, voici deux exemples :