Projet Socle ENT
Pages enfant
  • 02 - Personnalisations de 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.

...

  • Les images : icones, bandeau, etc ...
  • La CSS : couleurs, police, disposition des zones
  • La XSL : pour des modification de structure HTML

Le portail fonctionne avec un mécanisme de skin, on peut avoir plusieur skin disponible dans le portail et l'utilisateur puet choisir celui qu'il désiré utiliser.
Les images et la CSS se trouve inclus dans le skin.

Les SKINS 

Ils se trouve dans le dossier uPortal/webpages/media/org/jasig/portal/layout/tab-column/xhtml-theme

Le dossier contenant le skin doit se nommé du nom du skin.
Par exemple le skin esup de base dans le package : uPortal/webpages/media/org/jasig/portal/layout/tab-column/xhtml-theme/esup

Le skin se découpe comme suit :

  • Balise Wiki
     \[SKIN_NAME\]
    • controls : images des boutons de controle dans la XSL (focus, supprimer un canal, etc ...)
    • institutional : plus orienté sur les bandeau institutionnel
    • navigation : images servant a la navigation (onglet, liste de canaux, etc ...)
    • skin
      • Balise Wiki
        \[SKIN_NAME\].css : css du skin
      • Balise Wiki
        \[SKIN_NAME\]_thumb.gif : image miniature utilisé lors du choix du skin

Découpage de la page

 Voici le découpage des zone HTML de la base (pour vous faciliter la compréhension des style)

  1. BODY
    1. portal-page-header
      1. logo
      2. welcome (bandeau de lien en haut a droite)
      3. tabs (les onglets)
    2. portal-page-body
      1. preference-items (bandeau des préférences)
      2. colonne et canaux
    3. portal-page-footer
      1. pied de page

Déclarer le skin

Pour que le portail connaisse le skin il faut le déclarer dans le fichier Portal/webpages/media/org/jasig/portal/layout/tab-column/xhtml-theme/skinList.xml

Bloc de code

<?xml version="1.0"?>

<skins>
  <skin>
    <skin>[SKIN_NAME]</skin>
    <skin-name>[NOM AFFICHE A L'UTILISATEUR]</skin-name>
    <skin-description>[DESCRIPTION AFFICHE A L'UTILISATEUR]</skin-description>
  </skin>