Thèmes

Personnaliser l’apparence et le comportement de Elgg.

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

Ce guide suppose que vous connaissez :

Plugins
Vues

Contenu

Principes de création d’un thème et Bonnes Pratiques
Créez votre plugin
Personnalisez les CSS
Outils
Personnaliser la page d’accueil

Principes de création d’un thème et Bonnes Pratiques 

Pas de framework CSS tierce-partie: Elgg n’utilise pas de framework CSS, car ces frameworks enferment les utilisateurs dans un balisage HTML spécifique, ce qui rend finalement beaucoup plus difficile pour les plugins de collaborer sur l’apparence. Ce qui est is-primary dans un thème pourrait être quelque chose d’autre dans un autre. L’absence de framework permet aux plugins de modifier l’apparence à l’aide de css pur, sans avoir à remplacer des vues ni devoir ajouter aux éléments de balisage HTML des sélecteurs spécifiques à un framework particulier.

/* BAD */
<div class="box has-shadow is-inline">
        This is bad, because if the plugin wants to change the styling, it will have to either write really specific css
        clearing all the attached styles, or replace the view entirely just to modify the markup
</div>

/* GOOD */
<div class="box-role">
        This is good, because a plugin can just simply add .box-role rule
</div>
<style>
        .box-role {
         padding: 1rem;
         display: inline-block;
         box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }
</style>

système de grille à 8 points: Elgg utilise un système de grille à 8 points <https://builttoadapt.io/intro-to-the-8-point-grid-system-d2573cde8632>, aussi les dimensions des éléments, leurs marges internes et externes, etc se font par incréments et fractions de 8px. Étant donné que notre taille de police par défaut est 16px, nous utilisons des fractions de rem, de sorte que 0.5rem = 8px. Le système de grille à 8 points permet aux développeurs de collaborer beaucoup plus facilement sur des éléments de style : cela évite de se demander si la marge interne doit être de 5px ou de 6px.

/* BAD */
.menu > li {
        margin: 2px 2px 2px 0;
}

.menu > li > a {
        padding: 3px 5px;
}

/* GOOD */
.menu > li > a {
        padding: 0.25rem 0.5rem;
}

Mobile first - Conçu d’abord pour les mobiles: Nous écrivons un CSS mobile-first. Nous utilisons deux points de rupture : 50rem et 80rem (800px et 1280px à 16px/rem).

/* BAD: mobile defined in media blocks, different display types */

.menu > li {
        display: inline-block;
}
@media screen and (max-width: 820px) {
        .menu > li {
                display: block;
                width: 100%;
        }
}

/* GOOD: mobile by default. Media blocks style larger viewports. */

.menu {
        display: flex;
        flex-direction: column;
}
@media screen and (min-width: 50rem) {
        .menu {
                flex-direction: row;
        }
}

piloté par Flexbox: Flexbox offre une simplicité d’empilement d’éléments dans des grilles. Flexbox est utilisé pour tout, des menus aux éléments de mise en page.

/* BAD */
.heading:after {
        visibility: hidden;
        height: 0;
        clear: both;
        content: " ";
}
.heading > h2 {
        float: left;
}
.heading > .controls {
        float: right;
}

/* GOOD */
.heading {
        display: flex;
        justify-content: flex-end;
}
.heading > h2 {
        order: 1;
        margin-right: auto;
}
.heading > .controls {
        order: 2;
}

Symétrique: Nous maintenons la symétrie.

/* BAD */
.row .column:first-child {
        margin-right: 10px;
}

/* GOOD */
.row {
        margin: 0 -0.5rem;
}
.row .column {
        margin: 0.5rem;
}

Des transitions de couleur simples: Nous maintenons 4 ensembles de couleurs pour le texte, les arrière-plans et les bordures : soft - doux, mild - modéré, strong - fort et highlight - en exergue. Lors de la transition vers l’état hover ou active, nous montons d’un niveau, par exemple de soft à mild, ou utilisons highlight. Lorsque nous passons à un état inactif ou désactivé, nous descendons d’un niveau.
Augmentez la zone de clic: En travaillant avec des ancres imbriquées, nous augmentons la zone de clic de l’ancre, plutôt que le parent

/* BAD */
.menu > li {
        margin: 5px;
        padding: 5px 10px;
}

/* GOOD */
.menu > li {
        margin: 0.5rem;
}
.menu > li > a {
        padding: 0.5rem 1rem;
}

Pas de z-index 999999: les z-index sont incrémentés par pas de 1.
Envelopper les parents HTML: Nous nous assurons qu’il n’y a pas de chaîne orpheline au sein d’un parent et que les frères et sœurs sont enveloppés d’une manière qui permet de les cibler par CSS.

/* BAD */
<label>
        Orphan
        <span>Sibling</span>
</label>

/* GOOD */
<label>
        <span>Sibling</span>
        <span>Sibling</span>
</label>

/* BAD */
<div>
        <h3>Title</h3>
        <p>Subtitle</p>
        <div class="right">This goes to the right</div>
</div>

/* GOOD */
<div>
        <div class="left">
         <h3>Title</h3>
         <p>Subtitle</p>
        </div>
        <div class="right">This goes to the right</div>
</div>

Créez votre plugin 

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

Créez un nouveau dossier dans mod/
Créer un nouveau fichier elgg-plugin.php
Créez un fichier composer.json décrivant votre thème.

Le css est découpé en plusieurs fichiers en fonction des aspects du site que vous êtes en train de styler. Cela vous permet de les aborder un à la fois, vous donnant une chance de faire de réelles améliorations 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 à trouver disponibles : action, cancel - annuler, delete - supprimer, submit - envoyer, et special.

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

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 d’entrées

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, entê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 les avons appelées des modules. Il en existe de quelques sortes: info, aside - sur le côté, featured - en vedette, dropdown - déroulant, 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 du noyau du dossier elements/* dans un seul fichier (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

Variables CSS 

Elgg utilise CssCrush pour prétraiter les fichiers CSS. Cela nous donne la flexibilité d’utiliser des variables CSS globales. Les plugins devraient, dans la mesure du possible, utiliser des variables CSS globales et étendre le thème de base avec leurs variables plugin, afin qu’ils puissent être simplement modifiés par d’autres plugins.

Pour ajouter ou modifier des variables, utilisez l’événement vars:compiler, css. Notez que vous devrez peut-être vider le cache pour voir vos modifications en action.

Pour obtenir une liste des variables par défaut du noyau, voyez engine/theme.php.

Extension d’une vue 

Il existe deux manières de modifier les vues :

La première façon est d’ajouter des éléments supplémentaires à une vue existante via la section views_extensions dans la définition de votre elgg-plugin.php.

Par exemple, la configuration suivante va ajouter mytheme/css au fichier css du noyau de Elgg :

<?php
        return [
                'view_extensions' => [
                        'elgg.css' => [
                                'mytheme/css' => [],
                        ],
                ],
        ];

Surcharge des vues 

Les plugins peuvent avoir une arborescence des vues, n’importe quel fichier qui existe ici remplacera tout fichier dans l’arborescence des vues du noyau existante… ainsi 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 quand 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 de Elgg 2.0, les icônes par défaut de Elgg 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--.

Par défaut, vous obtiendrez la variante de style solid des icônes. En ajoutant au nom de l’icône l’un des suffixes -solid, -regular ou -light, vous pouvez cibler un style spécifique. Soyez avisé ; la variante de style light n’est disponible qu’en tant qu’icône sous licence FontAwesome Pro.

Outils 

Nous vous avons fourni quelques outils de développement pour vous aider à mettre en place des thèmes : 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.

Personnaliser la page d’accueil 

La page d’index principale de Elgg est servie via une vue des ressource.

Par conséquent, vous pouvez le remplacer en fournissant votre propre fichier de ressources dans your_plugin/views/default/resources/index.php.