info:concrete5:themes:csseditor

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentes Révision précédente
Prochaine révision		 Révision précédente
info:concrete5:themes:csseditor [2025/09/19 04:43] – supprimée - modification externe (Date inconnue) 127.0.0.1info:concrete5:themes:csseditor [2025/09/19 05:31] (Version actuelle) – ↷ Liens modifiés en raison d'un déplacement. 217.113.196.132
Ligne 1: Ligne 1:
 +====== ajouter des entrées CSS dans l'éditeur WYSIWYG ======
 +{{tag>c5 css ergonomie}}
  
 +<note tip>Objectif: avoir des entrées dans l'éditeur WYSIWYG avec des classes personnalisées.</note> 
 +
 +Commencer par [[info:concrete5:themes:csshack|ajouter une css quick'n'dirty]].
 +
 +<note important>
 +Si on utilise déjà un package ne pas oublier de le versionner avec git, histoire d'avoir un historique des changements en cas de mise à jour du package!</note>
 +
 +Une fois que c'est fait, ajouter la classe dans votre fichier css, là p. ex. j'ai créé une classe pour centrer:
 +
 +<code css>
 +/*
 +hacks radeff
 +*/
 +.centrer{
 +   display: flex;
 +   justify-content: center;
 +   align-items: center;
 +   flex-wrap: wrap;
 +   align-content: center;
 +}
 +</code>
 +
 +Ensuite, dans le thème, éditer le fichier
 +
 +    page_theme.php
 +<note tip>si vous bossez avec stucco: 
 +    /packages/theme_stucco/themes/stucco/page_theme.php
 +</note>
 +
 +Et ajouter:
 +<code>
 +,
 +/*hacks radeff including previous comma!*/
 +array(
 + 'title' => t('Centrer'),
 + 'element' => 'div',
 + 'attributes' => array('class' => 'centrer')
 +)
 +</code>
 +à la fin, juste avant
 +<code>
 +        );
 +    }
 +}
 +</code>
 +
 +Si vous ne voyez pas le changement, pensez à vider le cache.
 +
 +https://VOTRESITEC5/index.php/dashboard/system/optimization/clearcache
 +
 +Enfin, résultat:
 +
 +{{:info:concrete5:docfred:customcsswysiwyg01.png|}}
 +
 +{{:info:concrete5:docfred:customcsswysiwyg02.png|}}
 +
 +{{:info:concrete5:docfred:customcsswysiwyg03.png|}}
 +
 +===== Documentation officielle =====
 + 
 +  * https://documentation.concrete5.org/tutorials/adding-ckeditor-custom-editor-styles-in-a-theme-content-blockrich-text-editor
 +  * https://documentation.concrete5.org/developers/pages-themes/designing-for-concrete5/advanced-css-and-javascript-usage/adding-custom-css-classes-to-blocks-areas-and-the-editor