Paramètrer le thème

Accéder au paramétrage par le menu "Site / Gestion des propriétés du site" puis déplier la section "Configuration du Thème Paris.fr".

  • Bandeau du site
    • Afficher le bandeau du site : Afficher ou masque le bandeau sur l'ensemble du site
    • Afficher le bandeau sur toutes les pages : Afficher le bandeau sur toutes les pages, par d├⌐faut le bandeau n'est affich├⌐ que sur la page d'accueil
    • Image du bandeau : Par d├⌐faut "images/local/skin/banner.jpg", c'est l'url de l'image de fond du bandeau.
    • Cr├⌐dit photo du bandeau : Cr├⌐dit de la photo qui apparait sur le "hover" du bandeau. Si le champ est laiss├⌐ vide, aucun cr├⌐dit n'apparaitra.
    • Couleur du titre : Couleur du titre du bandeau
    • Couleur de fond du titre : Couleur de fond du titre du bandeau. Attention cela ne doit ├¬tre utilis├⌐ qu'en cas de probl├¿me de contraste avec l'image de fond, car cela forc├⌐ment d├⌐roge du Design System
    • Padding du titre : Marge qui laisse apparaitre le fond de couleur. Attention cela ne doit ├¬tre utilis├⌐ qu'en cas de probl├¿me de contraste avec l'image de fond, car cela forc├⌐ment d├⌐roge du Design System
    • Position verticale de l'image de fond : Permet de d├⌐caler l'image de fond sur l'axe Y
    • Position horizontale de l'image de fond : Permet de d├⌐caler l'image de fond sur l'axe X
  • Bandeau des formulaires
    • Afficher l'image du site sur le bandeau : Afficher l'image par d├⌐faut du site sur le bandeau des formulaires;
    • Afficher l'image du formulaire sur le bandeau : Afficher l'image de chacun des formulaires ayant une image upload├⌐e Γö£├í la place de l'image par d├⌐faut du bandeau
    • Afficher le titre du formulaire sur le bandeau : Afficher le titre du formulaire sur l'image. Si non coch├⌐e, le titre n'est pas affich├⌐ au-dessus de l'image du formulaire.
  • Configurations
    • Configuration par d├⌐faut du date picker : Options de configurations du date picker au format JSON - Exemple: "daysOfWeekDisabled": [0,6];"daysOfWeekDisabled": [0,6];
    • Configuration par d├⌐faut de l'├⌐diteur du Th├¿me : Options de configurations de l'├⌐diteur wysiwyg au format JSON
  • Mise en page
    • Mise en page fluide : Si coch├⌐e, la mise en page est fluide, bord Γö£├í bord. Par d├⌐faut la mise en page est fixe avec une zone de 1440px max centr├⌐e pour les ├⌐crans "Desktop"
  • Options des liens
    • Affichage par d├⌐fault de l'icone target "blank_ " : Affiche l'icone target blank_ sur tous les liens. Sinon utiliser la classe css ".target-show-icon"
  • Gestion des menus
    • Afficher le menu principal : Affiche le menu principal -barre de menu-. A d├⌐cocher par exemple si l'on ne veut que le menu "sidebar".
    • Le menu principal est fixe : Si cette case est coch├⌐e, le menu principal est fixe.
    • Activer le menu principal vertical : Affiche le menu principal dans une zone lat├⌐rale Γö£├í gauche.
    • Rendre le menu principal vertical retractable : Ajoute la possibilit├⌐ d'afficher un bouton permettant de masquer / Afficher le menu vertical.
    • Acc├¿s rapide : Identifiant du contenu principal : Identifiant pour acc├⌐der au contenu principal -par d├⌐faut "main"- lorsque l'utilisateur utilise les tabulations et fait apparaitre le menu d'acce├¿s rapide -lien d'├⌐vitement-. Attention ! Necessite de mettre cet id dans toutes les templates "principaux" .
    • Acc├¿s rapide : Afficher / masquer le lien d'acc├¿s rapide au menu principal : Si coch├⌐e, le lien d'acc├¿s rapide au menu principal sera affich├⌐, par d├⌐faut il ne l'est pas.
    • Ajouter le bouton "Retour en haut" : Affiche en bas Γö£├í droite un bouton pour remonter en haut de page.
    • Afficher / masquer le menu de recherche : Si coch├⌐, le champs de recherche sera affich├⌐ dans le menu principal.
    • Afficher / masquer le menu du plan du site : Si coch├⌐, le menu "Plan du site" sera affich├⌐ dans le pied de page.
    • Activer la gestion des  menus long : Si cette case est d├⌐coch├⌐e, si les menus d├⌐passent la taille maximale du menu, un sous menu se cr├⌐├⌐ automatiquement pour afficher les menus qui d├⌐passent la largeur maximum.
  • Urls
    • Libell├⌐ "contact" : libell├⌐ du lien de contact de l'application. 
    • Formulaire de contact : Par d├⌐faut https://www.paris.fr/pages/contact-232, c'est l'url du formulaire de contact de l'application. Attention, si l'url n'est pas saisi le lien n'apparaitra plus dans le pied de page.
    • Politique des cookies : Par d├⌐faut https://www.paris.fr/pages/cookies-234, c'est l'url Politique des cookies de l'application. Attention, si l'url n'est pas saisi le lien n'apparaitra plus dans le pied de page.
    • Libell├⌐ "cookies" : Libell├⌐ du lien de gestion des cookies
    • Mentions l├⌐gales : Par d├⌐faut https://www.paris.fr/pages/mentions-legales-235, c'est l'url d'acc├¿s Γö£├í la politique aux mentions l├⌐gales. Attention, si l'url n'est pas saisi le lien n'apparaitra plus dans le pied de page.
    • Libell├⌐ pour les Mentions l├⌐gales : Libell├⌐ du lien d'acc├¿s Γö£├í la politique aux mentions l├⌐gales
    • CGU : Par d├⌐faut https://www.paris.fr/pages/mentions-legales-235, c'est l'url d'acc├¿s aux CGU de l'application. Attention, si l'url n'est pas saisi le lien n'apparaitra plus dans le pied de page.
    • Libell├⌐ pour le lien des CGU : Libell├⌐ pour le lien d'acc├¿s aux CGU de l'application
    • Politique des donn├⌐es : Par d├⌐faut https://www.paris.fr/pages/mentions-legales-235, c'est l'url d'acc├¿s Γö£├í  la politique des donn├⌐es de l'application. Attention, si l'url n'est pas saisi le lien n'apparaitra plus dans le pied de page.
    • Libell├⌐ pour le lien "Politique des donn├⌐es" : Libell├⌐ pour le lien d'acc├¿s Γö£├í la politique des donn├⌐es de l'application
    • Accessibilit├⌐e : Par d├⌐faut https://www.paris.fr/pages/accessibilite-233 , c'est l'url d'acc├¿s Γö£├í  la politique d'accessibilit├⌐es. Attention, si l'url n'est pas saisi le lien n'apparaitra plus dans le pied de page.
    • Libell├⌐ accessibilit├⌐e : Libell├⌐ du lien d'accessibilit├⌐ ( non conforme / partiellement conforme / totalement conforme)
    • Mon Paris : Par d├⌐faut url du site Mon Paris, avec nom de la webapp. Si vide permet d'utiliser tout autre module MyLutece.
    • Url de la Recherche : Par d├⌐faut jsp/site/Portal.jsp?page=search, c'est l'url de la recherche par d├⌐faut pour le menu. Attention pour afficher le menu de recherche, le param├¿tre hasSearchMenu=true doit Γö£├íΓö¼┬¼tre dans la macro "cMainNav".
    • Url du serveur d'Authentification : Url du serveur d'Authentification - Keycloack -.
    • Identifiant client - Authentification : Identifiant client pour le contrat de service Mon Paris. N├⌐cessaire pour le RIC.
  • Messages
    • Type du message : warning Type possible: info, warning, success, danger, propri├⌐t├⌐ "type" du plugin toastr
    • Titre : Titre de la notification
    • Message : Message de la notification
    • Position - Nom de la classe : bottom-right . Emplacement de la notification. Nom de classe, propri├⌐t├⌐ "positionClass" du plugin toastr. Valeurs d├⌐faut: top-full-width / Autres valeurs possibles : top-right, bottom-left...
    • Dur├⌐e d'affichage du message : Dur├⌐e d'affichage du message en ms. par d├⌐faut 5000. Si 0 affichage sans limite ! Attention de proposer le bouton de fermeture -voir ci-dessous- ! Propri├⌐t├⌐ "timeOut" plugin toastr
    • Afficher le bouton de fermeture : Si coch├⌐ si "Dur├⌐e d'affichage du message" est 0.
  • Indexation des robots de recherche
    • (Google...) Si cette case est d├⌐coch├⌐e, les meta tag noindex seront ajout├⌐s Γö£├í  l'entΓö£├íΓö¼┬¼te de vos pages pour ├⌐viter l'indexation du site (plus d'informations)
  • Information navigateurs obsol├¿tes :
    • Si cette case est d├⌐coch├⌐e, un bandeau s'affiche pour les navigateurs obsol├¿tes. Version minimale v├⌐rifi├⌐e des navigateurs Windows: Internet Explorer > 11 Windows: Edge >=80 Mac Os: Safari: >=9 Ios: Safari >=9 Tous os : Chrome >=80 Tous os : Firefox >=52 Tous os : Opera >=22
  • Gestion des caract├¿res XSS
    Attention cette propriété ne doit pas ├á┬¬tre utilisée sans la configuration du filtre c├á┬┤té webapp. Cette configuration se trouve dans le fichier "WEB-INF/conf/lutece.properties" section "Input filtering parameters".
    • Liste des caract├¿res XSS Γö£├í  contrΓö£Γöñler dans les champs cot├⌐ FO, qui permettra d'afficher un message d'information aux utilisateurs - voir ci-dessous-.
    • Message d'erreur en cas de saisie de caract├¿res XSS dans un champs.

Surcharger le thème...

...et surtout pas le fichier page_frameset.html...

Plusieurs fichiers template ont ├⌐t├⌐ ajout├⌐s pour permettre la surcharge du site. 

  • WEB-INF emplatesskinsite hemeparisfr_frameset_header_css.html -> Permet d'ajouter des surcharges css.
  • WEB-INF emplatesskinsite hemeparisfr_frameset_header_js.html -> Permet d'ajouter des surcharges js. Contient par d├⌐faut l'ajout de la lib "jquery-1.11.3.min.js".
  • WEB-INF emplatesskinsite hemeparisfr_frameset_main_nav.html -> Contient par d├⌐faut le menu principal du site macro "<@cMainNav />"
  • WEB-INF emplatesskinsite hemeparisfr_frameset_main_banner.html ->Contient par d├⌐faut la banni├¿re principale du site "<@cMainBanner />"
  • WEB-INF emplatesskinsite hemeparisfr_frameset_content_header.html -> Permet d'ajouter du contenu personnalis├⌐ au dessus du contenu principal.
  • WEB-INF emplatesskinsite hemeparisfr_frameset_content_footer.html -> Permet d'ajouter du contenu personnalis├⌐ en dessous du contenu principal.
  • WEB-INF emplatesskinsite hemeparisfr_frameset_menu_footer.html -> Contient le footer par d├⌐faut du site "<@cMainFooter title=favourite />".
  • WEB-INF emplatesskinsite hemeparisfr_frameset_footer_js.html -> Contient le js par d├⌐faut du site Γö£├í savoir la gestion du bouton d'authentification 'initBanner')", la gestion du consentement et la gestion de la librairie de notifications.
  • WEB-INF emplatesskinsite hemeparisfr_frameset_footer_user.html -> Contient par d├⌐faut une surcharge pour alimenter les apps favorites de "Mon Paris".

La liste des fichiers du thème

  • /
    • android-chrome-192x192.png
    • android-chrome-256x256.png
    • apple-touch-icon.png
    • favicon-16x16.png
    • favicon-32x32.png
    • mstile-150x150.png
    • safari-pinned-tab.svg
    • css
      • page_template_styles.css
      • page_template_styles_admin.css
      • page_template_styles_admin.min.css
    • js
      • site.js
    • themesskinparisfr
      • css
        • _fonts.css
        • _rhythm.css
        • _utils.css
        • _variables.css
        • themeparisfr.css
        • themeparisfr.min.css
        • components
          • accordion.css
          • alert.css
          • badge.css
          • button.css
          • button-legacy.css
          • captcha.css
          • card.css
          • carousel.css
          • components.css
          • contentframe.css
          • dropdown.css
          • filter.css
          • icon.css
          • list.css
          • modal.css
          • offcanvas.css
          • pagination.css
          • portlet.css
          • progress.css
          • sliders.css
          • status.css
          • stepinfo.css
          • stepper.css
          • table.css
          • tabs.css
        • elements
          • article.css
          • links.css
          • list.css
          • text.css
        • forms
          • checkboxradio.css
          • forms.css
          • inputfile.css
          • inputgroup.css
          • inputs.css
          • select.css
          • steps.css
        • layout
          • borders.css
          • effects.css
          • footer.css
          • header.css
          • menu-dropdown.css
          • menu-fixed.css
          • menu-main.css
          • menu-sidebar.css
          • menu-user.css
          • navs.css
          • scrollbar.css
          • spacing.css
          • structure.css
          • typo.css
        • lib
          • libcookies.css
          • libosm.css
          • lib oastr.css
        • themes
          • themesdark-theme.css
          • themesskinparisfrcss hemeslight-theme.css
        • vendor
          • bootstrap.datepicker.css
          • bootstrap.min.css
          • franceconnect.css
          • jquery-ui-1.10.0.custom.css
          • toastr.min.css
      • images
        • arrow.svg
        • chat.svg
        • check.svg
        • close.svg
        • comment.svg
        • download.svg
        • edit.svg
        • fc_avatar.png
        • files.png
        • files-xs.png
        • footer-logo-paris.svg
        • header-logo-paris.svg
        • header-logo-paris-w.svg
        • header-mon-paris.png
        • header-mon-paris.svg
        • header-mon-paris-email.png
        • header-mon-paris-mdp-logo-email.png
        • icon-paris.svg
        • icon-search.svg
        • info.svg
        • keyboard-left-arrow.svg
        • keyboard-right-arrow.svg
        • logo_mail_footer.png
        • logo_mail_header.png
        • logo_mdp.png
        • logo_mdp_footer.png
        • logo_mdp_header.png
        • logo-paris.svg
        • logo-paris-footer.svg
        • nef-bg.svg
        • nef-bg-xs.svg
        • paris.svg
        • upload.svg
      • js
        • themesskinparisfrjssite.js
        • themesskinparisfrjs hemeparisfr.js
        • themesskinparisfrjs hemeparisfr.min.js
        • themesskinparisfrjs hemeparisfr-tabs.js
        • themesskinparisfrjs hemeparisfr-tabs.min.js
        • modules
          • themesskinparisfrjsmodules heme-carousel.js
          • themesskinparisfrjsmodules heme-filter.js
          • themesskinparisfrjsmodules heme-init.js
          • themesskinparisfrjsmodules heme-menu.js
          • themesskinparisfrjsmodules heme-switcher.js
          • themesskinparisfrjsmodules heme-utils.js
        • plugins
          • asynchronousupload
            • config.js
            • config.min.js
            • jquery.fileupload.js
            • jquery.fileupload-audio.js
            • jquery.fileupload-image.js
            • jquery.fileupload-process.js
            • jquery.fileupload-ui.js
            • jquery.fileupload-validate.js
            • jquery.fileupload-video.js
            • jquery.iframe-transport.js
            • load-image.all.min.js
            • corsjquery.postmessage-transport.js
            • corsjquery.xdr-transport.js
            • vendorcanvas-to-blob.js
            • vendorjquery.Jcrop.js
            • vendorjquery.ui.widget.js
            • vendorpromise-polyfill.js
          • forms
            • themesskinparisfrjspluginsformss-custom-file-input.min.js
            • themesskinparisfrjspluginsformsforms.js
            • themesskinparisfrjspluginsformsSortable.min.js
            • themesskinparisfrjspluginsforms erms-of-service.js
          • genericattributes
            • themesskinparisfrjspluginsgenericattributesmodulesopenstreetmapgenericattributes_openstreetmap.js
            • themesskinparisfrjspluginsgenericattributesmodulesopenstreetmapleaflet.css
            • themesskinparisfrjspluginsgenericattributesmodulesopenstreetmapleaflet.js
        • util
          • echarts.min.js
          • lutece.js
          • progress-manager.js
        • vendor
          • bootstrap.bundle.min.js
          • es5.js
          • jquery-3.3.1.min.js
          • datepickerdatepicker-bs4.min.css
          • datepickerdatepicker-bs5.min.css
          • datepickerdatepicker-full.min.js
          • datepickerlocales*.js
          • datepickerstyle hemeparisfr-datepicker.css
          • jqueryjquery-1.11.3.min.js
          • jquerypluginsuijquery.ui.widget.js
          • jquerypluginsuijquery-ui-1.9.2.custom.min.js
          • tarteaucitronadvertising.min.js
          • tarteaucitron arteaucitron.min.js
          • tarteaucitron arteaucitron.services.min.js
          • tarteaucitroncss arteaucitron.min.css
          • tarteaucitroncss heme-parisfr-tac.css
          • tarteaucitroncss heme-parisfr-tac.min.css
          • tarteaucitronlang arteaucitron.*.js

Paramétrer l'authentification avec Mon Paris

La documentation disponible pour l'authentification avec Mon Paris

Utilisation des templates du plugin MyLutece

La macro cMainNav propose un paramètre hasLogin qui prend s'il a la valeur "true" affichera le bouton de connexion "MonParis" ├á droite du menu

Le marker ${pageinclude_userlogin?default("")} correspond é l'inclusion du template "WEB-INF emplatesskinpluginsmyluteceincludesuser_login_multi_include.html" contenu dans le plugin MyLutece

Cette macro permet de générer le code HTML pour le mode connecté et le mode déconnecté.

Paramètrer l'authentification Mon Paris

Etape 1 > Configuration Oauth

Pour ajouter le mécanisme d'authentification é votre site vous devez d'abord faire une demande "FastDeploy" sur votre environnement, afin de créer la configuration nécessaire sur RHSSO.

  1. A la création ou en modification par le bouton "Modifier l'application" cocher l'option "l'application nécessite RHSSO."
  2. Pour paramètrer ajouter l'url de votre application afin de préparer la configuration. En retour vous recevrez les information peramettant la configuration du client RHSSO. Nom du client, par exemple: F02-REC, et le code secret du client RHSSO, par exemple "89d1c5a4-96e1-4fda-a6c7-c2543e7f5220" la
  3. Pour une application Lutece vous devrez paraméter le fichier "WEB-INFconfoverridepluginsoauth2_context.xml" avec les information fournies ci-dessus.

Etape 2 >Configuration Mon Paris

Par défaut la config de l'authentification se fait dans les propriétés du site / Gestion de la configuration du thème.

Si l'url est précisée, le bouton "Mon Paris" en haut ├á gauche sera automatiquement configuré. Si aucune url n'est précisée le click permettra d'accéder ├á l'url vers n'importe quel module d'authentification.

N.B: En recette on utilisera pour url moncompte.rec.apps.paris.mdp et en production moncompte.paris.fr

La méthode initBanner

Il existe 5 paramètres non obligatoire pour initialiser les urls de retour vers l'application. Il faut les renseigner si vous souhaitez que les utilisateurs soient redirigés vers ces urls plutét que vers l'url de la page courante (page é partir de laquelle l'action a été appellée). Il faut déclarer et initialiser les variables ci-dessous avant l'appel de la fonction initBanner

  • monCompte_backUrlAuth : Url de retour vers l'application apr├⌐s authentification -ATTENTION backUrlAuth ne doit pas contenir la chaine de caract├⌐re "script" y compris ├⌐ l'int├⌐rieur d'un mot (ex : inscription) - optionnel
  • monCompte_backUrlProfil: Url de retour apr├⌐s modification du profil - optionnel
  • monCompte_backUrlLogout: Url de retour apr├⌐s logout - optionnel
  • appNav : JSON contenant un attribut "app" qui contient liste de lien interne de l'application.Une "app" comprend un tableau de lien vers l'application avec 3 paires attributs/valeurs : 'name':Libell├⌐ du lien,'url': uri ,'title': Explication du lien - optionnel 
     			var appNav= { 			'apps': 			[ 				{'name' : 'Authentification', 'url':'jsp/site/Portal.jsp?page_id=9', 'title':'Accéder à la page Auth' }, 				{'name' : 'Composants', 'url':'jsp/site/Portal.jsp?page_id=4','title':'Accéder à la page Composants' }, 				{'name' : 'Mails', 'url':'jsp/site/Portal.jsp?page_id=10','title':'Accéder à la page Mails' } 			] 			};
  • appCode : Code application du service num├⌐rique - optionnel