Une peau neuve pour Shaarli de sebsauvage

J’ai déjà certainement mentionné dans mes posts le logiciel Shaarli du développeur Sebsauvage (Clairement mon idole, mon saint patron et plus si j’osais…). Ce logiciel minimaliste (enfin pas tant que ça au regard des fonctions qu’il propose)  à la delicious permet de stocker et de partager en toute simplicité les liens du web qui vous bottent.

Il ne comporte à mes yeux que des avantages :

  • Conservation de la maîtrise complète de nos données (un « own script » comme je les aime)
  • Totalement gratuit
  • Ultra simple d’utilisation
  • Accessible depuis le bookmark
  • Possibilité de créer des liens en privés
  • … le reste a découvrir sur le wiki et le blog de sebSauvage
Oui mais !!!

Cette petite merveille ne comporte qu’un défaut à mes yeux : le design est tellement minimaliste qu’il en deviens tristounet :) .

En effet bien que sebSauvage ai fait un gros effort par rapport à son niveau graphique habituel (cf: le blog de sebsauvage) et qu’il ai même mis plus de 20 lignes de CSS (j’aurais vu ça de mon vivant…) . Ce génie du web ne s’illustrera jamais pour son sens de l’esthétique :D.

Voila pourquoi j’ai adoucis un peu le skin d’origine (pas de quoi casser trois pattes a un canard cependant) tous en essayant de rester sur le chemin tracé par le Saint père (à savoir minimaliste et sans trop de froufrou):

Pour voir ce que ça donne, rendez vous sur mon shaarli : http://link.idleman.fr

Pour ceux que ça intéresse je fournis le dossier avec les 2 fichiers et le dossier à remplacer pour obtenir ce thème : Télécharger shaarli-IdleTheme.zip

 

31 réactions au sujet de « Une peau neuve pour Shaarli de sebsauvage »

  1. antoine Réponse

    Excellente initiative ! Merci
    Je suis également adepte d’un design sobre voire minimaliste. Au-delà de la sobriété ce que j’apprécie chez sebsauvage (blog ou le design actuel de shaarli) c’est la lisibilité du contenu. Est-ce que je peux te proposer d’augmenter un tantinet le contraste de ton/tes css ?

    Merci par avance

    • Idleman Auteur ArticleRéponse

      C’est vrai que sebSauvage à tendance a privilégier le contenu au contenant et que c’est une très bonne chose :) . Pour les contrastes ce n’est qu’une question de temps :), le plus compliqué étant de modifier le moins possible la page index afin que le thème puisse survivre aux éventuelles prochaines versions de sebSauvage, malheureusement celui ci n’a pas l’air de compter mettre en place un moteur template donc il ne me facilite pas la tâche ^^.

  2. penthium2 Réponse

    très bon thème Sauf ! ( car il y a toujours un sauf ) le lien a mettre en favoris pour ajouter la page en cours, la on se retrouve avec un menu tout pas beau.

  3. Philippe Réponse

    Et pour Chrome, Safari :

    background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#333333), to(#111111), color-stop(.6,#111111)) repeat scroll 0 0 transparent;

  4. Idleman Auteur ArticleRéponse

    Les dégradés pour chrome et safaris sont ajoutés (gros oublis de ma part effectivement ^^ );

    Pour ce qui est de la page d’ajout de lien, je suis d’accord elle peut être arrangée ^^ je me suis concentré sur la page principale pour ce premier jet, je ferais le reste dans pas longtemps :).

    Merci pour vos suggestions :)

  5. cOOb Réponse

    Salut,

    sympa le thème, je vais l’adopter. Par contre la page tools ne rend par très bien. Le couleur du texte est la même que le fond et on ne voit pas le bouton « share Link ». J’utilise FF 4.0 sous windows.

  6. sebsauvage Réponse

    Il manque aussi les dégradés pour Opera (-o-…) (cf. la CSS de base de Shaarli) :-)

    Je le trouve très chouette, ton thème. Et aussi le petit logo que tu as conçu.

    D’ailleurs est-ce que tu m’autorise à en fait le thème par défaut de Shaarli ? Ton nom apparaîtrait bien sûr dans le logiciel !

  7. Idleman Auteur ArticleRéponse

    En tant que grand fan, non seulement je t’autorise mais ça serais un véritable honneur :D !!

    Je suis en train de voir pour optimiser les dégradés pour opéra mais aussi pour IE.

  8. Idleman Auteur ArticleRéponse

    sebSauvage -> Pas mal !! Seulement visiblement il ne gère pas la compatibilité des version IE >= 9 … J’étais partis sur : http://css3pie.com/ qui fournis un .htc permettant de le faire au moins sur le 8 et 9…

    (j’ai fais la mise a jour pour opéra, et jme débat avec un .htc pour ie)

    cOOb -> a vot’ service m’sieur :p

  9. jerrywham Réponse

    Génial ce thème ! Merci pour le partage.
    Pour éviter la barre de scroll du bas, modifier le css ainsi :
    1) pour l’id #pageheader, changer le padding en (0px 10px 5px 10px) et mettre un margin à (auto). Supprimer le width (mis à 100%) 2) pour l’id #headerform, changer le padding en (5px)

    Merci encore pour ce script.

  10. sebsauvage Réponse

    bon j’ai intégré ton thème (légèrement modifié) à la version 0.0.28 de Shaarli (avec les suggestions de jerrywham).
    Avant de le publier, je vais probablement encore ajouter d’autres choses (j’ai encore un paquet de TODO sous le bras).

    • Idleman Auteur ArticleRéponse

      Niquel :) dis moi si tu as besoin d’un coup de main sur le développement ou le graphisme, je suis également développeur (php/java essentiellement) de métier et je trouve ton application vraiment utile donc si je peux y contribuer d’une façon x ou y tu sais ou me trouver :).

    • Idleman Auteur ArticleRéponse

      Shaarli est super agréable à utiliser dans tous les cas, il était déjà rapide et ergonomique et cette capacité d’aller à l’essentiel en quelques clics m’a vraiment séduit, pour moi il ne manquait que quelques couleurs histoires des démarquer les liens des tags et du menu :).

      Je travaille actuellement sur une révision de la popup pour le shaarli installé sur mon serveur si ça t’intéresse, ça représente le bookmarklet façon firefox en fausse popin, voila ce que ça donne quand tu clique sur le bookmarklet :
      http://idleman.fr/ressources/graphique/popinShaarli.png

      J’ai également deux trois idées autres, je t’en parlerais le jour ou tu aura une minute :).

  11. perrot thierry Réponse

    Bonjour et bravo pour votre interface.
    Je viens de découvrir SHAARLI et de l’installer (version 0.0.38 beta).
    Je voudrais savoir si je pouvais utiliser votre travail (cf. http://link.idleman.fr), le modifier pour ne pas faire redondance et bien sûr garder votre lien dans le footer.

    • Idleman Auteur ArticleRéponse

      Oui pas de soucis, je compte proposer le skin à seb (l’auteur de shaarli) dès que j’aurais un peu de temps pour le finir de toute manière. Tant que vous conservez le lien et ou les diverses référence à mon blog en ce qui concerne le skin originel je ne vois aucun inconvénient a ce que vous vous en inspiriez :).

  12. perrot thierry Réponse

    merci mais la base de ce travail vous revient !
    Par contre j’ai un ptit bug sur les liens. Avez-vous eu le même problème, il affiche -parishttp://… ?

    • Idleman Auteur ArticleRéponse

      Je propose qu’on se tutoie :), je n’ai pas de soucis avérés lors d’un clic sur un lien, quand est ce que le problème survient?

  13. perrot thierry Réponse

    re re bonjour, je ne veux pas te « pourrir » tes commentaires, j’ai trouvé la solution si cela peut servir : c’était dans les options tools/Configure your Shaarli/j’avais PARIS dans le champ (sans doute une mauvais manipulation de ma part).

    • Idleman Auteur ArticleRéponse

      C’est donc pour ça que je n’avais rien :), à moins que tu m’envoie des pubs pour financer une dictature libyenne, gagner 1800 euros au casino palace ou élargir mon pénis tu ne pourris pas mes commentaires ils sont la pour ça :D.

  14. Ping Edito 11B : Shaarli est enfin arrivé ! « SAM7BLOG

  15. pihug12 Réponse

    Salut Idleman !
    Peux-tu partager le *.psd (ou autre) du logo.png et de favicon.ico afin que je puisse changer le texte et la couleur de l’étoile ?
    Merci d’avance. :-)

    • Idleman Auteur ArticleRéponse

      Comme dis par email, je ne l’ai plus sous la patte mais il me semble que j’avais filé le fichier à seb, à voir avec lui :)

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Xo ^_^ :siffle: :p :-( :evil: oO :) T_T <3 :D more »