Updates

2025/10/15 - CYO - Ajout Code PHP pour créer un ICS pour les rendez-vous
2025/10/15 - CYO - Ajout CSS pour afficher un bouton qui génère un ICS de rendez-vous.

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) */

/* 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;
}

.hornav ul li.active {
    border-bottom-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;
}

/* Sert pour la présentation des icones de téléchargement des events */
  /* CSS minimal et autonome */
   .calendar-btn {
    display: inline-block;
    background-color: #16a34a;
    color: white !important;
    border-radius: 10px;
    padding: 8px 12px;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    margin-left: 10px;
  }
  .tooltip-container {
    position: relative;
    display: inline-block;
  }
  .tooltip-container .tooltiptext {
    visibility: hidden;
    width: 260px;
    background-color: #333;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 8px;
    position: absolute;
    z-index: 9999;
    bottom: 125%;
    left: 50%;
    margin-left: -130px;
    opacity: 0;
  }
  .tooltip-container:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
  }

---

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>

---

Code PHP pour générer un ICS.

Le Code a été ajouté dans un répertoire : CPAS_CUSTOM/generate_ics.php
Il est accessible de l'extérieur, mais comme il ne fait rien grand chose de dangereux, ce n'est pas un souci.

Code source du fichier generate_ics.php

<?php
/**
 * Simple générateur .ICS pour Joomla
 * Auteur : Olivier & ChatGPT 🍻
 */

/** defined('_JEXEC') or die('Accès interdit.'); // Sécurité Joomla **/

// Récupère les paramètres de l'URL
$title = isset($_GET['title']) ? urldecode($_GET['title']) : 'Événement';
$desc  = isset($_GET['desc']) ? urldecode($_GET['desc']) : '';
$loc   = isset($_GET['location']) ? urldecode($_GET['location']) : '';
$start = isset($_GET['start']) ? $_GET['start'] : '';
$end   = isset($_GET['end']) ? $_GET['end'] : '';

// Vérifie et formate les dates
function toICSDate($dateStr) {
    $timestamp = strtotime($dateStr);
    return gmdate('Ymd\THis\Z', $timestamp);
}

if (!$start) {
    die('Date de début manquante');
}

// Si pas de fin → +1h par défaut
if (!$end) {
    $end = date('Y-m-d H:i:s', strtotime($start) + 3600);
}

// Headers pour forcer le téléchargement
header('Content-type: text/calendar; charset=utf-8');
header('Content-Disposition: attachment; filename="evenement.ics"');

// Génération du contenu ICS
echo "BEGIN:VCALENDAR\r\n";
echo "VERSION:2.0\r\n";
echo "PRODID:-//MonSiteJoomla//Agenda//FR\r\n";
echo "CALSCALE:GREGORIAN\r\n";
echo "BEGIN:VEVENT\r\n";
echo "UID:" . uniqid() . "@monsite.be\r\n";
echo "DTSTAMP:" . gmdate('Ymd\THis\Z') . "\r\n";
echo "DTSTART:" . toICSDate($start) . "\r\n";
echo "DTEND:" . toICSDate($end) . "\r\n";
echo "SUMMARY:" . addslashes($title) . "\r\n";
echo "DESCRIPTION:" . addslashes($desc) . "\r\n";
echo "LOCATION:" . addslashes($loc) . "\r\n";
echo "END:VEVENT\r\n";
echo "END:VCALENDAR\r\n";
exit;
?>

---

Exemple de code pour ajouter un bouton pour télécharger un ICS qui crée un rendez-vous dans l'agenda du visiteur.

<p style="font-size: 18px;"><strong>2025-12-12</strong> de <strong>14h30</strong> à <strong>16h00</strong> au <strong>51, chaussée de Braine</strong> <span class="tooltip-container"> <a class="calendar-btn" href="/CPAS_CUSTOM/generate_ics.php?title=S%C3%A9ances+d%E2%80%99informations+du+CPAS+de+Soignies&amp;desc=Poser+toutes+vos+question+concernant+vos+droits+%C3%A0+l%27int%C3%A9gration+sociale.&amp;location=51+Chauss%C3%A9e+de+Braine+7060+Soignies&amp;start=2025-12-12+14%3A30%3A00&amp;end=2025-12-12+16%3A00%3A00">📅 Ajouter à mon calendrier</a> <span class="tooltiptext">Cliquez, puis ouvrez le fichier .ics téléchargé pour ajouter cet évènement à votre calendrier 📅</span> </span></p>

Ce code peut être généré par l'outil sur le site web : https://www.cpas-soignies.be/CPAS_CUSTOM/gen_link_ics.php
---

Exemple de code utiliser le Css TootlTip (Pop-ups).

<div class="tooltip">
  <a href="/media/ics/generate_ics.php?title=Visite+de+la+Brasserie&desc=Dégustation+et+visite+guidée.&location=Rue+du+Houblon,+Soignies&start=2025-11-10+14:00:00&end=2025-11-10+16:00:00"> 📅 Ajouter à mon calendrier </a>
  <span class="tooltiptext">
    Après le téléchargement, ouvrez le fichier <b>.ics</b> pour ajouter l’événement automatiquement à votre calendrier.
  </span>
</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.

Gestion de la page d'accueil

Pour la page d'accueil, on présente un Blog d'articles de la Catégorie Section générale du CPAS » Accueil du site.
Et pour aller récupérer des articles à publier dans ce blog d'articles, on crée des articles (qui reprennent les mêmes noms que les articles originaux) et dont le contenu est simplement (plug-In Article Anywhere).
Comme ça si il y a une modification dans l'article original, il est automatiquement publié corrigé dans l'accueil.
Le mot du président doit toujours être sur la page d'accueil.

Gestion des backups

On peut télécharger les backups créés avec Akeeba Backup en allant dans ce répertorie par FTP:  /www/administrator/components/com_akeebabackup/backup

"Toute personne a droit à l'aide sociale. Celle-ci a pour but de permettre à chacun de mener une vie conforme à la dignité humaine. Il est créé des centres publics d'action sociale qui, dans les conditions déterminées par la présente loi, ont pour mission d'assurer cette aide" Loi organique des CPAS du 8 juillet 1976, article 1.

Siège social
rue du Lombard 4 à 7060 Soignies
tél.: (+32) 067 348 111
e-mail: Cette adresse e-mail est protégée contre les robots spammeurs. Vous devez activer le JavaScript pour la visualiser.

n° entreprise: BCE 0212 225 211
n° compte Iban: BE72 091000968716 – BIC: GKCCBEBB