I. 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 http://www.spidean.com/ ; si vous souhaitez obtenir des informations sur l'installation de PostNuke ou du module AutoTheme, vous pouvez lire ce tutoriel : 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é :
Les 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.
II. 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 : 
II-A. 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 :
<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>Vous 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.
II-B. 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
Le nombre de fichiers que vous créez peut varier en fonction de l'apparence de votre site et des blocs que vous définissez.
Les noms donnés aux fichiers n'ont pas d'importance, vous pouvez utiliser ceux de votre choix.
II-B-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)
Vous 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 :
<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>II-B-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 :
II-B-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 :
II-B-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 :
II-B-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 :
<!-- 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 -->II-B-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 :
<!-- 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 :
III. 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.
Le 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.
IV. 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.