{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 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}