{up tabslide=sommaire | tabLocation=right| onLoadSlideOut=0 | clickScreenToClose | panel-style=min-width:170px;max-height:60vh}
{up toc | selector=h1,h2,h3 | class=chevron | maxlen=20 | style=max-height:58vh;overflow-y:auto}
{/up tabslide}

Les menus

La navigation sur le site se fait à l'aide 3 menus

{up tab=accordion | title-tag=h3}

Le menu principal en haut

C'est le menu principal du site. En vue smartphone, un bouton 'hamburger' l'ouvre sur le côté droit.

{up jmenus-list=mainmenu | template-menutype=0}

Le menu secondaire en pied

Ce menu est utilisé pour proposer des liens secondaires.

{up jmenus-list=menufooter | template-menutype=0}

Le menu technique invisible

Ce menu fournit les styles d'affichage pour le contenu appelé en dehors des menus. Il n'a pas besoin d'être visible, mais il est indispensable.

{up jmenus-list=invisible | template-menutype=0}

{/up tab}

Les catégories de contenu

Les articles sont organisés par catégories.

{up jcategories-list}

Les boutons ci-dessous affichent la liste des articles de chaque catégories.
La colonne "contenu" est composée de l'introtext et de la note de l'article. Pensez à argumenter cette dernière si l'article est dépourvu de texte d'introduction

{up faq}

Base (id 2) les articles utilisés pour tester UP

{up csv2table | model=blue | header=ID;Titre;Contenu;Tag | col=c5-40-50-c10}{up jcontent_by_categories=2 | main-tag=0 | item-tag=0 | sort-by=ordering | sort-order=asc | template=##id##;##title-link## <small>##subtitle##</small>;##intro-text,250####note##;##tags-list##}{/up csv2table}

Exemples (id 8) liste d'exemples de shortcode

Important : texte ...

{up csv2table | model=blue | header=ID;Titre;Contenu;Tag | col=c5-40-50-c10}{up jcontent_by_categories=8 | sort-by=title | main-tag=0 | item-tag=0 | sort-by=ordering | sort-order=asc | template=##id##;##title-link## <small>##subtitle##<br>Alias : ##alias##</small>;##intro-text,250####note##;##tags-list##}{/up csv2table}

Références (id 9) articles utilisés comme aide-mémoire

les actualités affichées par le menu News. Les plus récentes en premier.

{up csv2table | model=blue | header=ID;Titre;Contenu;Tag | col=c5-40-50-c10}{up jcontent_by_categories=9 | sort-by=created | sort-order=desc | main-tag=0 | item-tag=0 | sort-by=ordering | sort-order=asc | template=##id##;##title-link## <small>##subtitle##</small>;##intro-text,250####note##;##tags-list##}{/up csv2table}

{/up faq}

Le style du site

Le site utilise le template Cassiopeia qui définit :

• {up note=a préciser}

Les positions utilisées

• sidebar-right : menu et connexion
• debug : utilisation technique
• {up note=a préciser}

Pour info, ces templates sont installés :

{up jextensions-list=template | client=0 | minimal-id=0 | author-exclude
| template=##name## <small>##version## (id:##id##) ##author## </small> ##note## }

Les couleurs

La couleur principale est le bleu c1 {up icon=Ux2589,var(--c1),2rem} utilisé pour les liens ( {up icon=Ux2589,var(--lightBlue),2rem} bleuClair en survol).
Les couleurs secondaires sont le gris c2 {up icon=Ux2589,var(--c2),2rem} et le jauneFonce {up icon=Ux2589,var(--darkYellow),2rem }

{up color | info}

Les images

Sauf exception, les images font 1200px de large avec une version "-mini" (vignette) à 450px

Elles sont rangées dans des sous-dossiers de "images" selon la catégorie de l'article où elles sont utilisées

Pour afficher une galerie d'images, utiliser {up image-gallery=dossier_des_images}

Les extensions installées

Pour adapter un site Joomla aux besoins, on utilise des extensions. Un composant est une grosse fonctionnalité avec un menu dans l'administration, un module est un bloc ajouté en périphérie du contenu sur le site et un plugin réalise diverses actions (UP est un plugin!)

{up tab=accordion | title-tag=h3}

Les composants

{up jextensions-list=component | client=2 | sort=name | minimal-id=0
| template=##name## <small>##version## (id:##id##) ##author## </small> ##note## }

Les modules côté site

{up jextensions-list=module | client=0 | sort=name | minimal-id=0
| template=##name## <small>##version## (id:##id##) ##author## </small> ##note## }

Les plugins

{up jextensions-list=plugin | client="2" | model-folder=%s | sort=folder,name | minimal-id=0
| template=<small>##folder##</small> <span class="##state##">##name##</span> <small>##version## (id:##id##) ##author## </small> ##note## }

Les modules côté administration

{up jextensions-list=module | client=1 | sort=name | minimal-id=0
| template=##name## <small>##version## (id:##id##) ##author## </small> ##note## }

{/up tab}

Les extensions en rouge sont inactives

Les modèles de contenu

Le sommaire d'une page

Par défaut, le sommaire est ouvert dans un onglet sur la droite. On limite la longueur des titres à 40 caractères.

{up tabslide=sommaire | tabLocation=right | onLoadSlideOut | panel-style=min-width:170px;max-height:60vh}
   {up toc | class=chevron | maxlen=40 | style=max-height:58vh;overflow-y:auto}
{/up tabslide}

Autres articles de la catégorie

Ce code utilisé en bas d'article affiche la liste des autres articles de la même catégorie.

<h4>D'autres infos</h4>
{up csv2table | prefset=up-jnews-documentation}
   {up jcontent_by_categories | main-tag=0 | item-tag=0
     | sort-by=ordering | sort-order=asc
     | tags-list-style=badge;margin-right:4px
     | template=##id##;##title-link##<br><small>##subtitle##</small>;##intro-text,250##
   }
{/up csv2table}

Bloc image et texte

image à gauche et contenu centré verticalement

<div class="fg-row fg-gap fg-vcenter">
    <div class="fg-c2 cs12 tc">
        <img href="/">
    </div>	
    <div class="fg-c10  fg-cs12">
    </div>	
</div>

Les tableaux

table pour Options

{up csv2table | model= blue | header=Option;Commentaire | col=g15-100 | col-style-1=font-weight:bold}
opt1;  desc1
{/up csv2table}

Les préférences pour UP

ICON

{up icon | info=2}

HR ligne horizontale

{up upprefset | prefset-exclude}