Page History

Button Hyperlink

title	Lien vers onglet 3 wikiétudiant
type	primary
url	https://wiki.umontreal.ca/spaces/WIKIPSY/pages/526320411/longue+page#longuepage-trois

Button Hyperlink

title	Lien deux local
type	standard
url	#deux

Button Hyperlink

title	Onlget 2 groupe 1 v2
type	primary
url	https://wiki.umontreal.ca/spaces/CUDP/pages/387875384/Test+%C3%89quipes#deux

1ere section

Tabs Group | Vectors (Formerly: SP Tabs group)

disposition	horizontal
color	#FFAB00#403294

Tab Pane | Vectors (Formerly: SP Tab pane)

anchor	un
name	un

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)

anchor	deux
name	deux

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)

anchor	trois
name	trois

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.

2e section

Astuce

Truc Astuce pour créé un hyper lien vers un onglet. Clic sur l'onglet pour l'ouvrir ey 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)

disposition	horizontal
color	#36B37E

Tabs Group | Vectors (Formerly: SP Tabs group)

disposition	horizontal
color	#403294

Tab Pane | Vectors (Formerly: SP Tab pane)

anchor	un2
name	un_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)

anchor	deux2
name	deux_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)

anchor	trois2
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
/*

Modifier la macro ‘Onglet | Vectors (Anciennement: SP Onglet)’ */ /* Propriétés CSS indetifiées pour personnalisation */ /*

========================================================================== */

/*

ATTENTION,

Vectors

ces

modifications

Macro

CSS

"Vectors

affectent

TOUS

Onglet"

les macro ‘Onglet | Vectors (Anciennement: SP Onglet)’ */ /* présent dans la page.

(anciennement SP Onglet                 */
/*

Les

Personnalisation

changement

CSS

sont

fait

Notes

au

de

niveau

rétro-ingénierie

du

composant

et

PAS

au

niveau

ID

de

l'objet

de

la

Macro.

*/ /*

Change

la

couleur

du

fond

de

la

barre

de

menu

qui

affiche les

tabs,

 */
/*

.tabs-menu { background: #ff4040; /* Fond seulement */ } */ /* Change tous le cadre de la boite d'onglet */ /* Proprété qui affecte TOUS les onglets, possiblement au niveau de la macro groupe d'onglet */ /* et pas au niveau de l'onglet individuellement. */ .aui-tabs.horizontal-tabs { background: #ecfecf; /* Fond de tout le cadre de la boite d'onglet */ font-weight: bold; /* Police contenu de l'onglet gras */ /* text-transform: uppercase; */ /* Contenu de l'onglet en majuscule, affecte aussi le titre de l'onglet */ color: #f22222; /* Change la couleur de la police du contenu de l'onglet et pas le titre de l'onglet */ /* Cadre de la zone onglet */ /* border-radius: 10px; border-style: solid; border-width: 1px; border-color: #ff40ff; */ /* Bordure individuelle - ligne du bas + droite */ border-bottom-style: dotted; border-bottom-width: 5px; border-bottom-color: #ff40ff; border-right-style: solid; border-right-width: 10px; border-right-color: #40FF80; } /* Change la couleur du fond de l'onglet choisis - actif */ /* MAIS, le nom est lié a la couleur choisis (yellow) dans les proprités de la Macro - Groupe d'onglet */ /* a adapter selon le choix de couleur. */ /* Enleve un peu d'interet... */ /* .menu-item.yellow.active-tab { background: #76cc76; } */ /*

========================================================================== */
/* 
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.                                         */
/* =========================================================================== */

/* ATTENTION, ces modifications CSS affectent seulement l'onglet ciblé en passant le ID de l'objet de la Macro. */ /* Change la couleur du premier onglet seulement */ /* le anchor comme référence ?? */ /* Intéressant... */ /* #un { background: #76cc76; /* fond */ color : blue; /* police */ } */ /* Change la couleur du premier onglet (0) en TOUT TEMPS */ /* Ne change pas selon la sélection */ /* Moyennement utile */ /* 2e onlet = 1, 3e onglet =2 etc. */ /* #aui-uid-0 { background: #76cc76; } */


/*
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; */
}

Excerpt Include

	CSS_bas_Page
	CSS_bas_Page
nopanel	true

Space shortcuts

Recherche dans l'Espace CUP :

Arborescence des pages

Versions Compared

Old Version 175

New Version Current

Key

Astuce

Observation