Wordpress - Thème SILENE avec Understrap

• 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 #44)

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

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