[Tutorial] Faire son propre skin pour Hattrick

Prérequis

Pour pouvoir changer le look de Hattrick, il faut déjà utiliser FireFox et installer le plugin FoxTrick.


Comment fonctionne Hattrick ?

Bon là je ne vous présenterai pas le moteur du jeu, mais comment marche un site internet, et plus particulièrement Hattrick. Un site bien fait doit décomposer ses pages en deux parties :

- Le contenu dans des pages HTML, PHP, ASP ou XML.
- La mise en forme dans des feuilles de style CSS

Dans le cas de Hattrick, la page principale est un cadre qui contient trois autres pages :

- En haut, une page header.asp
- A gauche, une page menu.asp
- A droite, une page main.asp

Chacune de ces pages utilise une feuille de style différente :

- http://www.hattrick.org/Common/Css/themes/standard/header.css
- http://www.hattrick.org/Common/css/menu.css
- http://www.hattrick.org/Common/Css/themes/standard/main.css
- http://www.hattrick.org/Common/Css/page/cn.css (pour les conférences)
- http://www.hattrick.org/common/Css/conf_menu.css

Pour changer le look, il va donc falloir réaliser son propre fichier CSS qui contiendra ses propres paramètres de mise en forme. Ce fichier sera utiliser en lieu et place de ceux précédemment cités grâce à FoxTrick.


C'est quoi un skin ?

Un skin, c'est un fichier ZIP contenant au moins deux fichiers :

- Un fichier CSS (userContent.css) avec la nouvelle mise en forme
- Un fichier de propriétés (info.properties) contenant les informations générales sur le skin (nom, version, auteur...)
- Eventuellement, des images

Pour être utilisé, un skin doit être placé dans le répertoire C:\Documents and Settings\User\Application Data\Mozilla\Firefox\Profiles\default\foxtrick\skins.


Comment je fais mon skin ?

Pour réaliser son skin, il faut d'abord comprendre comment fonctionne le langage CSS. En HTML, le texte (contenu) est situé entre des balises. Pour un lien, il est situé entre deux balises A. Par exemple :

Code:

<a href="menuforum.asp?action=viewfolder&amp;folderid=154055">Une autre manière de jouer</a>

Dans le fichier CSS on peut donc retrouver le bloc suivant :

Code:

a:visited, a:link, a:active, a:hover {
   font-family: Verdana, Arial, Helvetica, sans-serif;
   font-size:10px;
   color: #46457F;
   text-decoration: none;
   }


Ce qui est situé avant l'accolade permet de se référer à la balise HTML. Ici, ça concerne tous les liens visités, normaux, actifs et survolés par la souris. Entre les accolades on précise la mise en forme. Ici, on veut une police Verdana (ou Arial si Verdana indisponible, ou Helvetica sinon ...) de 10 pixels de haut, de couleur bleue (code hexadécimal pouvant être obtenu dans tout logiciel de dessin) et sans soulignement ni surlignement.

Je ne rentrerai pas plus en détail tant le code CSS est complet, mais pour en savoir plus, voici un très bon site : http://www.yoyodesign.org/doc/w3c/css2/cover.html


Pour faire son propre skin Hattrick, le plus simple est d'abord de récupérer soit un skin existant et d'en modifier le fichier CSS, soit de repartir des fichiers CSS Hattrick que j'ai cités plus haut. Ensuite, il faut identifier pour chaque bloc CSS à quel élément graphique du site il se réfère. Pour cela, il faut voir les balises HTML en accédant au code source des pages. Pour voir le code du header (cadre du haut avec la bannière, le logo et les infos) : Clic droit sur le header > Ce cadre > Code source du cadre

Il faut ensuite rechercher dans tout ce bordel ce qui nous intéresse. Exemple en changeant le look de la nouvelle barre noire du haut :

Code:


<div id="[u]infoBar[/u]">
   <u width="100%" border="0" cellspacing="0" cellpadding="0">
        <tr>

       <td width="8">&nbsp;</td>
       <td width="430"><span id="team"><a href="teamDetails.asp?teamID=593325" class="[u]infoBarLink[/u]" target="main">Mionnay Gone</a>, <a href="leagueSystemDetails.asp?LeagueID=5" class="[u]infoBarLink[/u]" target="main">France</a>, <a href="leagueDetails.asp?LeagueLevelUnitID=36149" class="[u]infoBarLink[/u]" target="main">VI.161</a></span></td>
        <td><span id="online">&nbsp;</span></td>
      <td align="right"><span id="time">&nbsp;</span></td>
       <td width="8">&nbsp;</td>
        </tr>

   </table>
   </div>


Code:


#infoBar table {
   background-color: #FFFFFF;
   background-image: url(images/bandeau.png);
   background-position: center;
   background-repeat: no-repeat;
   color: #A3383E;
}

.infoBarLink{
   color: #46457F;
   font-weight:normal;
   text-decoration:underline;
   }



Le code CSS de remplacement fait :

- Couleur de fond : blanc
- Image de fond : images/bandeau.png (placée dans le zip dans un répertoire images)
- Image de fond centrée
- Image affiché qu'une fois (pas de répétition horinzontale ni verticale)
- Texte en rouge (code #A3383E)

- Liens texte en bleu (#46457F)
- Police normale (pas de gras)
- Texte souligné

Voilà l'essentiel de ce qu'il faut savoir. Après la réalisation d'un skin prend du temps, puisqu'il faut généralement chercher dans le code HTML les balises du texte qu'on veut mettre en forme. Et il faut tester les modifications au fur et à mesure, car une mise en forme peut s'appliquer à plusieurs endroits du site (typiquement, tous les liens).

Pour commencer, vous pouvez jeter un oeil à mon fichier ZIP. En remplaçant mes images par les votres et en changeant les couleurs (tous les codes commençant par # dans le CSS) vous pourrez déjà arriver à un résultat intéressant.

Bon courage

LOL finalement j'aime bien comment il est le look d'hattrick

Flemmard !

Merci pour le tuto.

Rainbow a écrit:

C'était de l'humour.

merci beaucoup pedro

Oui nickel, merci pedro

je suis arrivé a ca: https://2img.net/r/ihimizer/img222/2757/ht0lb.jpg

j'ai un seul soucis: sur la page des joueurs ca me donne ca:
https://2img.net/r/ihimizer/img222/7791/ht23ix.jpg

j'arrive pas a virer le fond bleu a droite et a mettre le texte en bleu :?

merci pour le tuto...
dès que j'ai des vacances, h'essaie de m'y mettre... même si c'est pas gagné d'avance

-lznogood- a écrit:
j'arrive pas a virer le fond bleu a droite et a mettre le texte en bleu :?

Ouais je sais j'ai eu le même problème. C'est d'ailleurs pour ça que je viens juste de reprendre mon skin.


C'est ça qui pose problème.

Code:


div table {
   background-color: #A3383E; (t'as mis du bleu ici)
}


Ce code qui permet de changer la couleur de la barre du haut est très générique (pas de classe ou de précision sur un argument du tableau). Dans le code HTML, le style est précisé en dur, ce qui fait que le texte est blanc et gras (et ça on ne peut pas le changer). Ca doit être un stagiaire qui a repris l'interface, parce que faire ça, c'est mal, c'est tout dégueux (c'est aussi à cause de ça que je peux pas virer la pub Intel).

Donc ce que je viens de faire, c'est changer le rouge par un gris clair. Comme ça, le tableau que rajoute FoxTrick apparaît en gris clair (moins agressif). En contrepartie, la barre du haut est bof avec du texte blanc sur gris. :?




Edith me dit c'est pas bien d'utiliser une mule !

Edith a bien raison...


Merci bien, je vais changer ca.

sinon j'ai un autre soucis, sur les conf en haut a droite des posts, j'ai plus l'heure et la date, ca vient du skin ou la police serait de la meme couleur que le fond ou du nouveau design Hattrick?

Ca c'est moi qui l'est précisé dans mon skin. Il suffit de virer ça :

Code:

.box0 td[align="right"] {
   display: none;
} (tout ce bloc)

.box0 td {
   width: 100%; (et juste cette ligne)
   border-spacing: 0px;
   color: #FFFFFF;
   background-color: #46457F;
   padding: 2px 2px;
}



Merci bien, j'ajouterais que dans les paramettres de foxtrick, j'ai elargi le cadre principal.
Pour le coup c'est nickel

Petite question pour de la part d'un nul
Comment tu fais pour tester des modification?
Tu modifies directement sur ht?
Tu mets le fichier zip quelque part?
Si oui, où?
Comment mettre les trois fichiers dans un fichier Zip?

Autre chose, pour le fichier d'info, je ne peux pas l'ouvrir car"window ne peut pas ouvrir ce fichier". Il faut un logiciel aproprié pour l'ouvrir?

bartom_34 a écrit:Petite question pour de la part d'un nul
Comment tu fais pour tester des modification?
Tu modifies directement sur ht?
Tu mets le fichier zip quelque part?
Si oui, où?
Comment mettre les trois fichiers dans un fichier Zip?

Autre chose, pour le fichier d'info, je ne peux pas l'ouvrir car"window ne peut pas ouvrir ce fichier". Il faut un logiciel aproprié pour l'ouvrir?

on doit etre a peut pres du meme niveau, ne t'en fait pas!
Il y en a plein d'autres des comme toi!!!

http://www.infos-du-net.com/telecharger/Total-Commander.html

j'ai utilsé ca pour editer le zip de pedro.

c'est peut etre la seule chose de pas clair pour modifer son zip

Ben tu dézippes tes fichiers (rassurez-moi, vous connaissez Winzip ?). Tu modifies ton fichier CSS. Tu rezippes tout (en fait, avec Winzip, il suffit de faire glisser le fichier modifié sur le zip existant et le fichier est mis à jour dans l'archive) et tu copies le nouveau zip dans le répertoire FoxTrick (qui est indiqué dans mon message). Et tu actualises ta page Hattrick (F5).

C'est super chiant mais je sais pas faire mieux. Et oui TotalCommander peut être très utile dans ce cas.

Pour le fichier d'info, tu l'ouvres avec Notepad.

pedro13 a écrit:

Pour être utilisé, un skin doit être placé dans le répertoire C:\Documents and Settings\User\Application Data\Mozilla\Firefox\Profiles\default\foxtrick\skins.

Problème, ce chemin n'existe pas, j'ai Document and Settings\All User\... puis pas ce qu'il faut, ou alors:
Document and Settings\Propriétère\Application Data\... mais aucune trace de Mozilla.

De plus j'ai beau rechercher un fichier foxtrick, il n'en existe pas.

Edit: J'arrette pas de faire des recherche de chaque chemin, et toujours rien. Là je pense pas que ça vienne de ma nulité en revanche.

-lznogood- > pas mal le skin que tu as réalisé !

C:\Documents and Settings\User\Application Data\Mozilla\Firefox\Profiles\default\foxtrick\skins

En fait, y a des subtilités dans ce nom :
User : nom de ton profil windows
default : en fait, le nom peut être default.qqchose

En gros chez moi, le chemin exact est c'est :
C:\Documents and Settings\Pedro\Application Data\Mozilla\Firefox\Profiles\default.gpb\foxtrick\skins

J'oubliais de préciser que le dossier "Application Data" est un dossier caché (Dans une fenêtre de l'explorateur windows : Outil > Option des dossiers > Affichage > Afficher les documents et dossiers cachés).

je me suis fait un skin juste en modifiant les couleurs et les images de pedro ... mais j'essaye de passer au dela en changeant aussi la programmation mais c'est la que j'ai du mal. en fait, j'arrive pas à comprendre quelle partie correspond à quel design (par exemple, je comprend pas comment trouver le texte des titres, le texte normal, etc)

quoiqu'il arrive, je pensais ...

... encore plus depuis le changement d'hier sur hattrick, beaucoup d'utilisateurs de foxtrick utilisent des skins pour jouer. pourquoi ne pas mettre des skins HT-Colors en place.

si pedro tu es d'accord, j'aimerais bien ton aide pour lancer ca, parce que comme je viens de le dire, j'ai du mal avec la partie de programmation.

vu que ca se fait aussi pour les trophées, j'essayerai de me lancer.

je viens de me lancer dans une partie longue et fastidieuse pour commenter chaque partie du code d'hattrick afin de me simplifier la vie dans le futur pour en faire d'autres ... mais j'aurai surement besoin de toi pedro pour de nombreuses parties dont je ne comprend pas le but.

-lznogood- a écrit:
je suis arrivé a ca: https://2img.net/r/ihimizer/img222/2757/ht0lb.jpg

Super tuto merci à toi Pedro

Iznogood, comment tu as fais pour avoir ce thème en Windows, qui est sacrément classieux !

Ah merci Pedro, tu m'as décoincé,
Je suis lancé maintenant, on m'arrête plus !

Daddy91 a écrit:

-lznogood- a écrit:
je suis arrivé a ca: https://2img.net/r/ihimizer/img222/2757/ht0lb.jpg

Super tuto merci à toi Pedro

Iznogood, comment tu as fais pour avoir ce thème en Windows, qui est sacrément classieux !

C'est le skin de windows vista.
Une recherche sur google et tu trouveras facilement

Ok merci !
Et ça demande beaucoup de mémoire ou ça va ?