Journal Une css opensuse pour linuxfr

Posté par  .
Étiquettes :
16
12
oct.
2009
Bonjour, bonsoir,

En attendant la sortie de la version 11.2 d'openSUSE prévue pour le 12 novembre, je me suis lancé à créer une feuille de style aux couleurs du site [http://opensuse.org].

Elle est disponible ici : [http://pagesperso-orange.fr/bmo-perso/opensuse.css]

Pour la réaliser, je suis parti de la feuille de style par défaut [http://linuxfr.org/css/style.css] et je me suis baladé sur le site pour essayer de retrouver les différents éléments.

Je me suis aidé de firebug [http://getfirebug.com/] que j'ai installé pour l'occasion. Je doit dire que cet outil est génial, c'est la sonde jtag du web !

N'étant pas du tout spécialiste des technologies web, [http://www.w3schools.com/], [http://www.alsacreations.com/] et bien sur [http://www.w3.org/TR/CSS21/] m'ont beaucoup servi.

Il y a des éléments présents dans style.css que je n'ai pas retrouvé donc je ne les ai pas repris. Si vous voyez des morceaux à l'affichage curieux, merci de me les signaler.

La css contient une poignée de -moz-border-radius donc les coins arrondis ne seront visibles que pour les utilisateurs de firefox. A moins que vous ne connaissez un moyen de faire des arrondis avec les autres navigateurs ?

Dans cette css, la taille des différents objets affichés est relative soit à la largeur de la fenêtre du navigateur, soit à la taille de la police au lieu d'être fixée en pixels comme à l'origine. Ça peut poser problème pour l'affichage du logo si votre écran affiche moins de 1000 pixels de large.

J'ai fait des tests avec firefox et konqueror, et différentes tailles de fenêtre et de police et le rendu me semble correct. Ceci dit je ne peux pas garantir que ça ne va pas vous piquer les yeux ;)

Vos commentaires sont les bienvenus.
  • # Sympa

    Posté par  . Évalué à 6.

    Ta css est très sympathique, mais je crois que je suis amoureux de la feuille de stylle nightgrey !

    Bon boulot en tout cas ;)
    • [^] # Re: Sympa

      Posté par  . Évalué à 4.

      Un point que je trouve positif c'est de ne pas avoir la barre d'outils qui se masque automatiquement.
  • # Scrinnechote

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

    Pour les flemmards du mulot, voici une capture d'écran (avec un zoom réduit) sur Firefox : http://chtitux.org/vrac/dlfp-suse.png

    C'est vert, c'est clair, c'est supair \o/.
    • [^] # Re: Scrinnechote

      Posté par  . Évalué à 10.

      j'aime bien l'idée du commentaire proposant un lien vers un screenshot sur lequel ledit commentaire est présent ^^
    • [^] # Re: Scrinnechote

      Posté par  . Évalué à 2.

      En faite, changer la CSS c'est très facile, c'est revenir à celle par défaut qui demande plus de manipulation ;)
    • [^] # Re: Scrinnechote

      Posté par  . Évalué à 4.

      Regarde la de près, ta capture d'écran:
      Cette page a été générée par Templeet en 0.0666

      "vi user spotted."

      THIS IS JUST A PLACEHOLDER. YOU SHOULD NEVER SEE THIS STRING.

    • [^] # Re: Scrinnechote

      Posté par  . Évalué à 2.

      Ah mince, j'avais oublié l'indispensable capture d'écran pour les décideurs pressés !
      Merci à toi.
  • # border-radius

    Posté par  . Évalué à 2.

    Pour les bordures arrondis, il y a la propriété "-webkit-border-radius" pour les navigateurs à base de WebKit.
    Si j'ai bien compris, la propriété "border-radius" deviendra sans doute standard dans une prochaine version de CSS.
    • [^] # Re: border-radius

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

      En effet, et je pense qu'il serait bien d'ajouter simplement la propriété "border-radius". Comme ça quand elle sera disponible, pas besoin de changer ta CSS.
      • [^] # Re: border-radius

        Posté par  . Évalué à 1.

        C'est pas idiot ça. Je vais ajouter cette propriété en plus du -webkit-border-radius comme ça la css sera prête pour CSS3.
  • # C'est clair.

    Posté par  . Évalué à 2.

    J'adore cette CSS, elle est clair, et utilise bien l'espace du navigateur :)
  • # Joli

    Posté par  . Évalué à 3.

    C'est vraiment joli, merci.

    Deux trois choses à l'arrache cependant :

    - La mise en page d'envoi de commentaires est, chez moi (iceweasel 3.5.3) un poil vrillée
    Le texte se colle à droite contre la div du niveau du supérieur et le input type=text du titre la dépasse.

    - à un niveau purement esthétique :
    - dans la liste des commentaires, je mettrais plus volontiers un line-height à 200% pour la classe div.comment-x (ligne 644 sqq) pour dégager un peu la ligne qui commence par "posté par" et un line -height 120% pour la classe signature (ligne 685 sqq) pour éviter qu'elle ne soit trop étalé par la modif précédente.
    De même je mettrais plutôt un padding 0.5em 0 1% 1% pour la classe div.comment-x (ligne 644 sqq) pour enlever un peu de vide entre le commentaires
    - Je mettrais plutôt un padding 0.7em 1% à la classe div.comments (ligne 608 sqq) pour équilibrer le "blanc" autour des commentaires

    Mes deux sous.

    0. Assume good faith 1. Be kind to other people 2. Express yourself 4. Apply rule 0

    • [^] # Re: Joli

      Posté par  . Évalué à 1.

      Merci pour tes remarques,

      Je viens de voir le bug du champ input en répondant aux commentaires, je vais corriger ça. Je vais tester aussi les modifications que tu suggères pour voir ce que ça donne.
  • # Mise à jour

    Posté par  . Évalué à 3.

    Je viens de mettre à jour la css, elle est toujours disponible au même endroit [http://pagesperso-orange.fr/bmo-perso/opensuse.css].

    J'ai rajouté -webkit-border-radius et border-radius comme suggéré par Octabrain et Cyrille Pontvieux. Il y a pas mal d'informations à ce sujet sur [http://www.bloggingcss.com/en/tutorials/the-css3-border-radi(...)].

    Il y a aussi les corrections pour les input text et la mise en page des commentaires indiquées par eggman. Les détails des changements sont dans le fichier.
  • # css officielle !

    Posté par  . Évalué à 2.

    Grâce aux GM (gentils modérateurs), la css est maintenant disponible directement sur linuxfr.org. Sur la page [ http://linuxfr.org/css.html], elle est accessible sous le nom opensuse.css.

    Merci à NoNo.

Suivre le flux des commentaires

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