...

Apparence du portail

Le look L'apparence du portail peut être modifié modifiée en agissant sur trois partie parties :

• Les images : icones, bandeau, etc...
• Les feuilles de styles (CSS) La CSS : couleurs, police, disposition des zones
• La feuille de transformation (XSL) : pour des modification de structure HTML

Le portail fonctionne avec un mécanisme de thème (skin en anglais), on peut avoir plusieur skin disponible plusieurs thèmes disponibles dans le portail et l'utilisateur puet peut choisir celui qu'il désiré désire utiliser.
Les images et la CSS se trouve inclus sont inclues dans le skinthème.

Les

...

thèmes

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

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

Le skin thème se découpe décompose comme suit :

• Balise Wiki \ [SKIN_NAME\]
  • controls : images des boutons de controle contrôle dans la XSL (focusagrandir, supprimer un canal, etc. .. )
  • institutional : plus orienté sur les images et logos autres du bandeau institutionnel
  • navigation : images servant a la navigation (onglet, liste de canaux, etc ...)
  • skin
    unmigrated-wiki-markup
    • \[SKIN_NAME\].css : css du skin: styles utilisés par le thème
    • Balise Wiki\[SKIN_NAME\]_thumb.gif : image miniature utilisé lors du choix du skinchoix du thème

Création d'un thème

Le plus simple est de partir du thème de base esup :

Copier update/uPortal/webpages/media/org/jasig/portal/layout/tab-column/xhtml-theme/esup

dans custom/uPortal/webpages/media/org/jasig/portal/layout/tab-column/xhtml-theme/<nom-du-nouveau-theme>

Par la suite, comme pour toute personnalisation, vous travaillerez dans le répertoire custom et déploierez avec les tâches ant init deploy

Découpage de la page

 Voici le découpage des zone en zones de la page HTML de la base (pour vous faciliter la compréhension des stylestyles)

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

...

thème

Pour que le portail connaisse le skin thème il faut le déclarer dans le fichier Portal uPortal/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

...

thèmes par défaut

Une fois que votre skin thème 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. Cela permettra par exemple d'avoir un thème différent pour les utilisateurs
anonymes et connectés.

Pour ce faire il faut modifier la base de données du portail.

...

SELECT *
FROM UP_SS_THEME

Balise Wikion obtient la valeur du SS_ID du thème esup du mode de présentation "ESUP DLM XHTML Theme", qui est le mode 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\].

NB : Vous pouvez noter la valeur de la colonne SS_DESCRIPTION_URI, qui indique l'emplacement de la feuille utilisée pour la transformation en HTML (voir plus bas : feuille XSL)

Pour modifier le

...

thème par défaut :

...

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

Bloc de code
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 la skin pour le theme le thème pour la présentation ESUP, dont le SS_ID a pour valeur [ESUP_THEME_SS_ID est 5].

Pour modifier le

...

thème par défaut des utilisateurs connectés :

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

Il suffit donc de spécifier que le thème de l'utilisateur demo pour le mode de présentation ESUP est [SKIN_NAME Balise WikiIl 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]', '2[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 thème 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>
-- remplacer '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 thème par défaut des utilisateurs connectés :

...

<table>
    <name>UP_SS_USER_PARM</name>
    <rows>
...
      <row>
        <column><name>USER_ID</name><value>2</value></column>
        <column><name>PROFILE_ID</name><value>1</value></column>
        <column><name>SS_ID</name><value>1</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>esup</value></column>
      </row>
-- Pour ajouter les lignes ci-dessous, on peut s'inspirer des lignes ci-dessus, présentent
-- dans la version d'origine du fichier
        <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>

Les styles

Les styles du thème sont dans le répertoire skin

Par défaut, ils sont répartis en six feuilles de styles :

Vous pouvez bien sûr choisir une autre organisation. Il est conseillé de conserver le principe d'une feuille qui importe les autres.

Styles des canaux et portlets

Pour les canaux autres que les portlets, il est conseillé de placer les styles dans channels.css (voire de découper en plusieurs feuilles selon le nombre)

Pour les portlets, il est conseillé de créer un sous-répertoire par portlet et de le diviser en répertoires pour les styles et pour les images de fond (background) des styles.

Par exemple, pour la portlet ma_portlet :

 ma_portlet
	media
		<images de fond des styles>
	css
		ma_portlet.css <= feuille de style de la portlet

Les portlets ne doivent pas appeler leurs feuilles de style. Les feuilles de styles des portlets doivent être appelés par le portail, en les incluant dans la feuille de base du thème.

Lors de la transformation en page HTML, uPortal encadre systématiquement chaque canal affiché par une balise DIV ayant pour classe le nom fonctionnel (fName) du canal.

Exemple : le canal qui a pour nom customImap sera présenté ainsi :

<div class="portlet clearfix customImap" id="portletContent_u104l1n5242">
....
</div>

Il est donc pratique (et conseillé) de préfixer systématiquement chaque style de canal ou de portlet par son nom fonctionnel. Ceci évite les interactions malheureuses entre styles de canaux différents.

Exemple : le style portlet-section-header ne s'appliquera qu'à la portlet esup-mondossierweb

.esup-mondossierweb .portlet-section-header
{
	font-family: Verdana,Arial,Helvetica,sans-serif;
	font-size: 1.8em;
	font-weight: bold;
}

De plus

La feuille XSL

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

...