Création d’un thème pour Alfresco Share

Je profite de la nouvelle mise à jour du site de TekoNorma pour ajouter ce nouvel article sur Alfresco.

Pour ce qui ne le saurait pas dans la prochaine version d'Alfresco la future 4.0.a Community, il sera possible d'avoir un thème par site Share. Par conséquent je pense qu'il est grand temps de parler de la création d'un thème pour Alfresco « Share ».

Voici une capture de l'intégration du thème au niveau d'un site, profitez en pour constater les modifications au niveau de la personnalisation des onglets d'un site :

nouvelle interface de personnalisation de site share version 4.0.a

 

Comme vous pouvez le voir sur la capture, Alfresco livre 5 thèmes pour Alfresco « Share » :

  1. Theme Bleu (par défaut) 
  2. Theme Vert 
  3. Theme Jaune 
  4. Google Docs Theme 
  5. Theme contraste élevé 

Le plus complet de ces 5 thèmes est le thème Vert.

En quoi consiste un Thème Alfresco « Share ».

D'abord ce que vous ne pourrez pas faire dans le cadre du theme.

Vous ne pourrez pas modifier l'organisation des pages :

  1. Le Bandeau en haut (avec les fonctionnalités à disposition). 
  2. La barre de couleur avec les onglets pour les sites. 
  3. L'espace de travail. 
  4. Le pied de page. 

Par contre, il vous sera possible de modifier une partie des logos et des illustrations et surtout les couleurs du site (bandeau, fond et typographie).

Pour cela il vous faudra modifier des fichier .css (feuille de style internet) et des illustrations existantes.

1. Localisation des thèmes

Vous trouverez les thèmes par défaut d'Alfresco « Share » dans l'espace suivant :

$Home_Alfresco/tomcat/webapps/share/themes/

 

Liste des themes par défaut dans Share

 

 

 

Dans chaque dossier thème vous trouverez l'organisation suivante, prenons par exemple le thème greentheme :

Contenu d'un dossier Theme

La déclaration des thèmes se trouve dans le dossier suivant :

$Home_Alfresco/tomcat/webapps/share//WEB-INF/classes/alfresco/site-data/themes/

liste des déclarations de themes

2. Création d'un Theme

2.1. Nouveau dossier

Commençons par copier le dossier greenTheme dans un espace de travail.

Modifions son nom par « tekonormaTheme ».

Atttention : Le nom choisi est important car celui-ci devra être repris à l'identique à plusieurs moments.

2.1.a Les illustrations

Commençons par les illustrations, recherchons dans le dossier « images » celle qui porte le nom app-logo.png, celle-ci s'affiche dans le coin haut à gauche de votre site.

Attention vous devez remplacer ce logo par un logo de taille identique (117 par 48 pixels).

Avant

logo alfresco share

après

logo tekonorma share

Les images suivantes :

logobg.png et logo.png

images pour le login alfresco share

 

sont utilisées pour l'affichage de la page de login, celles-ci peuvent être modifiées pour personnaliser la page de login. Attention de bien conservé la taille des images.

2.1.b Les fichiers css

Dans le dossier Thèmes vous trouverez 2 fichiers css :

  1. le fichier de gestion de la page de login : login.css 
  2. Le fichier de gestion de la page share : presentation.css 

Avant toutes opération de modification vous devez en premier lieu effectuer une substitution dans l'ensemble des fichiers css du theme.

Vous devez remplacer l' « ancien nom » du thème par le « nouveau nom ». Dans notre exemple, nous sommes partis du thème « greenTheme » pour créer le thème « tekonormaTheme ».

Dans chaque fichier css, effectuer la commande :

Remplacer : greenTheme par tekonormaTheme.

Ne pas oublier de traiter le fichier « skin.css » qui se trouve dans le dossier :

$votreTheme/yui/assets/

Une fois cette modification il vous est possible de modifier les fichiers : login.css et presentation.css.

Les modifications possibles portent essentiellement sur les couleurs et éventuellement des modifications de typographie avec des polices de caractères différentes.

Voici une correspondance du jeu de couleur existant pour le theme : greenTheme.

Jeux de couleur du theme greenTheme

Que vous pouvez décliner de cette façon pour votre nouveau thème tekonormaTheme :

Jeux de couleur du theme TekoNorma

Il vous reste plus qu'à modifier selon votre humeur l'ensemble de ces couleurs au niveau des fichiers css.

2.1.c Déclaration du nouveau thème

Créer un fichier à partir du nom de votre theme : tekonormaTheme.xml

Et renseigner le fichier de déclaration de votre nouveau thème tekonormaTheme.xml

<?xml version='1.0' encoding='UTF-8'?>
<theme>
 <title>Theme TekoNorma</title>
 <title-id>theme.tekonormaTheme</title-id>
</theme>

1.3. Mise en place du nouveau Thème

Quelques précautions sont nécessaires. Ils n'est pas possible pour l'instant de déployer son nouveau thème uniquement dans :

$Alfresco_Home/tomcat/shared/classes/alfresco/

vous serez obligé de copier le dossier : « tekonormaTheme » dans le dossier :

$Alfresco_home/tomcat/webapps/share/themes/

Par contre vous pouvez, déposer la déclaration de votre thème : tekonormaTheme.xml dans :

 

$Alfresco_Home/tomcat/shared/classes/alfresco/extension/site_data/themes

 

Pour finir, il vous suffit d'accéder à votre console d'administration menu application pour basculer sur votre nouveau thème.

Quelques captures d'écran avant et après :

Page de Login

Style par défaut :

page de login par défaut sur share

Style tekonormaTheme :

page de login pour tekonormaTheme

Tableau de bord au login de share

Style par défaut :

tableau de bord utilisateur par défaut

Style TekonormaTheme :

tableau de bord utilisateur avec tekonormaTheme

Page de la librairie documentaire

Style par défaut :

page de la librairie documentaire theme par defaut

Style TekonormaTheme :

page de la librairie documentaire avec tekonormaTheme

 

Voilà c'est tout pour aujourd'hui.

Les captures d'écran sont justes là à titre d'illustration et non pas volonté à être des styles de grandes puissances graphiques …

3 commentaires

  1. Hubert dit :

    Bonjour,

    j’aimerai savoir s’il est possible d’appliquer un thème pareil non pas pour tous les sites, mais pour un type de site déclaré dans presets.xml; et celui-ci devrais être utilisé par défaut comme étant le thème pour chacun des site de ce type qu’on crée dans share.

    Merci d’avance

  2. Bonjour

     

    Désolé pour le retard de la réponse.

    Il est possible de mettre facilement le nom et le logo de l'entreprise à la place de celui d'Alfresco  dans le haut à gauche de la page de share.

    Si vous regarder bien la capture avec le thème de tekonorma vous verrez que le logo d'alfresco a été remplacé par celui de TekoNorma.

    J'espère avoir répondu a votre question.

  3. fatima-zohra dit :

    slt,
    pour mon stage de fin d'études je travaille sur alfresco et je veux savoir si c'est possible d'ajouter une image de fond sous alfresco share  sur laquelle je doit mettre le logo et le nom de l'entreprise ou je passe mon stage. Sinon si je peux ajouter une barre tout en haut  de la page ou je pourrais mettre c informations.
    merci beaucoup.

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.