Journal Une css opensuse pour linuxfr

Posté par Benoît Monin le 12 octobre 2009 à 00:18.

Étiquettes :

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 polytan le 12 octobre 2009 à 00:31. É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 Nonolapéro le 12 octobre 2009 à 15:58. É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 chtitux (site web personnel) le 12 octobre 2009 à 01:08. É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 jeffcom le 12 octobre 2009 à 02:19. É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 Snarky le 12 octobre 2009 à 11:20. É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 Grunt le 12 octobre 2009 à 14:08. É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 Benoît Monin le 12 octobre 2009 à 21:56. Évalué à 2.
  
  Ah mince, j'avais oublié l'indispensable capture d'écran pour les décideurs pressés !
  Merci à toi.
# border-radius

Posté par Octabrain le 12 octobre 2009 à 04:16. É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 Cyrille Pontvieux (site web personnel, Mastodon) le 12 octobre 2009 à 15:19. É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 Benoît Monin le 12 octobre 2009 à 22:00. É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 yimm le 12 octobre 2009 à 15:01. Évalué à 2.

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

Posté par esdeem le 12 octobre 2009 à 17:09. É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 Benoît Monin le 12 octobre 2009 à 22:06. É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 Benoît Monin le 12 octobre 2009 à 23:53. É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 Benoît Monin le 20 octobre 2009 à 22:14. É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.