[TUTO] LISTE D'ARTICLES : la personnaliser |
Répondre |
Auteur |
Sujet Recherche Options des sujets
|
nico38
Senior Member Depuis le: 18 Jan 2014 Status: Inactif Points: 3967 |
Options des messages
Thanks(2)
Envoyé : 09 Mai 2015 à 14:06 |
Un mini tuto qui explique comment donner des class via l'éditeur HTML TinyMCE 4.x
Pré-requis : vous avez installé TinyMCE 4.x sur OE (et non celui de base) Pourquoi ? - Sur OE, les listes d'articles ne peuvent comporter qu'un détail (on peut pas encore en ajouter) - Vous avez pas mal d'articles à écrire et vous voulez gagner du temps car entrer dans le code source de chaque détail et écrire class="blabla" ça peut être long et si vous refilez le bébé à un client c'est moins à sa portée (et il a peut-être d'autres choses à faire). - Vous voulez un jour changer le style de votre liste d'articles (titre + teaser ou autre), vous ne voulez pas vous taper un à un tous les détails et changer leur style (si vous avez plus d'un détail dans la liste d'articles !) ce qui en plus ferait remonter les anciens articles en 1ère position puisqu'ils seraient modifiés ! ça donne quoi ? Une fois vos class ajoutées vous n'avez plus qu'à sélectionner le texte qui doit hériter de la class Cela donne alors par exemple un Titre qui à son style et le résumé qui a le sien Tuto : 1. aller sur la page Backoffice-content (sur OE) 2. Faire Ctrl+D+MAJ 3. Action --> double-clic sur PK1!APHP_HEAD_Script_TinyMCE --> clic sur créneau de paramètre : 4 : en dessous de language: '$lang', copier coller : style_formats_merge: true, style_formats: [ {title: 'Titre1', inline: 'span', classes: 'class1'}, {title: 'Titre2', inline: 'span', classes: 'class2'}, ] PS : style_formats_merge: true, : à mettre si l'on souhaite garder les format headings etc... Titre1 = le titre qui apparaitra sur l'éditeur class1 : la class à donner 5. sur la page où il y a la liste d'articles mettre un bloc de code CSS par exemple : .class1 {font-size:24px;} (pas besoin de !important) .class2 {font-size:14px;} ______________________________________________________________________________________________________ Ainsi, c'est sur le bloc CSS que la liste d'articles peut être modifiée immédiatement sans passer en revue 1 par 1 chaque détail. PS : si vos détails "fictifs" ont le même style (exemple Titre+teaser = même police) : il n'y a qu'à l'indiquer sur OE (là où est la liste d'article) et non dans le bloc de code. Fin Annexe : 1. Attention Si sur une autre page vous souhaitez reprendre cette liste avec juste un détail : en plus de display:none, il vaut mieux que la liste soit en relative (dans OE c'est le panneau DynIteratorPanelDBG) : pour gérer la hauteur dû à la disparition de certaines parties) 2. Attention. Par défaut dans une liste d'article (pas pour les pack 50) OE met une marge en haut et en bas aux balises <p>, si vous voulez controler ces marges ajoutez le code suivant (mettre la distance que vous voulez) : /* SUPPRIMER MARGES AUX <P> */ .OEIterator p { margin-top: 0px !important; margin-bottom: 0px !important; } 3.la configuration style_forma est juste un exemple, en voici d'autres (ça ne concerne pas que les class) : style_formats: [ {title: 'Bold text', inline: 'b'}, {title: 'Red text', inline: 'span', styles: {color: '#ff0000'}}, {title: 'Red header', block: 'h1', styles: {color: '#ff0000'}}, {title: 'Example 1', inline: 'span', classes: 'example1'}, {title: 'Example 2', inline: 'span', classes: 'example2'}, {title: 'Table styles'}, {title: 'Table row 1', selector: 'tr', classes: 'tablerow1'} ] ce qui donne des style préformatés aussi pour ceux qui sont visuels, mais vaut mieux passer par un bloc css de OE pour tout modifier d'un coup) 4.Ceux qui ont tinymce 3.x c'est "theme_advanced_styles"et non "style_formats" ça se présente ainsi : theme_advanced_styles : "Titre1=class1;Titre22=class2" Edité par nico38 - 13 Mai 2015 à 12:23 |
|
Un lien vers ton site tu enverras | Problème d'affichage ? ---> CTRL+F5 | Couleur des liens --> "Styles des liens"
|
|
brolysan
Admin Group Depuis le: 14 Août 2009 Pays: France Status: Inactif Points: 10144 |
Options des messages
Thanks(0)
|
tu te rends compte sur "super" pavé que c'est...
|
|
nico38
Senior Member Depuis le: 18 Jan 2014 Status: Inactif Points: 3967 |
Options des messages
Thanks(1)
|
J'ajoute un petit détail sur Tinymce :
Quand vous écrivez et que vous voulez sauter une ligne en appuyant sur Entrer : c'est en fait un nouveau paragraphe (<p>) qui est créé, au lieu d'un saut de ligne (<br>). Pour sauter une ligne il faut appuyer sur MAJ + Entrer (vous avez alors un vrai saut de paragraphe). On peut aussi configurer tinymce pour éviter cela. ps : sur OE, les paragraphe <p> ont des marges haut et bas de 16px. Cette "technique" permet de ne pas avoir de problème de marge sinon bien penser au code css décrit dans le tuto. Edité par nico38 - 06 Juil 2015 à 20:09 |
|
Un lien vers ton site tu enverras | Problème d'affichage ? ---> CTRL+F5 | Couleur des liens --> "Styles des liens"
|
|
Répondre | |
Tweet
|
Aller au Forum | Permissions du forum Vous ne pouvez pas écrire un nouveau Sujet Vous ne pouvez pas répondre aux Sujets Vous ne pouvez pas effacer vos messages Vous ne pouvez pas éditer vos messages Vous ne pouvez pas créer des sondages Vous ne pouvez pas voter dans les sondages |