Personnalisez l'apparence de Liferea
Le 19 February 2008 à 15:11, par advaya.

Tout le visuel de Liferea, hormis les éléments pris en charge par Gtk2 comme les dossiers, utilise de manière intensive les feuilles de styles CSS2. Il est donc possible très simplement de modifier radicalement l'apparence de l'application avec un simple éditeur de texte.

La feuille de style par défaut, consultable dans /usr/share/liferea, prend en charge le rendu visuel des articles, commentaires et des résumés dans la fenêtre située en bas à droite, dans le cas de la vue dite "normale".

Mais il est tout a fait possible de créer son propre style pour faire correspondre Liferea à vos goûts ou vos besoins.

Pour y arriver, il vous faut commencer par créer un fichier CSS. Pour cela, allez dans votre dossier utilisateur, localisez le répertoire de ~/.liferea_xxxx représente la version de votre lecteur. Et créez un fichier texte nommé liferea.css dans ce dossier.

Par exemple, si nous voulions changer la police par défaut et imposer une sans-serif, ce fichier pourrait contenir :

* {
  font-family: sans-serif;
  font-size: 9pt;
}

Il ne vous reste plus alors qu'à quitter Liferea et à le relancer.

Il est possible d'aller encore beaucoup bien plus loin que cela. En effet, pour chaque nouvelle, vous disposez de quatre zones distinctes qui peuvent être ainsi redéfinies :

  1. Son titre.
  2. Ses méta-données (auteur, catégorie, etc..)
  3. Ses actions (chercher, marqueur, etc.).
  4. Et son contenu lui-même (avec à la suite les éventuels commentaires).

Il est aussi possible d'adjoindre un drapeau (flag) sur certains items et ainsi changer le rendu de leur titre pour le mettre en exergue. La mise en place du drapeau se fait soit en cliquant "marque" dans le menu d'action de la nouvelle ; soit dans la fenêtre supérieure droite, dans la case située à gauche de la colonne "Date" pour la nouvelle concernée.

On peut enfin contrôler le descriptif d'un flux qui apparaît lorsqu'il est sélectionné dans la fenêtre de gauche.

Bref, voici un exemple complet de CSS commenté qui permettra à chacun de faire son propre design.

/* ---Descriptif du flux (flux, source) --- */
.feedhead {
  background-color: #F1E5D5;
}
.feedhead a {
  color: #673F28;
  text-decoration: none;
}
.feedhead a:hover {
  text-decoration: underline;
}

/* --- Titre d'item (general, marqué, non-marqué) --- */
.itemhead {
  font-family: sans-serif;
  font-size: 1em;
  font-weight: normal;
}
.flagged {
  background-color: #F3ADA7;
  font-weight: normal;
}
.unflagged {  
  background-color: #F3D0A5;
  font-weight: normal;
}

/* --- meta-donnees de l'item (categorie, auteur ...) --- */
.headmeta {
  background-color: #F1E5D5;
}
.author, .categories, .source , .publisher, .creator {
  background-color: #F1E5D5;
  font-size: 1em;
}
.author, .publisher, .creator {
  color: #673F28;
  font-size: 1.1em;
}
.categories {
  font-weight: normal;  
  font-style: italic;
  color: #555;
  padding-bottom: 2px;
}

/* --- menu (marqueur, marque-page, commentaire, chercher) --- */
.itemmenu {
  background-color: #EFEBE7;
}
.itemmenu a {
  font-size: 0.9em;
  color: #666;
}
.itemmenu a:hover{
  color: #673F28;
}

/* --- contenu de l'item --- */
.content {
  font-style: italic;
  font-size: 0.85em;
  color: #333;
}

/* --- commentaires --- */
.comment {
  background-color: #FFF5E9;
}
.comment_title{
  color: #673F28;
  font-style: normal;
  font-weight: normal;
  font-size : 0.9em;
  font-family: sans-serif;
}
.comment_body {
  font-style: italic;
  font-size: 0.85em;
  color: #333;
}

/* --- divers --- */
.date {}
.headleft {}
.headright {}
a.favicon img {}

Commentaires

StandarT, le 19 février, 2008 - 16:15

Et bien voilà une bonne raison de me plonger un peu plus dans les CSS, étant donné que j'utilise liferea et que j'ai besoin de pratique pour bien comprendre l'edition des feuilles de style, ça me paraît être une bonne base, merci pour le tuyau.

advaya, le 19 février, 2008 - 16:23

@ StandarT : je ne suis pas certain que Liferea soit la façon la plus simple d'aborder les CSS ... mais pourquoi pas après tout, il faut bien commencer quelque part. Content si l'article t'aide Wink

Tuxicoman, le 19 février, 2008 - 19:55

Je cherche un afficheur de RSS avec une mise en page à la netvibes (cad les titres de plusieurs flux sur le meme ecran) mais en local

Ulhume, le 19 février, 2008 - 19:58

@Tuxicoman
Tu peux avec Liferea, Aggreger des flux en création un "dossier de recherche" et en mettant comme critères les titres des flux à combiner.

Ulhume, le 20 février, 2008 - 14:21

@Tuxicoman Je viens de me rendre compte qu'il est aussi possible dans les préférences de Liferea de cocher le fait d'aggreger les flux contenus dans un dossier, si cela répond à ton besoin...

Tuxicoman, le 21 février, 2008 - 01:37

Oui mais si on met tous dans un dossier, les billets de toutes les sources sont mélangés par date. Netvibes propose un classement par origine tout en ayant une vue synthétique. Je trouve ça pratique si on est intéressé que par quelques billet dans un grand nombre de sources.

Ulhume, le 21 février, 2008 - 12:01
Là je ne peux plus dire, je ne connais pas assez netvibes.

Poster un nouveau commentaire

Si vous avez détecté une erreur, coquille ou bêtises du même ordre, merci de plutôt passer par le formulaire de contact
Pour vous abonner au flux des commentaires sur cet article, clickez ici.
Pour répondre à quelqu'un, utilisez plutôt le lien répondre qui se trouve en haut (ou en bas) à gauche de son commentaire.
Le contenu de ce champ sera maintenu privé et ne sera pas affiché publiquement. Si vous avez un compte gravatar, l'utilisez pour afficher votre avatar.
  • To highlight piece of code, just surround them with <code type="language"> Your code &tl;/code>>. Language can be java,c++,bash,etc... Everything Geshi support.
  • Tags HTML autorisés : <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd> <blockquote> <div> <p> <br>
  • Les lignes et les paragraphes vont à la ligne automatiquement.
  • Textual smileys will be replaced with graphical ones.
  • Les adresses de pages web et de messagerie électronique sont transformées en liens automatiquement.
  • Every instance of custom tags in the input text will be replaced with a specific tool shortcut.

Plus d'informations sur les options de formatage


Commentaires récents
Porte secrète