Journal Feuille de style alternative (css) pour linuxfr

Posté par  .
Étiquettes :
39
4
nov.
2008
J'ai bricolé une nouvelle css "alternative" pour linuxfr. Ci-dessous quelques captures d'écran :
screenshot 1 / screenshot 2 / screenshot 3 / screenshot 4

Et maintenant l'url de la feuille de style :
http://linuxfr.tinyslot.com/screen.css

Pour ceux qui se demande comment l'activer, il faut modifier votre cookie linuxfr "style" et mettre http://linuxfr.tinyslot.com/screen.css comme valeur. Si l'équipe linuxfr souhaite héberger la css et les images qui l'accompagne ce sera avec plaisir.

J'ai fait cette css pour firefox 3, je n'ai pas testé ailleurs et il est fort probable que le rendu soit ignoble sur d'autres navigateurs. Ça utilise des sélecteurs CSS de partout, je vous laisse admirer la gruikitude de la source.

En passant, est ce qu'un rafraîchissement du source html de linuxfr est prévu ? Pour avoir fait plusieurs thèmes CSS j'aperçois plusieurs problèmes :
  • La sémantique des pages fait peur à voir
  • Pour l'accessibilité, j'ai des gros doutes
  • Des éléments html disparaissent sur certaines pages (comme le logo) ou n'arrivent plus au même endroits. Ca manque d'uniformité.
  • Je trouve qu'il y a trop d'informations sur les pages (date de modérations, nombre de caractères dans une news, astuce en première page, etc.)
  • Il y des balises javascript partout, ça serait plus clean d'appeler un js à la fin.

  • # Changer facilement de css

    Posté par  . Évalué à 10.

    En fait pour faire plus simple, vous pouvez aller dans votre page préférence :
    http://linuxfr.org/user_prefs.html

    et mettre http://linuxfr.tinyslot.com/screen.css dans le champs "Votre css".

  • # Sympa

    Posté par  . Évalué à 7.

    Simple, sobre et efficace, j'aime beaucoup.
    J'élargirais simplement la taille des boites des commentaires pour exploiter l'espace restant.

    • [^] # Re: Sympa

      Posté par  . Évalué à 1.

      J'apprécie le look, par contre ça utilise peut-être pas plus des 2 tiers de l'écran en largeur...
      1680 en largeur, c'est plus si rare maintenant, si ?

      • [^] # Re: Sympa

        Posté par  . Évalué à 2.

        Moi, je ne met jamais mon navigateur en plein écran.

        Envoyé depuis mon lapin.

      • [^] # Re: Sympa

        Posté par  (site web personnel) . Évalué à 6.

        J'ai le problème inverse : même si mon écran est large (1440x???), mon navigateur ne l'est pas et cette css fait dépasser de ma fenêtre. Les tailles fixes, c'est mal.
        Pour le problème de la police trop petite (je ne réponds pas au bon commentaire peut-être), je ne le constate pas (c'est vrai cependant que j'ai convaincu mon navigateur de ne jamais rien afficher en dessous de la taille 12).

        • [^] # Re: Sympa

          Posté par  . Évalué à 1.

          Ok, j'ai modifié, la css ne met maintenant plus le site en largeur fixe.

  • # Avis très mitigé

    Posté par  (site web personnel) . Évalué à 8.

    L'entête est pas mal, les cadres sur le côté sont pas trop mal foutus,, les couleurs sont plutot bien choisies je trouve, MAIS
    1.T'as du faire ta CSS pour les EEE c'est pas possible, ca prend même pas la moitié de mon écran en largeur .... Dans tous les cas quand on fait des css normalement on ne s'adapte pas à une résolution mais on essaye de mettre en % de l'écran au lieu de tailles fixes.
    2.Les "boites de contenu", ie les journaux/articles/ etc ont la même couleur de fond que le reste du fond, je trouve mieux d'avoir une couleur différente, ca permet de bien séparer les différents articles, et l'écran est moins tout blanc
    3.Comme dit au dessus la largeur des commentaires est vraiment ridiculement petite (ta CSS doit être moche sur le célèbre "Comme XP")
    4.Les boites de la page d'accueil (sites amis, sondages, etc), ont pour fond de leur titre le fond "principal", comme pour le 2. je penses qu'il faudrait une autre couleur (peut être la même couleur que le reste de la boite ?)
    5.Enfin, le pied est bien fait, sauf que un détail le rend moche: ca fait blanc -> noir -> blanc, vaudrait mieux finir juste sur du noir ('fin bon ca c'est du point de détail)

    PS:Je mets plus de critiques que de points positifs j'en suis bien conscient, mais je trouve quand meme que cette css est un très bon début .

    • [^] # Re: Avis très mitigé

      Posté par  (site web personnel) . Évalué à 2.

      Ha j'ai oublié un gros défaut, la dlfpbar me fait penser au thème templeet d'origine, digne de CDE /o\

    • [^] # Re: Avis très mitigé

      Posté par  . Évalué à 4.

      je dirais pareil. J'aime bien l'aspect général (le haut est superbe), les couleurs sympa bien qu'un peu trop blanc sur blanc. Les polices sont très (trop) petites également. C'est le syndicat des ophtalmos qui paye les créateurs des css de linuxfr ? (après le fond rouge vif pour la sortie d'ubuntu) ;)

      Mais à part ça c'est très bien, merci :)

      Only wimps use tape backup: real men just upload their important stuff on megaupload, and let the rest of the world ~~mirror~~ link to it

      • [^] # Re: Avis très mitigé

        Posté par  . Évalué à 4.

        1. En fait j'avais fixé la largeur pour pouvoir poser des ombres correctement dans le fond et faire des images arrondis pour le menu du haut. Finalement j'en ai pas besoin du coup la page s'adapte maintenant à la fenêtre.
        2. Je n'y toucherais pas, c'est à mon goût :-) ! Si tu veux le changer par contre c'est simple en bidouillant cette css.
        3. J'ai modifié pour passer en pleine page.
        4. Ça pareil je ne compte pas y toucher mais libre à celui qui le souhaite
        5. Tu voudrais qu'il prenne toute la largeur de la fenêtre ? Ou c'est au niveau du contenu du pied de page que tu préférerais tout les textes en sombre ? Si c'est toute la largeur pareil je n'y toucherais pas, je tiens à garder l'aspect page centré.

        Pour la taille des polices, je l'ai aussi augmenté. Pour ce qui est de la dlfpbar, je vais jeter un œil (actuellement je ne m'en sers pas).

        Merci pour tous les retours.

        • [^] # Re: Avis très mitigé

          Posté par  . Évalué à 2.

          oui, c'est beaucoup mieux ainsi, merci bien :)

          Only wimps use tape backup: real men just upload their important stuff on megaupload, and let the rest of the world ~~mirror~~ link to it

        • [^] # Re: Avis très mitigé

          Posté par  (site web personnel) . Évalué à 2.

          Tout ca c' est très bien, donc reste le fond des journaux que faudra que je fork si je comprends bien ('fin j'aurais surement la flemme de le faire en fait)
          sinon pour le 5.:l'entete est complétement noire ('fin sauf les bords), mais le pied de page est noire, mais y a encore un "vide" blanc en dessous qui fait amha moche par rapport au reste (mais bon de mémoire c'est dans le genre de trucs super chiant à faire en CSS, et c'est pas un problème vital du tout).
          En tout cas, CSS adoptée :)

          • [^] # Re: Avis très mitigé

            Posté par  . Évalué à 2.

            Bon ben finalement j'ai mis en place le fond dans les journaux etc. et ça passe pas mal. Pour le footer j'ai corrigé le problème aussi (sauf dans le cas ou la hauteur de page est plus petite que la hauteur de la fenêtre du navigateur).

        • [^] # Re: Avis très mitigé

          Posté par  (site web personnel) . Évalué à 1.

          Je trouve toujours que la taille des polices est trop petite.
          Diable, mais ce n'est pas grave! me suis-je dit, je n'ai qu'à demander à firefox de m'augmenter la taille de la police (je ne parle pas du zoom de firefox 3, mais de "zoom text only").
          Eh bien ca décale les liens dans la barre de titre, ca rajoute un liseret blanc tout en haut, et les arrondis de la zone de recherche sont cassés :(
          Ce n'est pas bien grave, mais y'a t-il moyen d'y faire qque chose ?

          A part ce détail, cette CSS me convient parfaitement, je la trouve qd même vachement plus sexy que l'originale, merci !

        • [^] # Re: Avis très mitigé

          Posté par  . Évalué à 2.

          La barre dlfp est maintenant aux couleurs du style avec des icônes.

          • [^] # Re: Avis très mitigé

            Posté par  . Évalué à 1.

            Oups ! Depuis tes améliorations sur la DLFPbar, les flèches pour lire le nouveau commentaire précédent et suivant ne s'affichent plus (semblent hors de la page même en 1280 de large !)... Dommage, c'est la fonction la plus intéressante de cette barre !

            Autre petit défaut: quand on tape un commentaire, le formulaire déborde allègrement de la boîte qui le contient (bien visible en 800 de large). On pourrait peut-être éviter ça en le décalant sur la gauche...

            • [^] # Re: Avis très mitigé

              Posté par  . Évalué à 2.

              Normalement ces 2 soucis sont corrigés. Pourrais tu me confirmer que c'est bon pour toi.

              • [^] # Re: Avis très mitigé

                Posté par  . Évalué à 1.

                C'est parfait pour le formulaire des commentaires. Merci encore !

                Hélas, pas pour la DLFPbar dont je n'ai toujours pas les chevrons < et > pour passer d'un nouveau commentaire à un autre !

                Je précise que j'utilise un vénérable Firefox 2

                • [^] # Re: Avis très mitigé

                  Posté par  . Évalué à 2.

                  je vois que la balise "tt" n'est pas différenciée :

                  exemple :

                  Cette phrase devrait être surlignée

                  Only wimps use tape backup: real men just upload their important stuff on megaupload, and let the rest of the world ~~mirror~~ link to it

                  • [^] # Re: Avis très mitigé

                    Posté par  . Évalué à 2.

                    J'ai mis la phrase en monospace, je ne vois pas pourquoi il faudrait la souligner. Si tu as des explications la dessus ça m'intéresse.

                    J'en ai profité pour rajouter un style sur les balises blockquote, cite, q et acronym.
                    Voici une liste d'exemple.

                    code :
                    alias ll='ls -l'
                    alias la='ls -A'
                    alias lh='ls -lh'
                    alias l='ls -CF'
                    blockquote (citation mais linuxfr ne semble pas accepter ces blocks) :

                    L'enveloppe d'ISP des quatre derniers mois du gouvernement de Dominique de Villepin n'est pas prise en compte dans ce chiffre, comme c'est la coutume après un changement de gouvernement.

                    cite :
                    une citation en ligne

                    acronym :
                    Vive la S.N.C.F.

                    tt (télétype) :
                    Du texte dans un tt

                    • [^] # Re: Avis très mitigé

                      Posté par  . Évalué à 1.

                      l'intérêt de la balise tt sur linuxfr c'est que cela permet d'afficher facilement une citation en la surlignant (et c'est plus rapide à taper que blockquote)

                      Only wimps use tape backup: real men just upload their important stuff on megaupload, and let the rest of the world ~~mirror~~ link to it

            • [^] # Re: Avis très mitigé

              Posté par  (site web personnel) . Évalué à 4.

              Sinon pour passer entre chaque chaque commentaire utilise les touches < et > de ton clavier (qui sont parfois sur une seule touche mais bref)

              • [^] # Re: Avis très mitigé

                Posté par  . Évalué à 2.

                Oh pirée !
                Merci pour l'astuce ! Je bataillais parfois avec cette barre (en plus elle se retire maintenant ! ^_^)

  • # Je suis déçue

    Posté par  . Évalué à 2.

    Ouais, j'adore le design et j'aimerai bien le garder mais jpeut point.
    Ca fais trop petit sur mon 13", j'aime quand les sites prennent toute la place.
    La taille de la fonte me gène je suis obligé de forcer pour lire, du coup j'ai du mal à trouver l'info, problème que je n'avais pas avant.

    Je reprend le css d'origine, fais nous signe si tu corrige ses défaut de jeunesse.

    Allez tous vous faire spéculer.

  • # Tux laptop

    Posté par  . Évalué à 2.

    Le design est clean , mais surtout j'adore le Tux , tu peux nous fournir les sources (xcf ou svg au cas ou ) ? Sinon un fichier plus grand aussi ce serait bien .

    • [^] # Re: Tux laptop

      Posté par  . Évalué à 2.

      j'oubliais , je le trouve pas assez visible aussi (enfin noir sur noir quoi -)

      • [^] # Re: Tux laptop

        Posté par  . Évalué à 2.

        Les icônes et images ne sont pas de moi :) sauf les ombres et la forme noir d'en haut.
        Dans la source tu peux trouver les auteurs :

        Diagona Icons :
        http://www.pinvoke.com/

        Tux penguin :
        http://jsepia.deviantart.com/art/Tux-avatar-for-Horgrathi-19979290
        http://chaosemeraldhunter.deviantart.com/art/penguins-dancing-23343964

  • # Sobre et élégant

    Posté par  . Évalué à 2.

    J'aime bien ce style, rien d'outrancier, la place au texte. Juste un petit bémol pour la taille de la police, elle est "nanoscopique" sur un eee pc 10".

  • # CSS bien foutue avec des défauts de jeunesse

    Posté par  . Évalué à 4.

    Personnellement je la trouve bien foutue pour un début il suffit de changer les quelques petits trucs déjà proposés et je la garderai par défaut. (Surtout pour la taille de la police et l'adaptation automatique de la largeur).

    De plus j'adore le petit logo qui change au passage de la souris :D

    • [^] # Re: CSS bien foutue avec des défauts de jeunesse

      Posté par  . Évalué à 1.

      De plus j'adore le petit logo qui change au passage de la souris :D

      Et en plus y a des goodies :-)

      Allez tous vous faire spéculer.

    • [^] # Re: CSS bien foutue avec des défauts de jeunesse

      Posté par  . Évalué à 1.

      Je l'aime bien cette CSS, pour l'utilisation que j'ai du site c'est nickel mis à part une petite chose, qui je ne sais pas si ça a un rapport avec la jeunesse. :=)

      Quand j'arrive en bas de page je clique sur "haut de la page". Le truc c'est que ça ne remonte pas tout à fait jusqu'en haut, il doit manquer quelques pixels.
      Du coup, les liens vers les journaux, le forum, etc., sont au raz du bas des onglets, si bien qu'il faille un peu viser pour naviguer.

  • # Super contribution

    Posté par  . Évalué à 5.

    Avec les dernières modifications c'est superbe, même sur un écran 10" (pas encore essayé sur un 7").

    Bravo et merci !!!

    • [^] # Re: Super contribution

      Posté par  . Évalué à 2.

      Voila, les problèmes gênants (pour moi) ont été réglés, le rendu étant bien meilleur pour un écran large quand on met le navigateur en pleine fenêtre.

      Merci pour ta contribution :D

      • [^] # Re: Super contribution

        Posté par  . Évalué à 5.

        Oui là maintenant c'est vraiment superbe ! Je l'ai adopté moi aussi ...

    • [^] # Re: Super contribution

      Posté par  . Évalué à 1.

      Du même avis, c'est léger esthétiquement, ça fonctionne bien (même sous FF2)... Vivement que l'équipe en fasse la CSS officielle.

  • # Bug sur la boîte d'identification

    Posté par  (site web personnel) . Évalué à 7.

    En me déconnectant et reconnectant sur LinuxFr la boîte avec le formulaire d'identification est recouverte par du texte. Ça ne gène pas le fonctionnement, mais ce n'est guère pratique.

    Autre chose, vu que la CSS n'est pas accessible via HTTPS j'ai à chaque changement de lien une alerte de la part de Mozilla Firefox sur "cette page contient des informations non sécurisées".

    Donc si la sympathique LinuxFr Team pouvait héberger cette nouvelle et jolie CSS, merci d'avance !

    Et encore bravo pour cette feuille de styles !

    • [^] # Re: Bug sur la boîte d'identification

      Posté par  . Évalué à 2.

      Pour le problème à la déconnexion c'est normalement corrigé. Pour le souçis avec le https, j'imagine aussi qu'il faut le style soit hébergé par linuxfr.

  • # Adopé

    Posté par  . Évalué à 1.

    Adopé pour moi, beaucoup plus clean que l'originale.

  • # Très joli

    Posté par  . Évalué à 5.

    Il manque peut être un cadre pour dissociser l'article/journal du fond, mais je trouve ce thème plus propre.

    /me vote pour que ça devienne le thème par défaut !

    • [^] # Re: Très joli

      Posté par  . Évalué à 1.

      Tout à fait d'accord avec cet avis, thème à la fois joli et sobre, pas agressif du tout.
      Par contre il manque effectivement un cadre (même léger) pour distinguer l'article du reste...

      Non pas que le thème soit parfait mais je suis d'accord pour qu'il devienne le thème par défaut , et j'ai confiance en kaiska pour encore le perfectionner !

      • [^] # Re: Très joli

        Posté par  . Évalué à 2.

        J'ai modifié pour le fond d'article.

  • # Problème avec Safari

    Posté par  (site web personnel) . Évalué à 3.

    Très bien cette feuille de style. Sobre, classe.

    J'ai en revanche un petit souci d'affichage avec Safari sous MacOS X : l'image en haut à gauche sort du bandeau. De plus la couleur du bandeau n'est pas unie (noir/gris foncé).

    Capture d'écran : http://gueben.free.fr/docs/css_linuxfr.png

    • [^] # Re: Problème avec Safari

      Posté par  . Évalué à 3.

      En fait j'ai fait cette feuille de style uniquement pour Firefox. Si vous regardez la source vous verrez que c'est que des bidouilles pour atteindre les éléments de la page.

      Elle marche très mal sur d'autre navigateur j'imagine. Je vous laisse corriger le problème si vous en avez le temps et l'envie. Avec un html plus "propre" dans les pages de linuxfr, il serait sûrement possible de faire marcher ce thème partout.
      C'est d'ailleurs pour cela que je m'étais mis en tête de faire un nouveau thème, pour voir l'état actuel du code source html de linuxfr et voir ce qu'il était possible d'améliorer.

  • # Super

    Posté par  (site web personnel, Mastodon) . Évalué à 2.

    J'aime beaucoup, je vais garder celle là par défaut tiens.

  • # Miam

    Posté par  (site web personnel) . Évalué à 1.

    Ça poutre des bébés girafes des Îles Caïmans.

    – J’aime bien la sobriété tout en donnant un style plus moderne et moins austère que la CSS par défaut ;
    – c’est encore plus discret avec ce logo sympathique, pour lire au boulot ;
    – la barre de navigation est bien réussie, et j’aime bien qu’elle reste affichée comme ça ;
    – la non utilisation des propriétés spécifiques pour le rendu des boîtes (boîtes non arrondies), comme ça, ça a le même rendu partout ;
    – il y a du gain d’espace pour mieux lire encore plus de contenu à la fois.
    Conclusion : mon awereness a augmenté de plus de 150 %

    Une petite critique tout de même : pour les nouveaux commentaires la barre de titre garde l’aspect de la CSS par défaut, ce qui ne va pas trop avec l’ensemble et un petit bug d’affichage dans les boîtes d’aide (http://linuxfr.org/aide/xps.html par exemple).

    Suggestion : je ferais un autre rendu pour la note d’un contenu, genre virer l’effet « glossy » et mettre quelque chose de moins tape-à-l’œil (comme le thème rootix-linuxfr-1).

    En tout cas merci !

  • # Proposition de "patch"

    Posté par  (site web personnel) . Évalué à 1.

    Pour que le texte de la tribune et des fortunes ne soit pas justifié et gagne ainsi en lisibilité, j'ajouterai ça :

    #boxboard .otherbox, #boxfortunes .otherbox {text-align: left;}

    Et pour mettre en valeur le contenu de la balise "code" (comme les paragraphes ci-dessus et ci-dessous), un truc du genre ça :

    code {
    font-family: Mono;
    color: #fff;
    background-color: #000;
    padding-left: 0.2em;
    padding-right: 0.2em;
    padding-bottom: 0.1em;
    }

    (mais c'est peut être un peu "violent" ...)

  • # Problème avec le rss (depuis google reader)

    Posté par  . Évalué à 2.

    Quand je veux accéder au site en cliquant sur un lien depuis google reader, je me retrouve avec la css par défaut...J'imagine que c'est parce que le fichier n'est hébergé sur linux-fr.

  • # Nettoyage du code

    Posté par  (site web personnel) . Évalué à 3.

    > En passant, est ce qu'un rafraîchissement du source html de linuxfr est prévu ? Pour avoir fait plusieurs thèmes CSS j'aperçois plusieurs problèmes :

    Le mieux pour les signaler c'est le système de suivi plutôt. Soumis sur https://linuxfr.org/tracker/891.html

    Après ça dépend du temps disponible des rares contributeurs... Pourtant c'est assez facile de proposer un correctif pour corriger ce genre de points à partir des sources https://linuxfr.org/linuxfr-snapshot.tar.bz2
    Si quelques uns filaient un coup de main, ça irait d'autant plus vite.

  • # Génial mais ...

    Posté par  . Évalué à 2.

    ... petit bug de placement de div : http://littlebzh.free.fr/decal.png par rapport à celle par défaut : http://littlebzh.free.fr/decal.png

    Je rapporte le "bug" ici en espérant que l'auteur de la css repasse dans le coin.
    En tout cas, merci pour ce magnifique travail.

Suivre le flux des commentaires

Note : les commentaires appartiennent à celles et ceux qui les ont postés. Nous n’en sommes pas responsables.