[toc] # Guideline CMS Costum ## I - Configurer son costum  ### A - Les infos générales de son costum  Un costum naît d'une organisation, d'un projet ou d'un événement qui souhaite développer son propre site qu'on appelle aussi CMS. Par défaut, un costum possède les informations de ces éléments : Logo, titre, infos pour les méta de référencement, les languages du costum avec ses différentes versions enregistrées (version du costum enregistrée) ***Voici un aperçu pour l'édition des infos générales du costum :***  > https://codimd.communecter.org/s/yAxoBcXsc ### B - Construction générale du site  #### B.1 - Pages : Définition et gestion de toutes les pages du site de l'accueil aux mentions légales   #### B.2 - Menus & entête & bas de page : vue compléte de la maquette du site et de ses menus Pour la construction d'un menu, allez directement à la section II "Menus & entête $ bas de page"    #### B.3 - Element Ajoutable : Tous les elements à activer et définir que vous voudrez ajouter sur votre costum : les projets, les événements, les acteurs d'un territoire et bien d'autres encore...   ### C - Design global du site  #### C.1 Habillage : Style et configuration des loader, progress, menu(en haut ou à gauche), couleur general du site, police et le css par défaut du titre, texte et lien du site   #### C.2 Loader : Les types d'animation pendant le chargement de la page   #### C.3 Style css personnalisé : Code css specifique du site   ### D - Réglages de la communauté  #### D.1 Administrateurs : Gestion de la communauté du site avec les listes des membres du costum et leurs rôles respectives   #### D.2 Gestionnaire des médias : Une gallerie ou on trouve tous les photos du site   ## II - Création d'un menu La création du menu se trouve dans le menu "Menus & entête & bas de page"  **SOMMAIRE** **1. Activer les menus que vous voulez créer : menu du haut, menu du gauche, sous-menu, pied de page;**   **2. Ajouter un boutton dans le menu**  **3. faire glisser et déposer le boutton dans le contenu (on peut éditer le style du boutton après glissement)**  **4. Création menu burger** Faites glisser et déposez "Menu Burger". Cliquez sur "Ajouter un bouton" pour insérer un "bouton de page" à l'intérieur du "Menu Burger". Vous pourrez ensuite sélectionner le menu que vous souhaitez ajouter au "Menu Burger".  Pour ajouter un style au "Menu Burger", suivez les indications de l'image suivante.  ## III - Création d'une page **SOMMAIRE** Créer une page et l'ajouter au menu, Afin d'y ajouter vos blocs, Et même utiliser un template de page qui génère un ensemble de bloc ### A - Initialisation d'une page #### A1 - Créer une page  #### A2 - Editer une page Il y a deux façon de modifier une page : 1. Modifier une page dans la liste des pages  2. Modifier une page à partir du menu  #### A3 - Ajouter la page au menu Pour ajouter un page au menu il y existe deux façons: 1. Ajouter à partir du "Menus & en-tête"   2. Ajouter à partir du menu s'il existe déjà un ou plusieurs menu dans la section (Exemple: Menu haut, menu droite...)  #### A4 - Restreindre l'accès à une page de mon costum L'accès à une page peut être restreinte à ma communauté suivant le lien de l'utilisateur à mon organisation ou mon projet. On peut rendre accessible une page uniquement aux : - [ ] membres de la communauté - [ ] administrateurs de la communauté - [ ] Ou encore aux membres qui ont un rôle spécifique  ### B - Construire la page avec des blocs #### B1 Créer une section Pour utiliser les elements blocs CMS. Il faut: - Cliquer sur le bouton plus  sur une section ou sur le bouton "**Ajouter un bloc**" qui situé à gauche. - Choisissez et faites gliser vers la page. - Cliquez sur un élément pour ouvrir sa menu de configuration, - Configurez selon vos besoin. Voici une exemple d'une section qui contien de titre et de texte avec une photo de fond.  [Voir sur un video tutoriel](https://peertube.communecter.org/videos/watch/57668e80-a642-40c9-bc20-65c655891cff) ### B2 - Choisir la structure de la section. Sur un section, il y a la liste des structures :  - Choisir et cliquer pour obtenir la colonne structuré, - Remplir les selon vos besoin. #### B3 - Effectuer du Copier/coller de bloc en bloc. - En cas de contenu répétitif, - Cliquez sur bouton **Copier** en bas des éléments en question,  - Allez vers l'endroit où vous voulez le coller, - Cliquez sur bouton **Coller** en bas des éléments où vous voulez placer. Voici une exemple d'une section qui est créée à l'aide des 4 colonnes avec du texte.  [Voir sur un video tutoriel](https://peertube.communecter.org/videos/watch/534ea756-3757-4b24-8f6e-de86fc88f1e8) #### B4 - Comment personnaliser sa section à l'aide d'un texte et d'une image? Pour commencer : - Ajouter une section, - Choisir la structure du section, - Glisser le texte et l'image vers la colonne. Selon le design que vous voulez, - Cliquez sur un élément pour ouvrir sa menu de configuration, - Configurez selon vos besoin. Voici une exemple d'une section a 2 colonnes qui contien du texte et de titre avec couleur de fond à gauche et une image rond avec du bordure à droite.  [Voir sur un video tutoriel](https://peertube.communecter.org/videos/watch/55b6420b-8b9b-4036-9451-9bda4a963a02) #### B5 - Ajouter un bouton dans une section Deux types de boutons le simple et le bouton avec les actions préfigurer (popup) - to describe ## IV - Editer un block ### A - Sélectionner un bloc a édité #### A1 - Via un click sur le bloc en question - Au survol d'un bloc il aura une bordure en bleu, il faut juste un click pour passer à son édition.  #### A2 - Via un click l'utilisation de la couche des blocs - Ça se fait en trois étapes : - Cliquer sur le bouton "Ajouter un bloc" pour ouvrir le panel de gauche. - Accéder à l'onglet couche. - Sélectionner le bloc a modifié dans la couche.  - Vous pouvez aussi appuyer sur la touche "Tab"  pour accéder directement à l'onglet couche #### A3 - Le bouton sélectionner un parent aussi permet d'accéder à l'édition du bloc parent.  ### B - Le panel d'édition d'un bloc - Après avoir sélectionné un bloc a édité, le panel de droite va s'ouvrir, elle contient toutes les paramètres existant pour le bloc en question.  ### C - Les options possible pour une bloc - Après avoir sélectionné un bloc a édité, il y a des manipulations possibles à faire sur un bloc.   - Deplacer vers le haut : Pour déplacer un bloc vers le haut  - Deplacer vers le bas : Pour déplacer un bloc vers le bas  - Éditer : Pour accéder à l'édition du bloc  - Sélectionner le parent : Pour sélectionner le parent du bloc  - Dupliquer : Pour dupliquer un bloc  - Copier : Pour copier un bloc  - Coller : Pour dupliquer un bloc copier  - Ajouter une section : Pour insérer une nouvelle section en bas de la section  - Enregistrer : Pour enregistrer une section en tant que blocCms réutilisable  - Supprimer : Pour supprimer un bloc  - Désélectionner : Pour désélectionner un bloc et sortir de son mode édition  - Coller comme bloc miroir : Coller une bloc copier en tant que bloc miroir  - Log du bloc : Pour tracer les editions appliquer sur le bloc  - IA : Pour generer des texte ou image ### D - CtrlZ et CtrlY Il est possible d'avancer ou de revenir sur les modificaiton qu'on a fait notament sur les edition mais pas encore disponible pour la suppression ou l'ajout d'un nouveau bloc. Pour cela il suffit juste d'appuyer sur les touches **Ctrl+Z** pour revenir et **Ctrl+y** pour avancer ## V - Responsive Edition Il est possible d'avoir des configurations responsive pour certains config d'un block [Voir sur un video tutoriel](https://peertube.communecter.org/videos/watch/6024b1aa-ceea-4875-81a5-eb37c9330912) Pour cela il faut : - Changer de mode de vue et faire les modifications : Pour changer de mode de vue il existe deux façons : - En utilisant le bouton de changement de vue à côté de chaque propriété Css possédant une configuration responsive  - Ou en utilisant le bouton en haut  ## VI - Logs Il est possible maintenant de tracer tout les modification faite sur un costum a l'aide du logs ou historique ## VII - Importation et Exportation des contenus d'un COSTUM Cette fonctionnalité permet l'import et l'export de contenu sur notre plateforme. Elle prend en charge deux types de contenus : des pages spécifiques ou un COSTUM entier. Cette documentation explique l'utilisation et les prérequis pour cette fonctionnalité.