Ceci est une ancienne révision du document !
Wordpress - Thème SILENE avec Understrap
Options du thème
- Pour adapter le thème Understrap à la charte graphique de SILENE, il est nécessaire de paramétrer le thème via l'interface d'administration de la façon suivante :
- Dans le menu "Apparence" > "Personaliser" :
- Pour "Identité du site", sélectionner :
- sélectionner une image du logo de SILENE de 108px de côté au format PNG
- "Titre du site.." : Silene * "Slogan" : Système d'Information sur la Nature et les Paysages en Provence-Alpes-Côte d'Azur * "Icône du site" : sélectionner une image transparent de 512px de côté. * Pour "Menu", nous utilisons actuellement seulement le "Menu principal". * Pour "Widgets" > "Pied pleine page" : * Ajouter une image contenant la frise SILENE de pied de page. * Pour "Réglage de la page d'accueil", sélectionner : * "La page d'accueil affiche" : une page statique. * "Accueil" : Bienvenue sur Silene * "Page des acticles" : Actus * Pour "Paramètres du layout", sélectionner : * pour la "Largeur du conteneur" la valeur " Conteneur de largeur fixe ". * pour "Positionnement des sidebars" la valeur " Pas de sidebar " * Pour "CSS aditionnel", ajouter le contenu présent ci-dessous. ===== CSS additionnel ===== Afin d'aller au plus rapide, nous avons corrigé le thème Understrap par défaut en surchargeant les CSS de base de la façon suivante : <code css> #wrapper-navbar nav.bg-primary { background-color: transparent !important; } #wrapper-navbar .navbar-toggler { background-color: #99B931 !important ; } #wrapper-navbar .navbar-brand { min-width: 90px } #wrapper-navbar #navbarNavDropdown { background-color: #F8F8F8; } #wrapper-navbar #navbarNavDropdown .nav-link { font-size: 1.2rem; color:black !important; } #wrapper-navbar #navbarNavDropdown .nav-link:hover { color: #A10D59 !important; } #wrapper-navbar #navbarNavDropdown .active .nav-link { background-color: #F7F9EC; color: #97BF0D !important; } #wrapper-footer-full, #wrapper-static-hero { background-color: #fff; } h1, h2, h3, h4 { color: #97bf0d; margin: 0.6em 0; padding: 0; } h5 { color: #A10D59; margin: 0.4em 0; padding: 0; } h1 { border-bottom: 1px solid #97bf0d; margin: 0em 0; font-size: 1.6em; line-height: 1.6em; } h2 { font-size: 1.4em; padding: .2em .4em; } h2:before{ content:url(https://cms.silene.eu/wp-content/uploads/2020/02/puce-ronde.png); vertical-align:middle; padding-right:.2em; } h3, h4 { padding: .2em .6em; border-bottom-style: dotted; } h3 { font-size: 1.2em; } h4 { font-size: 1.1em; } .site-info { display: none; } @media (min-width: 576px) { #wrapper-navbar .navbar .container { background-position: 120px top; background-size: 65% 110px; background-repeat: no-repeat; background-image: url(https://cms.silene.eu/wp-content/uploads/2020/02/1-bandeau-mele.jpg) } } @media (min-width: 768px) { #wrapper-navbar .navbar .container { background-size: 100% 110px; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-align-items: flex-start; -ms-align-items: flex-start; align-items: flex-start; } #wrapper-navbar #navbarNavDropdown .nav-link { font-size: 1rem; } } @media (min-width: 992px) { #wrapper-navbar #navbarNavDropdown .nav-link { font-size: 1.2rem; } } /* Utilitaires texte */ .text-faune { color: #97BF0D; } .bg-faune { background-color: #F7F9EC; } .text-flore { color: #A10D59; } .bg-flore { background-color: #EFE0E9; } /* Gallerie de Logos */ .gallery-logo .thumb { border: 1px solid #dee2e6; border-radius: .25rem; } .gallery-logo .thumb img { max-height:200px; } </code>
jpmilcent