| Accueil | Générateur code Simple | Générateur code avancé | Validateur de FluX Rss | Générateur de FluX Rss |

Style du FluX Rss

Une fois que vous avez construit le code de votre FluX Rss, vous pouvez voir comment la sortie de RSS contenu gnr par les Feed2JS peut tre personnalis par l'application de feuilles de style diffrentes. Chaque partie de l'alimentation a un identifiant, vous permettant d'ajouter des styles la bote contenant les articles, le titre, la date d'affichage du texte..

Essayez sur une feuille de style

URL Entrez l'adresse Web du RSS de styliser, si vous n'en avez pas d'accessible, vous pouvez utiliser celui-ci apparat Guide Cration.info.

Selecteur de Style
Ce ne sont que des varits de style, vous tes invit modifier ou crer les vtres. Pour une ardoise vierge, slectionnez le none "/ template" de style.

Utiliser une feuille de style

Vous aurez besoin d'incorporer le code CSS ou un lien dans vos propres fichiers HTML, il ya deux faons dont vous pouvez faire ceci

  1. Insrez le CSS directement dans le HTML de la page qui va afficher le flux. Cette mthode est la meilleure pour les sites qui affichent uniquement l'alimentation sur un ou quelques pages. Utilisez le formulaire ci-dessous pour trouver le style que vous dsirez, copiez le CSS, et collez-le quelque part dans le <HEAD>...</HEAD> de votre fichier HTML qui contient le code, entour par les<style>...</style> tags ci-dessous. 
    <style type="text/css"  media="all">

<!--  C'est l que vous collez le code CSS fournis par le formulaire ci-dessous -->

</style>
  2. lien vers une feuille de style externe. Cette mthode est la meilleure si vous comptez utiliser les flux sur plusieurs pages, comme le CSS est stock l'extrieur, et ainsi vous permet de changer l'affichage de plusieurs pages de sortie en ditant un seul fichier. Il suffit de copier le code CSS fournis par le formulaire ci-dessous et collez-le dans un nouveau fichier texte. Enregistrer en tant que quelque chose appel "myfeed.css". Pensez puce sur l'endroit o vous avez dcid de stocker ce fichier, comme d'autres pages HTML qui appellent ncessit de dfinir un chemin d'accs correct au fichier. Plusieurs sites web juste crer un rpertoire de niveau suprieur nomm style et stocker tous les fichiers de feuille de style dans ce rpertoire.

    Peu importe, pour relier le fichier HTML qui contient le code une feuille de style externe, insrer cette ligne dans le<HEAD>...</HEAD> de votre HTML. 
    <link rel="stylesheet" href="style/myfeed.css" media="all">
    Rappelez-vous de plus que la valeur dehref= doit tre un chemin relatif exact (ou une URL valide complet tel que http://www.blah.com/style/myfeed.css) partir du fichier HTML dans le fichier CSS.

CSS classes

Cette esquisse reprsente les classes CSS Cr le script

  • rss-box dfinit la div englobante pour l'affichage complet utiliser pour dfinir les frontires, remplissage, etc
  • rss-title le titre et le style du lien s'affiche. Utilisez des variantes de rss-titre a: link, RSS-title a: hover , etc pour les styles de capotage
  • rss-items dfinit la liste non-ordonne<ul>...</ul> pour les lments feed-utiliser pour dfinir padding/margins des articles.
  • rss-item affichage de chaque description de l'article et le titre, <li>...</li> ainsi que la description du canal, si il est affich.
  • rss-item a: variante pour le titre et le lien de style
  • rss-date dfinit l'affichage du point Priodes d'affichage

Pour tout flux RSS 2.0 avec des enceintes podcast, Le script fournira unePlay XXX link, where "XXX" est l'extension du fichier mdia, e.g. "mp3", "m4a", etc. Les styles appliqus sont modeles d'aprs Des Lignes de Boutons mthode. 

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

Les couleurs personnalises peuvent tre atteint par une rvision approprie avant-plan et couleurs de fond partir des styles de base (soulign 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  
   }

Avanc: deux styles en une seule page

Si vous avez plus d'un FluX Rss affichs par page, vous pouvez affecter des styles diffrents pour chaque affichage. Vous aurez besoin d'une solide comprhension des CSS et l'hritage pour que cela fonctionne!.

En fournissant une valeur pour le CSS personnalis et de qualit dans le construire la forme vous pouvez maintenant crer diffrentes classes de niveau suprieur. La valeur passe va crer une classe CSS nommerss-box-XXXX ou XXXX C'est cette valeur. Cela implique que vous pouvez dfinir des classes plus spcifiques pour les autres classes numres ci-dessus, ou utiliser le niveau suprieur rss-box-XXXX classes pour dfinir une couleur de fond diffrente.