Comparaison des versions

Ancienne version 95

changes.mady.by.user Stéphane Denis

Sauvegardée le

comparé à

Nouvelle version Actuel

changes.mady.by.user Stéphane Denis

Sauvegardée le

Légende

  • Ces lignes ont été ajoutées. Ce mot a été ajouté.
  • Ces lignes ont été supprimées. Ce mot a été supprimé.
  • La mise en forme a été modifiée.

Ariane, test avec des boutons ou TOUTE la zone est clickable. 


Section
Colonne
width25%
Clickable
linkhttps://www.lapresse.ca/
Background Color
colorred
Center

Programme1

Colonne
width25%
Clickable
linkhttps://www.lapresse.ca/
Background Color
colorblue
Center

Programme2

Colonne
width25%
Clickable
linkhttps://www.lapresse.ca/
Background Color
coloryellow
Center

Programme3

Colonne
width25%
Clickable
linkhttps://www.lapresse.ca/
Background Color
Center

Programme4

Section
Colonne
width25%
Clickable
linkhttps://www.lapresse.ca/
Background Color
colorred
Center

Programme5

Colonne
width25%
Clickable
linkhttps://www.lapresse.ca/
Background Color
colorblue
Center

Programme6

Colonne
width25%
Clickable
linkhttps://www.lapresse.ca/
Background Color
color#FFD700
Center

Programme7

Colonne
width25%
Clickable
linkhttps://www.lapresse.ca/
Background Color
Center

Programme8

Voir plus bas exemple navigation vertical 

SP Notifcation avec une temporisation... surement utile pour des dates importantes


Notification | Vectors (Anciennement: SP Notification)
duration1
positiontop center
textceci est une notification- TopCenter 10secs
typeinfo

En haut au centre de l'écran en bleu pour 10 secondes

SP Expander Box


Boite d'extension | Vectors (Anciennement: SP expander box)
paramboxColorFFFFFF
paramboxTitleSP Expander Box1
sizefontsmall
paramboxFontColor006BB6

Ceci est une expander box Attention PAS dans un conteneur d'extension


Conteneur d'extension | Vectors (Anciennement: SP expander container)
paramboxThemeCropped


Boite d'extension | Vectors (Anciennement: SP expander box)
paramboxColorFFFFFF
paramboxTitleSP Expander Box1
sizefontsmall
paramboxFontColor006BB6

Ceci est une expander box Attention par défaut le fond de la boite et la couleur des polices est la même !  Rien de visible


Boite d'extension | Vectors (Anciennement: SP expander box)
paramboxColorFFFFFF
paramboxTitleSP Expander Box2
sizefontsmall
paramboxFontColor009BB9

Ceci est une expander box Attention par défaut le fond de la boite et la couleur des polices est la même !  Rien de visible


Boite d'extension | Vectors (Anciennement: SP expander box)
paramboxColorFFFFFF
paramboxTitleSP Expander Box3
sizefontbig
paramboxFontColor8FA30A

Ceci est une expander box Attention par défaut le fond de la boite et la couleur des polices est la même !  Rien de visible - Police big


Effet sympa... même cute...

SP macro Bouton

Bouton | Vectors (Anciennement: SP macro Bouton)
backgroundColorFFFFFF
iconicon-sp-commenting-o
labelSP macro button - lien externe -icone bulles
fontColor006BB6
urlhttps://www.lapresse.ca/

Bouton | Vectors (Anciennement: SP macro Bouton)
backgroundColorFFFFFF
urlconfluenceJ'étudie au premier cycle
iconicon-sp-graduation-cap
labelSP macro button - lien interne -icone acad
fontColor009EE9

Petit icone (62 choix) et couleurs de polic personnaliser

SP InfoBulle

Une bulle d'information apparait

Infobulle | Vectors (Anciennement: SP Infobulle)
DescriptionDescription SP InfoBulle
BackgroundHoneyDew
TermSP InfoBulle
peut-etre utile pour une infomation/définition.

Une bulle apparait si place le curseur sur la zone.

SP macro Panneau

Panneau | Vectors (Anciennement: SP macro Panneaux)
backgroundColorF7F7F7
iconicon-sp-bank
typecustomized
fontColor006BB6

SP macro Panneau - custom.  Possible de changer fond et couleurs de police et icône -

Moyennement utile

SP note en bas de page

Un peux de texte avant

Note de Bas de Page | Vectors (Anciennement: SP note en bas de page)
noteMacro SP note en bas de page = Note pas de personnalisation
dataReference dans le texte qui mène au bas de page
et un peu se texte après.  Il se passe quoi avec deux notes de bas de page
Note de Bas de Page | Vectors (Anciennement: SP note en bas de page)
noteMacro SP note en bas de page = 2e Note
dataceci est ma reference
on vas voir ce qui se passe.

Fonctionnement clair, simple.  Utile pour document avec reference.  Fait le travail.

SP barre de progression


Barre de Progression | Vectors (Anciennement: SP Barre de progression)
current-step1
steps1

Barre de Progression | Vectors (Anciennement: SP Barre de progression)
current-step1
steps5

Aucune idée ce que ce truc là fait !!!


SP Statut page

Statut de Page | Vectors (Anciennement: SP Statut de page)
width400px
textSP statut page - texte additionnel

Stef : Peut-être intéressant pour toi et moi pour suivre nos modifs de page ou si nous impliquons d'autres personnes...

SP navigation horizontal

SP navigation horizontale
color#FFAB00


SP élément navigation horizontale
anchor99465843
iconicon-sp-powerpoint
namehori1

Onglet 1 qui prends la couleurs choisis dans le conteneur, pas personnalisable.  Il y a une icone possible dans une sélection de 62.

Sed a tellus eget magna blandit pellentesque consectetur id nulla. Nullam et egestas sem. Praesent ac risus vel dolor viverra elementum. Sed interdum arcu sagittis purus ullamcorper, nec rhoncus ligula condimentum. Morbi ullamcorper ornare augue, ut hendrerit lacus bibendum nec. Duis vel est sit amet nulla molestie euismod vehicula in mi. In dui eros, efficitur et egestas nec, facilisis vitae magna. Ut non nunc quis enim maximus feugiat. Fusce feugiat bibendum lorem, in dictum leo dignissim ut. Fusce ac tincidunt sem, condimentum semper ligula. Nunc lacinia, diam in hendrerit semper, enim orci sodales nulla, eget tincidunt elit ligula a lectus. In hac habitasse platea dictumst. Vivamus rutrum lacinia purus, sed faucibus orci dignissim eu.

Etiam id metus sed turpis auctor lobortis eget nec lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget arcu odio. Suspendisse interdum, arcu elementum auctor pharetra, nisl elit aliquet nisi, sit amet vulputate odio arcu eu nisi. Proin pretium tincidunt condimentum. Nulla blandit, leo in euismod volutpat, tortor quam ultrices urna, nec suscipit dolor felis ut lorem. Duis id euismod massa. Sed non augue luctus, eleifend justo sit amet, eleifend justo. Suspendisse enim ante, fermentum nec ipsum vitae, imperdiet tincidunt urna. Aenean posuere velit sed mi vehicula, a gravida mauris feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porttitor velit a lectus dignissim, vel euismod arcu convallis. Mauris eleifend lacinia velit. Morbi cursus, orci ac luctus fringilla, risus ipsum laoreet erat, ut condimentum sem erat sit amet mauris.


SP élément navigation horizontale
anchor3208519
iconicon-sp-flag
namehor2

Onglet2 - voir onglet 1

Etiam id metus sed turpis auctor lobortis eget nec lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget arcu odio. Suspendisse interdum, arcu elementum auctor pharetra, nisl elit aliquet nisi, sit amet vulputate odio arcu eu nisi. Proin pretium tincidunt condimentum. Nulla blandit, leo in euismod volutpat, tortor quam ultrices urna, nec suscipit dolor felis ut lorem. Duis id euismod massa. Sed non augue luctus, eleifend justo sit amet, eleifend justo. Suspendisse enim ante, fermentum nec ipsum vitae, imperdiet tincidunt urna. Aenean posuere velit sed mi vehicula, a gravida mauris feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porttitor velit a lectus dignissim, vel euismod arcu convallis. Mauris eleifend lacinia velit. Morbi cursus, orci ac luctus fringilla, risus ipsum laoreet erat, ut condimentum sem erat sit amet mauris.


SP élément navigation horizontale
anchor3208520
iconicon-sp-attention
namehor3

Onglet3 - voir onglet 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dictum at lorem in accumsan. In vel elit ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rhoncus sodales eros congue dictum. Aliquam odio dui, maximus quis condimentum vel, pellentesque vel diam. Etiam ultricies mi a felis posuere euismod mattis id nibh. Ut venenatis, enim ac ultrices auctor, leo dolor varius augue, et malesuada lorem turpis vitae mauris. Vivamus tristique urna eu felis dapibus semper.

Sed a tellus eget magna blandit pellentesque consectetur id nulla. Nullam et egestas sem. Praesent ac risus vel dolor viverra elementum. Sed interdum arcu sagittis purus ullamcorper, nec rhoncus ligula condimentum. Morbi ullamcorper ornare augue, ut hendrerit lacus bibendum nec. Duis vel est sit amet nulla molestie euismod vehicula in mi. In dui eros, efficitur et egestas nec, facilisis vitae magna. Ut non nunc quis enim maximus feugiat. Fusce feugiat bibendum lorem, in dictum leo dignissim ut. Fusce ac tincidunt sem, condimentum semper ligula. Nunc lacinia, diam in hendrerit semper, enim orci sodales nulla, eget tincidunt elit ligula a lectus. In hac habitasse platea dictumst. Vivamus rutrum lacinia purus, sed faucibus orci dignissim eu.

Etiam id metus sed turpis auctor lobortis eget nec lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget arcu odio. Suspendisse interdum, arcu elementum auctor pharetra, nisl elit aliquet nisi, sit amet vulputate odio arcu eu nisi. Proin pretium tincidunt condimentum. Nulla blandit, leo in euismod volutpat, tortor quam ultrices urna, nec suscipit dolor felis ut lorem. Duis id euismod massa. Sed non augue luctus, eleifend justo sit amet, eleifend justo. Suspendisse enim ante, fermentum nec ipsum vitae, imperdiet tincidunt urna. Aenean posuere velit sed mi vehicula, a gravida mauris feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porttitor velit a lectus dignissim, vel euismod arcu convallis. Mauris eleifend lacinia velit. Morbi cursus, orci ac luctus fringilla, risus ipsum laoreet erat, ut condimentum sem erat sit amet mauris.



SP navigation vertical

SP navigation verticale
color#403294


SP élement navigation verticale
anchor3615982
iconicon-sp-facebook
namever1
headerentete ver1

Onglet 1 qui prends la couleurs choisis dans le conteneur, pas personnalisable.  Il y a une icone possible dans une sélection de 62. Il y a une option "en-tete" pas dispo en horizontal... pas personnalisable du tout.

Test avec 3 paragraphe

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dictum at lorem in accumsan. In vel elit ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rhoncus sodales eros congue dictum. Aliquam odio dui, maximus quis condimentum vel, pellentesque vel diam. Etiam ultricies mi a felis posuere euismod mattis id nibh. Ut venenatis, enim ac ultrices auctor, leo dolor varius augue, et malesuada lorem turpis vitae mauris. Vivamus tristique urna eu felis dapibus semper.

Sed a tellus eget magna blandit pellentesque consectetur id nulla. Nullam et egestas sem. Praesent ac risus vel dolor viverra elementum. Sed interdum arcu sagittis purus ullamcorper, nec rhoncus ligula condimentum. Morbi ullamcorper ornare augue, ut hendrerit lacus bibendum nec. Duis vel est sit amet nulla molestie euismod vehicula in mi. In dui eros, efficitur et egestas nec, facilisis vitae magna. Ut non nunc quis enim maximus feugiat. Fusce feugiat bibendum lorem, in dictum leo dignissim ut. Fusce ac tincidunt sem, condimentum semper ligula. Nunc lacinia, diam in hendrerit semper, enim orci sodales nulla, eget tincidunt elit ligula a lectus. In hac habitasse platea dictumst. Vivamus rutrum lacinia purus, sed faucibus orci dignissim eu.

Etiam id metus sed turpis auctor lobortis eget nec lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget arcu odio. Suspendisse interdum, arcu elementum auctor pharetra, nisl elit aliquet nisi, sit amet vulputate odio arcu eu nisi. Proin pretium tincidunt condimentum. Nulla blandit, leo in euismod volutpat, tortor quam ultrices urna, nec suscipit dolor felis ut lorem. Duis id euismod massa. Sed non augue luctus, eleifend justo sit amet, eleifend justo. Suspendisse enim ante, fermentum nec ipsum vitae, imperdiet tincidunt urna. Aenean posuere velit sed mi vehicula, a gravida mauris feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porttitor velit a lectus dignissim, vel euismod arcu convallis. Mauris eleifend lacinia velit. Morbi cursus, orci ac luctus fringilla, risus ipsum laoreet erat, ut condimentum sem erat sit amet mauris.


SP élement navigation verticale
anchor112095540
iconicon-sp-picture
namever1b
headerentete ver1

Onglet 1 qui prends la couleurs choisis dans le conteneur, pas personnalisable.  Il y a une icone possible dans une sélection de 62. Il y a une option "en-tete" pas dispo en horizontal... pas personnalisable du tout.

Test avec 2 paragraphe

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dictum at lorem in accumsan. In vel elit ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rhoncus sodales eros congue dictum. Aliquam odio dui, maximus quis condimentum vel, pellentesque vel diam. Etiam ultricies mi a felis posuere euismod mattis id nibh. Ut venenatis, enim ac ultrices auctor, leo dolor varius augue, et malesuada lorem turpis vitae mauris. Vivamus tristique urna eu felis dapibus semper.

Sed a tellus eget magna blandit pellentesque consectetur id nulla. Nullam et egestas sem. Praesent ac risus vel dolor viverra elementum. Sed interdum arcu sagittis purus ullamcorper, nec rhoncus ligula condimentum. Morbi ullamcorper ornare augue, ut hendrerit lacus bibendum nec. Duis vel est sit amet nulla molestie euismod vehicula in mi. In dui eros, efficitur et egestas nec, facilisis vitae magna. Ut non nunc quis enim maximus feugiat. Fusce feugiat bibendum lorem, in dictum leo dignissim ut. Fusce ac tincidunt sem, condimentum semper ligula. Nunc lacinia, diam in hendrerit semper, enim orci sodales nulla, eget tincidunt elit ligula a lectus. In hac habitasse platea dictumst. Vivamus rutrum lacinia purus, sed faucibus orci dignissim eu.


SP élement navigation verticale
anchor112095541
iconicon-sp-attention
namever1c
headerentete ver1

Onglet 1 qui prends la couleurs choisis dans le conteneur, pas personnalisable.  Il y a une icone possible dans une sélection de 62. Il y a une option "en-tete" pas dispo en horizontal... pas personnalisable du tout.

Test avec 1 paragraphe

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dictum at lorem in accumsan. In vel elit ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rhoncus sodales eros congue dictum. Aliquam odio dui, maximus quis condimentum vel, pellentesque vel diam. Etiam ultricies mi a felis posuere euismod mattis id nibh. Ut venenatis, enim ac ultrices auctor, leo dolor varius augue, et malesuada lorem turpis vitae mauris. Vivamus tristique urna eu felis dapibus semper.


SP élement navigation verticale
anchor3615983
iconicon-sp-pinterest-circled
namever2
headerentete - ver2

Onglet2 - 2 paragraphe

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sem nibh, posuere in sem sit amet, maximus vulputate odio. Morbi cursus porttitor eros, eget sodales libero vestibulum sit amet. Aenean euismod magna at nunc euismod molestie. Proin iaculis massa eu congue mollis. Suspendisse a tellus urna. Aenean sit amet urna dui. Nunc tempus augue a vestibulum dictum. Suspendisse vel pellentesque nisl. Duis tortor nunc, interdum sit amet ante nec, finibus tincidunt leo. Donec ut auctor erat, quis ullamcorper justo. Praesent rutrum dignissim ante, ut vestibulum nunc convallis et. Aliquam consectetur mollis sem, vel semper mi iaculis eget.

Aliquam non mollis lectus. Praesent ut augue dolor. Phasellus consectetur volutpat vestibulum. Curabitur posuere eu ante eu sollicitudin. Vestibulum maximus dui leo, non faucibus enim congue at. Praesent vitae bibendum quam. Aenean iaculis purus a rhoncus consectetur. Nam egestas nisl vel viverra placerat. Vivamus scelerisque dolor varius urna vestibulum, dictum pretium est gravida. Vestibulum eu accumsan dui. Vivamus odio elit, gravida sit amet nisl non, tristique pellentesque dui. Sed lacinia consectetur purus, et posuere sem cursus sit amet. Nulla facilisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque gravida dolor vitae molestie volutpat.



Intéressant.  L'utilisation de "en-tête" (header) permet de grouper des thèmes.

SP navigation verticale
color#FF5630


SP élement navigation verticale
anchor3615982
iconicon-sp-facebook
namever1

Onglet 1 qui prends la couleurs choisis dans le conteneur, pas personnalisable.  Il y a une icone possible dans une sélection de 62. Option "en-tete" déasactiver et pas dispo en horizontal.  Option cadre activer.   Peu personnalisable...

Test avec 3 paragraphe

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut dictum at lorem in accumsan. In vel elit ligula. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse rhoncus sodales eros congue dictum. Aliquam odio dui, maximus quis condimentum vel, pellentesque vel diam. Etiam ultricies mi a felis posuere euismod mattis id nibh. Ut venenatis, enim ac ultrices auctor, leo dolor varius augue, et malesuada lorem turpis vitae mauris. Vivamus tristique urna eu felis dapibus semper.

Sed a tellus eget magna blandit pellentesque consectetur id nulla. Nullam et egestas sem. Praesent ac risus vel dolor viverra elementum. Sed interdum arcu sagittis purus ullamcorper, nec rhoncus ligula condimentum. Morbi ullamcorper ornare augue, ut hendrerit lacus bibendum nec. Duis vel est sit amet nulla molestie euismod vehicula in mi. In dui eros, efficitur et egestas nec, facilisis vitae magna. Ut non nunc quis enim maximus feugiat. Fusce feugiat bibendum lorem, in dictum leo dignissim ut. Fusce ac tincidunt sem, condimentum semper ligula. Nunc lacinia, diam in hendrerit semper, enim orci sodales nulla, eget tincidunt elit ligula a lectus. In hac habitasse platea dictumst. Vivamus rutrum lacinia purus, sed faucibus orci dignissim eu.

Etiam id metus sed turpis auctor lobortis eget nec lorem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eget arcu odio. Suspendisse interdum, arcu elementum auctor pharetra, nisl elit aliquet nisi, sit amet vulputate odio arcu eu nisi. Proin pretium tincidunt condimentum. Nulla blandit, leo in euismod volutpat, tortor quam ultrices urna, nec suscipit dolor felis ut lorem. Duis id euismod massa. Sed non augue luctus, eleifend justo sit amet, eleifend justo. Suspendisse enim ante, fermentum nec ipsum vitae, imperdiet tincidunt urna. Aenean posuere velit sed mi vehicula, a gravida mauris feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam porttitor velit a lectus dignissim, vel euismod arcu convallis. Mauris eleifend lacinia velit. Morbi cursus, orci ac luctus fringilla, risus ipsum laoreet erat, ut condimentum sem erat sit amet mauris.


SP élement navigation verticale
anchor3615983
iconicon-sp-pinterest-circled
namever2

Onglet2 - 2 paragraphe

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sem nibh, posuere in sem sit amet, maximus vulputate odio. Morbi cursus porttitor eros, eget sodales libero vestibulum sit amet. Aenean euismod magna at nunc euismod molestie. Proin iaculis massa eu congue mollis. Suspendisse a tellus urna. Aenean sit amet urna dui. Nunc tempus augue a vestibulum dictum. Suspendisse vel pellentesque nisl. Duis tortor nunc, interdum sit amet ante nec, finibus tincidunt leo. Donec ut auctor erat, quis ullamcorper justo. Praesent rutrum dignissim ante, ut vestibulum nunc convallis et. Aliquam consectetur mollis sem, vel semper mi iaculis eget.

Aliquam non mollis lectus. Praesent ut augue dolor. Phasellus consectetur volutpat vestibulum. Curabitur posuere eu ante eu sollicitudin. Vestibulum maximus dui leo, non faucibus enim congue at. Praesent vitae bibendum quam. Aenean iaculis purus a rhoncus consectetur. Nam egestas nisl vel viverra placerat. Vivamus scelerisque dolor varius urna vestibulum, dictum pretium est gravida. Vestibulum eu accumsan dui. Vivamus odio elit, gravida sit amet nisl non, tristique pellentesque dui. Sed lacinia consectetur purus, et posuere sem cursus sit amet. Nulla facilisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque gravida dolor vitae molestie volutpat.


Deuxieme essai sans "en-tete"

ALLO ARIANE, j'ai mis une infobulle toto 


Quisque nec egestas lacus. Maecenas maximus accumsan nisl. In hac habitasse platea dictumst. Etiam euismod accumsan rutrum. Integer dapibus aliquam diam in sagittis. Praesent venenatis urna convallis lacus pulvinar rutrum. Nulla pulvinar blandit elit. Suspendisse ut enim ac massa condimentum accumsan. Curabitur iaculis vestibulum massa, ultrices semper nunc tristique quis. Mauris sollicitudin est eu odio tincidunt bibendum. Aliquam euismod, quam ac faucibus sodales, tellus nisi elementum enim, non eleifend metus metus ut enim. Aliquam ultricies massa vel tortor aliquet, at commodo mauris fringilla. Ut lobortis sapien eu enim egestas, non fringilla elit cursus. Fusce convallis ligula et augue malesuada, nec ullamcorper quam blandit.

Aliquam vel arcu ut quam porttitor posuere eget sit amet nibh. Vestibulum viverra libero in aliquet porta. Aliquam tempor maximus scelerisque. Nam eget finibus nisl, vel hendrerit nisl. Nullam ultrices vestibulum quam. Vestibulum sit amet augue iaculis, molestie purus hendrerit, pellentesque magna. Morbi ac ipsum non tortor tempor placerat cursus venenatis sapien.

Infobulle | Vectors (Anciennement: SP Infobulle)
Description Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus ac est quis tortor sodales commodo. Fusce fermentum dui a urna faucibus, non tincidunt velit interdum. Donec eget ex eget tortor dignissim semper ullamcorper a ex. Fusce quis vulputate risus, eget dictum ipsum. Sed accumsan tortor eu fermentum lobortis. Sed varius magna id risus gravida, at accumsan sem posuere. Vestibulum urna sem, elementum a odio sed, gravida porttitor est. Nulla tincidunt dolor nec lorem molestie, quis tempus turpis sagittis. Curabitur lobortis dolor ac elit egestas, ac faucibus justo dignissim. Suspendisse mollis non sapien nec ultrices. Sed tristique urna eu mi eleifend, id efficitur lorem malesuada. Donec velit elit, imperdiet id mattis ut, sagittis ac augue. Ut ut mauris a lectus tristique pharetra a nec dui. In quam velit, euismod eu ultrices eu, mattis quis erat. Sed sit amet sem ante. Ut fringilla, elit id lobortis blandit, ligula lacus bibendum magna, id consequat arcu orci ut enim. Donec felis est, rutrum quis bibendum vel, rhoncus placerat lectus. Vivamus aliquam ante eget orci fringilla finibus. Proin congue, erat auctor mattis pretium, metus nulla bibendum libero, ut ultrices lorem est gravida augue. Suspendisse eget pretium nulla, vel consequat ex. Maecenas pellentesque mattis erat, et eleifend ligula condimentum non. Nam ut mauris ultrices, feugiat elit sit amet, condimentum ex. Morbi fermentum mi sed nisl venenatis, quis hendrerit orci lacinia. Curabitur gravida lacinia metus eget condimentum. In hac habitasse platea dictumst. Nullam ultricies laoreet augue non semper.
BackgroundPaleTurquoise
Termtoto
, ullamcorper ac fringilla id, ornare quis est. Etiam vel ullamcorper ex, sit amet dapibus purus. Nulla aliquam odio eget urna vulputate vulputate. Praesent in felis nec arcu tempus pharetra. Mauris ut tortor sit amet tortor convallis lacinia sed sit amet ante. Nam ullamcorper eu libero vel dignissim.

Curabitur volutpat turpis a diam tempor facilisis.

Infobulle | Vectors (Anciennement: SP Infobulle)
Descriptionasd - https://www.lapresse.ca/ - PAS DE LIEN dans un tooltip :(
BackgroundPaleTurquoise
TermTest extrait
Integer luctus diam ultricies arcu congue, sed pretium magna tristique. Fusce laoreet justo maximus dolor vehicula bibendum. Vestibulum at placerat leo. Etiam pharetra enim lacus, vel varius felis ornare eget. Vestibulum a urna aliquam, porttitor diam sit amet, aliquam arcu. Etiam sed magna vel quam hendrerit condimentum sit amet ac mi. Maecenas maximus, arcu nec accumsan eleifend, diam erat tempus lorem, vel aliquam erat mauris eu dolor. Pellentesque eu metus sed tortor tempus lacinia nec eget justo. Mauris in elit viverra, vehicula massa sed, lobortis nulla. Duis non bibendum mi. Nunc tellus mi, efficitur et velit in, imperdiet imperdiet ex. 


Test de la maco Volet

Volet
borderColor#0057ac
bgColorgreen
titleColorwhite
borderWidth2
titleBGColorred
borderStylesolid
titletitre du volet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sem nibh, posuere in sem sit amet, maximus vulputate odio. Morbi cursus porttitor eros, eget sodales libero vestibulum sit amet. Aenean euismod magna at nunc euismod molestie. Proin iaculis massa eu congue mollis. Suspendisse a tellus urna. Aenean sit amet urna dui. Nunc tempus augue a vestibulum dictum. Suspendisse vel pellentesque nisl. Duis tortor nunc, interdum sit amet ante nec, finibus tincidunt leo. Donec ut auctor erat, quis ullamcorper justo. Praesent rutrum dignissim ante, ut vestibulum nunc convallis et. Aliquam consectetur mollis sem, vel semper mi iaculis eget.

Aliquam non mollis lectus. Praesent ut augue dolor. Phasellus consectetur volutpat vestibulum. Curabitur posuere eu ante eu sollicitudin. Vestibulum maximus dui leo, non faucibus enim congue at. Praesent vitae bibendum quam. Aenean iaculis purus a rhoncus consectetur. Nam egestas nisl vel viverra placerat. Vivamus scelerisque dolor varius urna vestibulum, dictum pretium est gravida. Vestibulum eu accumsan dui. Vivamus odio elit, gravida sit amet nisl non, tristique pellentesque dui. Sed lacinia consectetur purus, et posuere sem cursus sit amet. Nulla facilisi. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque gravida dolor vitae molestie volutpat.




Test UIExpand VS Développer

Background Color
Développer
titlelorem1

 Fusce suscipit mi sit amet venenatis finibus. Phasellus dignissim arcu ut quam tempor posuere. Sed pretium egestas neque et vulputate. Nam odio nunc, vulputate eu ligula vel, fermentum mattis metus. Nulla malesuada dignissim nisi vitae porttitor. Suspendisse ac diam eget neque accumsan facilisis. Morbi sed metus vel ante faucibus congue vel quis nunc. Suspendisse mollis, elit a sagittis lobortis, nibh elit tincidunt tellus, at tincidunt ante nulla quis ex. Morbi id pretium urna. In hac habitasse platea dictumst. Cras sed ipsum turpis. Nunc et lacinia felis, ut tristique dolor. Sed laoreet massa vel lacus tempus tempor.

In aliquam nisl et nisl finibus feugiat. In dictum fringilla volutpat. Etiam nec efficitur nibh, nec convallis neque. Nam consectetur nibh velit, in molestie lacus feugiat vel. Duis a sagittis nunc. Vestibulum efficitur augue nec vulputate pharetra. Donec eu erat varius, fermentum nulla sit amet, pellentesque justo. 

toto

UI Expand
titlelorem2

 Fusce suscipit mi sit amet venenatis finibus. Phasellus dignissim arcu ut quam tempor posuere. Sed pretium egestas neque et vulputate. Nam odio nunc, vulputate eu ligula vel, fermentum mattis metus. Nulla malesuada dignissim nisi vitae porttitor. Suspendisse ac diam eget neque accumsan facilisis. Morbi sed metus vel ante faucibus congue vel quis nunc. Suspendisse mollis, elit a sagittis lobortis, nibh elit tincidunt tellus, at tincidunt ante nulla quis ex. Morbi id pretium urna. In hac habitasse platea dictumst. Cras sed ipsum turpis. Nunc et lacinia felis, ut tristique dolor. Sed laoreet massa vel lacus tempus tempor.

In aliquam nisl et nisl finibus feugiat. In dictum fringilla volutpat. Etiam nec efficitur nibh, nec convallis neque. Nam consectetur nibh velit, in molestie lacus feugiat vel. Duis a sagittis nunc. Vestibulum efficitur augue nec vulputate pharetra. Donec eu erat varius, fermentum nulla sit amet, pellentesque justo. 

tot2

CSS Stylesheet
html .rwui_expandable_item {
  background: #c0ffc0;
}




 LE SECOND (BLUE) CSS SERA SUREMENT APPLIQUER A TOUS


Background Color
colorBLUE
Développer
titlelorem1

 Fusce suscipit mi sit amet venenatis finibus. Phasellus dignissim arcu ut quam tempor posuere. Sed pretium egestas neque et vulputate. Nam odio nunc, vulputate eu ligula vel, fermentum mattis metus. Nulla malesuada dignissim nisi vitae porttitor. Suspendisse ac diam eget neque accumsan facilisis. Morbi sed metus vel ante faucibus congue vel quis nunc. Suspendisse mollis, elit a sagittis lobortis, nibh elit tincidunt tellus, at tincidunt ante nulla quis ex. Morbi id pretium urna. In hac habitasse platea dictumst. Cras sed ipsum turpis. Nunc et lacinia felis, ut tristique dolor. Sed laoreet massa vel lacus tempus tempor.

toto

UI Expand
titlelorem2

In aliquam nisl et nisl finibus feugiat. In dictum fringilla volutpat. Etiam nec efficitur nibh, nec convallis neque. Nam consectetur nibh velit, in molestie lacus feugiat vel. Duis a sagittis nunc. Vestibulum efficitur augue nec vulputate pharetra. Donec eu erat varius, fermentum nulla sit amet, pellentesque justo. 

tot2

CSS Stylesheet
html .rwui_expandable_item {
  background: BLUE;
}



Test de css avec 

Inclusion d'extrait
CSS_bas_Page
CSS_bas_Page
nopaneltrue