Joomla
Le site a été conçu en Joomla 5.
Les plug-Ins utilisés et nécessaires au site sont :
- Activer le Plug-in : Système - Redirection
Cela permet de collecter les adresses bizarres et ou vers des pages supprimées pour les rediriger vers des pages existantes et éviter les erreurs.
J'ai créé une redirection http://siteweb/Technique pour que cela redirige vers cette page d'instruction techniques:
http://intranet:8780/index.php?option=com_content&view=article&id=83 - Akeeba Backup pour les backups
- Regular Labs - Gestionnaire d'extensions
- Et avec cet outil [Regular Labs - Gestionnaire d'extensions] j'ai installé
- Articles Anywhere - Permet d'imbriquer des articles dans des articles
- Articles Field - même fonction que le précédent
- Cache Cleaner - Permet d'avoir un bouton qui supprime tous les caches en une fois.
- Extension UP qui permet beaucoup de choses en un seul plug-in
- Les extensions fournies avec le Template de J51_Elvira :
- J51_Carousel
- J51_elvira
- J51_FlexGallery
- J51_Icons
- J51_InlineIcons
- J51_PricingTable
- J51_Profile
- J51_ThumbsGallery
- WT Contact - Permet d'afficher les contacts de Joomla dans des templates autres que ceux de Joomla.
Template
Le Template utilisé est le template j51_elvira de J51 - https://www.joomla51.com/demo/0140/index.php
Les paramètres qui ont été modifiés sont :
Header Styling
Body Background Color : #630038
Header Background Color : #630038
Header Slide Min-Height : 125
---
Typography Styling
Body Font Size : LARGE
Body font : Verdana
Body Font Color : #2e0f21
(H1) Category Head font : Roboto
(H2) Article Title Font : Roboto
(H2) Article Title Color :
(H3) Module Title Font : Roboto Condensed
(H3) Module Title Color : #ed028c
(H4) Heading Font : Roboto Condensed
Hornav Menu Font : Raleway
Link Color : #8f0053
Button Color : #b5006a
Button Hover Color : #ff0095
Load Font Awesome : OUI
---
Hornav Menu Settings
Select Top Menu : Main Menu
Dropdown Menu Item Color : #630038
---
Logo image :
le logo avec écritures blanches
---
Layout Options
Template Width : 1150
Side Column Layout : S-C-S
---
Responsive options:
Responsive Layout : OUI
Mobile Menu Breakpoint : 1100
Mobile Menu Background : #630038
---
Copyright Info
(c) 2025 CPAS de Soignies - à changer tous les ans
---
Custom CSS
/* pour que le menu et sous menus soient adaptés par rapport au template */
/* en cas d'affichage d'un menu dans la zone sidecol_a (à gauche) */
#sidecol_a ul a {
font-size: 14px;
color: #8f0053;
}
/* pour que le menu et sous menus soient adaptés par rapport au template */
.hornav > ul > li > a {
font-size: 18px;
font-weight:bold;
}
.hornav ul ul {
border: 1px solid #ed028c;
border-radius: 15px;
}
.hornav ul ul li.current > a {
background-color: #630038
color: #fff;
}
/* tables avec bords rose foncé et fond rose pale*/
table.article-table {
border-radius: 20px;
border-collapse: separate;
border-spacing: 0;
width: 100%;
border-width: 1px;
background-color: rgb(255, 243, 251);
border-color: rgb(230, 0, 126)
}
/* pour que la ligne HR fasse toute la longueur car le template n'en fait qu'une courte de 20px*/
hr {
max-width: 100%;
}
/* --------------------------- */
.map-wrapper {
margin: 3rem auto;
max-width: 1000px;
padding: 1rem;
background-color: #f9e1ee;
border: 2px solid #e6007e;
border-radius: 20px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
animation: fadeInUp 0.6s ease-in-out;
}
.map-title {
text-align: center;
font-size: 1.8rem;
margin-bottom: 1rem;
font-family: 'Trebuchet MS', sans-serif;
color: #b2005d;
}
.google-map-container {
position: relative;
overflow: hidden;
padding-top: 56.25%; /* Ratio 16:9 */
border-radius: 15px;
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.google-map-container:hover {
transform: translateY(-5px);
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
}
.google-map-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
border-radius: 15px;
}
/* Animation d'apparition douce */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* --------------------------- */
.video-preview details {
max-width: 800px;
margin: 2rem auto;
border-radius: 15px;
overflow: hidden;
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
font-family: 'Trebuchet MS', sans-serif;
}
.video-preview summary {
list-style: none;
cursor: pointer;
position: relative;
padding: 0;
}
.video-preview summary::marker {
display: none;
}
.video-preview img {
width: 100%;
display: block;
}
.video-preview .play-label {
position: absolute;
bottom: 10%;
left: 50%;
transform: translateX(-50%);
background: #e6007e;
color: white;
padding: 10px 20px;
border-radius: 30px;
font-size: 1rem;
box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}
.video-preview video {
width: 100%;
height: auto;
display: block;
border-radius: 0 0 15px 15px;
}
---
Exemple de code pour présenter les vidéos en utilisant le Code CSS précédent.
<div class="video-preview">
<details>
<summary><img src="/images/Videos/DigiCap/Capsules%20Video%20ACTV/Video%20ACTV%2001.png" alt="Aperçu vidéo"> <span class="play-label">▶ Regarder la vidéo</span> </summary>
<video controls="controls" width="300" height="150">
<source src="/images/Videos/DigiCap/Capsules%20Video%20ACTV/Capsule-boite-mail.mp4" type="video/mp4">
Votre navigateur ne supporte pas la lecture de cette vidéo.</video></details>
</div>
---
Mise en place
Pour que les zones d'affichage de contact et les horaires soient rassemblés tous au même endroit pour faciliter l'adaptation des contacts indépendamment des articles. J'ai rassemblé dans une catégorie [Contacts] et une Catégorie [Horaires].
Chaque contact est dans un article différent pour chaque sous section.
Chaque article est un tableau. Ce tableau est mis en forme par le Custom CSS table.article-table en appellant la classe Article-table.
Ce qui fait qu'en modifiant le custom Css table.article-table tous les tableau de tout le site vont changer en une fois.
Grâce au plug-in Article Anywhere, un article d'une section appelle le bloc du contact à la fin et d'autres blocs si nécessaire.
On ne réécrit pratiquement jamais deux fois avec ces réutilisation de blocs de texte.
