Thèmes

Personnaliser l’apparence et le comportement d’Elgg.

Un thème est un type de plugin qui surcharge des aspects d’affichage d’Elgg.

Ce guide suppose que vous connaissez :

Créez votre plugin

Créez votre plugin tel que décrit dans le guide de développement developer guide.

  • Créez un nouveau dossier dans mod/

  • Créez un nouveau fichier start.php

  • Créez un fichier manifest.xml décrivant votre thème.

Personnalisez les CSS

À partir d’Elgg 1.8, le css est divisé en plusieurs fichiers en fonction des aspects du site que vous êtes en train de designer. Cela vous permet de les aborder un à la fois, vous donnant une chance de faire de réels progrès sans être submergé.

Voici la liste des vues CSS existantes :

  • elements/buttons.css : fournit un moyen de styler tous les différents types de boutons que votre site utilise. Il existe 5 types de boutons que les plugins s’attendent à être disponibles: action, cancel (annuler), delete (supprimer), submit (soumettre), et special.

  • elements/chrome.css : ce fichier comporte des classes de présentation diverses.

  • elements/components.css : ce fichier contient de nombreux « objets css » qui sont utilisés sur tout le site : media block (bloc multimédia), list, gallery, table (tableau), owner block (propriétaire), system, messages, river, tags, photo et comments.

  • elements/forms.css : ce fichier détermine à quoi ressembleront vos formulaires et éléments de saisie.

  • elements/icons.css : contient des styles pour les icônes et avatars utilisés sur votre site.

  • elements/layout.css : détermine à quoi ressemblera votre page : barres latérales, emballage de la page, corps principal, en-tête, pied de page, etc.

  • elements/modules.css : Beaucoup de contenu dans Elgg s’affiche dans des boîtes avec un titre et un corps de contenu. Nous avons appelé ces boîtes des modules. Il en existe de quelques sortes: info, aside (sur le côté), featured (en vedette), dropdown (déroulante), popup, widget. Les styles des widgets sont également inclus dans ce fichier, car ils sont un sous-ensemble des modules.

  • elements/navigation.css : ce fichier détermine à quoi ressembleront tous vos menus.

  • elements/typography.css : ce fichier détermine à quoi ressemblera le contenu et les titres de votre site.

  • rtl.css : des règles personnalisées pour les utilisateurs qui consultent votre site dans une langue de droite à gauche.

  • admin.css : un thème totalement distinct pour la zone d’administration (généralement pas remplacé).

  • elgg.css : compile tous les fichiers des éléments de base/* dans un seul fichier (NE PAS REMPLACER).

  • éléments/core.css : contient des styles de base pour les « objets css » les plus compliqués. Si vous vous trouvez en situation de vouloir remplacer cela, vous avez probablement besoin de signaler un bogue du noyau Elgg à la place (NE PAS REMPLACER).

  • éléments/reset.css : contient une feuille de style de réinitialisation qui force les éléments à avoir le même rendu par défaut

Extension d’une vue

Il existe deux manières de modifier les vues :

La première façon est d’ajouter des choses à une vue existante est via la fonction d’extension de vue, à partir de la fonction d’initialisation de votre start.php.

Par exemple, le start.php suivant ajoutera mytheme/css au css de base d’Elgg :

<?php

    function mytheme_init() {
        elgg_extend_view('elgg.css', 'mytheme/css');
    }

    elgg_register_event_handler('init', 'system', 'mytheme_init');
?>

Surcharge des vues

Les plugins peuvent avoir une hiérarchie d’affichage, n’importe quel fichier qui existe ici remplacera tous les fichiers dans la hiérarchie de vue de base existante… par exemple, si mon plugin a un fichier :

/mod/myplugin/views/default/elements/typography.css

ceci va remplacer :

/views/default/elements/typography.css

Mais seulement si le plugin est actif.

Cela vous donne un contrôle total sur l’apparence et le comportement de Elgg. Cela vous offre la possibilité de modifier légèrement ou de remplacer totalement les vues existantes.

Icônes

À partir d’Elgg 2.0, les icônes Elgg par défaut proviennent de la bibliothèque FontAwesome. Vous pouvez utiliser l’une de ces icônes en appelant :

elgg_view_icon('icon-name');

icon-name peut être n’importe laquelle des icônes de FontAwesome sans le préfixe “”fa-“..

Outils

À partir de Elgg 1.8, nous vous avons fourni quelques outils de développement pour vous aider à les mettre en place : activez le plugin “Developers” et accédez à la page “Theme Preview” (aperçu du thème) pour commencer à suivre les progrès de votre thème.

Personnalisation de la page d’accueil

La page principale de Elgg exécute un hook de plugin appelé “index,system”. Si ce hook renvoie true, il suppose qu’une autre page gérant la page d’accueil a déjà été générée, et n’affiche pas la page par défaut.

Par conséquent, vous pouvez remplacer la page d’accueil en enregistrant une fonction sur le hook de plugin “index,system” et en renvoyant true à partir de cette fonction.

Voici un aperçu rapide :

  • Créez votre nouveau plugin

  • Dans le start.php, vous aurez besoin de quelque chose comme ce qui suit :

<?php

function pluginname_init() {
    // Replace the default index page
    elgg_register_plugin_hook_handler('index', 'system', 'new_index');
}

function new_index() {
    if (!include_once(dirname(dirname(__FILE__)) . "/pluginname/pages/index.php"))
        return false;

    return true;
}

// register for the init, system event when our plugin start.php is loaded
elgg_register_event_handler('init', 'system', 'pluginname_init');
?>

  • Ensuite, créez une page d’index (/pluginname/pages/index.php) et utilisez-la pour mettre le contenu que vous souhaitez sur la première page de votre site Elgg.