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 :
| Pas de format |
|---|
<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