Habillage OrangeJuice

Différentes versions, téléchargements, installation, remarques :
Version 760px de largeur :http://www.ibak.ch/wikinistyles/orangejuice/
Version 95% de largeur : http://www.ibak.ch/wikinistyles/orangejuice100/
Version "je touche à rien si ce n'est à wakka.css : http://www.ibak.ch/wikinistyles/orangejuicelight100/

Une mise à jour à eu lieu au 15.03.2004 à 18h30 :

le tableau de actions/header.php a été viré au bénéfice d'une écriture plus propre
Le champs des citations de code sont maintenant proportionnels au texte, et ce jusqu'à 400 px de hauteur.
Les fichiers ont été modifiés afin d'être compatibles avec ma proposition d'idées plus bas.
- j'ai signalé 1-2 bug(s) ici en visuel, bravo pour le boulot ! -- BenoitAudouard 20040318

Idées pour améliorer l'habillage CSS de WikiNi

Il me semblerait pertinent d'ajouter un syle (class="") à tous les formulaires et boutons de WikiNi modifiables depuis le wakka.css, ce qui éviterait de toucher à 80% des fichiers modifiés dans OrangeJuice.

Modifications

wakka.css

Ajout de 3 styles :
.commentbox { width: 100%; height: 120px; } .button { background: #FFFFFF; border: 1px solid #000000; padding: 0px; margin: 0px; } .box { background: #FFFFF8; border: 0px; border-bottom: 1px solid #CCCCAA; padding: 0px; margin: 0px; }

Autres fichiers

Ajouter les styles correspondants aux champs des formulaires, boutons,...

Style .box
Pour les listes déroulantes, champs, textarea, checkbox, etc.
class="box"
ou pour les expressions en php du type echo :
class=\"box\"
Style .button
Pour tous les boutons (par exemple : "Sauver", "Aperçu", "Annulation", "Ajouter commentaire", etc.).
class="button"
ou pour les expressions en php du type echo :
class=\"button\"
Style .commentbox
Pour le textarea d'écriture des commentaires dans /handlers/page/show.php.
class="commentbox"

Liste des fichiers à modifier

/wakka.css
/actions/textsearch.php
/actions/usersettings.php
/handlers/page/acls.php
/handlers/page/edit.php
/handlers/page/revisions.php
/handlers/page/show.php

Discussions

Bravo ! La mise en page réussit à être tout à la fois sobre et colorée. Ca redonne un sacré coup de jeune au design de WikiNi qui commence personnellement à me sortir par les yeux... pour les classes à ajouter, je pense que tes propositions sont très intéressantes. Quelques remarques à discuter :

pourquoi avoir créé une classe .commentbox alors que la classe .box existe déjà ; éventuellement, si le champ d'entrée des commentaires doit être différent, ne vaut-il mieux pas lui affecter deux classes du type class="box commentbox" où .box le défini comme une "boite" semblable aux autres boites et où .commentbox défini ses spécificités.
du point de vu de l'accessibilité, je trouve discutable ton utilisation des <hr /> pour faire des titres soulignés... je conviens cependant qu'il sont graphiquement très chouettes : pourquoi ne pas styler les <h1> et autres en les soulignant ? On peut ainsi parvenir à un résultat graphiquement totalement équivalent, mais sans <hr />.
je ne vois pas pourquoi tu utilises un tableau en début de document pour le sous-menu intégrant l'adresse IP/nom d'utilisateur et le formulaire de recherche ; on peut produire le même effet graphique uniquement avec des classes en jouant sur la CSS
pourquoi 760 pixels de large ? et pourquoi pas une taille relative (en pourcentage).

Je n'ai pas encore regardé dans le détail tes modifications du code PHP ; pour ma part je suis d'ores et déjà favorable à l'ajout des trois classes de style que tu mentionnes : je n'y vois que des avantages et notamment une amélioration de la possibilité de styler WikiNi sans toucher au code. En revanche je ne suis pas très favorable, dans un premier temps, à modifier le code HTML généré. Bien sûr, la discussion est ouverte pour modifier éventuellement ce code, mais il faut argumenter un peu et écouter l'avis de tout le monde.
L'idéal, j'en ai déjà parlé, ce serait que l'administrateur fonctionnel puisse modifier la structure de la page sans avoir à toucher au code (notamment l'ordre des éléments structuraux (titre du wiki, titre de la page, éléments de menu, etc.)).
-- CharlesNepote

Heureux que cela plaise :)

.commentbox sert à définir le style du textarea pour écrire des commentaires. Il est défini maintenant comme .edit qui permet de donner via wakka.css la hauteur du champ de commentaires. Ceci peut permettre plus de souplesse pour les personnes voulant agrandir la taille de ce champs en hauteur.
Le choix d'utiliser des <hr /> afin de souligner est un choix personnel de mise en page :) Je ne voulais pas contraindre également les utilisateurs de cet habillage à utiliser des balises <h1> impliquant un soulignement automatique des titres pour tous les titres de type <h1> ou <h2>, ..., dans un but de souplesse encore. On peut comme ça avoir des titres sans soulignement, ou donner cet effet "souligné" si on le souhaite. Si par contre l'aspect souligné plaît, je peux modifier les styles type <h1>, mais alors ils seront tout le temps soulignés.
Pour le tableau c'est vrai ! Ca alourdit le code :/ je le modifierai dans la journée.
760 px de large est un choix de mise en page personnelle. Pour ne pas obliger les utilisateurs à se restreindre à mes choix personnels j'en ai aussi fait un en 100% à l'adresse suivante : http://www.ibak.ch/wikinistyles/orangejuice100/
Qu'entends-tu par code html généré ? Je n'ai qu'ajouter des class="style". J'ai modifié actions/footer.php pour mettre la recherche en haut, et header.php afin de modifier la mise en page (que je vais corriger de suite). Je n'ai donc fait aucune modification "majeure" du code php. Si les fichiers que j'ai dû modifier pour inclure les styles les incorporent par défaut, rien ne devra être modifié en dehors de la feuille de style. Je vais faire en sorte d'améliorer tout ca déjà.

-- PierreGilles

J'ai trouvé unne autre chose à améliorer au niveau de wakka.css : quand on fait une citation de code, le champ d'affichage fait 400px même si on écrit un mot. c'est maintenant réglé. J'ai aussi enlevé le tableau de actions/header.php, c'est plus propre :)
Les sources sont à jour
-- PierreGilles

Joli travail, les couleur sont sympa et ça change de wikini qui a un look qui devient un peu vieux. Pour les classes de CSS, je pense que cela doit être un plus, bien que je sois loin d'être un pro des CSS. Par contre, en ce qui concerne l'ordre des éléments structuraux, la solution est assez simple, c'est celle que j'ai testée avec un système de thèmes. Il suffit de découper chacun des fichiers header.php et footer.php en 2 pour avoir d'un côté le code qui ne bouge pas et de l'autre l'aspect structure de la page. En particulier, tout ce qui est avant la balise body (balise compris) ne doit pas être modifié alors que tout ce qui suit est modifiable pour adapter la structure de WikiNi. --GarfieldFr

Bon j'ai un peu joué avec le style code, ça le fait bien (trop) pour l'adaptation en hauteur. Bon pour les couleurs, ça me rappelle un peu Bouygues m'enfin je vais pas être nostalgique... Bravo pour le boulot si ça peut être aussi bien pour les tableaux (un exemple) ce serait cool d'avoir 3-4 styles prédéfinis... -- BenoitAudouard

Wikini