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 . Évalué à 6.
Bon boulot en tout cas ;)
[^] # Re: Sympa
Posté par Nonolapéro . Évalué à 4.
# Scrinnechote
Posté par chtitux (site web personnel) . Évalué à 10.
C'est vert, c'est clair, c'est supair \o/.
[^] # Re: Scrinnechote
Posté par jeffcom . Évalué à 10.
[^] # Re: Scrinnechote
Posté par Snarky . Évalué à 2.
[^] # Re: Scrinnechote
Posté par Grunt . Évalué à 4.
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 . Évalué à 2.
Merci à toi.
# border-radius
Posté par Octabrain . Évalué à 2.
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) . Évalué à 3.
[^] # Re: border-radius
Posté par Benoît Monin . Évalué à 1.
# C'est clair.
Posté par yimm . Évalué à 2.
# Joli
Posté par esdeem . Évalué à 3.
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 . Évalué à 1.
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 . Évalué à 3.
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 . Évalué à 2.
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.