Bonjour à tous,
Nous allons voir comment créer un thème pour l’application Alfresco !
Dans ma configuration actuelle j’ai :
- Serveur Linux Debian
- Alfresco Community 5.0.d
On dit donc que vous avez installé Alfresco et qu’il est correctement fonctionnel.
Les étapes principales qu’on va faire durant ce tuto :
- Récupérer un thème existant
- Modifier le thème
Alors commençons ! Il faut d’abord se connecter sur le serveur (pour ma part j’utilise WinSCP et PuTTY pour l’accès au serveur) et ce déplacer dans le dossier d’installation d’Alfresco (par défaut “/opt/alfresco-5.0.d/”).
Comme base nous allons prendre le “Thème Clair” qui est le thème par défaut sur Alfresco pour le mettre dans le répertoire “/tomcat/shared/classes/META-INF/themes/{votre_theme}”, pour cela nous allons utiliser cette commande qui permettra de créer les dossiers et de copier le thème (situé dans “/tomcat/webapps/share/themes/lightTheme”) :
mkdir -p /opt/alfresco-5.0.d/tomcat/shared/classes/META-INF/themes && cp -R /opt/alfresco-5.0.d/tomcat/webapps/share/themes/lightTheme /opt/alfresco-5.0.d/tomcat/shared/classes/META-INF/themes/test
A partir de là nous avons donc le répertoire “test” qui sera notre “base” pour notre thème.
Nous allons avant, pour pouvoir “activer” le thème dans les outils admin d’Alfresco, créer le fichier XML qui correspond au thème.
mkdir -p /opt/alfresco-5.0.d/tomcat/shared/classes/alfresco/web-extension/site-data/themes
Puis ensuite :
nano /opt/alfresco-5.0.d/tomcat/shared/classes/alfresco/web-extension/site-data/themes/test.xml
Dedans on va inscrire :
encoding='UTF-8'?>Thème de Test theme.test</title-id> </theme>
Modifier bien sûr “test” par le nom de votre choix !
Après un petit redémarrage du service Alfresco (“service alfresco start” et un “service alfresco stop”), vous devriez voir votre thème dans la liste !
Vous pouvez voir que si vous activez le thème des bugs d’affichages est maintenant présent, mais nous allons les corriger tout de suite !
Donc pour les corriger (et modifier les couleurs par la suite), il faut modifier les fichiers *.css présents dans le dossier du thème copié tout à l’heure. Pour me faciliter la tâche j’utilise NotePad++ (depuis WinSCP) pour modifier directement le fichier.
Il faut modifier tous les champs “lightTheme” par celui que vous avez choisi avant (dans notre exemple “test”).
Par exemple dans le fichier presentation.css présent à la racine du thème (“/opt/alfresco-5.0.d/tomcat/shared/classes/META-INF/themes/test” pour rappel) :
Faites de même pour le fichier “skin.css” présent dans “/yui/assets” en modifiant toujours “lightTheme” par votre nom de thème !
A partir de là le thème est “valide” et est correctement fonctionnel, mais le but est de pouvoir le changer !
Pour cela, nous allons encore modifier le fichier “presentation.css” qui nous permettra de changer les couleurs du site !
Le plus chiant compliqué est de retrouver le code source représentant ce qu’on souhaite modifier.. C’est pour cela qu’existe le site Code-Couleur !
Une fois que vous avez trouvé des couleurs à votre goût, rechercher la balise correspondant dans le code sources des fichiers, et modifier les anciennes balises (#FFFFF par exemple) par le votre.
Rechargez votre page Alfresco, et la couleur devrais apparaître !
