24/11/2008 7 min #22791

Design

C'est une des parties les plus élaborées du système (avec le sub-langage 01L), et celle qui recquiert le plus de connaissances de base, notamment sur les CSS.

La feuille de style CSS permet la mise en forme du site.

Elle est générée par un css_builder (constructeur) à partir des paramètres du Design.

Le design est constitué des couleurs et d'un jeu CSS.
On peut créer autant de jeux CSS et de jeux de couleurs qu'on le souhaite.
Pendant l'édition d'un design, le CSS chargé n'est plus celui que les visiteurs voient, permettant de faire ses réglages sans précipitation...
Au moment du lancement de l'édition du design, un bouton rouge s'affiche en haut signalant quelle feuille est actuellement en cours (ex: design_2).

Important ! les feuilles de style sont habituellement rendues par le serveur à travers une mémoire cache pour accélérer leur lancement. Il faut donc les ouvrir et les rafraîchir une fois pour désactiver ce cache, après quoi elles répondront immédiatement à tout changement.

Save

Enregistre les modifications faites sur la feuille de style et les couleurs, dans 4 endroits :
la feuille de style et le jeu de couleurs sont sauvegardés « à l'abris » des changements. Ils pourront être restaurés ultérieurement si une suite de changement s'avérait fatidique.
La feuille de style et le jeu de couleurs sont sauvegardés au niveau publique.
La feuille de style CSS est générée.
Les changements opérés sont rendus visibles aux visiteurs.

build_css

Reconstruit la feuille CSS si elle ne l'a pas été lors de la dernière opération.

Cmpq

(compact) génère une feuille CSS compactée, en profitant mieux de l'effet « cascading » et en diminuant le poids du CSS.

Select : 2 sélecteurs

design_1/clrset_1

Ce bouton signale de jeu actuellement en cours.
Il est possible de les combiner, comme design_1/clrset_2 ou design_2/clrset_2.
Permet de créer de nouveaux jeux de couleurs et de design, qui héritent automatiquement de ceux en cours (afin de faire des déclinaisons).

herit_from

Permet d'hériter des couleurs ou du design d'un autre Hub.
L'héritage ira se faire dans les jeux en cours.

Restore (restauration)

Permet de revenir à la version enregistrée.

Reset (réglages par défaut).

Des mises à jour peuvent inclure de nouvelles CSS.
Reset_design revient complètement aux paramètres par défaut.
reset_colors efface toutes les couleurs.
Append renvoie les styles CSS ne figurant pas dans la feuille en cours sans modifier ceux qui ont été personnalisés.

Refresh

saved_css

Affiche la feuille CSS_0 (celle qui est publique) et qu'il faut rafraîchir une fois lors du premier lancement.

Css

Affiche la feuille CSS_x (celle qui est en cours d'édition) et qu'il faut rafraîchir une fois lors du premier lancement.

clr

Affiche les paramètres de couleurs au format texte.
Il est possible de les injecter au moyen de la commande '/?restore_clr=_etc...'.
(le premier signe doit être un '_' car la couleur 0 est oubliée.

Les jeux de couleurs

Au départ il y a huit couleurs dans le jeu, mais on peut en rajouter.

Non, je recommence.
Au départ les connecteurs de couleurs permettaient de relier un jeu de couleurss à des styles CSS qui étaient solidement ancrés dans le système et non éditable.
Malgré cette rigidité c'était assez bien fait pour permettre la plupart des cas.
Cependant certains inconvénients étaient indépassables c'est pourquoi est né Css_builder.

Ainsi toute la feuille de style est intégralement présentée ici, et totalement modifiable.

Pour faciliter l'édition, il faut créer des couleurs, et rappeler leur numéro dans les emplacements du tableau, pour créer la feuille de style.

Trois champs permettent de recevoir des connecteurs de couleurs :
la couleur du texte
la couleur du fond
la couleur du contour.

A l'intérieur de ces champs, trois champs, séparés par un '|', ont une signification nuancée :
le premier est l'état normal
le second est l'état de lien actif (a:link et a:active)
le troisième est l'état de survol (a:hover).

Un quatrième champ permet d'écrire du code CSS directement.

Le jeu de couleur peut recevoir des couleurs supplémentaires.
Pour l'éditer il faut cliquer une fois dans le flash qui est apparu après sa sélection, déplacer les barres de couleurs, et valider.

Important !
Il faut faire noter au codeur CSS de veiller à ne pas écraser les champs précédents !
Par exemple border:2px; écrase le style et la couleur du border.
Il vaut mieux écrire dans ce cas border-width:2px;

Si certains borders ne s'affichent pas c'est tout simplement que leur largeur n'est pas spécifiée.
Si malgré cela ils ne s'affichent toujours pas c'est tout simplement que leur style n'est pas spécifié !!
Ainsi on a : border:2px solid black; qu'il faut écrire border-width:2px; border-style:solid; afin de ne pas effacer les couleurs.

Il en va de même pour tous les autres attributs CSS.

Les facilités

C'est le deuxième paragraphe du plug-in Css_builder.
Il permet de sélectionner un style CSS.

Certaines facilités ont été mises à disposition :

background

Permet de charger une image de fond, et de choisir son mode de répétition et si elle est fixée à la page.

Connecteurs de couleurs

Un rappel des couleurs permet de faire ici des changements en piochant dans une liste.

Caractères

Permet de choisir une typographie, et sa taille.

Edition libre

Plus pratique que le minuscule espace réservé dans le tableau, permet d'éditer le CSS.

save_widths

Ce troisième champ est très important et peut être le remède à des troubles lors du chargement d'un nouveau design.

Le système a besoin de connaître la largeur de la balise « content », qui contient le corps des articles.

Pour cela il déduit de la largeur totale voulue les largeurs des colonnes et les 'padding'.

Ce paramètre est très important pour l'écriture de la feuille CSS, et aussi pour le système qui veut connaître la largeur maximale pour les images.

Le résultat est renvoyé dans le panneau 'config' et peut être affiné.

L'édition des connecteurs de couleurs (grand tableau)

Il existe 4 sortes de nominations CSS :
les divs : ce sont les blocs appelés par 'ID', qui n'aiment pas trop être imbriqués ;
les classes : ce sont celles qui sont appelées par 'class' et qui héritent des divs ;
les elements : ce sont les balises HTML qui peuvent être contrôlés via CSS.

Ainsi, souvent en Css on écrit : '#div .class a' pour signifier le lien actif de la classe 'class' situées dans la div 'div'.
De cette manière les styles sont contextualisés, ce qui permet d'en créer des génériques et de leur apporter des variantes locales, comme par exemple la grandeur du titre H2 selon qu'on est dans une colonne latérale (leftbar ou rightbar) ou dans le 'content'.

La case à cocher à droite sert à effacer une classe CSS.

Le champ en bas 'add_css' permet d'en rajouter :
soit en piochant dans les jeux existants
soit en en créant de nouveaux.

A quoi sert de créer de nouveaux CSS ?

Les connecteurs de mise en forme peuvent recevoir des CSS personalisés, via la commande :my_class:css.
Les articles peuvent recevoir du code HTML contenant ces classes spéciales.

Mais à part pour ces raisons, seul le grand architecte du site a besoin de créer de nouveaux styles CSS...
En effet à partir de ce qui est présenté il est possible de transfigurer complètement la pagination.

 commentaire