My Readings – Personnalisation de la page principale

Depuis la version 0.4.2, il est possible de personnaliser en partie l’affichage des livres de la page principale (le carrousel). Nous allons voir comment faire.

Pour lancer My Readings, vous pouvez choisir quel profil utiliser (l’ipad, par défaut, iphone ou gtab).

 Changer le nombres de livres affichés à l’écran

Un nombre de livre affiché par écran est défini pour chacun des profils.
Par exemple, en mode iphone, il y a 1 ligne de 4 livres en mode paysage et 2 lignes de 3 livres en mode portrait. Pour le mode ipad, il y a 2 lignes de 4 livres et 3 lignes de 3 livres.

Il est possible de modifier cette configuration depuis My Readings, la configuration sera sauvegardée localement sur l’appareil utilisé. Il peut, par exemple, être utile d’ajouter une ligne et un livre par ligne en mode paysage du profil ipad pour un affichage sur PC:
Aller dans le menu de configuration de My Readings

perso1

Cliquer sur le “switch”, “Changer le nombre de livres affichés”.
Le paramétrage par défaut apparaît. Modifier le nombre de livres à afficher comme souhaité (ici, en mode paysage, il est demandé 3 ligne de 5 livres).
Cliquer sur “Mettre à jour” (ce qui sauvegarde la configuration et réinitialise l’affichage).

Le résultat:

perso2

 Modifier l’aspect des livres

Pour permettre de personnaliser la manière dont est affiché chaque livre et le texte qui l’accompagne, les styles css utilisés ont été placés dans le fichier index.html. Les styles utilisés pour le mode ipad commencent par “.tablet”, pour le mode iphone par “.iphone” et pour le mode galaxy tab par “.gtab1″ et “.gtab2″.

Vous pouvez modifier ces styles pour personnaliser l’affichage sous My Readings (éditez le fichier index.html et pensez à forcer le rafraîchissement du cache de My readings pour que les nouveaux styles soient utilisés).

Tous les profils utilisent des styles css qui ont le même nom:

  • pour l’affichage du livre et de sa couverture, c’est.fond et .vignette,
  • le marque page (vide: .fbookmark, en cours: .fbookmark1 et lu: .fbookmark2)
  • l’affichage du nombre de livres dans une série quand les livres sont groupés par série (.nbgroup),
  • le tire (.title),
  • l’auteur (.author)
  • les étiquettes (.tags)
  • les séries (.series si non groupé et .seriesbig si les livres sont groupés par série),
  • une colonne personnalisée, s’il est demandé de l’afficher (.custom).

J’ai essayé d’optimiser les profils ipad et iphone pour les appareils correspondants. Vous pouvez les modifier mais celui qui est le plus configurable est le profil galaxy tab car les styles de .gtab1 sont utilisés pour le mode paysage et de .gtab2 pour le mode portrait ce qui permet d’adapter l’affichage de ces deux modes en fonction de votre appareil.

A titre d’exemple, nous allons voir comment tester une modification de la couleur du titre d’un livre du profil gtab en mode paysage et la sauvegarder.
La console de Google Chrome est très pratique pour faire des tests de modifications:

Ouvrir My Readings dans Chrome en choisissant le profil gtab,

perso3

 

Faire un clic droit sur le titre d’un livre et cliquer sur “Inspecter l’élément”.

perso4

La console Chrome apparaît en bas. Dans le volet de gauche, le code html s’affiche ce qui permet de voir que pour le titre, c’est bien la classe “title” qui est déclaréee. Dans le volet de droite se trouve le détail des styles (avec leur héritage).
Il y est indiqué que c’est “.gtab1 .title” à la ligne 219 de index.html qui est utilisé. Il est surtout possible d’éditer le style pour voir l’effet de la modification: Dans mon exemple, j’ai ajouté depuis la console (en cliquant dans le style du volet de droite), la ligne “color: chocolate;”. Le résultat est aussitôt visible: les titres changent de couleur.

Lorsque vous avez fait une modification qui vous convient, faites la même dans le fichier index.html  (le copier/coller fonctionne avec la console) et sauvegardez ce fichier dans My Readings.

Attention: Gardez dans un fichier ces styles modifiés. Lors d’une mise à jour de My Readings, le fichier index.html sera remplacé. Il vous faudra refaire cette modification.

Leave a Reply

Your email address will not be published.

* Copy This Password *

* Type Or Paste Password Here *

1,776 Spam Comments Blocked so far by Spam Free Wordpress

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>