PluxThèmes

Une structure HTML et une extraction des données fonctionnelles n'est pas suffisante, il faut maintenant embellir tout ça pour que cela soit confortable à lire et que chaque zone de contenus se différencie les unes des autres.

Quelles options avons nous?

Au minimum, nous avons deux options.

1. Le thème dispose déjà d'un fichier de styles que l'ont peut compléter manuellement.Le tutoriel s'oriente vers ce choix
2. Nous pouvons aussi utiliser une bibliothèque comme Bootstrap ou Tailwind. en rééditant les fichiers du thème pour y placer les class de ces bibliothèque et modifier les structures HTML au cas par cas.
3. Nous avons compris comment créer et utiliser les fichiers template gabarit d'un thème. Nous nous servirons donc d'un thème en HTML existant pour le transformer en thème PluXml.

Par où commencer?

Dans l'article fichier etape 3 nous avions déjà préparer le thème pour la mise en page avec les balises et fonctions suivantes:

1. la balise <meta name="viewport" content="width=device-width, initial-scale=1.0"> est destinée principalement au comportement sur de petits écrans.
2. la balise <link rel="stylesheet" href="https://pluxthemes.com/<?php $plxShow->template() ?>/css/styles.css" media="all"> destinée à chargé une feuilles de styles , ici elle va chercher la feuille de styles styles.css dans le dossier css/ du thème.
3. la fonction <?php $plxShow->pluginsCss();?> qui elle charge les feuilles de styles compilées des plugins actifs.

le fichier header.php fait appel au fichier styles.css qui se trouve dans le dossier css/ du thème. C'est ce fichier que nous allons utiliser pour la mise en page du thème.

Rappel et ouverture du capot.

Notre thème à cette structure en 3 zones principales:

	<header id="header"></header>
	<main id="main"></main>
	<footer id="footer"></footer>

Ouvrez et éditer le fichier styles.css qui contient déjà quelques styles précédemment ajoutés.

.repertory.menu.breadcrumb {
	display: flex;
	gap: 1em;
	list-style: none;
	justify-content: center;
}
.repertory.menu.breadcrumb li + li::before {
	content: '/ ';
	padding-inline-end: 1em;
}

Faciliter l'édition

Pour faciliter l'édition de ce fichier et sa relecture, nous allons le préparer à l'aide de commentaires CSS .

Cela convient pour le tutoriel mais cette façon de faire aura ses limites.

/* ================================
	
	Theme: XX

	Version: XX

	Date: XX

	Auteur: XX 

	Licence: XX

******** TOC *******
	
	* document
	* balises
	* class

	* Entete de la page

	* Zone contenus 
		* Fil d'ariane


	* Pied de la  page
	
	
================================ */

/* *************
	Document
*/
:root{
}

html {
}

body{
}

/* *************	
	balises	
*/


/* *************	
	class	
*/


/* *************
	Entête de la page
	
	header#header
	
 ************* */
 
 #header {
 
 }



/* *************
	Zone contenus 
	
	main#main
	
 */

#main {
	
}

	/* ---  fil d'Ariane */
.repertory.menu.breadcrumb {
	display: flex;
	gap: 1em;
	list-style: none;
	justify-content: center;
}
.repertory.menu.breadcrumb li + li::before {
	content: '/ ';
	padding-inline-end: 1em;
}
/* --- fin  fil d'Ariane  */

/* *************
	pied de  page
	
	footer#footer
	
 */

#footer {
	
}

Vous pouvez organiser votre document comme bon vous semble, l'idée est de s'y retrouvé facilement.

Lorsqu'il aura plusieurs centaines de lignes.et pour eviter de recopier l'ensemble du document au cours du tutoriel, seules les portions concernées seront indiquées.

Identifier et visualiser.

En appliquant ponctuellement des couleurs de fonds ou une bordure aux éléments, il est facile de les visualiser séparément.

En ouvrant votre site avec le thème activé, les outils de développement de votre navigateur seront très efficace

On accède aux outils de développement du navigateur en appuyant sur la touche F12., Ce qui nous intéresse pour le moment, c'est l'inspecteur qui va nous montrer le code HTML de la page ainsi que les styles.

#header et son contenu

En utilisant les outils de développement du navigateur, on peut facilement voir que les enfant direct de <header id="header"> sont un titre <h1>, un paragraphe <p> et une balise de navigation <nav>.

Nous pouvons ajouter les sélecteur suivant à notre feuille de style pour cibler nos principaux conteneurs, l'enregistrer et recharger votre page:

 #header h1 {
 }
 #header p{
 }
 #header nav {
 }
 #header nav  ul{
 }

Depuis les outils du navigateur, vous pouvez maintenant appliquer et tester vos styles avant de les reporter dans le fichier et de l'enregistrer à nouveau.

Nous povons séparé notre entéte en 3 zones, par exemple:

Pour cela nous utiliserons une grille CSS de type flexBox pour répartir ces 3 zones et et les liens du menu

Nous pouvons alors distribuer quelques règles nécessaire pour mettre en place notre flexBox et accessoirement ajouter une bordure et un fond de couleur.

Exemple possible

#header {
	display: flex;
	flex-wrap:wrap;
	align-items:center;
	gap:1em;
	background:#ddd;
	border-bottom:solid;
}
#header h1 {
	min-width: min-content;
}
#header p{
	flex:1;
}
#header nav {
	flex-basis:100%;
}
#header nav ul {
	display:flex;
	flex-wrap:wrap;
	list-style:none;
	gap:1em;
	place-content:center;
}

#main et ses contenus

Notre conteneur principal <main id="main" > contiendra plus ou moins les même éléments d'une page à une autre:

1. Une ou plusieurs balises <article>.
2. Une balise <nav> si il y a une pagination.
3. Une balise <aside id="aside">

Nous avons vu qu'il était possible pour certains gabarits d'avoir des versions alternatives et que les contenus de <aside id="aside"> était souvent placés dans une barre latérale. Nos pages peuvent être composées d'un seul <article> et de <aside id="aside"> ou de plusieurs balises(article, nav).

Pour simplifier la gestion du placement de <aside id="aside"> sous ou au coté des autres balises, nous allons regroupé ces autres balises dans un conteneur neutre dédié., par exemple : <div id="content">

Pour le fichier home.php par exemple cela revient à l'éditer comme ceci:

<?php if(!defined('PLX_ROOT')) exit; ?>
<?php include __DIR__.'/header.php'; ?>
<div id="content">
	<?php include __DIR__.'/articles.php'; ?>
</div>
<?php include __DIR__.'/sidebar.php'; ?>
<?php include __DIR__.'/footer.php'; ?>

Je vous laisse le soin de reporté cette modifications sur les gabarits suivant:

• archives.php
• article.php
• categorie.php
• erreur.php
• home.php
• tags.php
• static.php

À l'aide de la touche F12 dans notre navigateur avec <div id="content" > et <aside id="aside" >, notre liste de sélecteurs principaux à ajouter peut-être:

#main {
}
#main #content {
}
	/* ---  fil d'Ariane */
.repertory.menu.breadcrumb {
	display: flex;
	gap: 1em;
	list-style: none;
	justify-content: center;
}
.repertory.menu.breadcrumb li + li::before {
	content: '/ ';
	padding-inline-end: 1em;
}
/* --- fin  fil d'Ariane  */

#main #content article {
}
#content article > header {
}
#content article > header h2{
}
#content article > header p{
}
#content article > div {
}

#content nav.pagination {
}

#main  #aside {
}
#main  #aside h3 {
}
#main  #aside ul {
}

Si nous voulons déplacé <aside>, FlexBox est à nouveaux une solution simple et efficace

Les styles pour ces nouveaux sélecteur peuvent-être:

#main {
	display:flex;
	flex-wrap:wrap;
	gap:1em;
	max-width:1100px;
	margin:auto;
}
#main #content {
	display:grid;
	gap:1em;
	padding-block:1em;
	flex:1;
}
	/* ---  fil d'Ariane */
.repertory.menu.breadcrumb {
	display: flex;
	gap: 1em;
	list-style: none;
	justify-content: center;
}
.repertory.menu.breadcrumb li + li::before {
	content: '/ ';
	padding-inline-end: 1em;
}
/* --- fin  fil d'Ariane  */

#main #content article {
	margin:auto;
	border:solid 1px;
	min-width:350px;
	width:100%;
	max-width:800px;
}
#content article > header {
}
#content article > header h2{
}
#content article > header p{
	margin:0;
	padding:0 1em;
	font-size:0.8em;
}
#content article > div {
	padding:1em 2em;
}
#content article > div p.more {
	padding:0;
	text-align: end;
}

#content nav.pagination {
	text-align:center;
}

#main  #aside {
	width:100%;
	min-width:250px;	
	margin:0 auto;
	display:flex;
	flex-wrap:wrap;
	place-content:start;
	flex:0 1;
}
@media (max-width:650px) {
	#main #aside {
		flex:1 1;
	}
	
}
#main #aside > div {
	flex:1 1 250px;
}
#main  #aside h3 {
	margin:1em 0 0;
}
#main  #aside ul {
	list-style:none;
	margin: 0 0;
	padding: 0 0 1em
}

Pour faire passer la barre latérale de l'autre coté,avec FlexBox il suffit de changer son ordre d'affichage.

#main  #aside {
	order:-1;
	width:100%;
	min-width:250px;	
	margin:0 auto;
	display:flex;
	flex-wrap:wrap;
	place-content:start;
	flex:0 1;
}
@media (max-width:650px) {
	#main #aside {
	order:initial;
	flex:1 1;
	}	
}

Le pied de page

La méthode va être similaire et consiste à identifier les selecteur principaux pour la mise en page générale, voici un exemple possible:

#footer {
	background:#ddd;
	border-top:solid;
	padding:2rem;
}
#footer ul {
	display:flex;
	flex-wrap:wrap;
	gap:2em;
	justify-content:center;
	list-style:none;
}

Class et Balises

Vous avez remarqué ces deux sections dans le modele de la feuille de style, on peut y mettre quelques regles générales.

	balises	
*/
h1,
h2,
h3,
p,
ul {
	margin:0;
	padding:1rem;
}

/* *************	
	class	
*/

.sr-only {
	position:absolute;
	clip-path:polygon(0 0 ,0 0)
}

La class .sr-only est un nom de class couramment utilisé pour marquer dans vos document des informations destinés aux lecteurs d'écrans, ces informations ne sont généralement pas utiles aux personnes qui peuvent naviguer sans aides. L'idée est alors de les cacher si vous n'en avez pas besoin.On se contente alors de les retirer du flux et de les découper pour les réduire à une taille de 0.

Nous avons dans le thème ce petit lien en tout début de page : <a href="#main" class="sr-only">aller au contenu</a>, c'est lui que nous cachons et que nous laissons accessible.

Interlude

Ces quelques styles, que nous essaieront de bien rangé au fil des ajouts, nous donne une base qui se comporte plutôt bien dans les différentes résolutions d'écrans.

Le but de ce tutoriel n'est pas de faire de vous un as des feuilles de styles, seulement vous montrer une méthode simple pour appréhender la création d'un thème et sa mise en page.

Cette serie d'article s'arrête ici pour le moment. Vos retours via les commentaires ou depuis le forum officiel de PluXml.org serviront à créer les prochains articles et à éclaircir ceux déjà publiés.

Bons dev!

Vue d'ensemble