[Tutoriel] Créer son propre template

[ben2paris]

Salut,

Après avoir décrit les différents fichiers du template et leur utilité (topic1041.html), voilà un tutoriel sur la façon de cloner le template Arfooo pour créer son propre template.

1) Copier le contenu du dossier /templates/arfooo dans un nouveau dossier (je prends le nom "exemple" pour ce tuto)
2) Modifier les liens en dur dans les fichiers pour les faire pointer sur le nouveau template

Dans le dossier /templates/exemple/comment, ouvrir le fichier popup.tpl
A la ligne 7, remplacer le mot arfooo par exemple, ce qui donne

<link href="{'/templates/exemple/css/comments.css'|resurl}" rel="stylesheet" type="text/css" />

Dans le dossier /templates/exemple/includes, ouvrir le fichier header.tpl
A la ligne 10, remplacer le mot arfooo par exemple, ce qui donne

<link href="{'/templates/exemple/css/style.css'|resurl}" rel="stylesheet" type="text/css" />

Dans le dossier /templates/exemple/site, ouvrir le fichier problemPopup.tpl
A la ligne 7, remplacer le mot arfooo par exemple, ce qui donne

<link href="{'/templates/exemple/css/problem.css'|resurl}" rel="stylesheet" type="text/css" />

Dans le dossier /templates/exemple/site, ouvrir le fichier details.tpl
A la ligne 48, remplacer le mot arfooo par exemple, ce qui donne

<img src="{"/templates/exemple/images/flags/$site.countryCode"|resurl}.png" alt="{$site.countryCode}" class="flag_image" />

A la ligne 59, remplacer le mot arfooo par exemple, ce qui donne

<img src="{'/templates/exemple/images/new.gif'|resurl}" alt="{'New site'|lang}" />

A la ligne 140, remplacer le mot arfooo par exemple, ce qui donne

<img src="{'/templates/exemple/images/pagerank/pr'|resurl}{$site.pageRank}.gif" alt="{'PageRank'|lang} {$site.pageRank}" />

Dans le dossier /templates/exemple/site, ouvrir le fichier item.tpl
A la ligne 11, remplacer le mot arfooo par exemple, ce qui donne

<img src="{"/templates/exemple/images/flags/$site.countryCode"|resurl}.png" alt="{$site.countryCode}" class="flag_image" />

A la ligne 16, remplacer le mot arfooo par exemple, ce qui donne

{if !empty($site.isNew)}<img src="{'/templates/exemple/images/new.gif'|resurl}" alt="{'New site'|lang}" />{/if}

A la ligne 43, remplacer le mot arfooo par exemple, ce qui donne

<img src="{'/templates/exemple/images/pagerank/pr'|resurl}{$site.pageRank}.gif" alt="{'PageRank'|lang} {$site.pageRank}" />

Dans le dossier /templates/exemple/vote, ouvrir le fichier popup.tpl
A la ligne 8, remplacer le mot arfooo par exemple, ce qui donne

<link href="{'/templates/exemple/css/note.css'|resurl}" rel="stylesheet" type="text/css" />

Dans le dossier /templates/exemple/webmaster, ouvrir le fichier submitWebsite.tpl
A la ligne 232, remplacer le mot arfooo par exemple, ce qui donne

<div id="siteLoader" style="display:none;"> {'Checking site'|lang}... <img src="{'/templates/exemple/images/loader.gif'|resurl}"></div>

3) Personnaliser les fichiers CSS présents dans /templates/exemple/css
4) Personnaliser les fichiers du template pour des modifications avancées.

[keke21410]

ya eu beaucoup trop de changement en ce moment, des fichiers en moins,des en plus,
ce que je vous conseil, puisque notre ami a fait tout le travail, je vais le completer :
telecharger notepad++
Puis, ouvrir tous les fichiers contenu dans votre dossier example, donc les dossiers captcha, category etc;

ouvrez tous les fichier avec notepad;

Sur le premier fichier ouvert, appuyer sur CtrL+F (ou Recherche > Rechercher)

rechercher dans tous les fichiers, un à un, les src="
recherchez les, et si vous voyez :

src="templates/arfooo/............."

Remplacez le arfooo après le templates/ par le nom de votre dossier (example)

Faite ça dans tous les fichier, j'en ai resensé une centaine.

Il faut aussi remplacer les :

rechercher

<link href="

Et remplacer

templates/arfooo/....

Par

templates/example/

Voila, ppourquoi notepad et pas bnloc note ?

Parceque notepad est plus efficasse dans la recherche, des fois bloc notes ne touve pas tout, car pour lui

<img src="
et
<img src="{

il prend le { comme attaché au src="

donc il faudrait rechercher en plus
<img src="{'