Dernière modification au site : 17 mai 2012


ExemplesAperçu des régions

La mise en page des éléments d'une page se fait selon un plan de région

Les régions sont comme des « blocs » pouvant contenir un ou plusieurs éléments ordonnés. L'ordre des éléments n'est pas conflictuel et peut être non-consécutif. (Plusieurs éléments au même ordre pourrait avoir un comportement variable)

À quoi sert cette page ?

À quoi sert cette page ?

Nous savons bien que cette page ne gagnera pas de concours d'esthétisme. Elle sert à tester un bon ensemble des styles de la page d'un coup d'oeil, pour détecter plus facilement les éventuels problèmes et sauver du temps lors du développement du système ou d'un nouveau thème personnalisé. Normalement on ne devrait utiliser que quelques régions à la fois dans une même page, deux ou trois maximum. 

Colonne gauche, large

On peut changer les éléments d'une région à l'autre sans problème, par exemple on pourrait déplacer un élément de la colonne de droite dans un onglet, un accordéon ou encore placé avec des coordonnées exactes.




Les régions normales ont un ordre de superposition de 10, l'ordre des éléments placés en absolu devient donc un ordre de superposition, permettant de placer des éléments par dessus ou par dessous le texte normal.

(cette note est dans la colonne de gauche)

Maintenant, des accordéons un peu partout !

Les éléments ayant un ordre de 50 à 99, dans une région ayant cette propriété, se transforment en accordéon !

On cherchait depuis un petit bout de temps une alternative à la création inutile de nouvelles régions.. la voilà !

Tout simplement en changeant l'ordre de l'élément !

Duis faucibus fringilla nisl eget sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam eget porttitor dui. Aliquam sollicitudin lacinia posuere. Vestibulum auctor consectetur aliquam.
Et avec un ordre de 100 et plus on revient normal...
on peut donc inclure ces accordéons précisément où on veut.
(les éléments cachés à 99 seront dans les accordéons...)

Colonne droite, petite

Donec sit amet sem sit amet dolor consectetur congue vitae a libero. Donec erat purus, fringilla ac luctus non, pharetra quis libero. Mauris quis ipsum quis odio viverra sollicitudin a ac enim. Integer sollicitudin augue nec purus pharetra mattis imperdiet sed velit. Mauris posuere egestas lectus et interdum. Proin bibendum massa pulvinar enim ultrices vulputate. Vivamus posuere lorem id est rutrum quis placerat tellus ullamcorper. Pellentesque sit amet nisi quis dui porttitor ornare. Proin vel urna ut nunc lacinia aliquam eget quis nibh. Proin bibendum massa pulvinar enim ultrices vulputate.

Généralisé !

Dans toutes les régions « normales »
Ça peut être pratique pour les sites dans lesquels on voudrait avoir une petite colonne avec des menus en accordéons, à droite...

Groupes par région, indépendants

Duis faucibus fringilla nisl eget sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam eget porttitor dui. Aliquam sollicitudin lacinia posuere. Vestibulum auctor consectetur aliquam.

Extrait youtube caché...

Les accordéons sont une bonne manière d'insérer plusieurs vidéos dans la même page, les éléments étant fermés par défaut, la page s'affiche donc rapidement et l'utilisateur choisi la vidéo à visionner. Par exemple notre premier test avec notre propre compte Youtube, montrant une partie de notre panneau de gestion...

Donec auctor augue ut nisl posuere dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis faucibus fringilla nisl eget sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam eget porttitor dui. Aliquam sollicitudin lacinia posuere. Vestibulum auctor consectetur aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec auctor augue ut nisl posuere dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Donec auctor augue ut nisl posuere dictum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis faucibus fringilla nisl eget sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam eget porttitor dui. Aliquam sollicitudin lacinia posuere. Vestibulum auctor consectetur aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Vivamus posuere lorem id est rutrum quis placerat tellus ullamcorper. Pellentesque sit amet nisi quis dui porttitor ornare. Proin vel urna ut nunc lacinia aliquam eget quis nibh.
Nunc at aliquam turpis. Nulla gravida gravida odio nec euismod. Etiam ipsum sapien, vehicula non rutrum et, iaculis eleifend ipsum. Sed eros libero, fringilla ut bibendum non, vulputate quis tortor. Phasellus ac quam enim, eget vehicula mauris. In pharetra dignissim bibendum.

Duis libero tellus, vehicula sit amet auctor sit amet, varius eget magna. Nullam venenatis, risus ut elementum pharetra, sapien diam volutpat nulla, fermentum sodales est leo vitae ante. Maecenas tincidunt convallis dui quis interdum. Fusce tristique varius neque, vel pharetra dolor semper sit amet. Suspendisse potenti. Vestibulum aliquam massa vitae lorem ornare pharetra.
sans onglet c'est le numéros d'ordre qui apparaît comme titre, tout simplement
Nunc at aliquam turpis. Nulla gravida gravida odio nec euismod. Etiam ipsum sapien, vehicula non rutrum et, iaculis eleifend ipsum. Sed eros libero, fringilla ut bibendum non, vulputate quis tortor. Phasellus ac quam enim, eget vehicula mauris. In pharetra dignissim bibendum. Duis libero tellus, vehicula sit amet auctor sit amet, varius eget magna. Nullam venenatis, risus ut elementum pharetra, sapien diam volutpat nulla, fermentum sodales est leo vitae ante. Maecenas tincidunt convallis dui quis interdum. Fusce tristique varius neque, vel pharetra dolor semper sit amet. Suspendisse potenti. Vestibulum aliquam massa vitae lorem ornare pharetra.

Duis libero tellus, vehicula sit amet auctor sit amet, varius eget magna.

  1. Sed eros libero, fringilla ut bibendum non, vulputate quis tortor.
  2.  Phasellus ac quam enim,
  3.  eget vehicula mauris. In pharetra dignissim bibendum.
     Duis libero tellus, vehicula sit amet auctor sit amet, varius eget magna.

Proin vel urna ut ...

Vivamus posuere lorem id est rutrum quis placerat tellus ullamcorper. Pellentesque sit amet nisi quis dui porttitor ornare. Proin vel urna ut nunc lacinia aliquam eget quis nibh.

Avec l'outil de sélection de classe,
dans la modification simple, on peut
effectuer des trucs comme celui-ci.
Integer consequat, est at blandit pharetra, mi nulla viverra risus, eget porttitor tortor lorem tincidunat massa. Quisque dapibus massa ac dolor eleifend et bibendum lacus luctus. Ut venenatis ornare odio, id sodales velit lacinia sed. Nullam in sapien risus.  Curabitur vehicula mauris nec ligula cursus sed sollicitudin risus venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis faucibus fringilla nisl eget sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam eget porttitor dui. Aliquam sollicitudin lacinia posuere. Vestibulum auctor consectetur aliquam.

.... aliquam eget quis nibh.


Ut venenatis ornare odio, id sodales velit lacinia sed. Nullam in sapien risus.  Curabitur vehicula mauris nec ligula cursus sed sollicitudin risus venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis faucibus fringilla nisl eget sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam eget porttitor dui. Aliquam sollicitudin lacinia posuere. Vestibulum auctor consectetur aliquam.

Onglets avec menu à gauche

9

les titres peuvent être long.. mais pas trop ! sinon évidemment ça fait des gros éléments dans le menu, moins clairs

Cette section est pratique pour faire un menu clair et rapide dans une page....

35

Nullam et orci odio, eget tempor purus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec auctor augue ut nisl posuere dictum.

Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis faucibus fringilla nisl eget sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam eget porttitor dui. Aliquam sollicitudin lacinia posuere. Vestibulum auctor consectetur aliquam. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.


Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam eget porttitor dui. Aliquam sollicitudin lacinia posuere. Ut venenatis ornare odio, id sodales velit lacinia sed. Nullam in sapien risus. Etiam libero sem, volutpat nec mattis in, egestas ut arcu.

52

Duis faucibus fringilla nisl eget sollicitudin. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam eget porttitor dui. Aliquam sollicitudin lacinia posuere. Vestibulum auctor consectetur aliquam.
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Duis faucibus fringilla nisl eget sollicitudin. 
Logo_Bamboo_200px

Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Etiam eget porttitor dui. Aliquam sollicitudin lacinia posuere. Vestibulum auctor consectetur aliquam.

et une dernière pleine largeur avant les éléments en absolu !
On peut placer des éléments en dessous ! On a donné une transparence de 60% à l'image qui suit, pour ne pas trop nuire à la lisibilité du texte.



Les éléments placés avec la souris peuvent aussi paraître par dessus le reste de la page...