Look du portail

Le look du portail peut être modifié en agissant sur trois partie :

• Les images : icones, bandeau, etc ...
• La CSS : couleurs, police, disposition des zones
• La XSL : pour des modification de structure HTML

Le portail fonctionne avec un mécanisme de skin, on peut avoir plusieur skin disponible dans le portail et l'utilisateur puet choisir celui qu'il désiré utiliser.
Les images et la CSS se trouve inclus dans le skin.

Les SKINS 

Ils se trouve dans le dossier uPortal/webpages/media/org/jasig/portal/layout/tab-column/xhtml-theme

Le dossier contenant le skin doit se nommé du nom du skin.
Par exemple le skin esup de base dans le package : uPortal/webpages/media/org/jasig/portal/layout/tab-column/xhtml-theme/esup

Le skin se découpe comme suit :

•  [SKIN_NAME]

  • controls : images des boutons de controle dans la XSL (focus, supprimer un canal, etc ...)
  • institutional : plus orienté sur les bandeau institutionnel
  • navigation : images servant a la navigation (onglet, liste de canaux, etc ...)
  • skin

    • [SKIN_NAME].css : css du skin

    • [SKIN_NAME]_thumb.gif : image miniature utilisé lors du choix du skin

Découpage de la page

 Voici le découpage des zone HTML de la base (pour vous faciliter la compréhension des style)

1. BODY
   1. portal-page-header
      1. logo
      2. welcome (bandeau de lien en haut a droite)
      3. tabs (les onglets)
   2. portal-page-body
      1. preference-items (bandeau des préférences)
      2. columns-table
         1. colonne_sAAA

1. 1. 1. 1. 1. portlet_nXXX
               1. toolbar_nXXX
               2. portletContent_nXXX
            2. portlet_nYYY
               1. toolbar_nYYY
               2. portletContent_nYYY
         2. colonne_sBBB
            1. portlet_nZZZ
               1. toolbar_nZZZ
               2. portletContent_nZZZ
   2. portal-page-footer
      1. pied de page

Déclarer le skin

Pour que le portail connaisse le skin il faut le déclarer dans le fichier Portal/webpages/media/org/jasig/portal/layout/tab-column/xhtml-theme/skinList.xml

<?xml version="1.0"?>

<skins>
  <skin>
    <skin>[SKIN_NAME]</skin>
    <skin-name>[NOM AFFICHE A L'UTILISATEUR]</skin-name>
    <skin-description>[DESCRIPTION AFFICHE A L'UTILISATEUR]</skin-description>
  </skin>

Définir les skins par défaut

Une fois que votre skin est déclaré dans le portail et que vous l'avez testé avec un compte utilisateur via le menu préférence, il est
utile de pouvoir l'appliquer par défaut à un profil d'utilisateur. Pour ce faire il faut modifier la base de données du portail.

Si l'on se penche sur la table UP_SS_THEME :

SELECT *
FROM UP_SS_THEME

on obtient la valeur du SS_ID du thème esup "ESUP DLM XHTML Theme", qui est utilisé par défaut dans Esup-Portail, par la suite la valeur de ce SS_ID sera désignée par [ESUP_THEME_SS_ID].

Pour modifier le skin par défaut :

Ici on va utiliser comme skin par défaut (pour les utilisateurs anonymes et authentifiés) le skin que nous avons créé lors précédemment
Supposons que votre skin se nomme [SKIN_NAME] alors il faut lancer la requête suivante :

UPDATE UP_SS_THEME_PARM SET PARAM_DEFAULT_VAL = '[SKIN_NAME]'
WHERE UP_SS_THEME_PARM.SS_ID =[ESUP_THEME_SS_ID] AND UP_SS_THEME_PARM.PARAM_NAME = 'skin' AND UP_SS_THEME_PARM.TYPE =1 LIMIT 1 ;

On modifie ici le skin pour le thème ESUP, dont le SS_ID a pour valeur [ESUP_THEME_SS_ID].

Pour modifier le skin par défaut des utilisateurs connectés :

Par défaut les nouveaux utilisateurs héritent du skin de l'utilisateur 'demo' :
Le USER_ID du user 'demo' est disponible dans la table UP_USER, ici il aura pour valeur USERDEMO_SS_ID.

Il suffit donc de spécifier que la skin de l'utilisateur demo pour le thème ESUP
est [SKIN_NAME].

INSERT INTO `UP_SS_USER_PARM` ( `USER_ID` , `PROFILE_ID` , `SS_ID` , `SS_TYPE` , `PARAM_NAME` , `PARAM_VAL` )
VALUES (
'2', '1', '[ESUP_THEME_SS_ID]', '[USERDEMO_SS_ID]', 'skin', '[SKIN_NAME]'
);

Pour gérer ces paramètres automatiquement lors d'un redéploiement du portail

Le fichier qui permet d'initialiser la base de données (lors du ant db.init) se nomme esup-2.6-esup-xxx/update/uPortal/properties/db/esup-data.xml. Il s'agit donc de le recopier dans esup-2.6-esup-xxx/custom/uPortal/properties/db/esup-data.xml puis de modifier ce dernier en deux endroits :

Pour modifier le skin par défaut :

<table>
    <name>UP_SS_THEME_PARM</name>
    <rows>
...
        <row>
            <column><name>SS_ID</name><value>[ESUP_THEME_SS_ID]</value></column>
            <column><name>PARAM_NAME</name><value>skin</value></column>
-- on remplace esup par [SKIN_NAME] dans la ligne ci-dessous :
            <column><name>PARAM_DEFAULT_VAL</name><value>[SKIN_NAME]</value></column>
            <column><name>PARAM_DESCRIPT</name><value>Esup themed skin</value></column>
            <column><name>TYPE</name><value>1</value></column>
        </row>
...
    <rows>
</table>

Pour modifier le skin par défaut des utilisateurs connectés :

<table>
    <name>UP_SS_USER_PARM</name>
    <rows>
...
-- 
        <row>
            <column><name>USER_ID</name><value>[USERDEMO_SS_ID]</value></column>
            <column><name>PROFILE_ID</name><value>1</value></column>
            <column><name>SS_ID</name><value>[ESUP_THEME_SS_ID]</value></column>
            <column><name>SS_TYPE</name><value>2</value></column>
            <column><name>PARAM_NAME</name><value>skin</value></column>
            <column><name>PARAM_VAL</name><value>[SKIN_NAME]</value></column>
        </row>
...
    </rows>
</table>

La XSL

Si vous voulez modifier la structure de la page (HTML) vous devez modifier la XSL de rendu du portail.

Ellle se trouve dans uPortal/webpages/stylesheets/org/esupportail/portal/layout/tab-column/xhtml-theme/xhtml-theme.xsl

Si vous venez a la modifier faite attention a conserver la tag de remplacement utilisé par le package (<title>@esup.title.html@</title>)