...
- Les images : icones, bandeau, etc.
- La feuille Les feuilles de styles (CSS) : couleurs, police, disposition des zones
- La feuille de rendu transformation (XSL) : pour des modification de structure HTML
...
Balise Wiki \[SKIN_NAME\]
- controls : images des boutons de contrôle dans la XSL (agrandir, supprimer un canal, etc. )
- institutional : images et logos autres du bandeau institutionnel
- navigation : images servant a la navigation (onglet, liste de canaux, etc.)
- skin
Balise Wiki \[SKIN_NAME\].css : styles utilisés par le thème
Balise Wiki \[SKIN_NAME\]_thumb.gif : image miniature utilisé lors du choix 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 en zones de la page HTML de base (pour vous faciliter la compréhension des styles)
...
Pour que le portail connaisse le thème il faut le déclarer dans le fichier PortaluPortal/webpages/media/org/jasig/portal/layout/tab-column/xhtml-theme/skinList.xml
...
| Balise Wiki |
|---|
on obtient la valeur du SS_ID du mode thèmede esuppré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 :
...
| Balise Wiki |
|---|
On modifie ici le skinthème pour lela thèmeprésentation ESUP, dont le SS_ID a pour valeur \[ESUP_THEME_SS_ID\]. |
Pour modifier le
...
thème par défaut des utilisateurs connectés :
| Balise Wiki |
|---|
Par défaut les nouveaux utilisateurs héritent du skinthème de l'utilisateur 'demo' : Le USER_ID dude userl'utilisateur 'demo' est disponible dans la table UP_USER, ici il aura pour valeur \[USERDEMO_SS_ID\]. |
| Balise Wiki |
|---|
Il suffit donc de spécifier que le skinthème de l'utilisateur demo pour le thèmemode de présentation ESUP est \[SKIN_NAME\]. |
| Bloc de code |
|---|
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]' ); |
...
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 :
| Bloc de code |
|---|
<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 :
| Bloc de code |
|---|
<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 :
<nom-du-skin>.css | feuille de base qui importe les autres. c'est la seulle feuille à être référencée directement par la page HTML |
xxx_standard.css | styles des balises standard HTML et des styles uPortal |
xxx_preferences.css | styles utilisés par le canal "préférences" |
header.css | styles de la partie header (bandeau du haut avec logo et menu) |
navigation.css | styles utilisés pour les onglets et menus |
channels.css | feuilles destinée à contenir les styles spécifiques aux canaux de votre portail |
La feuille XSL
Si vous voulez modifier la structure de la page (HTML) vous devez modifier la XSL de rendu du portail.
...