je me suis aperçut en lisant quelques messages par-ci, par-là que beaucoup de personnes pensent que créer un thème graphique pour smf est compliqué et qu’il faut beaucoup de connaissance en php, html et autre codes.
Pour mettre fin a cette idée, j’ai décidé de créér ce petit tuto, sans prétention, afin d’aider les débutants, et autres étrangers a smf, a commencer la création de leur propre thème graphique pour leur forum.
Nous allons donc voir ensemble comment créer un thème graphique pour SMF avec un simple feuille de style et un dossier images.
Préambule:
Les avantages:
Avec un thème réalisé de cette façon plus besoin de se soucier des mises à jour futures de smf tout ce passe dans le thème par défaut.
Idem pour les mods, sachant qu’ils s'installent sur le thème par défaut, il n’est pas utile de reporter les modification dans votre thème.
Il est rare que les mods, même si il en existe, fassent une modification dans la feuille de style, tout comme les mises a jours de smf d’ailleurs.
Et même quand cela arrive, les modifications sont facile a reporter.
Les inconvénients:
il n’y en a qu’un, la limitation de la personnalisation du thème.
Hormis la possibilité de changer les images, la structure du thème elle-même de change pas de celle du thème par défaut de smf.
Le minimum requis:
-Un forum installé en local. cf: Le Site du Zéro pour installer un serveur en local.
-Avoir un minimum de bases avec le CSS. cf: toujours Le Site du Zéro.
-Et surtout une idée de ce que sera l’apparence de notre thème final. Pas d’idée ? Cadeau ! Allez faire un tout par ici -> kuler.adobe.com
Première étape -création des fichiers:
Direction l’administration du forum-> Thèmes et disposition –> Gérer et installer
En bas de page : Créer une copie de SMF Default Thème nommée: theme1
Ici, a la place de theme1 nous allons mettre SimpleCssDark (vous pouvez mettre le nom que vous voulez).
Une foi installer, retour à Gérer et installer Choisissez le thème que vous venez de créer et sauvegardez.
Un aperçut rapide de ce que nous venons de faire:
Ouvrez le dossier de votre et regardez ce qu’il contient:
un dossier images
un fichier index.php (nous n’y toucherons pas)
un fichier index.template.php – Celui-ci soit vous le renommé, soit vous le supprimé , il n’est pas utile dans le projet de thème que nous voulons faire.
Et enfin la feuille de style qui nous intéresse et que nous allons éditer pour faire notre thème personnel.
Création suite
Dans le dossier de votre thème créez un nouveau fichier et nommé le theme_info.xml ,éditez le et collez dedans ce qui suit.
<?xml version="1.0"?>
<theme-info xmlns="http://www.simplemachines.org/xml/theme-info" xmlns:smf="http://www.simplemachines.org/">
<id>SimpleCssDark</id>
<version>1.0</version>
<!-- Theme name, used purely for aesthetics. -->
<name>SimpleCssDark</name>
<!-- Author: Garedo -->
<author name="Garedo">http://www.garedo.fr</author>
<!-- Template layers to use, defaults to "main". -->
<layers>main</layers>
<!-- Templates to load on startup. Default is "index". -->
<templates>index</templates>
<!-- Base this theme off another? Default is blank, or no. It could be "default". -->
<based-on>Other</based-on>
</theme-info>
Vous l’aurez compris ce fichier va contenir les informations sur votre thème.
son nom, l’auteur, sur quel thème il est basé etc… Modifiez les informations selon vos besoin bien sur. Vous n'êtes pas obligé de dire que je suis l'auteur de votre thème. 
Maintenant, toujours dans le dossier de votre thème créez un dossier nommé languages.
Dans celui-ci créez un fichier que vous appellerez Settings.french.php et coller dedans ce qui suit.
<?php // Version: 1.1.4; Settings $txt['theme_thumbnail_href'] = $settings['images_url'] . '/thumbnail.png'; $txt['theme_description'] = '<p>Voici le thème SimpleCssDark réalisé par <a href="http://www.garedo.fr">Garédo.</a></p>'; ?>
Créez un second fichier Settings.english.php et coller dedans
<?php // Version: 1.1.4; Settings $txt['theme_thumbnail_href'] = $settings['images_url'] . '/thumbnail.png'; $txt['theme_description'] = '<p>This is the theme SimpleCssDark by <a href="http://www.garedo.fr">Garédo</a></p>'; ?>
Bien sur là aussi faites les modifications nécessaires.
Voici ce que vous devez voir dans le dossier de votre thème
Et dans le dossier languages
Et voilà on a un thème tout neuf rien qu’a nous. Il ne nous reste plus qu’a le personnaliser.
Seconde étape -la personnalisation:
Ouvrez le fichier style.css avec votre éditeur préféré. Personnellement j’utilise Notepad++
Pour faciliter la compréhension, et la personnalisation, nous allons faire les modifications au fur et a mesure que les class apparaissent dans le fichiers.
On commence par les liens
a:link {color: #7cd9ea; text-decoration: none;}
a:visited {color: #7cd9ea; textss-decoration: none;}
a:hover {color: #ead58c; text-decoration: underline;}
le link tree (ou chemin de fer)
C’est la ligne entre le hearder du forum et son contenu qui contien les liens pour une navigation rapide sur le forum. ça ressemble a ça. Forum local SMF 1 > Catégorie Générale > Discussions Générales
.nav, .nav:link, .nav:visited {color: #eceede;text-decoration: none;}
a.nav:hover {color: #53bfe2; text-decoration: underline;}
body, td, th , tr
Ici on déclare les valeurs par défaut pour toutes ces balises.
body, td, th , tr {color: #a4a7a7; font-size: small; font-family: verdana, sans-serif;}
body
body {background-color: #2a3033;margin: 0px;padding: 12px 30px 4px 30px;}
Les formulaires
input, textarea, button
{
color: #a4a7a7;
font-family: verdana, sans-serif;
}
input, button
{
font-size: 90%;
}
textarea, input
{
color: #a4a7a7;
font-size: 100%;
font-family: verdana, sans-serif;
background-color: #303538;
border:1px solid #000;
}
select
{
font-size: 90%;
font-weight: normal;
color: #a4a7a7;
font-family: verdana, sans-serif;
background-color: #303538;
border:1px solid #000;
}
Le bloc des citation
.quote
{
color: #D7DAEC;
background-color: #475358;
border: 1px dashed #000000;
margin: 1px;
padding: 2px;
font-size: x-small;
line-height: 1.4em;
}
Le bloc code
il contient les message de type code quand la balise est utilisée dans les messages.
.code
{
color: #fff;
background-color: #4E5348;
font-family:"times new roman", monospace;
font-size: 0.9em;
line-height: 1.3em;
/* Put a nice border around it. */
border: 1px dotted #000000;
margin: 1px auto 1px auto;
padding: 1px;
width: 99%;
/* Don't wrap its contents, and show scrollbars. */
white-space: nowrap;
overflow: auto;
/* Stop after about 24 lines, and just show a scrollbar. */
max-height: 24em;
}
les fameux .windowbg
Ces class gèrent l’affichage des cellules des tableaux et autres div.
Elle permettent notamment de changer la couleur du contenu d’un message sur deux dans les posts, que ce soit la couleur de la police que celle du fond.
.windowbg, #preview_body {color: #a4a7a7; background-color: #2a3033;}
.windowbg2 {color: #a4a7a7; background-color: #2e3538;}
.windowbg3 {color: #a4a7a7; background-color: #252a2d;}
Le jour du calendrier
c'est la class qui gère la cellule du calendrier pour le jour actif.
.calendar_today {background-color: #2A3F38;}
.titlebg
Cette class gère normalement, comme son nom l'indique les titre des blocs et tableau.
Mai elle sert a beaucoup d'autre choses et notamment au bloc qui s'affiche su l'index des messages et contenant les informations sur les messages.
Fil dans lequel vous êtes intervenu - Fil bloqué etc...
.titlebg, tr.titlebg th, tr.titlebg td, .titlebg2, tr.titlebg2 th, tr.titlebg2 td
{
color: #a4a7a7;
font-style: normal;
background: #37373b;
border-bottom: solid 1px #29292d;
border-top: solid 1px #29292d;
padding-left: 10px;
padding-right: 10px;
}
.titlebg, .titlebg a:link, .titlebg a:visited
{
font-weight: bold;
color: #a4a7a7;
font-style: normal;
}
.catbg
Avec s'occupe de l'affichage des titre des catégories et autres sections.
catbg2 sert a afficher d'un façon différente le titre des section quand il y a des nouveaux messages dans celles-ci.
.catbg , tr.catbg td , .catbg3 , tr.catbg3 td
{
background: #000;
color: #ffffff;
padding-left: 10px;
padding-right: 10px;
}
.catbg2 , tr.catbg2 td
{
background: #100e3f;
color: #ffffff;
padding-left: 10px;
padding-right: 10px;
}
.catbg, .catbg2, .catbg3
{
border-bottom: solid 1px #202025;
}
.bordercolor et .tborder
Avec ces class on définie les bordures autour des différent blocs et tableaux, ainsi que les couleurs de fonds de ceux-ci.
.bordercolor {background-color: #474B4E;padding: 0px;}
.tborder {padding: 1px;border: 1px solid #474B4E; background-color: #2a3033;}
.smalltext .middletext .normaltext .largetext
Nous ne toucherons rien ici.
Mais juste pour vous expliquer que c'est là que lon peut définir la taille de la plupart des polices du theme.
Les menus
Petite explication:
Ici nous allon définir tout les menus. Que ce soit le menu principal comme les différents menus du forum.
Toutes les class avec les prefixe .maintab_ se raportent au menu principal et ceux qui se trouvent sous les blocs et tableaux.
Les class avec le prefixe .mirrortab_ concerne le menu au dessus des blocs et tableaux.
je vous met ici tout ce qui a rapport avec les menu, je ne détaille pas ce serait trop long, et c'ets facile a comprendre .
/* definitions for the main tab, active means the tab reflects which page is displayed */
.maintab_first, .maintab_back, .maintab_last, .maintab_active_first, .maintab_active_back, .maintab_active_last
{
color: #50B5D6;
text-transform: uppercase;
vertical-align: middle;
font-weight: bold;
}
.maintab_back, .maintab_active_back
{
color: #474B4E;
text-decoration: none;
font-size: 9px;
vertical-align: middle;
padding: 5px;
}
.maintab_first
{
border-right:1px solid #474B4E;
width: 1px;
}
.maintab_back
{
border-left:1px solid #474B4E;
border-right:1px solid #474B4E;
border-bottom:2px solid #474B4E;
}
.maintab_last
{
border-left:1px solid #474B4E;
width: 1px;
}
.maintab_active_first
{
border-bottom:2px solid #474B4E;
}
.maintab_active_back
{
background-color:#0994C1;
border-left:1px solid #474B4E;
border-right:1px solid #474B4E;
border-bottom:2px solid #474B4E;
}
.maintab_active_last
{
border-bottom:2px solid #474B4E;
}
/* how links behave in main tab. */
.maintab_back a:link , .maintab_back a:visited
{
color: #50B5D6;
text-decoration: none;
padding:5px;
}
.maintab_active_back a:link , .maintab_active_back a:visited
{
color: #fff;
text-decoration: none;
padding:5px;
}
.maintab_back a:hover, .maintab_active_back a:hover
{
color: #fff;
text-decoration: none;
background-color:#0994C1;
padding:5px;
}
/* definitions for the mirror tab */
.mirrortab_first, .mirrortab_back, .mirrortab_last,.mirrortab_active_back, .mirrortab_active_last
{
color: #50B5D6;
text-transform: uppercase;
vertical-align: middle;
font-weight: bold;
}
.mirrortab_back, .mirrortab_active_back
{
color: #474B4E;
text-decoration: none;
font-size: 9px;
vertical-align: middle;
padding: 5px;
}
.mirrortab_first
{
border-right:1px solid #474B4E;
width: 1px;
}
.mirrortab_back
{
border-left:1px solid #474B4E;
border-right:1px solid #474B4E;
border-top:2px solid #474B4E;
}
.mirrortab_last
{
border-left:1px solid #474B4E;
width: 1px;
}
.mirrortab_active_first
{
border-top:2px solid #474B4E;
}
.mirrortab_active_back
{
background-color:#0994C1;
border-left:1px solid #474B4E;
border-right:1px solid #474B4E;
border-top:2px solid #474B4E;
}
.mirrortab_active_last
{
border-top:2px solid #474B4E;
}
/* how links behave in mirror tab. */
.mirrortab_back a:link , .mirrortab_back a:visited
{
color: #50B5D6;
text-decoration: none;
padding:5px;
}
.mirrortab_active_back a:link , .mirrortab_active_back a:visited
{
color: #fff;
text-decoration: none;
padding:5px;
}
.mirrortab_back a:hover, .mirrortab_active_back a:hover
{
color: #fff;
text-decoration: none;
background-color:#0994C1;
padding:5px;
}
Et voilà c'est presque fini, il ne nous reste pas grand chose a faire 
Derniere étape -Création de l'image de presentation
Rappelez vous, nous avons indiqué quand les fichiers settings le chemin vers un image qui donne un aperçut de notre thème.
Et bien faite une impression d’écran de votre thème, puis découpez en une partie que vous redimensionnerez.
je vous conseille 120px par 120px c’ets pas trop petit, et surtout pas trop gros.
Enregistré la sous thumbnail.png et placez là dans le dossier images.
Et voilà c’est terminé, ou presque.
Il ne vous reste qu’a créer une archive au format zip et d’installer votre thème sur votre forum via l’administration des thèmes.
Bien sur le tout peut être amélioré simplement au gout de chacun en remplacent simplement quelques images et icones pour obtenir un thème assai sympathique, même si un peut sombre ;).
Ce thème est disponible dans la zone de téléchargement et en démo sur le forum
Commentaires
Tres bon tuto je vais pouvoir me faire mes propres theme en esperant avoir bin compris de tout façon pas tre grave tout mes teste sont en local
Merci a toi
cristabY a pas de quoi
Ceci n'est qu'un résumet, je pense en faire un d'un peut plus complet sur le wiki de smf-fr ici http://docs.smf-fr.org/doku.php
mais pas avant la mi septembre, en premier vacances et reprise du boulo :p
Garedosalut , mour cousin michto le tuto
ces bien kérave en plus
mannouche 85