Connexion utilisateur
Commentaires récents
 
Personnalisez l'apparence de Liferea
Le 19 février 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 :

  1. * {
  2.   font-family: sans-serif;
  3.   font-size: 9pt;
  4. }

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.

  1. /* ---Descriptif du flux (flux, source) --- */
  2. .feedhead {
  3.   background-color: #F1E5D5;
  4. }
  5. .feedhead a {
  6.   color: #673F28;
  7.   text-decoration: none;
  8. }
  9. .feedhead a:hover {
  10.   text-decoration: underline;
  11. }
  12.  
  13. /* --- Titre d'item (general, marqué, non-marqué) --- */
  14. .itemhead {
  15.   font-family: sans-serif;
  16.   font-size: 1em;
  17.   font-weight: normal;
  18. }
  19. .flagged {
  20.   background-color: #F3ADA7;
  21.   font-weight: normal;
  22. }
  23. .unflagged {  
  24.   background-color: #F3D0A5;
  25.   font-weight: normal;
  26. }
  27.  
  28. /* --- meta-donnees de l'item (categorie, auteur ...) --- */
  29. .headmeta {
  30.   background-color: #F1E5D5;
  31. }
  32. .author, .categories, .source , .publisher, .creator {
  33.   background-color: #F1E5D5;
  34.   font-size: 1em;
  35. }
  36. .author, .publisher, .creator {
  37.   color: #673F28;
  38.   font-size: 1.1em;
  39. }
  40. .categories {
  41.   font-weight: normal;  
  42.   font-style: italic;
  43.   color: #555;
  44.   padding-bottom: 2px;
  45. }
  46.  
  47. /* --- menu (marqueur, marque-page, commentaire, chercher) --- */
  48. .itemmenu {
  49.   background-color: #EFEBE7;
  50. }
  51. .itemmenu a {
  52.   font-size: 0.9em;
  53.   color: #666;
  54. }
  55. .itemmenu a:hover{
  56.   color: #673F28;
  57. }
  58.  
  59. /* --- contenu de l'item --- */
  60. .content {
  61.   font-style: italic;
  62.   font-size: 0.85em;
  63.   color: #333;
  64. }
  65.  
  66. /* --- commentaires --- */
  67. .comment {
  68.   background-color: #FFF5E9;
  69. }
  70. .comment_title{
  71.   color: #673F28;
  72.   font-style: normal;
  73.   font-weight: normal;
  74.   font-size : 0.9em;
  75.   font-family: sans-serif;
  76. }
  77. .comment_body {
  78.   font-style: italic;
  79.   font-size: 0.85em;
  80.   color: #333;
  81. }
  82.  
  83. /* --- divers --- */
  84. .date {}
  85. .headleft {}
  86. .headright {}
  87. a.favicon img {}

Commentaires

Répondre

Le contenu de ce champ est gardé secret et ne sera pas montré publiquement.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • 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.
  • 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.

Plus d'informations sur les options de formatage