{{tag>tutoriel BROUILLON}}

====== Pluxml : Personnaliser le thème ======

Sur un site internet, un template est son habillage, ce qui sert à mettre en avant une charte graphique ou un agencement.

Dans Pluxml, cela  s'appelle un **thème**, ou **template**.

Ces templates sont modifiables à loisir (toutes les pages peuvent être différentes si on veut) sans avoir à toucher au coeur du système Pluxml ; les mises à jour du CMS ne posent donc aucun problème.

Il existe des [[http://ressources.pluxml.org/|templates tout faits]], mis à disposition par les autres utilisateurs.

On peut par exemple placer le menu (la sidebar) à droite, ou en créer une de chaque coté de la page d'accueil, ou avoir une sidebar différente selon les pages ou rubriques, ou un Header différent selon le contexte.

Avant d'aller plus loin, visitez une [[http://www.pluxml.org/article45/gestion-avancee-des-themes-dans-pluxml|page fort bien faite]] (par Ti-Pierre) qui explique comment est constitué un thème.

Il y en a une autre [[http://www.pluxml.org/article54/gestion-des-feuilles-de-style|plus technique là]].

Une page utilise un template.

<WRAP center round info 60%> 
  * Le thème est le look général du site.
  * le template et une page modèle que vous aurez fabriquée qui apportera des changements à une ou plusieurs de vos pages ; vous sélectionnerez ce "modèle" lors de la rédaction de cette page (ou article).
</WRAP>

Dans l'administration, **Paramètres/Options d'affichage** et regardez "Choix du thème :" (vous voyez le nom de votre thème).
 
Ouvrez en mode édition votre page de test et repérez  une liste déroulante nommée <<Template :>> ; Vous y lisez : **static.php**
 
Cette page utilise donc le template "static.php" et le thème "nom de votre thème"
 
Supposons que nous voulions mettre en ligne une page qui n'a pas besoin de sidebar.

Dans "Template :", choisissez   "static-full-width.php", enregistrez et allez voir le résultat.

Vous allez maintenant fabriquer votre premier template.

A la page **paramètres/Thèmes**, sélectionnez votre thème. Cliquez sur <key>Modifier les options d'affichage</key>.

===== Appels des templates =====

Pour chacun des fichiers :
  * **archives-test.php**,
  * **article-test.php**,
  * **categorie-test.php**
  * **erreur-test.php**
  * **home-test.php**
  * **static-test.php**
  * **static-full-width-test.php**
  * **tags-test.php**

Ouvrez-le (Administration, thèmes, éditer les fichiers du thème).

Pour chaque appel comme :
<code><?php include(dirname(__FILE__).'/sidebar.php'); ?></code>
remplacez :
  * **header.php** -> **header-test.php**
  * **footer.php** -> **footer-test.php**
  * **sidebar.php** -> **sidebar-test.php**
  * **commentaires.php** -> **commentaires-test.php**

===== Personnaliser la feuille de style =====

L'aspect des pages est géré par un fichier de style unique (dans le répertoire de notre thème), **style.css**

Il est appelé par **header.php**, **article.php** et **static.php**.

**style.css** est appelé dans **header.php** ainsi :

<code>
<div id="title">
    <h1><?php $plxShow->mainTitle('link'); ?></h1>
    <p id="sub-title"><?php $plxShow->subTitle(); ?></p>
</div>
</code>

  ; %%<div id="title">%%
  : nom du %%<div>%%

Il pourrait aussi y avoir une classe :
  ; %%<div class="content">%%
  : la classe qui gère les affichages concernant  ce %%<div>%% particulier.

Nous allons intégrer dans notre feuille de style une classe supplémentaire pour nos templates.

Dupliquez les fichiers originaux :
  *  **style.css** -> **style-test.css**
  * **header.php** -> **header-test.php**.
  * **static.php** -> **static-test.php**.

Mettez dans le répertoire **themes/theme-zen/images** l'image (par exemple **mon-image.jpg**) qui s'affichera sur notre page.

Ouvrez **header-test.php** et changez l'appel de la feuille de style : **style.css** -> **style-test.css** :

<code><link rel="stylesheet" type="text/css" href="<?php $plxShow->template(); ?>/style-test.css" media="screen" /></code>

Ouvrez **style-test.css**, repérez les lignes :

<code>
#title {
	background: url("images/header.jpg") no-repeat;
	border-bottom: none;
	margin: 0;
	padding: 0;
	height: 200px;
}
</code>

Juste en dessous, rerecopiez ce paragraphe avec le nom de notre nouvelle image d'en-tête.

<code>
#title {
	background: url("images/header-test.jpg") no-repeat;
	border-bottom: none;
	margin: 0;
	padding: 0;
	height: 200px;
}
</code>

<WRAP center round tip 60%>
Vous pouvez mettre plusieurs images de taille adéquate en les séparant par des virgules et les positionner avec top, bottom, right ou left ((les premières seront devant la dernière)) :

<code>
#title {
	background: url("images/monimage1.png") no-repeat left top,url("images/monimage2.jpg") no-repeat right bottom,url("images/header-test.jpg") no-repeat;
	border-bottom: none;
	margin: 0;
	padding: 0;
	height: 200px;
}
</code>
</WRAP>

Dans **static-test.php**, changez l'appel à **header.php** par :
<code><?php include(dirname(__FILE__).'/header-test.php'); # On insere le header ?></code>

Pour tester, créez une nouvelle page statique en  lui donnant **static-test.php** comme template et regarder le résultat sur le front-end.

N’utilisez **style-test.css** que pour les templates <<maison>> et réservez l'original (**style.css**) pour les pages que vous ne désirez pas modifier.

Cette technique s'applique aussi aux articles, aux différentes sidebar ou pieds de pages spécifiques.

===== Personnaliser la sidebar =====

Le menu dans l'espace de droite se nomme la sidebar.

Pour personnaliser la sidebar, nous la remplacerons par une page statique qui contiendra votre nouveau menu et que nous pourrons éditer à notre guise. Voir : [[tutoriel:internet:cms:pluxml:sidebar]]

{{tutoriel:internet:cms:pluxml:sidebar-01.png|}}

  - Titre : **Sidebar**
  - url : vide (sera automatique : **sidebar**)
  - Active : oui
  - Menu : masquer (ne doit pas apparaître dans le menu)
  - Cliquez sur <key>'Modifier la liste des pages statiques'</key>

Dans le menu **Paramètres/Thèmes**,
  * cliquez sur le bouton <key>'Editer les fichiers du thème'</key>,
  * choisissez le fichier **sidebar-test.php**
  * et cliquez sur le bouton <key>Charger</key>.

Remplacez les lignes entre **%%<div id="sidebar">%%** et **%%</div>%%**
par :
<code>    <?php $plxShow->staticInclude('sidebar') ?></code>

Vous obtenez quelque chose comme ceci :
<code php sidebar-test.php>
<?php if(!defined('PLX_ROOT')) exit; ?>
<div id="sidebar">
    <?php $plxShow->staticInclude('sidebar') ?>
</div>
</code>

===== Personnaliser le header =====

Comme pour la sidebar :
  * Créez une page statique **Header**

Dans le menu **Paramètres/Thèmes**,
  * cliquez sur le bouton <key>'Editer les fichiers du thème'</key>,
  * choisissez le fichier **header-test.php**
  * et cliquez sur le bouton <key>Charger</key>.

  - Gardez la première ligne
  - Entre les balises **%%<head>%%** et **%%</head>%%**, ne gardez que l'appel à la feuille de style (en indiquant la vôtre, style-test.css)
  - Placez un appel à votre page statique, encadré par un %%<div id="title">%% / %%</div>%%
  - Pour le reste, ne gardez que la partie menu.

Vous devez obtenir quelque chose comme ceci :

<code ->
<?php if(!defined('PLX_ROOT')) exit; ?>
<head>
    <link rel="stylesheet" type="text/css" href="<?php $plxShow->template(); ?>/style-test.css" media="screen" />
</head>
<div id="title">
    <?php $plxShow->staticInclude('header') ?>
</div>
<ul id="menu">
    <?php $plxShow->staticList($plxShow->getLang('HOME'),'<li id="#static_id"><a href="#static_url" class="#static_status" title="#static_name">#static_name</a></li>'); ?>
    <?php $plxShow->pageBlog('<li id="#page_id"><a class="#page_status" href="#page_url" title="#page_name">#page_name</a></li>'); ?>
</ul>
</code>

===== Personnaliser le footer =====

Même méthode : créez une page statique **Footer**

Dans le menu **Paramètres/Thèmes**,
  * cliquez sur le bouton <key>'Editer les fichiers du thème'</key>,
  * choisissez le fichier **footer-test.php**
  * et cliquez sur le bouton <key>Charger</key>.

Remplacez les lignes entre
<code><div id="footer"><div id="title"></code>

et
<code></div></code>

par :
<code>    <?php $plxShow->staticInclude('footer') ?></code>

===== Voir aussi =====

  * **(fr)** [[http://tuto-pluxml.reseauk.info/article31/le-principe]]
  * **(fr)** [[http://tuto-pluxml.reseauk.info/static18/page-sidebar-ensembles]]

----
//Contributeurs principaux : [[utilisateurs:jamaique|jamaique]].//