Mot-clef : Design

Fil des billets

Modifier et configurer son thème ownCloud, ou comment changer le titre, le pied de page et le slogan

OwnCloud c’est sympa pour héberger, gérer et partager ses données où l’on veut, voire s’affranchir du service Dropbox et de ses conditions d’utilisations un peu obscures.
Et ça roxe du poney, même sur mon Raspberry Pi !

Thème par défaut d'ownCloud

Si vous souhaitez par contre modifier un peu le thème, et en particulier le titre de la page ainsi que le pied de page ownCloud - services web sous votre contrôle, difficile de tomber sur la bonne documentation. Mais à force de chercher j’ai fini par trouver.

Thème Abricot pour ownCloud

⟩ Lire la suite…

Un petit favicon pour son site

Pour ne pas devoir aller chercher quand j’en ai besoin la bonne syntaxe qu’Internet Explorer réussira à comprendre pour afficher un beau favicon, j’ai décidé de prendre les choses en main et de me faire un petit mémo ici.

Pour Internet Explorer (jusqu’à je ne sais pas quelle version), il faut un favicon au format ICO 16×16 — sinon il fera la tête et n’affichera rien — à appeler avec :

<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" /> 

Pour les navigateurs récents, un favicon au format PNG 32×32 fera très bien l’affaire. Il faudra l’appeler avec :

<link rel="icon" type="image/png" href="favicon.png" />

Il est possible d’utiliser d’autres formats (GIF, JPG, …) pour ces navigateurs. Il faut alors penser à modifier le type="image/xxx" correspondant.

Et pour les appareils iOS, j’ai vu que l’on pouvait augmenter encore la taille du favicon, mais bon là je verrais quand j’en aurais vraiment besoin.


Mise à jour de nov. 2014

L’eau a coulé sous les ponts depuis, et voici deux outils qui me sont utiles voire indispensables :

  • convertico.com qui permet de convertir une image au format ICO ;
  • realfavicongenerator.net qui est l’outil ultime pour, à partir d’une image assez grande, générer tous les différents formats et différentes tailles de favicon nécessaires (standard, Microsoft, iOS, …).

Pour une prochaine refonte graphique

Paint par ArtCriminal sur Flickr.com

Quand j’aurais envie de refaire ou modifier le design, il faut que je pense à remplacer :

  • “billets précédents” par “retourner dans le passé” ;
  • “billets suivants” par “revenir dans le présent” ;
  • “aucun commentaire” par “ajouter son grain de sel”.

Photo : Art Criminal sur Flickr.

De l’art de changer son design

Pots de peinture

Il y a quelques temps, j’ajoutais un nouveau design pour le blog. Il se voulait plus agréable à lire, plus convival, et plus léger. Je me suis inspiré de nombreux sites pour lesquels j’appréciais particulièrement leur design, ou certains éléments de leur design. Entre autres : 5thirtyone dont j’affectionne tout particulièrement la colonne de gauche contenant les informations sur chaque article.

Mais voilà, je me suis rendu compte que le design ressemblait plus à des idées collées les unes aux autres, sans vraiment trop d’harmonie. Et que niveau accessibilité, ce n’était pas terrible non plus. Mettre la sidebar en bas comme le font certains blogs, nécessite plutôt d’afficher au plus un ou deux articles au-dessus.
Et qu’au départ, je voulais un design léger, très simple (j’adore la nudité du blog de Cyril Krylatov). Ce qui n’était plus le cas !

Et puis j’ai découvert la très intéressante initiative de Kozlika et de Franck (c’est Kozlika qui parle) :

Je voudrais réaliser un nouveau thème pour Dotclear. Je voudrais que celui-ci soit suffisamment robuste et présentable pour que nous puissions le joindre à la prochaine version.

[…]

À ces prémisses s’ajouterait l’une de mes marottes : le chantier public en direct, ouvert aux commentaires. Tu connais mon goût pour l’exégèse et je frétille d’avance des discussions à n’en plus finir sur le choix d’une valeur de marge gauche d’une liste à 1.5 ou 1.66em.

Je me suis donc inspiré des premières versions de ce nouveau design (en partiuclier les stickers), et j’ai essayé de ne pas ajouter des fioritures partout, tout comme des illustrations à tout bout de champ.

A la différence des autres thèmes que j’ai pu faire, dans lesquels je reprennais chaque template et je les modifiais à ma sauce, j’ai vraiment limité les modifications sur les fichiers. J’ai fait tout ce que j’ai pu en CSS, et j’ai gardé un certain nombre de comportement par défaut.
J’entends par là les formulations comme : Par Nicolas le lundi 4 mai 2011, 15:09 - Général. Je n’y ai pas touché (même si j’aurais préféré quelque chose comme Le lundi 4 mai 2011 – Général (notez la différence entre les traits « d’union »[1])).

Je n’ai néanmois pas pu résister à modifier ces templates suivants :

  • user_head.html : pour ajouter un favicon et des commentaires conditionnels (c’est toujours un plaisir de prendre en compte les navigateurs obsolètes…),
  • _top.html : pour avoir un haut de page avec description et les stickers,
  • post.html et page.html : j’ai uniquement modifié les commentaires pour afficher les images Gravatar des commentateurs,
  • _footer.html : là je me suis laissé un peu aller, entre les dernières photos de Flickr et mon dernier Tweet,
  • 404.html : pour personnaliser la page d’erreur 404, qui n’est vraiment pas agréable par défault.

J’espère que ce design ne me lassera pas trop vite, et qu’il est autant agréable pour vous que pour moi !

Photo : Frédéric Bisson.

Notes

[1] En réalité le second trait n’est pas un trait d’union, mais un demi-cadratin : – (utilisé notamment pour les énumérations). Seul le - est un trait d’union, qui permet d’accoler deux mots (par exemple : c’est-à-dire). Plus de précisons sur la page Wikipédia.