Thème Universality
Le thème universality est le thème par défaut utilisé par uPortal 3 pour les navigateurs web. Ce thème utilise la structure "dlm tabs and columns".
Architecture
TODO : Liste feuilles XSLT et rôles
Structure
Le thème universality organise et présente les éléments de la structure de la façon suivante :
Ceci se traduit en termes de rendu html par les éléments suivants :
<body id="portal" class="fl-theme-uportal3"> <div id="portalPage" class="logged-in dashboard fl-container-flex"> <div id="portalPageInner" class="layout-1-columns sidebar sidebar-right-200 "> <div id="portalPageHeader" class="fl-container-flex"> <div id="portalPageHeaderInner"> <div id="portalPageBar"></div> <div id="portalWelcome"></div> <div id="portalSkipNav"></div> <div id="portalLogo"></div> </div> </div> <div id="portalNavigation"> <div id="portalNavigationInner" class="header"> <ul id="portalNavigationList" class="fl-tabs"></ul> <div id="portalNavigationSubrow" class="fl-tab-content"></div> </div> </div> <div id="portalPageBody" class="fl-container-flex"> <div id="portalPageBodyInner"> <div id="portalPageBodyLayout" class="fl-col-mixed-200"> <div id="portalSidebar" class="fl-col-fixed fl-force-right"></div> <div class="fl-col-flex-right"> <div id="portalFragAdminList" class="fl-widget"></div> <div id="portalPageBodyTitleRow"></div> <div id="portalPageBodyColumns" class="fl-col-flex"> <div id="column_u21l1s6" class="portal-page-column fl-col-flex50 left"> <div id="inner-column_u21l1s6" class="portal-page-column-inner"> <div id="portlet_u21l1n7" class="portlet-container cwebmail moveable orderable-default" role="..."> <div class="portlet-container-inner"> <div class="portlet-top">...</div> <div id="toolbar_u21l1n7" class="portlet-toolbar ui-draggable">...</div> <div id="portletContent_u21l1n7" class="portlet-content fl-fix">...</div> <div class="portlet-bottom">...</div> </div> </div> </div> </div> <div id="column_s66" class="portal-page-column fl-col-flex50 right">...</div> </div> </div> </div> </div> </div> <div id="portalDropWarning" class="drop-warning"></div> <div id="portalPageFooter" class="fl-container-flex"> <div id="portalPageFooterInner"> <div id="portalPageFooterLinks"></div> <div id="portalProductAndVersion"></div> <div id="portalCopyright"></div> <div id="silkIconsAttribution"></div> </div> </div> <div id="portalFlyoutNavigation" class="portal-navigation"></div> </div> </div> </body>
Notes :
- Le rendu ci-dessous est un exemple correspondant à l'affichage d'un onglet (tous les canaux) en deux colonnes avec une barre de côté
- Les éléments de la structure sont rendus par des identifiants (id) lorsqu'ils sont uniques (ex: portalPage) , sinon par des classes (ex: portal-page-column)
- Les classes uPortal sont surchargées par des classes FLUID qui déterminent la position et la mise en page des éléments (voir habillage)
- Les classes ajoutées par FLUID commencent toutes par "fl-". Elles sont sémantiques et leur nom peut varier en fonction des éléments rendus (fl-col-flex50 => colonne taille 50%), voir habillage