Menu

Créer un modèle personnalisé

L'objectif de ce tutoriel va consister à vous montrer comment on peut modifier l'apparence des sites Comavoo. Seule votre créativité sera votre limite.

La plupart des affichages sous Comavoo sont effectués à travers des modèles. Comavoo fourni des modèles par défaut, avec des options de configuration supplémentaires. Lorsque vous souhaitez afficher d'une autre manière certains élements, il faut créer un modèle qui viendra "écraser" celui par défaut.

Vous NE devez PAS créer de modèle si :

  • Vous souhaitez changer la couleur ou l'apparence d'un texte ou d'une forme : passez par des CSS
  • Vous souhaitez animer un texte ou une forme : passez par du JavaScript
  • Vous souhaitez changer une infime partie de l'affichage : demandez à notre équipe de développement. Bien souvent il est préférable que l'on intégre ce que vous demandez dans le coeur de Comavoo plutôt que de créer un modèle personnalisé.

Le revers des modèles : en créant un modèle personnalisé, vous sortez, en quelque sorte, du tronc commun des modèles par défaut. Si une mise à jour intervient, vous devrez donc manuellement mettre à jour votre modèle Comavoo pour profiter au mieux de toutes les nouvelles fonctionnalités.

L'intérêt des modèles

L'avantage est de pouvoir changer l'affichage sur la frontoffice de Comavoo, tout en profitant de la backoffice..

Cas pratique : intégrer une autre visionneuse

Dans cet exemple nous allons intégrer une autre visionneuse que celle par défaut, pour tous les types de blocs "Animation d'images". Mais l'interface qui permettra de gérer et d'ajouter les images dans la visionneuse sera toujours la même.

1. Télécharger la nouvelle animation JS

Nous allons intégrer le script UNSLIDER, disponible à l'adresse http://unslider.com/. Téléchargez le fichier NON compressé (ou non minifié).

Inutile de placer dans votre thème des versions compressées ou minifiées de scripts et CSS. Comavoo les compressera automatiquement lorsque le site sera en production.

2. Placer l'animation JS dans le thème

Il suffit de téléverser le JS téléchargé dans le thème. Si vous n'y arrivez pas, vous pouvez :

  1. Créer un fichier JavaScript vierge dans le thème (Fichier > Nouveau > Script)
  2. Coller le contenu du fichier JS téléchargé précédement dans le nouveau script vierge.
  3. Enregistrer sous le nom unslider.js
  4. Recharger l'éditeur de thème si vous ne le voyez toujours pas.

3. Créer un modèle

La création d'un modèle se fait très simplement. On souhaite utiliser UNSLIDER pour toutes les animations d'images de notre site. Pour créer un modèle, vous pouvez utiliser l'assistant "Assistant nouveau modèle". Cette page fournit une interface pratique de création d'un modèle.

  1. Type de données : Définissez la zone d'application du nouveau modèle dans le site. Pour ce cas présent, nous allons choisir la zone de "blocs".
  2. Type de bloc : Ici nous allons choisir "Animation d'images".
  3. ID du bloc : optionnel mais utile si vous souhaitez appliquer le modèle sur un bloc bien défini. Il suffira d'étudier le code source de la page en question pour récupérer l'ID du bloc.
  4. Enregistrez. Le nouveau modèle apparaît alors dans la liste des fichiers du thème.

Par défaut Comavoo englobe la sortie d'un modèle par défaut par <div class="comavoo-default-template comavoo-default-#{template_name}">#{o}</div>. Ceci vous permet de créer des styles spécifiques pour les modèles par défaut indépendants des styles pour le ou les modèles que vous créerez.

Nous allons modifier le nouveau modèle. Notez que Comavoo a repris automatiquement le modèle par défaut du site.

Remplacez le code existant par un copier-coller du code suivant puis cliquez sur le bouton Enregistrer

<div id="{{ block.component_id }}" class="unslider-animation">
<ul>
{% for image in block.images %}
<li style="background-image: url({{ image | thumbnail_url: block.images_size }}); background-size: 100% 100%;">

{% if block.show_image_title %}
<div id="{{ block.component_id }}-htmlcaption-{{ image.id }}" class="nivo-html-caption">
{{ image.title }}
</div>
{% endif %}
</li>
{% endfor %}
</ul>
</div>

  1. 4. Créer les styles CSS

Ajoutez quelques styles de base : créez un nouveau fichier de styles unslider.css dans votre thème et copiez-collez le code suivant :

.unslider-animation {
position: relative;
width: 100%;
overflow: auto;

font-size: 18px;
line-height: 24px;
text-align: center;

color: rgba(255,255,255,.6);
text-shadow: 0 0 1px rgba(0,0,0,.05), 0 1px 2px rgba(0,0,0,.3);

background: #5b4d3d;
box-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.unslider-animation ul {
list-style: none;
width: 300%;
}
.unslider-animation ul li {
display: block;
float: left;
width: 33%;
padding: 0;

min-height: 300px;
}

Enregistrez et ajouter un nouveau bloc de type "Animation d'images" dans la région de votre choix.

Conclusion

Les modèles permettent de personnaliser des parties d'affichage du site. Notre solution vous permet de créer un site à l'image de votre client.

 


Articles en vedette