====== 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.
* Dans le menu "//Apparence//" > "//Éditeur de thème//" :
* "inc" > "template-tags.php" > "$posted_on" : suppression du libellé (voir [[https://github.com/cbn-alpin/silene-geonature/issues/44#issuecomment-728136688|#44]])
==== Modification du theme Understrap ====
* Sur //web-srv//, se connecter au docker : '' ''
* Se rendre dans le dossier ///var/www/html/wp-content/themes/understrap/css// : ''cd /var/www/html/wp-content/themes/understrap/css''
* Éditer le fichier //theme.min.css// : '' vi theme.min.css ''
* Commenter : .aligncenter,.d-block{/*display:block!important*/}
===== 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 :
#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;
width: 100%;
}
#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-navbar #navbarNavDropdown #main-menu {
margin-left: 0 !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;
}
#wrapper-navbar .navbar .container {
background-position: 120px center;
background-size: 120px 50px;
background-repeat: no-repeat;
background-image: url(https://cms.silene.eu/wp-content/uploads/2020/10/SINP-2020-RVB-fond-blanc.jpg)
}
@media (min-width: 576px ) {
#wrapper-navbar .navbar .container {
background-position: 120px center;
background-size: 65%;
background-repeat: no-repeat;
background-image: url(https://cms.silene.eu/wp-content/uploads/2020/11/1-bandeau-mele_sinp_petit.jpg)
}
}
@media (max-width: 767.98px) {
#footer-full-content .footer-widget {
background-size: 100%;
background-image: url(https://cms.silene.eu/wp-content/uploads/2022/03/bottom_cms_logos_med-nouveauLogos_small.png);
height: 91px;
background-repeat: no-repeat;
background-position: center;
}
#footer-full-content .footer-widget img {
display: none;
}
}
@media (min-width: 768px) {
#wrapper-navbar .navbar .container {
background-position: 121px -6px;
background-size: 80% 110px;
background-image: url(https://cms.silene.eu/wp-content/uploads/2020/11/1-bandeau-mele_sinp.jpg);
-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;
}
#footer-full-content .footer-widget {
background-size: 100%;
background-image: url(https://cms.silene.eu/wp-content/uploads/2022/03/bottom_cms_logos_med-nouveauLogos.png);
height: 91px;
background-repeat: no-repeat;
background-position: center;
}
#footer-full-content .footer-widget img {
display: none;
}
}
@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;
}
/* Silene Expert et Nature */
.img-silene-nature img:hover {
background-color: #F7F9EC;
border-color: #97BF0D;
}
.btn-silene-nature {
background-color: #96C11F;
border-color: #96C11F;
font-weight: bold;
}
.btn-silene-nature:hover {
color: #97BF0D;
background-color: #F7F9EC;
border-color: #97BF0D;
}
.img-silene-expert img:hover {
background-color: #EFE0E9;
border-color: #A10D59;
}
.btn-silene-expert {
background-color: #A10D59;
border-color: #A10D59;
font-weight: bold;
}
.btn-silene-expert:hover {
color: #A10D59;
background-color: #EFE0E9;
border-color: #A10D59;
}
/* Gallerie de Logos */
.silene-thumb {
height: 180px
}
.silene-thumb img {
max-height:160px;
border: 1px solid #dee2e6;
border-radius: .25rem;
padding: .25rem;
}
.silene-card {
border: 1px solid #dee2e6;
border-radius: .25rem;
padding: 1em;
}
/* Articles */
.cat-links {
display: none;
}
.updated {
display: none;
}
.byline {
display: none;
}