Artisan Numérique

/bureau/gnome/ Personnalisez l'apparence de Liferea

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 {}