BullGuard Antivirus Sale - 60% Off with openElement !
Accueil Forum Accueil Forum >

openElement

> Tutoriaux utilisateurs
  Nouveaux messages Nouveaux messages Fil RSS  - [TUTO] LISTE D'ARTICLES : la personnaliser
  FAQ FAQ  Rechercher dans le Forum   Inscription Inscription  Connexion Connexion

[TUTO] LISTE D'ARTICLES : la personnaliser

 Répondre Répondre
Auteur
Message
nico38 allez vers le bas
Senior Member
Senior Member


Depuis le: 18 Jan 2014
Status: Inactif
Points: 3967
Options des messages Options des messages   Thanks (2) Thanks(2)   Citer nico38 Citer  RépondreRéponse Lien Direct à ce Post Sujet: [TUTO] LISTE D'ARTICLES : la personnaliser
    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"
Haut de la page
brolysan allez vers le bas
Admin Group
Admin Group
Avatar

Depuis le: 14 Août 2009
Pays: France
Status: Inactif
Points: 10144
Options des messages Options des messages   Thanks (0) Thanks(0)   Citer brolysan Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 27 Mai 2015 à 09:39
tu te rends compte sur "super" pavé que c'est...Big smile
Haut de la page
nico38 allez vers le bas
Senior Member
Senior Member


Depuis le: 18 Jan 2014
Status: Inactif
Points: 3967
Options des messages Options des messages   Thanks (1) Thanks(1)   Citer nico38 Citer  RépondreRéponse Lien Direct à ce Post Envoyé : 06 Juil 2015 à 20:08
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"
Haut de la page
 Répondre Répondre
  Partagez ce sujet   

Aller au Forum Permissions du forum allez vers le bas

Forum Software by Web Wiz Forums® version 12.04
Copyright ©2001-2021 Web Wiz Ltd.

Cette page a été affichée en 0.063 secondes.