Versions Compared

Old Version 59

changes.mady.by.user Stéphane Denis

Saved on

compared with

New Version Current

changes.mady.by.user Stéphane Denis

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Test Équipes


Lien deux

Button Hyperlink
titleLien vers onglet 3 wikiétudiant
typeprimary
urlhttps://wiki.umontreal.ca/spaces/WIKIPSY/pages/526320411/longue+page#longuepage-trois
Button Hyperlink
titleLien deux local
typestandard
url#deux
Button Hyperlink
titleOnlget 2 groupe 1 v2
typeprimary
urlhttps://wiki.umontreal.ca/spaces/CUDP/pages/387875384/Test+%C3%89quipes#deux

1ere section


Tabs Group | Vectors (Formerly: SP Tabs group)
dispositionhorizontal
color#403294
Tab Pane | Vectors (Formerly: SP Tab pane)
anchorun
nameun

Fusce rutrum ante eu libero tincidunt, eget molestie tellus rutrum. Aliquam orci nisl, viverra ut nulla ut, facilisis sollicitudin diam. Maecenas in interdum magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas blandit quam quis efficitur hendrerit. Proin quis tincidunt eros, at tempor eros. Proin vulputate volutpat lorem et finibus. Praesent tincidunt, risus eu pretium pellentesque, nulla velit facilisis augue, at scelerisque dolor lacus sit amet sapien. Nullam maximus tempus rutrum. Phasellus laoreet fermentum ipsum, vehicula porta velit mollis ac. In turpis justo, elementum vitae porta id, imperdiet porttitor nisl.

ceici est un oine vers LaPresse

Nunc in velit nec augue porttitor egestas sit amet eget velit. Phasellus convallis efficitur arcu, ac scelerisque eros aliquet quis. Cras ultricies sem rhoncus neque ornare, quis pellentesque mi tempus. In eu leo convallis, finibus metus sed, cursus ante. Nullam aliquam fermentum accumsan. Morbi id nisl ut nisl tempor mollis et nec magna. Aenean at orci sit amet leo pulvinar efficitur. Maecenas eu aliquet arcu. Ut nec feugiat elit. Duis eu malesuada elit. Integer suscipit ex vestibulum, malesuada augue a, eleifend dui.

Tab Pane | Vectors (Formerly: SP Tab pane)
anchordeux
namedeux

Integer luctus leo sapien, eget lacinia ex dapibus vel. Quisque fringilla tortor in arcu varius, et dignissim diam efficitur. Duis metus erat, imperdiet vulputate neque et, ullamcorper condimentum felis. Sed at felis maximus, volutpat felis in, pharetra ex. Vestibulum eget mollis tellus. Donec fermentum sed est sit amet tincidunt. Sed interdum pulvinar libero. Etiam luctus varius magna, nec convallis magna interdum ut. Mauris eget fermentum arcu, nec sollicitudin mauris. Nunc nisi dolor, vestibulum vitae justo at, dignissim pulvinar nulla. Cras porttitor justo sodales nulla venenatis, vel imperdiet erat semper.

Duis et lectus laoreet, fermentum leo at, pretium est. Suspendisse potenti. Phasellus fringilla accumsan nunc, sit amet facilisis tellus consectetur in. Quisque consectetur leo nibh, quis bibendum est fringilla ut

Tabs Container
titleHover sur le Container
directionhorizontal
Tabs Page
idTT_premier
titlePremier
classonglet1

 Morbi placerat, enim id posuere sodales, lectus nisi congue magna, vel maximus neque leo ut sem. Pellentesque a dui ac nibh tempus imperdiet nec id magna. Donec varius elementum ante in suscipit. Donec placerat pretium eros, ut dictum augue imperdiet sit amet. Cras hendrerit egestas tortor, sit amet ultricies diam aliquam non. Nam porta, sapien nec venenatis aliquam, purus mauris maximus turpis, ut rutrum neque orci congue mi. Ut tincidunt nulla at purus molestie blandit. Sed leo dui, tempor et elit et, sagittis blandit leo. Aenean dui nulla, iaculis elementum dolor vel, ultricies pretium purus. Suspendisse accumsan nunc et libero efficitur luctus. Duis cursus elementum mi quis iaculis. Phasellus sit amet tellus ut purus pretium suscipit a ut eros. Vivamus eget odio diam. Curabitur sed purus vel ante luctus ullamcorper. Maecenas nec ipsum ex.

Aenean mattis convallis dui vel ullamcorper. In condimentum tincidunt risus a rutrum. Morbi ultrices elit et sapien hendrerit pretium. Fusce volutpat non elit eget aliquet. Donec ultrices sem ut volutpat malesuada. Quisque consequat ultrices diam et accumsan. Phasellus tellus elit, suscipit eget mauris eget, dictum malesuada ipsum. Sed posuere ex porttitor lectus elementum, eget aliquet eros sagittis. Ut faucibus auctor lacinia. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nunc luctus erat odio, eget hendrerit nibh tempus luctus. Proin fermentum interdum molestie. Integer cursus, sapien eu placerat malesuada, dui dolor ullamcorper diam, et scelerisque augue diam sit amet dui. Cras sed turpis a est venenatis commodo eu sit amet diam. Mauris maximus mi in lectus accumsan, suscipit accumsan eros commodo.

Quisque maximus eu felis sed auctor. Praesent fringilla dui eget rutrum lacinia. Aenean venenatis tincidunt quam vitae vehicula. Aliquam suscipit venenatis velit, nec tincidunt dolor accumsan vitae. Nunc lacinia porttitor sem et dignissim. Aenean varius est nulla, nec viverra velit pellentesque non. Donec aliquam quam placerat, ultrices lectus nec, laoreet diam. Praesent hendrerit fringilla lectus vitae sodales. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec id mattis ex, ut ultricies ligula. Phasellus bibendum, metus ut mattis semper, mi orci placerat sapien, eget mattis risus nunc et mauris. Maecenas sit amet diam id orci dapibus vulputate et quis nibh. Integer sit amet venenatis dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur sit amet finibus lacus. 

Praesent semper dignissim diam quis tincidunt. Praesent consequat leo at aliquet feugiat. Phasellus ut tortor vitae ipsum pulvinar auctor. Curabitur congue, sem vitae pellentesque aliquet, mauris risus pretium neque, vel molestie nisl nibh non justo. Pellentesque et convallis purus. Mauris at massa pulvinar, aliquam eros eget, lobortis ex. Proin ut vestibulum sapien.

Fusce rutrum ante eu libero tincidunt, eget molestie tellus rutrum. Aliquam orci nisl, viverra ut nulla ut, facilisis sollicitudin diam. Maecenas in interdum magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas blandit quam quis efficitur hendrerit. Proin quis tincidunt eros, at tempor eros. Proin vulputate volutpat lorem et finibus. Praesent tincidunt, risus eu pretium pellentesque, nulla velit facilisis augue, at scelerisque dolor lacus sit amet sapien. Nullam maximus tempus rutrum. Phasellus laoreet fermentum ipsum, vehicula porta velit mollis ac. In turpis justo, elementum vitae porta id, imperdiet porttitor nisl.

Nunc in velit nec augue porttitor egestas sit amet eget velit. Phasellus convallis efficitur arcu, ac scelerisque eros aliquet quis. Cras ultricies sem rhoncus neque ornare, quis pellentesque mi tempus. In eu leo convallis, finibus metus sed, cursus ante. Nullam aliquam fermentum accumsan. Morbi id nisl ut nisl tempor mollis et nec magna. Aenean at orci sit amet leo pulvinar efficitur. Maecenas eu aliquet arcu. Ut nec feugiat elit. Duis eu malesuada elit. Integer suscipit ex vestibulum, malesuada augue a, eleifend dui.

Suspendisse vehicula dictum sapien non scelerisque. Suspendisse imperdiet neque quam. In quis justo tellus. Nunc id arcu sed erat volutpat blandit vitae ut turpis. Aliquam laoreet, tortor at lacinia congue, leo orci bibendum libero, ut molestie leo quam finibus augue. Mauris id nulla at nisl malesuada ultrices vel ut sem. Pellentesque tincidunt massa arcu, a suscipit eros tincidunt vitae. Nunc tristique vel quam ut ullamcorper. In mattis sodales ipsum. Praesent sodales est eget tortor luctus tristique. 

Tab Pane | Vectors (Formerly: SP Tab pane)
anchortrois
nametrois

Anchor
in3
in3
Sed volutpat quis enim sit amet lobortis. Praesent nec vehicula nisi, at malesuada leo. Donec tincidunt feugiat convallis. Phasellus ultricies sollicitudin est, at tincidunt ligula imperdiet tincidunt. Nullam fermentum pharetra ante, sed auctor ligula pulvinar sed. Pellentesque placerat quam eros, at auctor sem dictum feugiat. In id nibh pellentesque, maximus metus ac, ultricies velit. Fusce nec ligula ut velit convallis laoreet. Nulla risus enim, facilisis eget ex vehicula, sagittis dapibus metus.

Phasellus felis tellus, aliquet ut eleifend et, pulvinar vitae eros. Cras mattis eros nec metus imperdiet, ut dapibus tellus finibus. Sed tempor est eu enim congue, eu mollis nibh ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique, tortor eu pellentesque ornare, quam dolor blandit mi, ac finibus nunc magna quis ligula. Etiam dictum nibh eget enim ultrices molestie. Sed eget elit porttitor, mollis mi sagittis, tristique ex. Duis id ante facilisis, vehicula leo sit amet, scelerisque enim. Nam vulputate ligula vel lectus consectetur, ut tristique leo finibus. Sed euismod enim in ipsum euismod, a faucibus dui tristique. Nam consequat venenatis tincidunt.

Nullam volutpat magna vel semper luctus. Nam cursus sem quam, nec faucibus tortor consequat ut. Nulla sed hendrerit massa, id lobortis magna. Proin convallis, quam vel ullamcorper placerat, elit urna accumsan lorem, sed molestie libero massa nec enim. Duis lobortis mauris eget sapien posuere, a lobortis lacus iaculis. Nullam in maximus lorem, sit amet volutpat augue. Aliquam tellus purus, vehicula vel dapibus at, varius fermentum purus

Tabs Page
titleCeci est le 2e onglet
Aenean mattis convallis dui vel ullamcorper. In condimentum tincidunt risus a rutrum. Morbi ultrices elit et sapien hendrerit pretium. Fusce volutpat non elit eget aliquet. Donec ultrices sem ut volutpat malesuada. Quisque consequat ultrices diam et accumsan. Phasellus tellus elit, suscipit eget mauris eget, dictum malesuada ipsum. Sed posuere ex porttitor lectus elementum, eget aliquet eros sagittis. Ut faucibus auctor lacinia

. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae;

Nunc luctus erat odio, eget hendrerit nibh tempus luctus. Proin fermentum interdum molestie. Integer cursus, sapien eu placerat malesuada, dui dolor ullamcorper diam, et scelerisque augue diam sit amet dui. Cras sed turpis a est venenatis commodo eu sit amet diam. Mauris maximus mi in lectus accumsan, suscipit accumsan eros commodo. 
Tabs Page
titleTroisieme onglet

 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tristique semper massa id consequat. Phasellus nibh urna, euismod at posuere vel, rhoncus vitae ipsum. Maecenas quis arcu condimentum, dapibus lectus ac, gravida lorem. Ut luctus lectus eu porta tincidunt. Fusce laoreet lacinia mollis. Nullam accumsan, sem sed lobortis volutpat, magna eros ultrices nisl, at tempus nisi urna vitae mauris. Nulla a quam erat.

Sed feugiat risus vel purus viverra ultrices. In eleifend enim ut ligula pharetra, at scelerisque metus malesuada. Ut dapibus lorem eget congue lobortis. Nam sit amet dictum massa. Curabitur auctor, sem in dictum sagittis, ex libero semper erat, et faucibus nunc quam ut elit. Mauris eros ante, suscipit sollicitudin egestas et, congue ut ante. Nulla facilisi. Cras scelerisque est leo, at semper eros lacinia non. Aliquam sollicitudin erat vel justo elementum venenatis. Duis facilisis, ligula fermentum pharetra gravida, nisl neque lacinia turpis, ut imperdiet tortor lacus eget metus.

Morbi placerat, enim id posuere sodales, lectus nisi congue magna, vel maximus neque leo ut sem. Pellentesque a dui ac nibh tempus imperdiet nec id magna. Donec varius elementum ante in suscipit. Donec placerat pretium eros, ut dictum augue imperdiet sit amet. Cras hendrerit egestas tortor, sit amet ultricies diam aliquam non. Nam porta, sapien nec venenatis aliquam, purus mauris maximus turpis, ut rutrum neque orci congue mi. Ut tincidunt nulla at purus molestie blandit. Sed leo dui, tempor et elit et, sagittis blandit leo. Aenean dui nulla, iaculis elementum dolor vel, ultricies pretium purus. Suspendisse accumsan nunc et libero efficitur luctus. Duis cursus elementum mi quis iaculis. Phasellus sit amet tellus ut purus pretium suscipit a ut eros. Vivamus eget odio diam. Curabitur sed purus vel ante luctus ullamcorper. Maecenas nec ipsum ex. 

Tooltip
idTT_premier
textCeci est un tooltip du premier onglet. Auncune personnlaisation.

Vivamus mollis ipsum tortor, vel egestas massa malesuada et. Duis dictum leo id justo aliquet facilisis.

Duis cursus fermentum ante vitae sollicitudin. Nunc ullamcorper, diam id lobortis ullamcorper, eros purus dapibus diam, quis mollis nisi nunc mattis libero. Vestibulum accumsan hendrerit porta. Sed a nunc auctor, interdum dolor a, dictum est. Curabitur et mattis leo, ut gravida metus. Vestibulum a libero in mauris luctus facilisis sed quis orci. Nulla mollis nibh velit, ac aliquam est eleifend quis. Integer fermentum scelerisque lectus sit amet iaculis.

2e section


Astuce

Astuce pour créé un hyper lien vers un onglet.  Clic sur l'onglet pour l'ouvrir et clic droit du l'onglet : "copier le lien".  IL FAUT que la balise "anchor" de l'onglet soit remplie. 

Observation

Certain changement dans les CSS affectent TOUS les groupes de Macro d'une même page sans distinction.  

Il y a malheuruesement très peu de Macro permettant de ciblé directement un oglet ou un objet d'on onglet. 

Tabs Group | Vectors (Formerly: SP Tabs group)
dispositionhorizontal
color#36B37E
Tab Pane | Vectors (Formerly: SP Tab pane)
anchorun2
nameun_2

Fusce rutrum ante eu libero tincidunt, eget molestie tellus rutrum. Aliquam orci nisl, viverra ut nulla ut, facilisis sollicitudin diam. Maecenas in interdum magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas blandit quam quis efficitur hendrerit. Proin quis tincidunt eros, at tempor eros. Proin vulputate volutpat lorem et finibus. Praesent tincidunt, risus eu pretium pellentesque, nulla velit facilisis augue, at scelerisque dolor lacus sit amet sapien. Nullam maximus tempus rutrum. Phasellus laoreet fermentum ipsum, vehicula porta velit mollis ac. In turpis justo, elementum vitae porta id, imperdiet porttitor nisl.

Nunc in velit nec augue porttitor egestas sit amet eget velit. Phasellus convallis efficitur arcu, ac scelerisque eros aliquet quis. Cras ultricies sem rhoncus neque ornare, quis pellentesque mi tempus. In eu leo convallis, finibus metus sed, cursus ante. Nullam aliquam fermentum accumsan. Morbi id nisl ut nisl tempor mollis et nec magna. Aenean at orci sit amet leo pulvinar efficitur. Maecenas eu aliquet arcu. Ut nec feugiat elit. Duis eu malesuada elit. Integer suscipit ex vestibulum, malesuada augue a, eleifend dui.

Tab Pane | Vectors (Formerly: SP Tab pane)
anchordeux2
namedeux_2

Integer luctus leo sapien, eget lacinia ex dapibus vel. Quisque fringilla tortor in arcu varius, et dignissim diam efficitur. Duis metus erat, imperdiet vulputate neque et, ullamcorper condimentum felis. Sed at felis maximus, volutpat felis in, pharetra ex. Vestibulum eget mollis tellus. Donec fermentum sed est sit amet tincidunt. Sed interdum pulvinar libero. Etiam luctus varius magna, nec convallis magna interdum ut. Mauris eget fermentum arcu, nec sollicitudin mauris. Nunc nisi dolor, vestibulum vitae justo at, dignissim pulvinar nulla. Cras porttitor justo sodales nulla venenatis, vel imperdiet erat semper.

Duis et lectus laoreet, fermentum leo at, pretium est. Suspendisse potenti. Phasellus fringilla accumsan nunc, sit amet facilisis tellus consectetur in. Quisque consectetur leo nibh, quis bibendum est fringilla ut. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Praesent semper dignissim diam quis tincidunt. Praesent consequat leo at aliquet feugiat. Phasellus ut tortor vitae ipsum pulvinar auctor. Curabitur congue, sem vitae pellentesque aliquet, mauris risus pretium neque, vel molestie nisl nibh non justo. Pellentesque et convallis purus. Mauris at massa pulvinar, aliquam eros eget, lobortis ex. Proin ut vestibulum sapien.

Fusce rutrum ante eu libero tincidunt, eget molestie tellus rutrum. Aliquam orci nisl, viverra ut nulla ut, facilisis sollicitudin diam. Maecenas in interdum magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas blandit quam quis efficitur hendrerit. Proin quis tincidunt eros, at tempor eros. Proin vulputate volutpat lorem et finibus. Praesent tincidunt, risus eu pretium pellentesque, nulla velit facilisis augue, at scelerisque dolor lacus sit amet sapien. Nullam maximus tempus rutrum. Phasellus laoreet fermentum ipsum, vehicula porta velit mollis ac. In turpis justo, elementum vitae porta id, imperdiet porttitor nisl.

Nunc in velit nec augue porttitor egestas sit amet eget velit. Phasellus convallis efficitur arcu, ac scelerisque eros aliquet quis. Cras ultricies sem rhoncus neque ornare, quis pellentesque mi tempus. In eu leo convallis, finibus metus sed, cursus ante. Nullam aliquam fermentum accumsan. Morbi id nisl ut nisl tempor mollis et nec magna. Aenean at orci sit amet leo pulvinar efficitur. Maecenas eu aliquet arcu. Ut nec feugiat elit. Duis eu malesuada elit. Integer suscipit ex vestibulum, malesuada augue a, eleifend dui.

Suspendisse vehicula dictum sapien non scelerisque. Suspendisse imperdiet neque quam. In quis justo tellus. Nunc id arcu sed erat volutpat blandit vitae ut turpis. Aliquam laoreet, tortor at lacinia congue, leo orci bibendum libero, ut molestie leo quam finibus augue. Mauris id nulla at nisl malesuada ultrices vel ut sem. Pellentesque tincidunt massa arcu, a suscipit eros tincidunt vitae. Nunc tristique vel quam ut ullamcorper. In mattis sodales ipsum. Praesent sodales est eget tortor luctus tristique. 

Tab Pane | Vectors (Formerly: SP Tab pane)
anchortrois2
name|trois_2 etc et plus long encore|

Anchor
in3
in3
Sed volutpat quis enim sit amet lobortis. Praesent nec vehicula nisi, at malesuada leo. Donec tincidunt feugiat convallis. Phasellus ultricies sollicitudin est, at tincidunt ligula imperdiet tincidunt. Nullam fermentum pharetra ante, sed auctor ligula pulvinar sed. Pellentesque placerat quam eros, at auctor sem dictum feugiat. In id nibh pellentesque, maximus metus ac, ultricies velit. Fusce nec ligula ut velit convallis laoreet. Nulla risus enim, facilisis eget ex vehicula, sagittis dapibus metus.

Phasellus felis tellus, aliquet ut eleifend et, pulvinar vitae eros. Cras mattis eros nec metus imperdiet, ut dapibus tellus finibus. Sed tempor est eu enim congue, eu mollis nibh ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique, tortor eu pellentesque ornare, quam dolor blandit mi, ac finibus nunc magna quis ligula. Etiam dictum nibh eget enim ultrices molestie. Sed eget elit porttitor, mollis mi sagittis, tristique ex. Duis id ante facilisis, vehicula leo sit amet, scelerisque enim. Nam vulputate ligula vel lectus consectetur, ut tristique leo finibus. Sed euismod enim in ipsum euismod, a faucibus dui tristique. Nam consequat venenatis tincidunt.

Nullam volutpat magna vel semper luctus. Nam cursus sem quam, nec faucibus tortor consequat ut. Nulla sed hendrerit massa, id lobortis magna. Proin convallis, quam vel ullamcorper placerat, elit urna accumsan lorem, sed molestie libero massa nec enim. Duis lobortis mauris eget sapien posuere, a lobortis lacus iaculis. Nullam in maximus lorem, sit amet volutpat augue. Aliquam tellus purus, vehicula vel dapibus at, varius fermentum purus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Vivamus mollis ipsum tortor, vel egestas massa malesuada et. Duis dictum leo id justo aliquet facilisis.

Duis cursus fermentum ante vitae sollicitudin. Nunc ullamcorper, diam id lobortis ullamcorper, eros purus dapibus diam, quis mollis nisi nunc mattis libero. Vestibulum accumsan hendrerit porta. Sed a nunc auctor, interdum dolor a, dictum est. Curabitur et mattis leo, ut gravida metus. Vestibulum a libero in mauris luctus facilisis sed quis orci. Nulla mollis nibh velit, ac aliquam est eleifend quis. Integer fermentum scelerisque lectus sit amet iaculis.

CSS Stylesheet
/* ========================================================================== */
/* Vectors - Macro "Vectors - Onglet" (anciennement SP Onglet                 */
/* Personnalisation CSS - Notes de rétro-ingénierie                           */
/* ========================================================================== */
/* 
Détails
------- 
Date : Juillet 2026
Instance : CUP - Clinique universitaire de psychologie (wiki public: https://wiki.umontreal.ca/spaces/CUDP/overview)
Page : Test Équipes : https://wiki.umontreal.ca/spaces/CUDP/pages/387875384/Test+%C3%89quipes
10.2.14 (Nœud de cluster: 467c9b1b)
*/

/*
Objectif
--------
Documenter les sélecteurs CSS identifiés expérimentalement afin de personnaliser
le rendu de la macro Vectors « Onglet ».

Ces essais concernent uniquement la présentation visuelle (CSS).
Aucune modification fonctionnelle de la macro n'est réalisée.

Important
---------
Les sélecteurs présentés ci-dessous correspondent au HTML généré par la version
actuelle du plugin et de Confluence. Ils devront être revalidés après une mise
à jour majeure de la plateforme.

Méthode utilisée
----------------
- Inspection du DOM avec les outils de développement du navigateur (F12).
- Validation expérimentale des propriétés CSS.
- Conservation uniquement des sélecteurs jugés suffisamment stables.
*/

/* =========================================================================== */
/* Personnalisation globale                                                    */
/* Les règles suivantes affectent toutes les instances de la macro présentes   */
/* dans la page.                                                               */
/* =========================================================================== */


/* Barre de navigation contenant l'ensemble des onglets */
.tabs-menu
{
    background: blue;
    /* opacity: 0.5; */      /* Transparence de la barre complète */
}


/* Conteneur de chaque onglet dans la barre de navigation */
.tabs-menu .menu-item
{
    background: green;
}


/* Onglet actuellement actif */
.tabs-menu .active-tab
{
    background: #850085;
}


/* Conteneur du contenu de l'onglet sélectionné */
.tabs-pane
{
    background: #ecfecf;          		/* Couleur d'arrière-plan */
    color: #f22222;               		/* Couleur du texte */
    font-weight: bold;

    /* opacity: 0.5; */           		/* À éviter : affecte également le texte */

    /* text-transform: uppercase; */
    /* text-align: center; */
    /* letter-spacing: 3px; */
    /* line-height: 200%; */

    /* text-shadow: 2px 2px #FF0000; */	/* Peu recommandé : diminue rapidement la lisibilité */

    /* border: 2px solid #5af7fa; */
    /* padding: 10px; */

    /*
    border-radius: 10px;
    border-style: solid;
    border-width: 1px;
    border-color: #ff40ff;
    */

    /*
    border-bottom-style: dotted;
    border-bottom-width: 5px;
    border-bottom-color: #ff40ff;

    border-right-style: solid;
    border-right-width: 10px;
    border-right-color: #aabbcc;
    */
}


/* Texte des onglets */
/* Le texte est centré par défaut par la macro. */
.tabs-menu strong
{
    color: yellow;
    /* font-style: italic; */
}


/* Hyperliens présents dans le contenu d'un onglet */
.tabs-pane a
{
    background: #B2BEB5;
    padding: 10px;
}

/*
Autres pseudo-classes disponibles :
a:link, a:visited, a:hover, a:active
*/


/* =========================================================================== */
/* Personnalisation ciblée                                                     */
/* Les règles suivantes utilisent un identifiant (ID) afin de personnaliser    */
/* un onglet ou un contenu spécifique.                                         */
/* =========================================================================== */

/*
Identifiant généré automatiquement par AUI.

À éviter en production.
Cet identifiant peut changer après une mise à jour ou selon le rendu de la page.
*/
#aui-uid-0
{
    background: #FF8C00;
}


/*
Personnalisation d'un onglet à partir de son identifiant (Anchor)
défini dans les propriétés de la macro.
Cette méthode est stable puisqu'elle repose sur un identifiant choisi
par l'auteur de la page.
*/
#deux
{
    background: #016996;
    color: blue;

    opacity: 0.5;

    /* line-height: 60px; */
}
CSS Stylesheet
.menu-item.active-tab {
background: #971dfc;
 }

Button Hyperlink
iconadd
idBtn_Dlg
titleDialog
typeprimary
url#ID_Dialog

Tooltip
idBtn_Dlg
textCe bouton va ouvrir une boite de dialogue

Dialog
idID_Dialog
titleTest_Dialog
Span
idSPN_TT
titleVoir les détails

Choisir le bouton ci-dessous

On peu ajouter tout plein de chose la dedans.

UI Expand
titleOn aime beaucoup les UI Expand

Ceci est un UI EXpand

Morbi placerat, enim id posuere sodales, lectus nisi congue magna, vel maximus neque leo ut sem. Pellentesque a dui ac nibh tempus imperdiet nec id magna. Donec varius elementum ante in suscipit. Donec placerat pretium eros, ut dictum augue imperdiet sit amet. Cras hendrerit egestas tortor, sit amet ultricies diam aliquam non. Nam porta, sapien nec venenatis aliquam, purus mauris maximus turpis, ut rutrum neque orci congue mi. Ut tincidunt nulla at purus molestie blandit. Sed leo dui, tempor et elit et, sagittis blandit leo. Aenean dui nulla, iaculis elementum dolor vel, ultricies pretium purus. Suspendisse accumsan nunc et libero efficitur luctus. Duis cursus elementum mi quis iaculis. Phasellus sit amet tellus ut purus pretium suscipit a ut eros. Vivamus eget odio diam. Curabitur sed purus vel ante luctus ullamcorper. Maecenas nec ipsum ex. 

Button Group
Button Hyperlink
titleLa Presse - standard
typestandard
class<span class="aui-icon aui-icon-small aui-iconfont-export">Insert meaningful text here for accessibility</span>
urlhttps://www.lapresse.ca/

Button Hyperlink
titleCa aussi la Presse - Primary
typeprimary
urlhttps://www.lapresse.ca/

Button HyperlinkiconcustomtitleUn 3e bouton - Subtletypesubtleurlhttps://www.lapresse.ca/

Excerpt Include
CSS_bas_Page
CSS_bas_Page
nopaneltrue