Architecture des fichiers de ressources

Les fichiers servant à l'habillage du portail sont dans deux structures indépendantes :

Serveur de ressources

url : /ResourceServingWebapp

Contient les bibliothèques externes (tierces parties) de styles, scripts et icônes utilisées par uPortal

uPortal

contexte Tomcat : uPortal

Contient les bibliothèques internes (uPortal) de styles, scripts et icônes utilisées par uPortal

Suite

Déclaration des ressources dans uPortal

Les ressources utilisées (css, scripts) sont déclarées dans le fichier custom/uPortal/uportal-war/src/main/webapp/media/skins/<ma_structure>/<mon_theme>/skin.xml

Pour ajouter une ressources, il faut la déclarer entre balises (<css> pour une feuille de style, <js> pour un script javascript) dans ce fichier puis redéployer le portail

Principe d'utilisation des styles

Styles "fluid" :

Préfixés par "fl-" : Ils servent à définir la position des éléments et leur rôle "général" : Par exemple :

<div class="fl-col-flex2">
   <div class="fl-col-flex50">
   ...
   </div>
   <div class="fl-col-flex50">
   ...
   </div>
</div>

Représente deux colonnes de taille égale

Les styles du framework "fluid" sont dans le serveur de ressources : /ResourceServingWebapp/rs/fluid : Ils ne sont pas à modifier

Complément uPortal à Fluid :

Ce sont des styles supplémentaires ajoutés au framework "fluid" par uPortal. Même rôle que les styles Fluid. Ils sont dans le contexte uPortal :

uPortal/media/skins/universality/common/css/layout.css

Styles uPortal propres au thème (skin) choisi par l'utilisateur :

Ils définissent la forme précise des éléments. Ils sont répartis dans 3 feuilles :

• Styles utilisés par le portail : Ajout de styles et surcharge des styles FSS (toujours préfixés par .up). Contient les styles des éléments de structure du portail (en-tête, fenêtres, menus, etc.)

portal.css* Styles utilisés par les portlets : JSR-168 et styles ajoutés par uPortal. Contient les styles des éléments des portlets (titres, sous-titres, listes, messages, etc.)

portlet.css* Styles de compatibilité avec les anciennes versions d’uPortal (peuvent être encore utilisés par des canaux ou portlets)

legacy.css

Styles ajoutés par ESUP et par les portlets

• Style uPortal + portlets : Surcharge des feuilles portal.css et portlet.css, ou ajout de nouveaux styles.esup-portal.css* Styles des portlets esup-commonscommons.css* Styles spécifiques aux portlets : pour exemplelecture-portlet.css helpdesk.css

Aggrégation des CSS

Par défaut les CSS sont aggrégés. Pour le débuggage il est possible de désactiver l'aggrégation :

• en utilisant "Activer/désactiver l'aggrégation des CSS/Javascripts" dans "Administration du portail"
• en démarrant tomcat avec l'option java -Dorg.jasig.resource.aggr.util.aggregated_theme=false

Personnalisation

Le thème FSS (fss-theme-coal) peut être remplacé par un des autres thèmes fournis par Fluid :

• Mist
• Rust
• Slate

Sauf pour le skin HC, qui doit conserver le thème FSS fss-theme-hc

Les personnalisations peuvent se faire directement dans portal.css et portlet.css ou en surchargeant dans esup-portal.css : Si un autre thème que Universality a été fait (cf Ajout d'un thème et d'un habillage), on peut modifier directement portal.css

La structure des styles (hiérarchie) doit être conservée dans portal.css et portlet.css : aucune suppression de définition, au besoin la laisser vide

L’ajout de styles devrait se faire dans esup-portal.css ou à la fin de portal.css/portlet.css

Eléments à personnaliser

Eléments de structure du portail

Ces éléments sont dans la feuille portal.css

• portalPageheader : En-tête* portalPageBar : Barre d’options du portail. Modifier dans portal.css les éléments basés sur #portalpageBarLinks, personnaliser si besoin les éléments :
• portalPageBarHome
• portalPageBarAdmin
• portalPageBarCustom
• portalPageBarSitemap
• portalPageBarHelp
• portalPageBarLogout
• portalLogo* portalNavigation : Barre d’onglets et menus déroulants du portail. Modifier dans portal.css les éléments basés sur #portalNavigation (id de l’élément uPortal) et .fl-tabs (classe Fluid de présentation d’onglets)
• portalPageBody : portalSideBar : Barre de côté
  portalPageBodyColumns : Canaux disposés en colonnes
  fl-widget : Structure d’affichage d’une fenêtre
  fl-widget-titlebar : Barre de titre d’une fenêtre
  up-portlet-titlebar : Barre de titre d’un canal
  fl-widget-content : Contenu d’une fenêtre* portlaPageFooter : Pied de page
  

Eléments de structure des portlets

Voir la portlet esup-portlet-structure qui reprend les principaux éléments, en particulier :

• portlet-toolbar : Barre d’outils
• portlet-title : Titre du canal
• h3 portlet-section-header : Titre de section
• h4 portlet-section-subheader : Sous-titre de section
• h5 portlet-section- subheader : Sous-titre de section
• fl-listmenu : Liste verticale
• fl-pager : pagination
• portlet-msg-… : Messages (info, alerte, erreur, etc.)
• + autres éléments de base (liens, tableaux, formulaires, boutons)