PostNuke - AutoTheme

Date de publication : 07/04/2006 , Date de mise à jour : 07/04/2006

Par Benjamin Prevot (autres articles)
 

Ce tutoriel présente la préparation des fichiers modèles et leur installation afin de personnaliser le thème de PostNuke en utilisant le module AutoTheme.

1. Avant-propos
2. Création des fichiers HTML
2.1. Création de la page générale
2.2. Création des fichiers HTML
2.2.1. theme.html
2.2.2. blocCentre.html
2.2.3. blocDroit.html
2.2.4. blocGauche.html
2.2.5. resume.html
2.2.6. article.html
3. Installation du thème
4. Téléchargement des fichiers sources


1. Avant-propos

Ce tutoriel va décrire comment créer un thème pour le portail PostNuke à l'aide du module AutoTheme que vous pouvez télécharger sur en http://www.spidean.com/ ; si vous souhaitez obtenir des informations sur l'installation de PostNuke ou du module AutoTheme, vous pouvez lire ce tutoriel : fr PostNuke - installation

AutoTheme est basé sur une disposition en 3 colonnes : gauche, centre, droite. Mais il est tout à fait possible de n'utiliser que 2 colonnes en cachant la 3me. De plus, il est aussi possible de rajouter des blocs afin de totalement personnaliser l'apparence de votre site.

Nous nous baserons sur un exemple pour illustrer les diverses manipulations à réaliser pour obtenir le thème ; le portail sera constitué d'un en-tête, de 3 colonnes (gauche, centre et droite) et d'un pied de page. Voici le résultat souhaité :

infoLes blocs présents dans cet exemple et les blocs que vous utilisez peuvent varier ; cela dépend de la configuration de votre portail et des modules que vous avez installés.

2. Création des fichiers HTML

La création d'un thème pour AutoTheme requiert des fichiers HTML qui serviront de gabarits pour les différentes parties du site. Nous allons commencer par créer ces fichiers ainsi que les styles nécessaires pour obtenir le rendu désiré.

Vous pouvez utiliser votre éditeur préféré pour créer ces fichiers. Si vous souhaitez obtenir plus d'informations sur les pages HTML et les styles CSS, vous pouvez vous référer aux liens suivants : fr Cours et tutoriels HTML, XHTML et CSS et fr FAQ (X)HTML/CSS.


2.1. Création de la page générale

Pour créer le thème, il faut tenir compte du fait que les différentes parties du site doivent être cohérentes entre elles ; cela signifie qu'il faut toujours garder à l'esprit que les parties doivent s'adapter verticalement lors d'une variation de la taille du contenu à afficher.

Avant de commencer à créer les différents fichiers, nous allons créer le site tout entier afin de mieux nous rendre compte de l'adaptabilité des différentes parties. Tous les autres fichiers ne seront alors que des copier/coller de morceaux de cette page.

Voici le code de la page entière ainsi que la feuille de style :
Page HTML complète

<html>
<head>
</head>
<body>
	<!-- Début entête -->
	<div id="entete">
		<div class="contenu">Mon portail PostNuke</div>
	</div>
	<!-- Fin entête -->
	
	<!-- Début colonne gauche -->
	<div id="gauche">
		<!-- Début bloc gauche -->
		<div class="blocGauche">
			<div class="titre">Titre bloc gauche</div>
			<div class="contenu">Contenu bloc gauche</div>
		</div>
		<!-- Fin bloc gauche -->
	</div>
	<!-- Fin colonne gauche -->
	
	<!-- Début colonne droite -->
	<div id="droite">
		<!-- Début bloc droite -->
		<div class="blocDroite">
			<div class="titre">Titre bloc droite</div>
			<div class="contenu">Contenu bloc droite</div>
		</div>
		<!-- Fin bloc droite -->
	</div>
	<!-- Fin colonne droite -->
	
	<!-- Début colonne centre -->
	<div id="centre">
		<!-- Début bloc centre -->
		<div class="blocCentre">
			<div class="titre">Titre bloc centre</div>
			<div class="contenu">Contenu bloc centre</div>
		</div>
		<!-- Fin bloc centre -->
		<!-- Début news -->
		<div class="blocNews">
			<div class="titre">Titre news</div>
			<div class="infos">News infos</div>
			<div class="contenu">Contenu news</div>
			<div class="plus">Lire la suite</div>
		</div>
		<!-- Fin news -->
	</div>
	<!-- Fin colonne centre -->
	
	<!-- Début pied de page -->
	<div id="pied">
		<div class="contenu">Pied de page de mon portail</div>
	</div>
	<!-- Fin pied de page -->
</body>
</html>
infoVous remarquerez qu'aucune information n'est spécifiée entre les balises <head></head> ; ces informations sont paramétrées dans la console d'administration de votre portail, dans les Préférences.

2.2. Création des fichiers HTML

Nous allons maintenant morceler le code HTML précédent afin de créer plusieurs fichiers qui seront utilisés pour le thème de notre portail.

Pour notre exemple, il faut créer en tout 6 fichiers HTML :

  • theme.html : c'est la page qui va servir de gabarit principal au site
  • blocCentre.html : modèle utilisé pour les blocs placés dans la colonne centrale
  • blocDroit.html : modèle utilisé pour les blocs placés dans la colonne de droite
  • blocGauche.html : modèle utilisé pour les blocs placés dans la colonne de gauche
  • resume.html : affichage des résumés des articles dans la page d'accueil
  • article.html : gabarit pour l'affichage complet des articles
warningLe nombre de fichiers que vous créez peut varier en fonction de l'apparence de votre site et des blocs que vous définissez.
infoLes noms donnés aux fichiers n'ont pas d'importance, vous pouvez utiliser ceux de votre choix.

2.2.1. theme.html

Cette page sert de squelette général pour le thème, elle regroupe l'ossature qui va permettre d'imbriquer les différents blocs entre eux.

Pour créer cette page, copiez simplement le code de la page générale et enregistrez cette page sous le nom theme.html.

Nous allons maintenant modifier un peu le code afin de préciser où les blocs seront utilisés. Pour cela, nous allons utiliser des commandes spécifiques à AutoTheme (pour plus de détails sur ces commandes, référez-vous à la documentation de AutoTheme).

Remplacez le bloc compris entre <!-- Début bloc gauche --> et <!-- Fin bloc gauche --> (commentaires compris) par <!-- [left-blocks] --> ; cette commande spécifie simplement où seront placés les éléments de la colonne de gauche.

Réitérez l'opération pour les colonnes centrale et de droite, mais utilisez cette fois <!-- [center-blocks] --><!-- [modules] --> (pour le centre) et <!-- [right-blocks] --> (pour la droite)

infoVous remarquerez que pour le centre, nous utilisons en plus <!-- [modules] -->. Cette commande permet d'afficher les différents modules que vous pouvez spécifier dans la console d'administration ; ces modules affichent, par exemple, les résumés des articles les plus récents.
Remplacez aussi Mon portail PostNuke par <!--[site-name]--> ; cela permet d'afficher le titre de votre portail. Ce titre est modifiable dans la console d'administration du site, dans les Préférences.

Vous obtenez alors la page suivante :
theme.html

<html>
<head>
</head>
<body>
	<!-- Début entête -->
	<div id="entete">
		<div class="contenu"><!--[site-name]--></div>
	</div>
	<!-- Fin entête -->
	
	<!-- Début colonne gauche -->
	<div id="gauche">
		<!-- [left-blocks] -->
	</div>
	<!-- Fin colonne gauche -->
	
	<!-- Début colonne droite -->
	<div id="droite">
		<!-- [right-blocks] -->
	</div>
	<!-- Fin colonne droite -->
	
	<!-- Début colonne centre -->
	<div id="centre">
		<!-- [center-blocks] -->
		<!-- [modules] -->
	</div>
	<!-- Fin colonne centre -->
	
	<!-- Début pied de page -->
	<div id="pied">
		<div class="contenu">Pied de page de mon portail</div>
	</div>
	<!-- Fin pied de page -->
</body>
</html>

2.2.2. blocCentre.html

Comme précédemment, nous allons copier une partie du code de la page principale que nous avons créée au début ; copiez le code compris entre <!-- Début bloc centre --> et <!-- Fin bloc centre -->. Enregistrez-le dans un fichier nommé blocCentre.html.

Dans le code que vous venez de copier, remplacez Titre bloc centre par <!-- [block-title] --> et Contenu bloc centre par <!-- [block-content] -->.

Vous obtenez alors le code suivant :
blocCentre.html

<!-- Début bloc centre -->

<div class="blocCentre">
	<div class="titre"><!-- [block-title] --></div>
	<div class="contenu"><!-- [block-content] --></div>
</div>

<!-- Fin bloc centre -->

2.2.3. blocDroit.html

Pour ce bloc, les manipulations sont identiques aux précédentes. Copiez le code compris entre <!-- Début bloc droite --> et <!-- Fin bloc droite -->. Enregistrez-le dans un fichier nommé blocDroit.html.

Dans le code que vous venez de copier, remplacez Titre bloc droite par <!-- [block-title] --> et Contenu bloc droite par <!-- [block-content] -->.

Vous obtenez alors le code suivant :
blocDroit.html

<!-- Début bloc droite -->

<div class="blocDroite">
	<div class="titre"><!-- [block-title] --></div>
	<div class="contenu"><!-- [block-content] --></div>
</div>

<!-- Fin bloc droite -->

2.2.4. blocGauche.html

Réitérez une dernière fois les manipulations pour le bloc de gauche. Copiez le code compris entre <!-- Début bloc gauche --> et <!-- Fin bloc gauche -->. Enregistrez-le dans un fichier nommé blocGauche.html.

Dans le code que vous venez de copier, remplacez Titre bloc gauche par <!-- [block-title] --> et Contenu bloc gauche par <!-- [block-content] -->.

Vous obtenez alors le code suivant :
blocGauche.html

<!-- Début bloc gauche -->

<div class="blocGauche">
	<div class="titre"><!-- [block-title] --></div>
	<div class="contenu"><!-- [block-content] --></div>
</div>

<!-- Fin bloc gauche -->

2.2.5. resume.html

Ce modèle va permettre de définir l'apparence des résumés d'articles situés sur la page d'accueil de votre portail.

Copiez le code entre <!-- Début news --> et <!-- Fin news --> dans un fichier que vous nommerez resume.html.

Effectuez les remplacements suivants :

  • Titre news ==> <!-- [news:text:title] -->
  • News infos ==> <!-- [posted-by] --> le <!-- [news:text:briefdate] -->
  • Contenu news ==> <!-- [article-summary] -->
  • Lire la suite ==> <!-- [article-more] -->
Vous obtenez le code suivant :
resume.html

<!-- Début news -->

<div class="blocNews">
	<div class="titre"><!-- [news:text:title] --></div>
	<div class="infos"><!-- [posted-by] --> le <!-- [news:text:briefdate] --></div>
	<div class="contenu"><!-- [article-summary] --></div>
	<div class="plus"><!-- [article-more] --></div>
</div>

<!-- Fin news -->

2.2.6. article.html

Nous allons créer le modèle pour les articles. Ce modèle ressemble beaucoup aux blocs centraux, c'est pourquoi il n'a pas été utile de les faire apparaître dans la page générale. Vous pouvez utiliser le code suivant :
article.html

<!-- Début bloc article -->

<div class="blocArticle">
	<div class="titre"><!-- [news:text:title] --></div>
	<div class="infos"><!-- [posted-by] --> le <!-- [news:text:briefdate] --></div>
	<div class="contenu"><!-- [article-full] --></div>
	<div class="options"><!-- [article-edit-del] --></div>
</div>

<!-- Fin bloc article -->
Pour avoir tous les détails sur les commandes utilisées, reportez-vous à la documentation fournie avec AutoTheme.

Vous obtenez alors le résultat suivant :


3. Installation du thème

Il faut maintenant préciser à votre portail que vous voulez utiliser le thème que vous venez de créer. Pour cela, connectez-vous en tant qu'administrateur du portail. Allez dans la console d'administration et choisissez AutoTheme.

Cliquez alors sur Themes. Dans le champ texte situé sous Create new theme from, saisissez le nom que vous souhaitez donner à votre thème. Dans notre exemple, nous choisissons mon-premier-theme. Puis, cliquez sur le bouton Blank ; cette opération crée un thème "vide" que nous allons remplir avec les fichiers précédemment créés.

En fait, cette commande crée un répertoire du nom que vous avez saisi dans le répertorie themes de votre portail. Copiez les fichiers HTML que nous avons créés ci-dessus dans ce répertoire ; pour la feuille de style, copiez-la dans le sous-répertoire style (dans notre exemple, nous l'appellerons mon-style.css, mais vous pouvez lui donner le nom que vous souhaiter).

Après avoir copié les fichiers, cliquez sur Theme Defaults dans la console d'administration. Modifiez votre configuration afin d'obtenir les mêmes paramètres que dans le tableau ci-dessous.

Default Theme Templates File Name  
Page Template theme.html Strip out head content : Yes
Summary Article resume.html Use Alternating Summaries : Yes
Full Article article.html  
Left Blocks blocGauche.html Show Block by default : Yes
Center Blocks blocCentre.html Show Block by default : No
Right Blocks blocDroit.html Show Block by default : Yes
Style Sheet mon-style.css  
Cliquez ensuite sur le bouton Save en bas de la page.

Cliquez maintenant sur Custom Pages. Dans la liste déroulante, sélectionnez * HomePage et cliquez sur Add. Recopiez la configuration de l'étape précédente, seule la ligne ci-dessous change.

Default Theme Templates File Name  
Center Blocks blocCentre.html Show Block by default : Yes
Cliquez sur Save

Votre nouveau thème est installé. Vous devez maintenant le sélectionner pour qu'il suit utilisé pour l'affichage de votre site. Pour cela, retounez à la page d'accueil de AutoTheme et sélectionnez simplement votre thème dans la liste déroulante. Cliquez sur Save. L'installation est terminée.

infoLe thème que vous venez d'installer permet de définir l'apparence générale de votre site, il ne décrit pas toutes les parties du site. Lorsque vous utilisez des modules, leur apparence est généralement définie au cas par cas ; pour personnaliser le thème complètement, reprenez chaque partie du site et référez-vous au module correspondant pour modifier le thème.
Pour terminer l'installation de votre thème, cliquez sur [ AutoTheme ] en haut de la page d'administration. Dans la liste déroulante située sous Select the default theme for your site, sélectionnez mon-premier-theme et cliquez sur Save.

Votre thème est maintenant installé, vous pouvez admirer le résultat.


4. Téléchargement des fichiers sources

Vous pouvez télécharger les sources de ce tutoriel ici.

Ce fichier contient tous les fichiers HTML (dont le fichier général créé au début de ce tutoriel) ainsi que le fichier CSS contenant les styles pour la présentation.

Pour pouvoir les utilisez, ils vous suffit de créer un thème vide comme indiqué au paragraphe 3., puis de dézipper les fichiers HTML dans le répertoire créé et le fichier CSS dans le sous-répertoire style.


Valid XHTML 1.1!Valid CSS!

Ce document est issu de http://www.developpez.com et reste la propriété exclusive de son auteur. La copie, modification et/ou distribution par quelque moyen que ce soit est soumise à l'obtention préalable de l'autorisation de l'auteur.
 
 
Developpez.com

Nous contacter

Participez

Informations légales

 
Services

Forum PHP

Blogs

Hébergement

 
Partenaires

Hébergement Web