Olivier Buisson » tgv-rezo http://blog.shaze.net Des idées et des mots Fri, 03 Sep 2010 10:35:34 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Elgg: Création de thème http://blog.shaze.net/index.php/2009/01/04/elgg-creation-de-theme/ http://blog.shaze.net/index.php/2009/01/04/elgg-creation-de-theme/#comments Sun, 04 Jan 2009 22:58:58 +0000 obuisson http://blog.shaze.net/?p=18 Petit retour sur Elgg afin de vous expliquer la création de thème pour Elgg. 

Attention, je n’aborderai pas dans ce tutorial tout la partie Webmastering (c’est-à-dire comment gérer une CSS ou du code HTML). Le but est de présenter la mécanique permettant de faire un thème dans Elgg. 

  • Le principe d’un thème

Dans Elgg, la création d’un thème consiste à créer un plugins. De prime abord, cela peut sembler compliqué mais cela ne l’est pas tant que ça. Le gros avantage de cette méthode est de laisser le moteur de Elgg intacte, ce qui va faciliter les mises à jours. 

L’autre chose à bien comprendre est que tout les fichiers présents dans le thème vont remplacer les fichiers livrés avec votre installation. De ce fait, si vous ne souhaitez pas modifier le look & feel des groupes, par exemple, vous n’incluez pas les fichiers correspondant dans votre thème. Elgg ne voyant pas de fichier spécifique dans votre thème va prendre ceux du thème générale.

Du coup, cela simplifie la création de thème car vous n’avez qu’a vous occuper de la partie qui vous intéresse.

Par exemple, si vous voulez modifier le bas de page de votre site, le fichier d’origine se trouve à cette endroit (en partant du répertoire de votre installation Elgg)  :

/views/default/page_elements/footer.php

vous devez créer un fichier dans le répertoire de votre thème avec le même chemin 

/mod/Mon_Theme_A_Moi/views/default/page_elements/footer.php

 

 

  • Etape #1 : La création du squelette

Comme tout plugins, vous devez créer un répertoire contenant votre thème dans le répertoire « mod » de votre installation. Le nom du répertoire sera pris comme nom de votre thème et  c’est lui là qui apparaîtra dans la liste des plugins de l’interface d’administration. 

Une fois, le répertoire de votre thème créé, il faut au minimum 2 fichiers : « start.php » et « manifest.xml »

 Dans le cas d’un thème, le fichier start.php peut être vide.

Le fichier manifest.xml permet de dire à Ellg toutes les informations nécessaires à afficher dans l’interface d’administration, il doit contenir les élements suivants :

 

<?xml version= »1.0″ encoding= »UTF-8″?>

<plugin_manifest>

        <field key= »author » value= »Votre Nom » />

        <field key= »version » value= »Le Numéro de Version » />

        <field key= »description » value= »La description de votre thème » />

        <field key= »website » value= »Le site où le thème pourra être téléchargé » />

        <field key= »copyright » value= »Copyright » />

        <field key= »licence » value= »La licence sous laquelle votre thème est fait » />

</plugin_manifest>

 

 

C’est tout pour le squelette du thème. A partir de maintenant, il est possible de l’activer. 

 

  • Etape #2 : Activation du plugin

Afin d’activer votre thème, vous devez aller dans la page d’administration de votre site Elgg et cliquez dans « Tool Administration ». 

Sur cette page, en bas de la liste, vous devez retrouver votre thème. A partir de là, vous pouvez l’activer. 

Si tout ce passe bien,  votre thème doit être activité mais, vu que vous n’avez encore fait aucune modification, le site doit s’afficher avec le look habituel. 

 

  • Etape #3 : Les modifications de la structure de la page

La structure des pages est gérée à partir d’un fichier se trouvant par défaut ici :

/views/default/pageshells/pageshells.php

Le contenu de chacun des éléments des pages (haut de page, bas de page, spotlight, barre d’admin, etc…) se trouve par défaut ici :

/views/default/page_elements/

 

Si vous avez bien compris le principe, vous devez mettre les fichiers dans votre répertoire de thème en gardant la même structure de répertoire. Pour les pageshells, vous devez le mettre dans le répertoire suivant :

/mod/Mon_Theme_A_Moi/views/default/pageshells/

Idem pour le contenu des élements de la page qui doit être dans le répertoire :

/mod/Mon_Theme_A_Moi/views/default/page_elements/

 

A noter que le contenu de la page d’accueil quand vous n’êtes pas inscrits  (la partie centrale) n’est pas gérer dans le pageshells directement. J’y reviendrai dans un autre tutorial. 

 

  • Etape #4 : Les modifications du design de la page
Maintenant que vous êtes capable de modifier la structure des pages, nous allons pouvoir modifier le look des pages afin de mettre les bonnes couleurs. 
Le plus simple est de reprendre le fichier CSS par défaut de Elgg qui se trouve dans le répertoire : 
/views/default/css.php
Vous pouvez le copier dans votre répertoire de thème en gardant l’arborescence, c’est-à-dire ici :
/mod/Mon_Theme_A_Moi/views/default/css.php
Ensuite, vous pouvez modifier à loisir la CSS afin de mettre les styles correspondant à votre site (Je vous conseille l’excellent WebDevelopperToolkit pour Firefox pour faire cela). 
Attention, les différents modules de type group,friend,etc…. utilisent des CSS particulières qui se trouvent dans les répertoire suivants : 
/views/default/[Nom_Plugins]/css.php
Si vous souhaitez aussi modifier la CSS de ces modules pour les intégrer au mieux dans votre site, vous devez les reprendre dans votre thème de la façon suivante :
/mod/Mon_Theme_A_Moi/views/default/[Nom_Plugins]/css.php
Voilà, c’est tout pour aujourd’hui. Vous avez un peu de temps à passer pour modifier vos CSS et vos fichiers. J’espère que cette première approche vous permettra de démarrer sur de bonne bases. N’hésitez pas à me montrer le résultat de vos travaux une fois finis. 

Pour finir, 2 liens vers des sites tournant sous Elgg :

Aucune article en rapport.

]]> http://blog.shaze.net/index.php/2009/01/04/elgg-creation-de-theme/feed/ 6