Journal Feuille de style linuxfr - Nouvelle version

Posté par  .
Étiquettes : aucune
0
7
juin
2004
Bonsoir,

Suite à ce journal (
http://linuxfr.org/~kaiska/13464.html(...)) J'ai continué de bosser sur la css de linuxfr. Vous trouverez cette nouvelle feuille de style toujours à cette adresse http://zoukonet.free.fr/divers/css/style.css(...)

Et voici quelques captures d'écran :
http://zoukonet.free.fr/divers/css/sshot2.jpg(...)
http://zoukonet.free.fr/divers/css/sshot3.jpg(...)
http://zoukonet.free.fr/divers/css/sshot4.jpg(...)

N'hésitez pas à me faire des retours. Je pense integrer quelques icones comme une loupe pret de la recherche. A part ça j'ai plus trop d'idées.

Bonne soirée !

  • # Bravo

    Posté par  . Évalué à 5.

    Aux risques de répéter les commentaire du précédent journal: bravo.
    Très sympa de la faire partager surtout. Merci

  • # Génial à un point près...

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

    Franchement, super ta feuille de style, super sobre et classe, j'adore :)

    Juste une remarque, on a plus la bannière en haut avec les liens genre lea-linux, linux-mag... c'est un peu dommage.

    https://damien.pobel.fr

  • # Adoptée

    Posté par  . Évalué à 5.

    Voila c'est une affaire qui roule :)

    Dam

    (p.e. que la dlfpbar serais un peu moins epaisse ca serais un chouille mieux :)

    • [^] # Re: Adoptée

      Posté par  . Évalué à 3.

      Je la trouve un peu grosse aussi. En fait il fautre etre en 1280*1024 au moins pour qu'elle sois sur une ligne. J'ai essayé de la bidouiller un peu mais à part réduire les fonts je peut pas en faire grand chose. Il manque trop de selecteur dans le xhtml pour pouvoir la relooker correctement.

      • [^] # Re: Adoptée

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

        Si ca peut te rassurer, dans ma version elle était sur 2 lignes dans tous les cas, justement pour etre sur que ca tienne tout le temps :-)

        Je compte bosser sur pas mal d'ameliorations de la toolbar prochainement, donc si tu as des remarques particulieres, mail moi (ca vaut pour tout le monde d'ailleurs).

        Ah sinon, bravo, j'adore :)

        • [^] # Re: Adoptée

          Posté par  . Évalué à 3.

          Bonsoir, j'ai essayé de t'écrire mais j'ai le droit à un mailer daemon. Je vais donc coller le mail ici histoire que tout le monde en profite et qu'on puisse tous faire avancer le shmilblik.
          Donc voilà ^^


          Effectivement ça pourrait être cool de retoucher un peu le code xhtml de
          la toolbar. Actuellement ça donne un truc comme
          < div id="commentsbrowser">
          < div>Seuil : < span id="palliercourant">-42< /span>
          < a href="#">Changer
          < /div>

          < div>Feuille : < span id="csscourante">style.css< /span>
          < a href="#">Changer< /a>
          < /div>

          < div style="display: block;" id="commentsnav">
          Nouveau commentaire
          < span id="current">0< /span>/ < span id="max">4< /span>
          < a accesskey="<"><< /a> |
          < a accesskey=">" href="#">></ a>
          < /div>
          < /div>
          et ça serait peut être bien de rendre ça un peu plus sémantique avec
          quelque chose comme :
          < div id="toolbar">
          < p id="level">
          Seuil : < span id="palliercourant">-42< /span>
          < a href="#">Changer< /a>
          < /p>
          < p id="cssfile">
          < span id="csscourante">style.css< /span>
          < a href="#">Changer< /a>
          < /p>

          < p id="commentsnav">
          Nouveau commentaire
          < span id="current">0< /span>/ < span id="max">4< /span>
          < a accesskey="<"><< /a> |
          < a accesskey=">" href="#">>< /a>
          < /p>
          < /div>
          Voilà donc passer à un truc un peu plus sémantique, nommer les trois
          blocs pour pouvoir les styler et retirer les informations de style qui
          sont coder en dur dans la barre.

          Quand dis tu ?

          PS : comment qu'on fait pour mettre du code ? si je met des balises code templeet semble interpreter mon html. J'ai mis des espaces dans les balises en esperant que ca passe...

          • [^] # Re: Adoptée

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

            Rapidement:
            • Pour le mailer daemon forwarde ca a mat chez apinc pouhain org ca m'interesse ...
            • Pour ta suggestion sur le code, c'est noté et modifié en local :)
            • Pour le code dans templeet... actuellement faut utiliser les entités je crois...

        • [^] # Re: Adoptée

          Posté par  . Évalué à 1.

          Chez moi c'est sur une ligne dans opera et 2 dans mozilla ( 1152x864 )

  • # bravo

    Posté par  . Évalué à 2.

    cette version fait plus finie, et c'est très joli comme ça !

    bravo !

  • # Un de plus

    Posté par  . Évalué à 2.

    désolé de répeter la même chose que les 4 précédents, mais j'aime vraiment...
    bravo !

  • # Magnifique

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

    Et en plus je suis déjà à jour.

    Par contre, sous Firebox 0.8 sous Windows en 1024x768, j'ai la boite "Rechercher" en un rien trop bas par rapport à la bande de menu:

    http://www.choum.be/tmp/jolicss.png(...)

    • [^] # Re: Magnifique

      Posté par  . Évalué à 1.

      Ah ? on dirais que c'est du aux texte en haut qui est plus petit chez toi que chez moi. Je pense que c'est parceque tu n'as pas les fontes bitstream. Je vais réfléchir la dessus et essayer de corriger ça. Allez hop, dans le todo !

      • [^] # Re: Magnifique

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

        Ben si justement, je l'ai installé exprès sur ce windows car c'est celle que j'utilise sur le linux au boulot.


        Te casses pas trop la tête pour l'instant, je ferai une comparaison avec les pc du bureau demain (windows avec vera, sans vera, mac avec je ne sais trop quoi ..., des linux, mais ça tout le monde connait ici)

        • [^] # Re: Magnifique

          Posté par  . Évalué à 2.

          J'ai le meme "probleme" que toi. C'est tellement génant que si tu ne me l'avais pas dit, je ne l'aurais pas remarqué :)

          Gentoo + Mozilla 1.6, le tout en 1280*1224. Pour la fonte : du Serif.. Si ca peut aider ...

          A oui, sinon très beau boulot

  • # Super !

    Posté par  . Évalué à 4.

    Rebravo ! ;)

    Si tu n'as plus d'idées, j'en ai une ;) : utiliser un peu de small-caps, comme le fait une autre très belle feuille de style pour les noms des catégories des articles de première et seconde page : http://gr3mi.ath.cx/dlfp2.css(...) .
    Ça donne un petit plus "pro", les small-caps je trouve ça très joli :)

    Sinon, un petit détail : les liens visités sont rouges et plus voyants que ceux non encore visités. Faut juste s'y faire mais au début ça m'a presque désorienté... :)

  • # Licences

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

    Question stupide, mais c'est quoi la licence ? Meme question pour tous ceux qui ont filé un lien vers leurs feuilles respectives en fait :)

    • [^] # Re: Licences

      Posté par  . Évalué à 1.

      Bonne question. J'aimerais bien la passer sous une licence libre qui permette d'en faire ce qu'on veut sans me demander mon avis. Je m'y connais pas vraiment en licence libre. Qu'est ce qui serait bien ? Une petite GPL ? Quelqu'un aurait un entete pour ça ?

      • [^] # Re: Licences

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

        Pour une feuille de style, à moins qu'elle ait réellement quelque chose de particulier, pourquoi ne pas simplement la mettre sous DSS : « dermeden sie sich » ? Une autre manière de dire Domaine Public. Plus libre que ça tu meurs.

        Je serais curieux de voir ce qu'une licence comme la GPL peut apporter dans le cas d'une "simple" CSS.

        • [^] # Re: Licences

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

          Bon en tout cas moi j'ai commencé ca:
          http://mat.virgule.info/misc/linuxfr/style.css(...)

          Surtout des petits details en fait :)

        • [^] # Re: Licences

          Posté par  . Évalué à 3.

          La beer ware bien entendu :-)

          /*
          * ----------------------------------------------------------------------------
          * "THE BEER-WARE LICENSE" (Revision 42):
          * <phk@FreeBSD.ORG> wrote this file. As long as you retain this notice you
          * can do whatever you want with this stuff. If we meet some day, and you think
          * this stuff is worth it, you can buy me a beer in return Poul-Henning Kamp
          * ----------------------------------------------------------------------------
          */

          • [^] # Re: Licences

            Posté par  . Évalué à 1.

            LOL adopté !! Ca y est c'est en place :)

  • # Quelques id

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

    J'ai rajouté quelques id="" dans la page principale sur les boites d'identification, etc si ça sert.

    Par contre ta css elle donne des fontes toutes petites chez moi.

    • [^] # Re: Quelques id

      Posté par  . Évalué à 1.

      Ah ? je vais voir ça sur la page principale :) Par contre y'a quelque elements qui sont styler en dur sur le site et qu'on ne peut pas atteindre via les css. Ca pourrait peut être bien de s'y pencher un peu. Pour les fontes apparament c'est chez plusieurs personnes. Je doit avoir d'obscur réglages sur mes polices ici. Je vais taffer sur une autre machine et pondre 2 versions, une avec petite fontes, et une avec fontes normal / grosses. J'attend juste d'avoir une css un peu plus aboutie.

  • # toolbar

    Posté par  . Évalué à 4.

    Pourquoi ne pas masquer l'url de la css courante, histoire que la toolbar tienne sur une ligne ?

    #csscourante {
    display: none!important;
    }

    • [^] # Re: toolbar

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

      bonne idée !

      Car c'est précisément ce qui m'empêche d'adopter cette CSS : la barre est sur trois ligne ç prend trop de place...

      autrement c'est vraiment très bien

      • [^] # Re: toolbar

        Posté par  . Évalué à 1.

        avec #csscourante { display: none!important; } dans le userContent.css du browser, ca roule nickel

        mais si ca peut etre direct dansla css, je vais pas dire non :)

  • # Formidable !

    Posté par  . Évalué à 2.

    j'ai moi aussi un léger décalage de la boite recherche comme cité plus haut mais c'est rien du tout.

    Une petite question par contre, j'ai décidé de l'utiliser de façon permanente. Je suis donc aller dans mes préférences et ai mis l'adresse de ta css http://zoukonet.free.fr/divers/css/style.css(...) dans le champ idoine (à ce propos, l'url sera t elle permanente ou faut il en faire une copie ? A moins que quelque chose soit décider pour servir de repositoire chez Linuxfr ? ) mais j'ai un problème la css n'est valable jusqu'à la fermeture de mozilla . La visite suivante (avec reouverture d'un nouveau moz) c'est la css de base qui apparait de nouveau. Que faire pour que cette nouvelle css soit permanente ?

    • [^] # Re: Formidable !

      Posté par  . Évalué à 1.

      Pour la boite de recherche je vais regarder ça j'ai pris note. Sinon pour la css qui veut pas rester je saurais pas trop t'aider. Ca serait pas une histoire de cookie ?

      • [^] # Re: Formidable !

        Posté par  . Évalué à 2.

        ok... pour les cookies j'y avais déjà penser mais je les autorise donc ce ne doit pas être ça.

        En fait, j'ai mieux regardé ce matin, la css est bien enregistrée mais pas pour la page principale (elle ne s'applique que pour les autres pages du site).
        Si un modéro ou un pro de templeet a une idée ...

        • [^] # Re: Formidable !

          Posté par  . Évalué à 2.

          En fait ce que je viens d'écrire n'est pas vraiment vrai... le comportement est assez aléatoire : ça marche plus !

          Dans la boite préférences, c'est systématiquement le /css/style.css sui revient par défaut malgré l'enregistrement des modifications...

  • # Menu journaux de première page

    Posté par  . Évalué à 3.

    Tout d'abord, très sympa, adopté !
    Ensuite, un petit bug dans le menu : http://linuxfr.org/2004/06/07/16480.html(...)
    Regarde à gauche, tu vois deux petites elipses grisatres en haut et en bas de celui-ci.

  • # Plus que la barre de menu du haut

    Posté par  . Évalué à 2.

    en position fixed et je te vénère pour des générations...

    ­La faculté de citer est un substitut commode à l'intelligence -- Somerset Maugham

    • [^] # Re: Plus que la barre de menu du haut

      Posté par  . Évalué à 1.

      J'ai testé un peu mais malheureusement ca clignote un max quand on scroll la page. Si ça tente quelqu'un d'essayer de le faire, à mon avis c'est pas compliqué mais j'ai pas trouvé de ruse pour pas que ça bug.

  • # Fond foncé ?

    Posté par  . Évalué à 2.

    Serait-il possible d'avoir une variante de la même feuille de style mais avec un fond foncé et des fontes claires ? Je trouve que c'est plus reposant pour les yeux.

  • # par où commencer ?

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

    Il vaut mieux commencer pas un fichier vide, ou patcher avec furie http://linuxfr.org/css/style.css(...) ?

    • [^] # Re: par où commencer ?

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

      Pour l'instant, pour diverses raisons, http://linuxfr.org/css/style.css(...) est de toutes facons appliquée avant, donc autant la reprendre et modifier tout ce que tu veux, sinon ya des trucs qui s'appliqueront et ca sera un peu galere pour les retrouver.

      Dans un futur relativement proche, je conseillerais a tous de refaire un truc propre depuis 0, on y gagnera en legereté.

      • [^] # Re: par où commencer ?

        Posté par  . Évalué à 1.

        En fait le mieux, c'est d'ailleurs ce que j'aurais du faire, c'est de partir de la css de linuxfr. Ensuite il faut noter chaque ligne que tu modifie avec par exemple un commentaire /**/ en fin de ligne. Aprés il ne reste plus qu'a retirer les lignes qui n'on pas été marqués / modifiées. Pour cette css par exemple, ça doit représenter moin de 100ligne au final.

  • # Juste une question

    Posté par  . Évalué à 3.

    Comment fait on pour mettre une citation d'un autre commentaire ou une partie de texte en exergue (fond jaune), comme par exemple ici :

    http://linuxfr.org/comments/426334,1.html(...)

    :-)

  • # Commentaire supprimé

    Posté par  . Évalué à 1.

    Ce commentaire a été supprimé par l’équipe de modération.

Suivre le flux des commentaires

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