Pages enfant
  • Modification look

Comparaison des versions

Légende

  • Ces lignes ont été ajoutées. Ce mot a été ajouté.
  • Ces lignes ont été supprimées. Ce mot a été supprimé.
  • La mise en forme a été modifiée.
Commentaire: Migrated to Confluence 5.3

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
themeEclipse
languagexml
titletemplate ongletLateral
collapsetrue
  <!-- ========================================== -->
  <!-- ====== 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
themeEclipse
languagexml
titleAppel dans page.xsl
firstline155
linenumberstrue
                     <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
themeEclipse
title_skin-overrides.css
collapsetrue
  #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
themeEclipse
titleA 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.

Bloc de code
themeEclipse
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