Versions Compared

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. 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)
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. 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

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#FFAB00
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
/* ---------- Ces sélecteurs CSS sont globalaux a tous les blocs d'onglet disponible dans la page ---------- */

/* Personnalisation de toute la barre de titre */
.tabs-menu
{
	background: blue;			
    /* opacity: 0.5; */ 			/* Change l'opacite */
}

/* Personnalisation du bloc contenant tous les onglets dans la barre de titre */
.tabs-menu .menu-item
  {
	background: green;			
} 

/* Personnalisation de l'onglet actif seulement */
.tabs-menu .active-tab
 {
	background: #850085;			/* 850085 violet fonce */
}

/* Personnalisation du bloc de texte de l'onglet */ 
/* Personnalisation du bloc de texte et des bordures sont possibles */ 
.tabs-pane
{
	background: #ecfecf;  				/* Fond de tout le cadre de la boite d'onglet - ecfecf vert jaune pale*/
	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 - 222222 rouge*/
	/* opacity: 0.5;  */				/* Change l'opacite */

	/* text-shadow: 2px 2px #FF0000; */ /* Ombre porté sur le texte, moyennement utile cela l'applique a tout le texte... et rend la lecture difficile */
	/* text-align: center; */			/* Texte centre dans la bloc de texte */
    /* letter-spacing: 3px; */			/* Change l'espace entre les lettres */
	/* line-height: 200%; */ 			/* Change l'espace entre les lignes du bloc de texte */

    /* Cadre */
    /* border: 2px solid #5af7fa; */	/* Ajout d'un cadre autour de la boite d'onglet, de la couleur du texte (color) du texte OU avec un code de couleur */
  	/* padding: 10px; */				/* Ajout d'un espace autour de la boite d'onglet, va entre le cadre et la boite d'onglet */ 

    /* Cadre de la zone onglet */
    /* 
	border-radius: 10px;
    border-style: solid;
	border-width: 1px;
    border-color: #ff40ff; 
	*/

	/* Bordure individuelle - ligne du bas + droite */
	/* ff40ff fushia */
	/* aabbcc gris bleu*/
    /* 
	border-bottom-style: dotted;
 	border-bottom-width: 5px;
    border-bottom-color: #ff40ff;		

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

/* Personnalisation du texte de l'onglet */
/* Note : le texte est centré par défaut dans l'onglet */
/* Note : propriété, Bold (font-weight: bold;) non disponible, italique (font-style: italic;) et normal (font-weight: normal) oui  */
/*
.tabs-menu strong  
 {
	color: yellow;					/* Couleur de la police */         
    /* font-style: italic; */				/* Style italic */

} 
*/ 

/* Personnalisation des hyperliens */
/* Note : les selecteurs "a:link, a:visited, a:active, a:hover sont aussi disponibles */
.tabs-pane a
{
	background: #B2BEB5;				/* Fond seulement B2BEB5 gris vert*/
	padding: 10px;
}  


/* ---------- Ces sélecteurs CSS modifie de façon ciblé un onglet/propriété  ---------- */
/* Le ciblage est fait avec un IC+D ou identification unique au sélecteur */

 
/* Personnalisation du contenu de l'onglet ciblé par son ID */
#deux
{
	background: #016996;	 		
	color : blue; 	
	opacity: 0.5;				
}

/* Change la couleur du premier onglet (0) en TOUT TEMPS */
/* Ne change pas selon la sélection */
/* 2e onlet = 1, 3e onglet =2 etc.  */ 
#aui-uid-0
{
	background: #FF8C00;  /* FF8C00 sorte de oranger fonce */
line-height: 25px;
} 


Excerpt Include
CSS_bas_Page
CSS_bas_Page
nopaneltrue