frendeitpt

tab ~ des onglets responsives

Des onglets et accordions responsives

Sur un script de bhaveshcmedhekar (licence MIT) adapté par Lomart

Version 2.5 Prise en charge des attributs class et style des titres d'onglets. Possibilité d'ouvrir un onglet en ajoutant son ID dans l'URL de la page.

🆙 tab : affiche du contenu dans des panneaux avec onglets en haut, à gauche ou à droite.

Cliquer pour lire la documentation

Mode responsive avec gestion de l'espacement vertical
{up tab}
< h4>texte onglet< /h4>
< p>texte du panneau< /p>
< img src="/..">
{/up tab}
Sur mobile ou sur demande, l'affichage est en mode accordion
script JS adapté par Lomart pour gestion répartition verticale
author Lomart version UP-1.0 - 07/2017 license GNU/GPLv3 credit Script de bhaveshcmedhekar tags layout-dynamic
  • tab = tab: tab ou accordion
  • title-tag = h4: balise utilisée pour les titres onglets
  • style: classe(s) et style(s) bloc principal
  • class: classe(s) bloc principal (obsolète)
  • title-style: classe(s) et style inline onglets
  • title-class: classe(s) onglets (obsolète)
  • content-style: classe(s) et style inline contenu
  • content-class: classe(s) contenu (obsolète)
  • auto: delai en millisecondes pour changement automatique d'onglet
  • espace-vertical = 1: 0, 1 ou 2 : niveau des éléments à répartir
  • css-head (base-css): règles CSS mises dans le head
  • plugin_type: accordion
  • side: left ou right
  • active_tab: 1 a N
  • content_display = block: interne, défini par espace-vertical

    Ce script affiche du contenu dans des panneaux avec des onglets en haut, à gauche ou à droite. Sur petit écran, l'affichage se transforme en accordion.

    Avec des onglets

    les onglets au-dessus

    • question n°1
    • question n°2
    • question n°3
    • question n°4

    texte pour la question n°1

    texte pour la question n°2 mais un peu plus long

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur tantas regiones barbarorum pedibus obiit, tot maria transmisit? Quamquam haec quidem praeposita recte et reiecta dicere licebit. Dolere malum est: in crucem qui agitur, beatus esse non potest. Aliena dixit in physicis nec ea ipsa, quae tibi probarentur; Ex quo illud efficitur, qui bene cenent omnis libenter cenare, qui libenter, non continuo bene. Duo Reges: constructio interrete.

    Dicam, inquam, et quidem discendi causa magis, quam quo te aut Epicurum reprehensum velim. Vide, quantum, inquam, fallare, Torquate. Piso, familiaris noster, et alia multa et hoc loco Stoicos irridebat: Quid enim? Quid, quod homines infima fortuna, nulla spe rerum gerendarum, opifices denique delectantur historia? Sed ad bona praeterita redeamus. Graecum enim hunc versum nostis omnes-: Suavis laborum est praeteritorum memoria. Ut pulsi recurrant? Contineo me ab exemplis.

    Quo modo autem optimum, si bonum praeterea nullum est? Ab hoc autem quaedam non melius quam veteres, quaedam omnino relicta. Nam, ut sint illa vendibiliora, haec uberiora certe sunt. Aliis esse maiora, illud dubium, ad id, quod summum bonum dicitis, ecquaenam possit fieri accessio. Neque enim civitas in seditione beata esse potest nec in discordia dominorum domus; Si quicquam extra virtutem habeatur in bonis. Ut necesse sit omnium rerum, quae natura vigeant, similem esse finem, non eundem. Perturbationes autem nulla naturae vi commoventur, omniaque ea sunt opiniones ac iudicia levitatis.

    Nemo igitur esse beatus potest. Num igitur eum postea censes anxio animo aut sollicito fuisse? Ubi ut eam caperet aut quando? Utilitatis causa amicitia est quaesita. Aliud igitur esse censet gaudere, aliud non dolere. At certe gravius.

    3 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quorum altera prosunt, nocent altera. Praeclare hoc quidem. Duo Reges: constructio interrete. Igitur neque stultorum quisquam beatus neque sapientium non beatus.

    Cur igitur, inquam, res tam dissimiles eodem nomine appellas? Etenim semper illud extra est, quod arte comprehenditur. Tecum optime, deinde etiam cum mediocri amico. Cum praesertim illa perdiscere ludus esset. Negat esse eam, inquit, propter se expetendam. Ut nemo dubitet, eorum omnia officia quo spectare, quid sequi, quid fugere debeant? Habent enim et bene longam et satis litigiosam disputationem. Tu autem, si tibi illa probabantur, cur non propriis verbis ea tenebas? Est igitur officium eius generis, quod nec in bonis ponatur nec in contrariis. Quis animo aequo videt eum, quem inpure ac flagitiose putet vivere?

    Hoc simile tandem est? Sed vobis voluptatum perceptarum recordatio vitam beatam facit, et quidem corpore perceptarum. Sed non alienum est, quo facilius vis verbi intellegatur, rationem huius verbi faciendi Zenonis exponere. Nam, ut sint illa vendibiliora, haec uberiora certe sunt. An dolor longissimus quisque miserrimus, voluptatem non optabiliorem diuturnitas facit? Non pugnem cum homine, cur tantum habeat in natura boni;

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur deinde Metrodori liberos commendas? Scio enim esse quosdam, qui quavis lingua philosophari possint; Qua igitur re ab deo vincitur, si aeternitate non vincitur? Cum id quoque, ut cupiebat, audivisset, evelli iussit eam, qua erat transfixus, hastam. Sed haec ab Antiocho, familiari nostro, dicuntur multo melius et fortius, quam a Stasea dicebantur. Duo Reges: constructio interrete. Quid enim de amicitia statueris utilitatis causa expetenda vides. Ut optime, secundum naturam affectum esse possit.

    Serpere anguiculos, nare anaticulas, evolare merulas, cornibus uti videmus boves, nepas aculeis. Utilitatis causa amicitia est quaesita. Inde sermone vario sex illa a Dipylo stadia confecimus. Uterque enim summo bono fruitur, id est voluptate. In qua si nihil est praeter rationem, sit in una virtute finis bonorum; Non est ista, inquam, Piso, magna dissensio. Praetereo multos, in bis doctum hominem et suavem, Hieronymum, quem iam cur Peripateticum appellem nescio. Quae sequuntur igitur? Aliter enim explicari, quod quaeritur, non potest.

    <p>{up tab | active_tab=2 }</p>
    <h4><img src="/images/icons/flag/fr.png" alt=""/> question n°1</h4>
    <p>texte pour la question n°1</p>
    <h4><img src="/images/icons/flag/be.png" alt=""/>  question n°2</h4>
    <p>texte pour la question n°2 mais un peu plus long {up lorem}</p>
    <h4><img src="/images/icons/flag/us.png" alt=""/> question n°3</h4>
    <p>3 : {up lorem=3,decorate}</p>
    <h4><img src="/images/icons/flag/gb.png" alt=""/> question n°4</h4>
    <p>4 : {up lorem=2}</p>
    <p>{/up tab}</p>
    

    Le contenu est organisé dans une structure simple: un titre h4 est le libellé de l'onglet, tout le code suivant jusqu'au prochain titre est son contenu.

    title-class & title-style
    personnalisation pour les onglets
    content-class & content-style
    personnalisation pour les panneaux de contenu
    title-tag
    non utilisé dans l'exemple, cette option permet d'utiliser une autre balise que h4 pour identifier le titre des onglets

    Note: pour avoir directement un accordion, vous pouvez le demander par { up tab=accordion ...


    les onglets sur le côté

    Cette partie de la démo a été réecrite en novembre 2019 pour utiliser les fonctionnalités de la version 1.7 de UP

    Pour cet exemple, nous allons mettre en oeuvre plusieurs options pour améliorer le rendu.

    • side pour mettre les onglets sur le côté
    • onglets : réduction de la largeur par title-style
    • contenu : content-class pour la couleur de fond et content-title pour avoir une hauteur minimale et augmenter la largeur pour compenser la réduction des onglets
    • espace-vertical pour une répartition verticale du contenu v1.7
    • css-head pour styler l'ensemble.
    • rotation automatique des onglets (un ajout de Pascal Leconte) v1.7
    • Onglet n°1
    • 1 ligne
    • 2 lignes
    • 3 lignes
    • 4 lignes
    • non espacé

    Titre du premier onglet

    🆙
    un petit UP bien centré entre le titre et le pied

    Une ligne tout en bas pour démontrer l'action de option espace-vertical

    une unique ligne alignée en haut

    une première ligne en haut

    une deuxième ligne en bas

    une première ligne en haut

    une deuxième ligne au centre

    une troisième ligne en bas

    une première ligne

    une deuxième ligne

    une troisième ligne

    une quatrième ligne en bas

    une première ligne en haut

    une deuxième juste au dessous. Voir les explications ligne 35
    Le shortcode et les explications juste après
    {up tab | side=left
    | title-style=width:15% 
    | content-class=bg-jauneClair  
    | content-style=min-width:85%;min-height:350px
    | espace-vertical=1
    | auto=8000
    | css-head=
      #id > ul li[border-left:1px solid #bbb]
      #id > ul li::after[width:0]
      #id > ul li.active[background:yellow]
      #id > ul li.active::after[background:red;width:10px]
      #id div.accordian_header[background:#fff] /*pour mobile*/
      #id .tab_content p [margin:0] /*pour demo */
    }
    
    <h4>Onglet n°1</h4>
    	<h2 class="tc notoc">Titre du premier onglet</h2>
    	<p class="tc">{up icon=Ux1F199,48}<br>un petit UP bien centré entre le titre et le pied</p>
    	<p style="border-top: dashed 1px #069; margin-bottom:0">Une ligne tout en bas pour démontrer l'action de l'option espace-vertical</p>
    <h4>1 ligne</h4>
    	<p class="mb0">{up icon=Ux278A,#069,48px} une unique ligne alignée en haut</p>
    <h4>2 lignes</h4>
    	<p class="mb0">{up icon=Ux278A,#069,48px} une première ligne en haut</p>
    	<div>{up icon=Ux278B,#069,48px} une deuxième ligne en bas</div>
    <h4>3 lignes</h4>
    	<p class="mb0">{up icon=Ux278A,#069,48px} une première ligne en haut</p>
    	<div>{up icon=Ux278B,#069,48px} une deuxième ligne au centre</div>
    	<p>{up icon=Ux278C,#069,48px} une troisième ligne en bas</p>
    <h4>4 lignes</h4>
    	<p class="mb0">{up icon=Ux278A,#069,48px} une première ligne</p>
    	<div>{up icon=Ux278B,#069,48px} une deuxième ligne</div>
    	<p>{up icon=Ux278C,#069,48px} une troisième ligne</p>
    	<p>{up icon=Ux278D,#069,48px} une quatrième ligne en bas</p>
    <h4>non espacé</h4>
    	<div>
    		<p class="mb0">{up icon=Ux278A,#069,48px} une première ligne en haut</p>
    		<div>{up icon=Ux278B,#069,48px} une deuxième juste au dessous. Voir les explications ligne 35</div>
    	</div>
    {/up tab}
    Les explications
    Ligne commentaire
    1 side=left pour mettre les onglets à gauche. right pour la droite. Sur mobile ou petit écran, les onglets se transformenr en accordions
    2 title-style réduit la largeur des onglets
    3 content-class ajoute un fond jaune clair aux contenus
    4 content-style pour compenser la réduction de largeur des onglets et donner une hauteur minimale afin d'éviter les scintillements d'affichage dûs aux changement de hauteur
    5 espace-vertical est une nouvelle option (v1.7) qui permet de répartir le contenu verticalement dans la hauteur de l'onglet. Il suffit d'indiquer la profondeur des blocs à répartir. Pratiquement, si 1 n'a aucun effet, essayez 2.
    Cette option a été créée pour afficher l'introduction des articles avec l'action jcontent_by_categories. C'est donc une option partagée par tous les onglet
    Une fonctionnalité similaire est offerte par les nouvelles règles de up.css : bg-vspace-between, bg-vspace-between-1 et bg-vspace-between-2
    6 auto est la durée (en millisecondes) avant le changement automatique d'onglet. Un clic sur un onglet stoppe le défilement.
    7 css-head va nous permettre d'ajouter des règles CSS spécifiques à cette boîte à onglets (#id sera remplacé par l'ID réelle).
    Si les styles sont partagés par plusieurs onglets, il est préférable d'ajouter les classes avec l'action addcsshead et d'ajouter l'option class=nom_de_la_classe_dans_addcsshead
    8-11 ces règles définissent le style des onglets
    12 permet de forcer la couleur de fond en vue accordion
    13 une règle spécifique à la démo pour supprimer les marges des balises P afin de mieux percevoir la répartition verticale
    Pour le contenu, je vais uniquement relever les points délicats
    17 la classe "notoc" est spécifique à la démo. Elle indique à l'action toc de ne pas ajouter ce titre au sommaire
    18 une nouveauté de la version 1.7 : il est possible de mettre des shortcodes dans les shortcodes.
    Une autre nouveauté est la refonte de l'action icon qui gère maintenant les fontes d'icônes, les caractères Unicode et les images à partir d'un unique shortcode. Ici, j'insère le caractère Unicode UP! en taille 48 px.
    31 notez que l'on peut mélanger les types de balises, c'est uniquement sa profondeur qui est prise en compte pour la répartition verticale. Vous devez comprendre maintenant pourquoi j'ai mis espace-vertical=1. Les blocs sont des enfants direct du bloc contenu.
    35 pour ne pas répartir verticalement les blocs, il suffit de les changer de profondeur. Ici dans un bloc DIV

    Accordion

    Bien que la fonction première de cette action est d'afficher du contenu dans des onglets, il est possible de l'afficher dans un accordion.
    Il suffit d'indiquer accordion comme argument de tab

    {up tab=accordion}
    • accordion n°1
    • accordion n°2
    • accordion n°3
    • accordion n°4

    texte pour la question n°1

    texte pour la question n°2 mais un peu plus long

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Virtutis, magnitudinis animi, patientiae, fortitudinis fomentis dolor mitigari solet. Qui enim voluptatem ipsam contemnunt, iis licet dicere se acupenserem maenae non anteponere. Zenonis est, inquam, hoc Stoici. At ille pellit, qui permulcet sensum voluptate. Nemo igitur esse beatus potest. Tum Lucius: Mihi vero ista valde probata sunt, quod item fratri puto.

    Frater et T. Sed ego in hoc resisto; Nisi autem rerum natura perspecta erit, nullo modo poterimus sensuum iudicia defendere. Conferam avum tuum Drusum cum C. An vero displicuit ea, quae tributa est animi virtutibus tanta praestantia? At hoc in eo M.

    Summum ením bonum exposuit vacuitatem doloris; Ergo id est convenienter naturae vivere, a natura discedere. Qui non moveatur et offensione turpitudinis et comprobatione honestatis? Sed quanta sit alias, nunc tantum possitne esse tanta. Satis est ad hoc responsum. Quae est igitur causa istarum angustiarum?

    Duo Reges: constructio interrete. Mihi quidem Homerus huius modi quiddam vidisse videatur in iis, quae de Sirenum cantibus finxerit. Nam Pyrrho, Aristo, Erillus iam diu abiecti. Tecum optime, deinde etiam cum mediocri amico. Sic enim censent, oportunitatis esse beate vivere. Dicet pro me ipsa virtus nec dubitabit isti vestro beato M. Atqui perspicuum est hominem e corpore animoque constare, cum primae sint animi partes, secundae corporis. Tamen a proposito, inquam, aberramus.

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Et quidem, inquit, vehementer errat; Si enim ad populum me vocas, eum. Quicquid enim a sapientia proficiscitur, id continuo debet expletum esse omnibus suis partibus; Duo Reges: constructio interrete. Quae sunt igitur communia vobis cum antiquis, iis sic utamur quasi concessis; Et nemo nimium beatus est; Et tamen ego a philosopho, si afferat eloquentiam, non asperner, si non habeat, non admodum flagitem. Equidem etiam Epicurum, in physicis quidem, Democriteum puto.

    Quod ea non occurrentia fingunt, vincunt Aristonem; Quid ergo attinet dicere: Nihil haberem, quod reprehenderem, si finitas cupiditates haberent? Cuius quidem, quoniam Stoicus fuit, sententia condemnata mihi videtur esse inanitas ista verborum. Nondum autem explanatum satis, erat, quid maxime natura vellet. Sed nimis multa. Quare ad ea primum, si videtur; Si mala non sunt, iacet omnis ratio Peripateticorum.

    Paulum, cum regem Persem captum adduceret, eodem flumine invectio? Hi curatione adhibita levantur in dies, valet alter plus cotidie, alter videt. Nunc ita separantur, ut disiuncta sint, quo nihil potest esse perversius. Cum autem venissemus in Academiae non sine causa nobilitata spatia, solitudo erat ea, quam volueramus. Mihi vero, inquit, placet agi subtilius et, ut ipse dixisti, pressius. Quid, si non sensus modo ei sit datus, verum etiam animus hominis? Sin autem est in ea, quod quidam volunt, nihil impedit hanc nostram comprehensionem summi boni. Gracchum patrem non beatiorem fuisse quam fillum, cum alter stabilire rem publicam studuerit, alter evertere. Ita ne hoc quidem modo paria peccata sunt. Vide igitur ne non debeas verbis nostris uti, sententiis tuis. Quae similitudo in genere etiam humano apparet.

    4 :

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cur id non ita fit? Ego vero isti, inquam, permitto. Vos autem cum perspicuis dubia debeatis illustrare, dubiis perspicua conamini tollere. Duo Reges: constructio interrete. Qui ita affectus, beatum esse numquam probabis;

    Si verbum sequimur, primum longius verbum praepositum quam bonum. Non est enim vitium in oratione solum, sed etiam in moribus. Quicquid porro animo cernimus, id omne oritur a sensibus; Illis videtur, qui illud non dubitant bonum dicere -; Summus dolor plures dies manere non potest?

    CSS évolué

    Si les options proposées ne suffisent pas pour répondre à votre demande, vous pouvez utiliser l'option css-head pour spécifier votre CSS.

    Pour la démonstration, je vais reprendre le premier exemple de cette démo

    • question n°1
    • question n°2
    • question n°3

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quod ea non occurrentia fingunt, vincunt Aristonem; Quid, quod homines infima fortuna, nulla spe rerum gerendarum, opifices denique delectantur historia? Suo genere perveniant ad extremum; Duo Reges: constructio interrete. Ea, quae dialectici nunc tradunt et docent, nonne ab illis instituta sunt aut inventa sunt? Quod autem ratione actum est, id officium appellamus. Eam tum adesse, cum dolor omnis absit; Non quam nostram quidem, inquit Pomponius iocans;

    Duarum enim vitarum nobis erunt instituta capienda. Certe, nisi voluptatem tanti aestimaretis. Age nunc isti doceant, vel tu potius quis enim ista melius? Pauca mutat vel plura sane; Respondeat totidem verbis. Cuius ad naturam apta ratio vera illa et summa lex a philosophis dicitur. An, partus ancillae sitne in fructu habendus, disseretur inter principes civitatis, P. Illis videtur, qui illud non dubitant bonum dicere -;

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Graece donan, Latine voluptatem vocant. Si longus, levis dictata sunt. Bestiarum vero nullum iudicium puto. Maximas vero virtutes iacere omnis necesse est voluptate dominante. Non quam nostram quidem, inquit Pomponius iocans; Duo Reges: constructio interrete. Et non ex maxima parte de tota iudicabis? A mene tu? Aut haec tibi, Torquate, sunt vituperanda aut patrocinium voluptatis repudiandum.

    Immo alio genere; Sumenda potius quam expetenda. Etenim si delectamur, cum scribimus, quis est tam invidus, qui ab eo nos abducat? In qua si nihil est praeter rationem, sit in una virtute finis bonorum; Cui Tubuli nomen odio non est? Nihil enim iam habes, quod ad corpus referas; Et quod est munus, quod opus sapientiae? Nunc haec primum fortasse audientis servire debemus. Venit ad extremum;

    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Piso igitur hoc modo, vir optimus tuique, ut scis, amantissimus. Ita multo sanguine profuso in laetitia et in victoria est mortuus. Duo Reges: constructio interrete. Occultum facinus esse potuerit, gaudebit; Sed venio ad inconstantiae crimen, ne saepius dicas me aberrare; Sed vos squalidius, illorum vides quam niteat oratio. Quod autem principium officii quaerunt, melius quam Pyrrho; Honesta oratio, Socratica, Platonis etiam. Traditur, inquit, ab Epicuro ratio neglegendi doloris. Perturbationes autem nulla naturae vi commoventur, omniaque ea sunt opiniones ac iudicia levitatis.

    Duarum enim vitarum nobis erunt instituta capienda. Sint ista Graecorum; Nihil minus, contraque illa hereditate dives ob eamque rem laetus. Longum est enim ad omnia respondere, quae a te dicta sunt. Quod cum dixissent, ille contra. Etsi qui potest intellegi aut cogitari esse aliquod animal, quod se oderit? Si stante, hoc natura videlicet vult, salvam esse se, quod concedimus; Non dolere, inquam, istud quam vim habeat postea videro;

    {up tab | active_tab=2
    | css-head=
    #id .tab_1, #id \[rel="tab_1"\], #id \[rel="tab_1"\].active:after[background:coral]
    #id .tab_3[background:plum] #id \[rel="tab_3"\], #id \[rel="tab_3"\].active:after[background:indigo;color:white]
    }
    <h4><img src="/images/icons/flag/fr.png" alt="" /> question n°1</h4>
    {up lorem=2,decorate}
    <h4><img src="/images/icons/flag/be.png" alt="" /> question n°2</h4>
    {up lorem=2,decorate}
    <h4><img src="/images/icons/flag/us.png" alt="" /> question n°3</h4>
    {up lorem=2,decorate}
    {/up tab}

    La modification des couleurs pour le premier et troisième onglet est uniquement fait par l'option css-head.

    La première ligne définit 1 attribut (background:coral) que l'on applique à 3 sélecteur CSS :

    #id .tab_1, #id \[rel="tab_1"\], #id \[rel="tab_1"\].active:after[background:coral]
    1. #id .tab_1 : le contenu de l'onglet
    2. #id \[rel="tab_1"\] : l'onglet
    3. #id \[rel="tab_1"\].active:after : élément qui cache la bordure basse de l'onglet actif

    La deuxième ligne définit 2 attributs : fond violet pour le contenu de l'onglet et  fond violet, texte blanc pour l'onglet:

    #id .tab_3[background:plum] 
    #id \[rel="tab_3"\], #id \[rel="tab_3"\].active:after[background:indigo;color:white]

    C'est similaire au premier onglet, sauf que le contenu est défini à part.

    Pour mémoire :

    • #id sera remplacé par l'ID de l'action afin que la règle soit limitée à celle-ci
    • UP n'accepte pas les accolades {} dans les shortcodes, il faut les remplacer par des crochets []
    • pour utiliser des crochets [], il faut les échapper avec un antislash devant \[\]

    version 2.5 : Si vous attribuer des attributs class et style, il seront pris en compte

    Le shortcode en mode code pour voir les attributs ajoutés
    <p>{up tab | content-class=bg-white}</p>
    <h4 class="bg-purple bg-hover-blue" style="color: yellow;">Onglet 1</h4>
    <p>Texte 1</p>
    <h4 class="bg-green bg-hover-blue" style="color: yellow; border-bottom: red dotted 2px;">Onglet 2</h4>
    <p>Texte 2</p>
    <p>{/up tab}</p>
    • Onglet 1
    • Onglet 2

    Texte 1

    Texte 2

    Ouvrir la page sur un onglet

    Depuis la version 2.5, il est possible d'ouvrir la page sur un onglet identifié par son ID

    Par défaut, les onglets ont un identifiant tab_1, tab_2, etc. Mais, je vous conseille de les attribuer vous-même en mode code, il seront plus facile à mémoriser et surtout plus parlant !

    Sur ce site, j'utilise cette possibilité pour ouvrir les articles références comme celui sur la personnalisation de UP.
    Le bouton ci-contre ouvre la boite à onglets avec CSS ouvert.

    {up modal=index.php?option=com_content&view=article&id=140&catid=15&tmpl=component#css
     | label=&#x1F199; personnaliser le CSS de UP | class=btn btn-primary}

    Il y a beaucoup d'avantge à utiliser l'action modal :

    • l'article est chargé uniquement si le visiteur clique sur le bouton
    • l'internaute ne quitte pas la page
    • l'affichage occupe une grande partie de l'écran
    • l'ajout de &tmpl=component à la fin de URL affiche uniquement le contenu sans aucun module

    Pour en revenir à notre shortcode, l'option principale contient l'URL de l'article à laquelle on ajoute &tmpl=component et l'ancre pour ouvrir l'onglet. Je définis également le libellé du bouton et son style.

    En réalité, j'ai crée une prefset pour chacune des pages appelées.

    Donc mon shortcode est {up modal=memo-custom-css}. C'est  plus court et surtout plus lisible !

    Mon fichier prefs.ini contient une section

    [memo-custom-css]
    label="&#x1F199; personnaliser le CSS de UP"
    class="btn btn-primary "
    modal="index.php?option=com_content&view=article&id=140&catid=15&tmpl=component#css"
    Pour vous souvenir des prefsets, c'est très simple ! Vous affichez la page avec le shortcode {up modal | ?}

     Personnalisation

    Si vous utilisez souvent cette action, il peut être judicieux de l'adapter à votre besoin et au design de votre site.

    • Pour modifier les valeurs par défaut des options, il suffit de créer un fichier custom/prefs.ini dans le dossier de l'action tab. A partir de la version 1.4 de UP
      Exemple : vous voulez systématiquement appliquer une classe CSS définie dans votre fichier custom.css, ajouter dans [options] class=ma_classe
      Ce n'est pas plus compliqué. Cette adaptation ne sera jamais effacée par une mise à jour de UP.
    • Si le style ou le comportement ne conviennent pas totalement, il est possible de les personnaliser en dupliquant les fichier CSS, SCSS et JS dans un sous-dossier custom. S'il existe, son contenu sera utilisé en place des fichiers de l'action. A partir de la version 1.31 de UP

    Pour en savoir plus : 🆙 Comment personnaliser une action