Creer un template ou plutot un thème xoops valide xhtml et css n'est pas chose facile pour un néophyte. Mais dés lors que l'on posséde les base en css, un gabarit xoopsé xhtml et css, tout devient alors possible.

 

 

 Ce tutorial a pour but de vous aider a creer un theme xoops simple ! Un autre tutorial suivra pour proposer des solutions pour des thèmes xoops plus complexes. C'est un pas à as , mais des connaissance minime en css sont nécéssaire tout de meme, idem en xhtml. Mais un débutant pourra creer un thème xoops rapidement, et surtout simplement, comme un pro !

0) Choix des outils

Nous aborderons le choix des divers outils au fur et à mesure que nous avancerons, mais vous aurez besoin de plusieurs logiciels que vous pouvez dés lors télécharger et installer si ce n'est pas déjà fait.

- Xoops en français (ben ui c'est un thème xoops aprés tout ) 

- Easyphp (voir le tuto de cr@zy pour l'instalation en local )

- Un editeur de texte (nous aborderons les choix possibles plus tard)

- Un logiciel graphique 2d ou vectoriel,(idem ceci est développé dans quelques lignes) 

- Des navigateurs internets pour tester votre oeuvre d'art:-)

Nous vous conseillons firefox avec la barre d'outil google

Pourquoi?

• firefox utilise et respecte les recommandations W3c (standard du web)

• plus pratique car il utilise diverses extensions

• l' Extensions => Webdeveloper en francais que nous vous conseillons d'installer va vous permettre d'editer votre theme directement dans le navigateur! 

• Parce que vous surferez plus vite, plus sécurisé, dans un ensemble homogène et surtout moins lourds pour votre ordinateur.

• trés simple d'utilisation et intuitif

• L'extension google que nous vous conseillons d'utiliser vous proposera de connaitre grace au page rank bar le référencement de votre site et de tout les sites que vous visiterez! ce qui est indispensable pour suivre son referencement et surtout entreprendre une gestion dynamique de son partenariat

• je pourrais vous en parler des heures durant mais c'est pas le sujet du tuto

Faites donc un tour sur internet, vous verrez que ce projet est suivit par toute la population informatique mondiale, et notamment soutenu par google. 

Comme autres navigateurs internets, ben prennez internet explorer aussi, tout simplement parce qu'il n'est pas encore interdit et que beaucoup de personne l'utilise malheureusement encore :?

Vous pouvez utiliser d'autre navigateurs en plus pour tester, mais avec ces 2 vous fairez le tour de 99% de vos visiteurs ;-) (dsl pour safari

- Enfin un lecteur audio style winamp pour paser de la musique douce quand vous fondrez en larme sur vos css  :lol:

1) Création d'un template

a. Qu'es ce que c'est qu'un template?  

Ce que j'appellerais template dans ce tutoriel est une représentation imagé de votre futur thème.

En clair ouvrez votre utilitaire graphique préféré.

Personnellement j'utilise photoshop, mais cet outil est payant (et cher en plus) , vous pouvez opter pour d'autres utilitaires tel que The Gimp ou The Gimp shop qui sont tout 2 gratuits et libres, et dont la communauté grandit de jours en jours.

 C'est le même principe que photoshop a peu de choses préts.

b. commment le créer. 

Le but de ce tutorial n'est pas d'apprendre comment on se sert d'un outil graphique, mais plutot comment le coder, le remplir (comme dirait certains :lol  

je donnerais juste quelques conseils.

• Préférez mettre 1 élément sur 1 calque, cela facilitera votre travail aprés
• Nommez tout vos calques de manière significative
• Vous pouvez même les regrouper dans des "groupes" :p (dans le gestionnaire des calques cliquez sur la petites fleches en haut, et faites nouveau groupes. Donnez une couleur différentes pour chaque groupe.
• Evitez les images trop lourdes.
• Préférez les couleurs douces
• Appliquez vous c'est votre futur thème que vous avez devant les yeux!

c. prenons un exemple

Voici un template à xoopser. Créer par mes soins sous photoshop, je vous joins le PSD (fichier source permettant d'editer le template dans photoshop ou un autre utilitaire graphique.)

 

 

 Ce template est vraiment bien (normal il est de moi :p) 

 Nous allons voir grâce a lui, 

1. Faire un remplissage de fond (rayure)
2. Logo et header personnalisé
3. Titre de vos menu en avant
4. Votre contenu principal en avant en lui applicant un fond de couleur différente
5. Préciser un footer
6. et c'est déjà pas mal pour un début :lol:

Ce thème est vraiment simpliste, on est tous d'accords, mais c'est un bon debut pour apprendre

2) le codage

Le codage est la partie la plus compliqué. :lol:

Avant d'aller plus loin, il vous faudra connaitre au moins les bases du (x)html et des bases de css.

Ce tuto n'a pas la prétention de vous apprendre comment on code un thème, mais bel et bien la maniere de créer un theme xoops avec vos connaissances. Bien que celui-ci soit un pas à pas, ce qui vous permettra de vous familiariser avec les notions du css notamment ;-)

A. commencons par le commencement

La première chose est de ce munir d'un éditeur de texte. Il en existe des dizaines personnellement j'utilise dreamweaver, mais il est payant ( et cher en plus :roll. En gratuit pour windows, je vous conseille notepad ++  , pour les utilisateur linux, je sais qu'il ont déjà leur editeur de texte ouvert donc

Aprés avoir ouvert votre éditeur de texte, créez 2 Pages.

La première enregistrez la sous le nom de theme.html, sauvé la dans un répertoire que vous nommerez par exemple montheme  (vous pouvez le nommé comme vous voulez, mais se nom sera réutilisé par la suite.) 

la seconde enregistrez la dans le même répertoire sous le nom de style.css  

1.  La déclaration du type de langage utilisé

   Nous utiliseront donc du XHTML 1.0 Transitional.

   Pourquoi transitionnal? parce que le codage en serra déjà suffisament complexe. Parce que les modifications à apporter a xoops et notamment  au template des modules est vraiment fastidieux.) 

   Il existe plusieurs type e déclarations, je vous renvois vers vos cours de html  

2. Entre les balise <head> (une tête bien pleine dans un corps bien plein!)

Entre les balises html Head, vous devez retrouver les éléments suivants:

body { background-color: #000; background-image: url(url de ton image de rayure);}

Passons a votre logo. 

Pour cela, nous allons utiliser une astuce xoopsienne…

ce type d'astuce, ou de raccourcis, il en existe beaucoup sur xoops. Je vais tacher de vous en faire un résumé, une synthèse en fin de tutorial, ou dans un autre billet

donc pour inclure une image correspondant au logo, nous allons juste préciser l'url de l'image, avec un lien pointant vers notre page d'accueil. Pour pouvoir agir sur le logo, notamment sur son positionnement, nous allons utiliser des CSS. Pour cela, nous allons préciser une identité particulière au logo

voici le code que nous allons donc utiliser.

<div id="logo"><a xhref="<{$xoops_url}>"><img xsrc="<{$xoops_url}>/themes/montheme/images/logo.gif" alt="<{$xoops_pagetitle}>" title="<{$xoops_sitename}>"/></a></div>

 

 

suite a u nbug wordpress, veillez a enlever le "x" devant href et src, merci et dsl 

donc on précise l'identité de l'image.

Vous pouvez remarquer les "astuces" d'un seul coup d'oeil

 <{$xoops_url}> correspond a l'adresse de votre site.

Pourquoi es ce utile? Vous ne pouvez pas vous tromper dans l'url déjà, et surtout, votre thème fonctionne sur n'importe quel site xoops. 

 <{$xoops_pagetitle}> restranscrit le titre de la page. Ce qui est excelent pour votre référencement, si chaque page possède un nom unique, et bien pensé

 <{$xoops_sitename}> ceci retranscrit le  nom de votre site.

Ces 2 derniers raccourcis permettent de mieu référencer votre site en mettant en valeur les mots clés, le nom de votre site, et le titre de la page.

Alt et title, va référencer prioritairement l'image selon les mots clés utilisés Dans le modèle, template utilisé pour faire notre thème xoops, nous avons cumulé logo et banière. La méthode pour mettre votre banière, est identique a celle de votre logo. Sauf que l'image est différente. Je vous conseille e faire une banière trés légère, sinon cela va ralentir voter site internet. Mais, je vous conseille de travailelr au maximum cet élement de votre site, qui correspond un peu a l'identité de votre site, encore plus que votre logo a mon avis… en effet le logo tout le monde s'en souvient, mais une fois qu'on la vu, on la vu, la baniere prend une place plus importante dans voter theme xoops, et prendra aussi plus de place dans la mémoire de votre lecteur.

Placement en css

Voyont comment placer vos 2 images en CSS. Il existe plusieurs méthode pour placer vos 2 objets. Nous allons utiliser la méthode flottante (float) C'est pour cela que vous avez définis une identité a vos images. Pour le logo, l'identité est certainement logo, et pour la banière, banière placer le logo en premier dans style.css

 

#logo {float: left;} #baniere {float:right;}

 Le float est une technique trés utiliser en css. Nous avons utiliser un float left pour le logo pour le placer a gauche de l'ecran et un float right pour la banière pour quelle se place a droite. Si vous essayer maintenant, vous devriez avoir voter banière complettement a droite, et votre logo complettement a gauche, le tout sur un fond noir et rayé Si ce n'est pas le cas, je vous conseillerais de reprendre un peu le code ennoncé plus haut. Vous remarquerez aisément que votre site est un peu épparpillé. on va recentrer tout ca.

Mise en forme, définir la largeur du site

Nous allons donc, déterminer la largeur du site. Pour cela, il va falloir utiliser le CSS. Nous allons donc commencer par déterminer une identitée en (x)html dans votre theme.html rajouté entre body et votre logo une identitée

on rajoute un commentaire pour savoir ou on en est En css, nous allons définir la largeur et en profiter pour centrer votre site. Le choix de la largeur dépend de votre projet. Il faut penser que tout le modne n'a pas la même résolution d'écran que vous. La résolution idéale est 800*600 dont 800 de large, cette résolution conviendra a tout le monde. Mais selon le nombre d'information contenu par votre site, cela risque d'etre un peu etroit. Par exemple un forum préférera une largeur pleine. Le principe est le même peu importe la largeur de votre site, nous allons donc miser pour essayer sur une largeur ed 800 pixel. En fait, afin que notre site montre ses belles rayure :p, nous allons plutot miser sur une largeur de 790 pixels.

En css

 

#page {width: 790px; margin-left: auto; margin-right: auto;}

 

Les mise au point des amrgin par la valeur auto, va nous permettre de centrer parfaitement votre site dans la page, et cela peu importe la résolution de l'ecran. ainsi, même sur une résolution de 1200*1000, le site sera au milieu, et le reste de l'ecran sera noir rayé. Vous pouvez en profiter pour baisser votre site de quelques pixels. Pour cela appliquez a #page, un margin-top: de 10 pixels par exemple. Votre site decendra de 10 pixels. Dans notre exemple, nous n'appliqueront pas cette marge. Afin de cloturer poru l'instant nos floats, nous allons etablir une regle. Dans votre html juste en dessous de votre baniere. Rajoutez

 

<div class="clear">&nbsp;</div>

 

et dans votre css

.clear {clear:both;}

ca va mettre a zero les floats.

Le menu

Nous allons enfin passer au chose vraiment serieuses, la partie précédente était plutot pour vos faire la main. Mais rassurez vous c'est déjà presque fini Pour créer notre menu nous allons utiliser xoops et sa gestion des blocs. Notre menu sera composé des blocs de gauche. Pour ce faire, dans theme.html, rajouté ces quelques lignes en dessous du code de votre banière.

 

<{if $xoops_showlblock == 1}>
                <!– blocs de gauche, le menu –> 

                   <div id="colonneGauche">

                   <{foreach item=block from=$xoops_lblocks}>    

                   <div class="menu">  

                   <div class="blockTitle"><{$block.title}></div> 

                   <div class="blockContent"><{$block.content}></div>

                   </div> 

                   <{/foreach}> </div>                    <!– du menu –>

<{/if}>

 

décomposons un peu < {if $xoops_showlblock == 1}> previent que le meu ne s'affichera que et uniquement que si vous avez prédéfinit des blocs a gauche dans xoops. et laissera place vide si vous n'utilisez pas ces blocs xoops.

 

<div class="menu">  

 <div class="blockTitle"><{$block.title}></div> 

 <div class="blockContent"><{$block.content}></div>

 </div> 

 

va nous permette de mettre en place les blocs xoops, avec un titre < {$block.title}> et un contenu < {$block.content}>

Dans notre CSS, nous allons déterminé plusieurs choses.

1/ nous allons déterminer la largeur du menu et le fonds des blocs

#colonneGauche {width: 150px; color: #000;}

 

Nous avons déterminer une largeur de notre menu a 150 px.

2/ Modifications des titres

#colonneGauche .blockTitle {text-align: center; font-size: 1em;}

rien de trés extraordinaire ici.

3/ modification du contenu

#colonneGauche .blockContent {font-size: 0.8em; margin-bottom: 15px; padding: 5px;}

nous rajoutons un margin-bottom, pour rajouter une mage en bas de blocs, ca séparera les blocs de 15 pixels. et un padding de 5 pixel, pour pas que vote contenu soit trop proche du bord, tout en conservant un fonds pour créer un effet de bordure

 

4/Le fonds de votre menu en CSS

.menu {background-image: url(images/menu.gif); background-repeat: repeat-y; padding: 5px;}

 

nous avons préparé une image de fonds de notre menu. Cette image de fonds de couleur verte est créée tout en longueur, et sera répétter dans le sens vertical pour préparer une hauteur des blocs différentes selon vos besoins. 

J'ai l'impression de pas etre trés clair là, si? En résumé, on créer une bande horizontale, que nous allons multiplier x fois vers le bas, afin de pouvoir couvrir tout le bloc et ce malgré des hauteurs de blocs différentes (ben oui un blocs montrant les 5 derniers articles ne sera pas de la meme hauteur que les 20 derniers téléchargements ) Voila vous avez un menu superbement beau… Enfin presque, il maque a regler la couleur des liens par exemple

Passons au blocs Centres, et au module de xoops

Notre colonne de centre va etre composer d'un bloc central, pour afficher un message de bienvenue?, et d'un module, news? ou un autre… Pour inclure ces 2 choses (bloc et module), nous allons procéder pareillement que pour le menu. Dans votre fichier theme.html

 

<div id="colonneCentre">

<!– bloc central–>
<{if $xoops_showcblock == 1}>
         
             <div id="blocentral">
            <{foreach item=block from=$xoops_ccblocks}>
              <div class="blockTitle"><{$block.title}></div>
                <div class="blockContent"><{$block.content}></div>
            <{/foreach}>
            </div>
            
<{/if}>
<!– fin de bloc central –>
            
            
<!– module xoops –>

<{if $xoops_contents}>
                         <div id="content">
                         <{$xoops_contents}>
                          </div>
                        
                        
<{/if}>
<!– fin du module –>
</div>

 

Dans votre CSS, les sutilités vont commencer.

Nous allons déjà revenir un peu en arrière. En effet, nous allons placer nos blocs gràce au floats, pareil que pour notre banière et notre logo. De ce fait, il va falloir dire que notre colone du menu est a gauche. En clair, nous allons rajouter float: left; à notre

#colonneGauche #colonneGauche {width: 150px; float: left;}

 

A partir de là, il nous suffit de regler les marges de notre colonnes centrale afin quelle se glise aisément au bon endroit.

#colonneCentre {margin: -60px 20px 0 165px;}

 

Analysons ensemble les marges que j'ai définis. Le -60px remonte les contenu de 60 pixels vers le haut. En effet si vous remarquez, dans notre template de départ, le logo plus haut que notre banière, et le contenu est au dessus du niveau du menu de quelques pixels, c'est grâce aux marges négatives que nous allos donenr cet effet. La marge de 20px, est donnée ici afin de donner une impression d'alignement avec la banière. Pas de marge en bas de page. Et une marge de 165px sur la gauche. Pourquoi? ben vous avez pas suivit? ca va nous permettre de laisser la place a notre menu de gauche 150pixel pour le menu, et 15 px de décalage pour pas que ca ce colle.

Modification du titre.

Le titre des blocs centraux, sont dans notre exemple en bleu clair, et sans fonds. Pour donner cet effet voici le code CSS que j'emplois

#colonneCentre .blockTitle {color: #3399FF; font-size: 18px; font-family: "Comic Sans MS", Arial, Helvetica, sans-serif; margin-bottom: 15px;}

 

Modification du contenu

Le contenu du bloc lui posséde un fonds grisé clair

#colonneCentre .blockContent {background-color: #eee; margin-bottom: 25px;}

 

Voila pour les blocs centraux de xoops.

Passons au modules!

L'emplacement du module est déjà réalisé grâce a l'identité de colonneCentre , passons maintenant au titre et au contenu (content) Pour le titre des partie du modules

.itemHead {color: #3399FF; font-size: 18px; font-family: "Comic Sans MS", Arial, Helvetica, sans-serif; padding: 10px;}

Pour le contenu de votre module xoops

.itemBody, .itemInfo {width: 600px; background-color: #eee; padding: 10px;}

Vous remarquerez que nous proposont pour la premiere fois ue valeur pour la largeur de notre colonne centrale. C'est un bug que je ne suis aps arriver a corriger, si je ne précise aps la valeur dans un des item, le module ne prend pas toute la largeur de la page… Idem si je met la valeur 100% ou encore auto :?

 

vous voila donc avec un premier apperçu d'un thème xoopsé simple, valide xhtml et css. Ci joint, le theme.html, style.css, le template, les images….. le theme xoops quoi

 

Plein de choses restent a régler, je vous conseille d'utiliser la fonction CSS du plugin webdevelopper de firefox (voir debut de tuto) Pour trouver a quoi correspond tel ou tel identité, allez dans information/ afficher les informations de l'element, ou afficher les details des id et class. Puis ouvrez directement votre css dans votre navigateur pour tester dans CSS, editer les CSS et vous pourrez essayer diverses couleurs… Dans un futur tutorial xoops, je définirais un peu les class, et id type de xoops, tel que .comTitle …, les itemBody … , even, et odd… mais en attendant, c'est a vous de faire vos propres tests ;-)

 

Si vous avez des problème pour créer vos thèmes xoops, vous pouvez demander de l'aide

sur theme xoops  xoops apprendre le css et le xhtml  support xhtml et css  ou chercher simplement sur google

Aucun support ne sera fait dans les commentaires. Si une coquille c'etait glissé dans le tuto, veuillez m'en excuser et surtout me le dire dans les commentaires!!! bon codage et a +

 

Si vous utilisez le theme que je vous donne en exemple, merci de préciser sa provenance