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