...

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 :

...

portlet.css* Styles de compatibilité avec les anciennes versions d'uPortal d’uPortal (peuvent être encore utilisés par des canaux ou 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 :

...

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 L’ajout de styles devrait se faire dans esup-portal.css ou à la fin de portal.css/portlet.css

...

• portalPageheader : En-tête* portalPageBar : Barre d'options 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 d’onglets et menus déroulants du portail. Modifier dans portal.css les éléments basés sur #portalNavigation (id de l'élément l’élément uPortal) et .fl-tabs (classe Fluid de présentation d'ongletsd’onglets)
• portalPageBody : portalSideBar : Barre de côté
  portalPageBodyColumns : Canaux disposés en colonnes
  fl-widget : Structure d'affichage d'une d’affichage d’une fenêtre
  fl-widget-titlebar : Barre de titre d'une d’une fenêtre
  up-portlet-titlebar : Barre de titre d'un d’un canal
  fl-widget-content : Contenu d'une d’une fenêtre* portlaPageFooter : Pied de page
  

...

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

• portlet-toolbar : Barre d'outilsd’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)