Child pages
  • Modification look
Skip to end of metadata
Go to start of metadata

Cette documentation présente l'ajout d'un onglet latéral ainsi que la manière d'ajouter une 2ème skin

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

template ongletLateral
  <!-- ========================================== -->
  <!-- ====== 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

Appel dans page.xsl
                     <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

_skin-overrides.css
  #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)

A exécuter dans uportal-war
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.

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);

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

<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

 

 

  • No labels