[Tutorial] Faire son propre skin pour Hattrick

Page 1 sur 3 1, 2, 3  Suivant

Voir le sujet précédent Voir le sujet suivant Aller en bas

[Tutorial] Faire son propre skin pour Hattrick

Message par Pedro le Ven 14 Avr 2006 - 8:50

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


Dernière édition par le Lun 27 Nov 2006 - 22:31, édité 7 fois

_________________________________________________
Mionnay Gone (593325) / Div IV.62 (5511)
Les P'tits Loups (2616) / L1 Ht-Colors (285224)

Pedro
Graphiste

Nombre de messages : 1539
Age : 36
Localisation : Nantes
Equipe : Mionnay Gone
Date d'inscription : 12/01/2006

Revenir en haut Aller en bas

Re: [Tutorial] Faire son propre skin pour Hattrick

Message par Rainbow le Ven 14 Avr 2006 - 10:34

Shocked Shocked

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

_________________________________________________
- Manager du FC.Eckbolsheim en VI.994
- supporter de Strasbourg

Rainbow
Graphiste

Nombre de messages : 959
Date d'inscription : 27/03/2006

Revenir en haut Aller en bas

Re: [Tutorial] Faire son propre skin pour Hattrick

Message par DarkWizard le Ven 14 Avr 2006 - 10:36

Flemmard ! Very Happy

Merci pour le tuto. :wink:

DarkWizard
Amateur
Amateur

Nombre de messages : 41
Localisation : Asnieres sur Seine 92
Equipe : Lycéen
Date d'inscription : 25/03/2006

http://www.ht-arena.com/slbenficadeparis

Revenir en haut Aller en bas

Re: [Tutorial] Faire son propre skin pour Hattrick

Message par Rainbow le Ven 14 Avr 2006 - 12:45

Rolling Eyes

_________________________________________________
- Manager du FC.Eckbolsheim en VI.994
- supporter de Strasbourg

Rainbow
Graphiste

Nombre de messages : 959
Date d'inscription : 27/03/2006

Revenir en haut Aller en bas

Re: [Tutorial] Faire son propre skin pour Hattrick

Message par DarkWizard le Ven 14 Avr 2006 - 13:10

Rainbow a écrit:Rolling Eyes

C'était de l'humour. Sad

DarkWizard
Amateur
Amateur

Nombre de messages : 41
Localisation : Asnieres sur Seine 92
Equipe : Lycéen
Date d'inscription : 25/03/2006

http://www.ht-arena.com/slbenficadeparis

Revenir en haut Aller en bas

Re: [Tutorial] Faire son propre skin pour Hattrick

Message par Boumbo le Ven 14 Avr 2006 - 14:23

merci beaucoup pedro Smile

_________________________________________________
Pour les HT-supporters, n'hesitez pas à nous supporter afin de nous remercier ...

Merci aussi d'héberger vous-mêmes les logos et bannières.

:wink: Boumbo, Malnoue, IV.47

Boumbo
Graphiste

Nombre de messages : 896
Equipe : Boumbinho Futebol Club
Date d'inscription : 04/02/2005

Revenir en haut Aller en bas

Re: [Tutorial] Faire son propre skin pour Hattrick

Message par -lznogood- le Ven 14 Avr 2006 - 14:46

Oui nickel, merci pedro Laughing

je suis arrivé a ca: http://img222.imageshack.us/img222/2757/ht0lb.jpg

j'ai un seul soucis: sur la page des joueurs ca me donne ca:
http://img222.imageshack.us/img222/7791/ht23ix.jpg

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

_________________________________________________
La Moliere DV.15

-lznogood-
Graphiste

Nombre de messages : 1317
Localisation : Montpellier
Date d'inscription : 25/07/2005

http://www.ht-arena.com/lamoliere/

Revenir en haut Aller en bas

Re: [Tutorial] Faire son propre skin pour Hattrick

Message par vandonkey le Ven 14 Avr 2006 - 15:04

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 Laughing

vandonkey
V.I.P.

Nombre de messages : 3824
Age : 41
Localisation : A la maison, au froid...
Equipe : La Fine Fleur
Date d'inscription : 12/04/2005

Revenir en haut Aller en bas

Re: [Tutorial] Faire son propre skin pour Hattrick

Message par Pedro le Ven 14 Avr 2006 - 15:33

-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 ! lol!

_________________________________________________
Mionnay Gone (593325) / Div IV.62 (5511)
Les P'tits Loups (2616) / L1 Ht-Colors (285224)

Pedro
Graphiste

Nombre de messages : 1539
Age : 36
Localisation : Nantes
Equipe : Mionnay Gone
Date d'inscription : 12/01/2006

Revenir en haut Aller en bas

Re: [Tutorial] Faire son propre skin pour Hattrick

Message par -lznogood- le Ven 14 Avr 2006 - 15:46

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?

_________________________________________________
La Moliere DV.15

-lznogood-
Graphiste

Nombre de messages : 1317
Localisation : Montpellier
Date d'inscription : 25/07/2005

http://www.ht-arena.com/lamoliere/

Revenir en haut Aller en bas

Re: [Tutorial] Faire son propre skin pour Hattrick

Message par Pedro le Ven 14 Avr 2006 - 16:29

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;
}


_________________________________________________
Mionnay Gone (593325) / Div IV.62 (5511)
Les P'tits Loups (2616) / L1 Ht-Colors (285224)

Pedro
Graphiste

Nombre de messages : 1539
Age : 36
Localisation : Nantes
Equipe : Mionnay Gone
Date d'inscription : 12/01/2006

Revenir en haut Aller en bas

Re: [Tutorial] Faire son propre skin pour Hattrick

Message par -lznogood- le Ven 14 Avr 2006 - 16:51

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

_________________________________________________
La Moliere DV.15

-lznogood-
Graphiste

Nombre de messages : 1317
Localisation : Montpellier
Date d'inscription : 25/07/2005

http://www.ht-arena.com/lamoliere/

Revenir en haut Aller en bas

Re: [Tutorial] Faire son propre skin pour Hattrick

Message par bartom_34 le Ven 14 Avr 2006 - 19:10

Petite question pour de la part d'un nul Very Happy
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?

_________________________________________________
Mon site: http://www.ht-arena.com/mhsc/

bartom_34
V.I.P.

Nombre de messages : 321
Localisation : Montpellier
Equipe : Etudiant
Date d'inscription : 01/11/2005

http://www.ht-arena.com/mhsc/

Revenir en haut Aller en bas

Re: [Tutorial] Faire son propre skin pour Hattrick

Message par vandonkey le Ven 14 Avr 2006 - 19:12

bartom_34 a écrit:Petite question pour de la part d'un nul Very Happy
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!!! lol!

vandonkey
V.I.P.

Nombre de messages : 3824
Age : 41
Localisation : A la maison, au froid...
Equipe : La Fine Fleur
Date d'inscription : 12/04/2005

Revenir en haut Aller en bas

Re: [Tutorial] Faire son propre skin pour Hattrick

Message par -lznogood- le Ven 14 Avr 2006 - 19:19

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 Wink

_________________________________________________
La Moliere DV.15

-lznogood-
Graphiste

Nombre de messages : 1317
Localisation : Montpellier
Date d'inscription : 25/07/2005

http://www.ht-arena.com/lamoliere/

Revenir en haut Aller en bas

Re: [Tutorial] Faire son propre skin pour Hattrick

Message par Pedro le Ven 14 Avr 2006 - 19:49

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.

_________________________________________________
Mionnay Gone (593325) / Div IV.62 (5511)
Les P'tits Loups (2616) / L1 Ht-Colors (285224)

Pedro
Graphiste

Nombre de messages : 1539
Age : 36
Localisation : Nantes
Equipe : Mionnay Gone
Date d'inscription : 12/01/2006

Revenir en haut Aller en bas

Re: [Tutorial] Faire son propre skin pour Hattrick

Message par bartom_34 le Ven 14 Avr 2006 - 20:24

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. Evil or Very Mad

_________________________________________________
Mon site: http://www.ht-arena.com/mhsc/

bartom_34
V.I.P.

Nombre de messages : 321
Localisation : Montpellier
Equipe : Etudiant
Date d'inscription : 01/11/2005

http://www.ht-arena.com/mhsc/

Revenir en haut Aller en bas

Re: [Tutorial] Faire son propre skin pour Hattrick

Message par cedric67 le Ven 14 Avr 2006 - 21:19

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

cedric67
Amateur
Amateur

Nombre de messages : 20
Localisation : Erstein
Equipe : Etudiant
Date d'inscription : 28/01/2006

http://nirvana.web.free.fr

Revenir en haut Aller en bas

Re: [Tutorial] Faire son propre skin pour Hattrick

Message par Pedro le Ven 14 Avr 2006 - 22:04

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).

_________________________________________________
Mionnay Gone (593325) / Div IV.62 (5511)
Les P'tits Loups (2616) / L1 Ht-Colors (285224)

Pedro
Graphiste

Nombre de messages : 1539
Age : 36
Localisation : Nantes
Equipe : Mionnay Gone
Date d'inscription : 12/01/2006

Revenir en haut Aller en bas

Re: [Tutorial] Faire son propre skin pour Hattrick

Message par Boumbo le Ven 14 Avr 2006 - 22:28

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.

_________________________________________________
Pour les HT-supporters, n'hesitez pas à nous supporter afin de nous remercier ...

Merci aussi d'héberger vous-mêmes les logos et bannières.

:wink: Boumbo, Malnoue, IV.47

Boumbo
Graphiste

Nombre de messages : 896
Equipe : Boumbinho Futebol Club
Date d'inscription : 04/02/2005

Revenir en haut Aller en bas

Re: [Tutorial] Faire son propre skin pour Hattrick

Message par Boumbo le Ven 14 Avr 2006 - 23:12

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.

_________________________________________________
Pour les HT-supporters, n'hesitez pas à nous supporter afin de nous remercier ...

Merci aussi d'héberger vous-mêmes les logos et bannières.

:wink: Boumbo, Malnoue, IV.47

Boumbo
Graphiste

Nombre de messages : 896
Equipe : Boumbinho Futebol Club
Date d'inscription : 04/02/2005

Revenir en haut Aller en bas

Re: [Tutorial] Faire son propre skin pour Hattrick

Message par Daddy91 le Ven 14 Avr 2006 - 23:23

-lznogood- a écrit:
je suis arrivé a ca: http://img222.imageshack.us/img222/2757/ht0lb.jpg

Super tuto merci à toi Pedro Wink

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

Daddy91
Amateur
Amateur

Nombre de messages : 20
Date d'inscription : 13/04/2006

Revenir en haut Aller en bas

Re: [Tutorial] Faire son propre skin pour Hattrick

Message par bartom_34 le Ven 14 Avr 2006 - 23:30

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

_________________________________________________
Mon site: http://www.ht-arena.com/mhsc/

bartom_34
V.I.P.

Nombre de messages : 321
Localisation : Montpellier
Equipe : Etudiant
Date d'inscription : 01/11/2005

http://www.ht-arena.com/mhsc/

Revenir en haut Aller en bas

Re: [Tutorial] Faire son propre skin pour Hattrick

Message par -lznogood- le Ven 14 Avr 2006 - 23:37

Daddy91 a écrit:
-lznogood- a écrit:
je suis arrivé a ca: http://img222.imageshack.us/img222/2757/ht0lb.jpg

Super tuto merci à toi Pedro Wink

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 Laughing

_________________________________________________
La Moliere DV.15

-lznogood-
Graphiste

Nombre de messages : 1317
Localisation : Montpellier
Date d'inscription : 25/07/2005

http://www.ht-arena.com/lamoliere/

Revenir en haut Aller en bas

Re: [Tutorial] Faire son propre skin pour Hattrick

Message par Daddy91 le Ven 14 Avr 2006 - 23:40

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

Daddy91
Amateur
Amateur

Nombre de messages : 20
Date d'inscription : 13/04/2006

Revenir en haut Aller en bas

Re: [Tutorial] Faire son propre skin pour Hattrick

Message par Contenu sponsorisé Aujourd'hui à 1:07


Contenu sponsorisé


Revenir en haut Aller en bas

Page 1 sur 3 1, 2, 3  Suivant

Voir le sujet précédent Voir le sujet suivant Revenir en haut


 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum