Cette documentation présente l'ajout d'un onglet latéral ainsi que la manière d'ajouter une 2ème skin
La mise en place nécessite des manipulations dans :
Ajout du template ongletLateral dans uportal-war/src/main/resources/layout/theme/universality/component.xsl
<!-- ========================================== -->
<!-- ====== 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>
<!-- ========================================== -->
|
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
<xsl:call-template name="gallery"/>
</xsl:if>
+ <xsl:call-template name="ongletLateral"/>
<xsl:if test="$IS_FRAGMENT_ADMIN_MODE='true'"> |
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
#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)
mvn org.jasig.maven:sass-maven-plugin:update-stylesheets |
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.
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
$skinColor1 : rgba(190, 80, 80, 1); |
Il faut modifier uportal-war/src/main/webapp/media/skins/universality/skinList.xml pour supprimer les skins inutiles et définir la nouvelle skin
<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