Cette documentation présente l'ajout d'un onglet latéral ainsi que la manière d'ajouter une 2ème skin
Sommaire |
---|
Onglet Latéral
La mise en place nécessite des manipulations dans :
- xsl
- css
modifications des xsl
Ajout du template ongletLateral dans uportal-war/src/main/resources/layout/theme/universality/component.xsl
Bloc de code | ||||||||
---|---|---|---|---|---|---|---|---|
| ||||||||
<!-- ========================================== --> <!-- ====== TEMPLATE: ONGLET LATERAL ======= --> <!-- ========================================== --> <!-- | This template renders the customize tab on left. --> <xsl:variable name="chemin_skin"><xsl:value-of select="concat('/uPortal/',$MEDIA_PATH,'/',$SKIN)"/></xsl:variable> <xsl:template name="ongletLateral"> <xsl:variable name="chemin_img"><xsl:value-of select="concat($chemin_skin,'/images/')"/></xsl:variable> <div id="ongletLateral"> <div id="ongletLateralInner"> <ul> <!-- affichage d'un lien sesame pour les utilisateurs UL --> <xsl:if test="upGroup:isUserDeepMemberOfGroupName($USER_ID, 'Portal Administrators')"> <li><a target="_blank" href="https://www.esup-portail.org/display/ESPADHERENT"><span>Espace adhérent</span><img src="{$chemin_img}adherent.png"/></a></li> </xsl:if> <li><a href="https://www.esup-portail.org/" target="_blank"><span>ESUP</span><img src="{$chemin_img}esup.png"/></a></li> <li><a href="https://github.com/EsupPortail/esup-uportal" target="_blank"><span>GitHub</span><img src="{$chemin_img}github.png"/></a></li> <li><a href="https://wiki.jasig.org/display/UPM40/Home" target="_blank"><span>Apereo</span><img src="{$chemin_img}apereo.png"/></a></li> </ul> </div> </div> </xsl:template> <!-- ========================================== --> |
Info |
---|
Les images utilisées sont en PJ de cette page. Elles doivent être déposées dans uportal-war/src/main/webapp/media/skins/universality/uportal3/images |
Puis on l'appelle dans page.xsl
Bloc de code | ||||||||||
---|---|---|---|---|---|---|---|---|---|---|
| ||||||||||
<xsl:call-template name="gallery"/> </xsl:if> + <xsl:call-template name="ongletLateral"/> <xsl:if test="$IS_FRAGMENT_ADMIN_MODE='true'"> |
Modification css
Le rollover du bandeau se fait en css. Il faut ajouter les modifications dans le fichier uportal-war/src/main/webapp/media/skins/universality/uportal3/scss/_skin-overrides.scss
Bloc de code | ||||||
---|---|---|---|---|---|---|
| ||||||
#ongletLateral { z-index: 50; position: fixed; top: 185px; overflow: hidden; padding-top:30px; margin-left: -223px; &:hover { margin-left: -40px; } #ongletLateralInner { padding-bottom:42px; } ul { margin: 0; padding-right:7px; width: 250px; li { background: $skinColor2; list-style-type: none; padding-left:40px; a { text-decoration: none; color: white; display: block; width: 100%; height: 28px; span { padding-left: 4px; vertical-align: middle; } img { vertical-align: middle; float: right; padding:3px 7px; } } &:hover { background: lighten($skinColor2,15%); } } } } |
Il faut ensuite re-générer le fichier portal.css (et re-déployer)
Bloc de code | ||||
---|---|---|---|---|
| ||||
mvn org.jasig.maven:sass-maven-plugin:update-stylesheets |
Deuxième skin
Création de la skin
Il faut copier un répertoire de skin, comme par exemple uportal3. Il est plus facile de partir sur un exemple fonctionnel et de le modifier que d'en créer un de toute pièce. Ça évite les oublis.
Bloc de code | ||
---|---|---|
| ||
cp uportal-war/src/main/webapp/media/skins/universality/uportal3 uportal-war/src/main/webapp/media/skins/universality/univ |
Dans ce nouveau répertoire, faites les modifications souhaitées. Pour l'exemple nous allons modifier les couleurs principales dans scss/_skin-colors.scss
Bloc de code |
---|
$skinColor1 : rgba(190, 80, 80, 1); |
Définition de la skin
Il faut modifier uportal-war/src/main/webapp/media/skins/universality/skinList.xml pour supprimer les skins inutiles et définir la nouvelle skin
Bloc de code |
---|
<skins> <skin> <skin-key>uportal3</skin-key> <skin-name>uPortal 4</skin-name> <skin-description> Blue and white. </skin-description> </skin> <skin> <skin-key>univ</skin-key> <skin-name>Mon Univ</skin-name> <skin-description> Affichage spécifique de Mon Univ </skin-description> </skin> </skins> |
Une fois l'ensemble déployé, on peut créer un aperçu et remplacer thumb.gif dans notre nouveau répertoire