Alliance [GI-JOE] Index du Forum
S’enregistrerRechercherFAQMembresGroupesConnexion
[TUTO]Crée Son Skin

 
Répondre au sujet    Alliance [GI-JOE] Index du Forum » Partie Publique » Aide et Astuce Sujet précédent
Sujet suivant
[TUTO]Crée Son Skin
Auteur Message
Snake-Eyes
Chefs des [GI-JOE]
Chefs des [GI-JOE]

Hors ligne

Inscrit le: 03 Fév 2011
Messages: 352
Alliance: [GI-JOE]
Localisation: Univers 67
Masculin

Message [TUTO]Crée Son Skin Répondre en citant
Alors je vais essayer de développer un petit peu plus ici, en essayant de rester clair 
 . En espérant que cela pourra répondre aux questions de quelques joueurs sur la création de skin.

Comme le sujet semble intéresser du monde, je vais essayer de développer en plus la signification des différents éléments présents dans le fichier css et essayer de proposer un pas à pas pour réaliser ce fichier en partant de zéro.
  • Généralités
  • Structure de la page Ogame
  • Pas à pas[/list:u]



Généralités

Dans cette partie nous allons d'abord voir les bases, quelle est la structure du dossier contenant le skin, comment modifier les images et quelques instructions.

Qu'est-ce qu'un skin ?

Un skin c'est l'apparence de l'interface de jeu. L'ensemble des vaisseaux, bordures, polices de textes, ... Bref le visuel.

Principe

Quel est le principe pour modifier ou créer un skin ?

En fait le jeu, le serveur, .... (comme vous voulez) va donner des "petits noms" aux différents éléments visuels. Par exemple il va nous dire en face de la descritption des petits transports se trouve une image qui se trouve dans chemin_de_graphisme/gebauede/202.gif. A cet emplacement vous verrez donc l'image qui se trouve dans le dossier chemin_de_graphisme/gebauede et appelée 202 et qui est au format gif. Donc pour choisir l'image que vous voudrez pour ce transport, il suffit de trouver un image gif que vous appellerez 202 et que vous mettrez dans le répertoire chemin_de_graphisme/gebauede.
Il pourra aussi dire que des cases de la page de ressources s'appellent th (pas très explicite). Et si vous voulez par exemple que le fond de ces cases soit rouge, c'est là que ça se complique, il vous faudra taper

Code:

th
{
background-color : #FF0000 ; 
}[/code:1]



Ok, c'est vraiment laid là. Au passage, petite astuce, vous connaissez les codes couleurs html qui ressemblent à #rrggbb (disponiblesici) , sachez que transparent (sans #) est aussi un code couleur recevable qui est très pratique quand vous voulez de la transparence.
Comme vous le voyez, quand on commence à toucher à la mise en forme, ce n'est plus la même chose.

Mais avant de créer votre skin, je vous conseille d'abord de télécharger un "skin" existant par exemple ici (lien de la FAQ) ou ici(site allemand regrroupant de nombreux skins) ou encore ici (lien de skins sur le forum anglais).

Vous pouvez voir que tous ont la même structure.


Structure

Une fois l'archive dézippée vous pouvez voir ceci :un dossier mon_skin qui contient les répertoires suivants
  • Un répertoire gebauede qui contient les images des bâtiments, recherche et vaisseaux
  • Un répertoire gfx qui contient les barres de séparation pour la barre latérale
  • Un répertoire planeten qui contient les images des planètes avec le sous répertoire small qui contient leur miniatures
  • Un répertoire images qui contient les petites icônes pour les ressources en haut
  • Un répertoire pic qui contient les différents pictogrammes qui sont visibles dans les pages du sous menu alliance
  • Un répertoire img qui est un fourre tout
  • Un fichier css appelé formate[/list:u]

Il y a donc beaucoup de choses qui sont toutes indispensables (sauf le dossier img)

Pour votre skin, cette structure est absolument à respecter.

Les dossiers images

Alors les dossiers images sont comme vous pourrez le constater identiques quelques soit le skin. Cela est normal car c'est là dedans que se trouve les images qui correspondent aux éléments auxquels le jeu a attribué la propriété "ton image s'appelle bidule" (pour faire simple). Il faut donc qu'il y aie correspondance entre le jeu et les images du répertoire.
Il faut donc respecter scrupuleusement les noms de ces éléments sous peine de voir une croix blanche s'afficher.

Une particularité des images de ces dossiers est qu'elles peuvent avoir n'importe quelle taille, vous les verrez automatiquement redimensionnées dans le jeu.

Maintenant une petite question qui est souvent posée : j'ai 2 planètes qui ont la même image, puis-je arranger cela ?
Voyons ça. Les 2 planètes ont la même image donc soit le jeu a dit vous aurez toutes les 2 l'image qui se trouve à chemin_de_graphisme/planeten/eisplanet10.jpg et dans ce cas, on ne peut y remédier. Soit vous avez 2 fois la même image dans votre répertoire et là ça peut se changer, mais c'est rarement le cas.
Donc la réponse est non, on ne peut rien faire.
2 planètes identiques le reste

Maintenant vous voulez changer une image, par exemple votre petit transporteur qui s'est vu attribué l'image appelée 202.gif qui se trouve dans le répertoire chemin_de_graphisme/gebauede. Pour cela rien de plus simple :
  • prenez une image n'importe laquelle et de n'importe quelle taille
  • mettez la au format gif
  • appelez là 202
  • déplacez l'image qui se trouve à l'emplacement chemin_de_graphisme/gebauede/202.gif
  • mettez y à la place votre nouvelle image
  • le tour est joué.[/list:u]


Pour voir le nom de l'image que vous voulez modifier, c'est simple, il suffit de faire clic droit sur l'image et propriétés.

La méthode est ici détaillée pour une image du répertoire gebauede mais pour changer une image de n'importe quel autre répertoire, la méthode est la même (notamment pour le fond qui se trouve dans le répertoire img) à ceci près que pour les images du rèpertoire img, il n'y a pas de redimensionnement automatique.
Il y a une petite particularité si vous voulez changer l'image d'une planète, vous devez le faire pour l'image qui se trouve dans le répertoire planeten mais aussi pour celle qui se trouve dans le sous-répertoire small.

Donc la seule chose pour créer ces répertoires, ce sera des images, et beaucoup d'images même, plus d'une centaine, je vous laisse faire le compte exact.


Le dossier img

Comme je l'ai dit c'est un fourre tout et il ne sert donc à rien à proprement parler. Juste à ranger un peu ses images. Dedans vous y mettrez donc toutes les images qui sont "falcutatives" comme votre fond, le fond de la barre latérale, si vous voulez un fond pour la description des bâtiments, un fonc lorsque vous écrivez un message, .... bref pas mal de choses en fin de compte.

En fait le jeu ne donnera pas de nom à ces images mais aux éléments qui les contiennent comme td.l ou th, ... celles-ci seront utilisées lors de la création du fichier formate.css lorsque vous attribuerez les propriétés aux différents éléments.

Petite remarque : pour ces images, aucun redimensionnement automatique, si l'image est trop petite, il y aura une mosaïque d'image, si elle est trop grosse, elle sera centrée et tronquée, si elle est à la bonne taille ben y a rien à redire.


Le fichier formate

Alors là ça se complique et je vous conseille d'acquérir quelques connaissances en css avant d'y toucher, par exemple en allant sur ce site qui est très bien fait et très accessible, à conseiller.

Donc pour cette partie, ne connaissant pas le nom de tous les éléments, je ne saurais vous faire une liste exhaustive. Je vous conseille donc de chercher par vous même en téléchargeant différents thèmes commentés de préférence (évitez Epicblue), je vous recommande reloaded qui est commenté mais en allemand, et d'y aller en tatonant. 
Ou alors il y a un fichier css que j'utilise qui se trouve ici qui est un peu brouillon et très mal organisé mais commenté (un petit peu) en français 
.
Dernière possibilité c'est automatiser la création du css, chose que j'essaye de faire ici mais ce n'est pas encore complet et l'hébergeur oblige souvent à actualiser plusiers fois la page, ce qui n'est pas le mieux quand on veut acquérir des données.

Donc comme cette partie était plutôt courte, voici quelques exemples de ce que l'on peut faire.

Mon skin (je n'utilise pas les modifications que j'ai donné après, ce sont juste des exemples) :



Pour mettre un fond lorsque vous écrivez un message
Code:

textarea 
{
background-image : url(img/srgs.jpg);
}[/code:1]



Tout va bien, on est dans le vert !! Ah non une attaque, et la barre latérale est palichonne, la police a changé aussi 
.



Pour la transparence
Code:

body.style table 
{
filter : alpha(opacity=1);
-moz-opacity : 0.1;
} [/code:1]

Pour la couleur c'est simple
Code:

body

{
color : #00FF00 ;
}[/code:1]

Et puis un dernier pour s'amuser, c'est pas mal le chantier spatial comme ça non ?




Pour le faire
Code:

td.l
{
background-image : url(img/galaxie.gif) ; 
}[/code:1]

Une dernière instruction pour supprimer les images 

Code:


table table td img, .style table img
{
visibility : hidden;
width : 0px;
height : 0px;
}
[/code:1]

Avec ça on peut avoir des thèmes assez "minimalistes", une image de celui que j'ai en ce moment :



Dans chaque cas, je n'ai affiché qu'un instruction mais il y a en réalité plusieurs, par exemple la taille du caractère, l'écart entre un bord de l'image est la bordure mais celles données sont suffisantes pour obtenir l'effet désiré.
Autre précision, les adresses des images, ne sont valables que chez moi, chez vous, ça ne s'appellera pas forcément galaxie.gif ou srgs.jpg.


La structure de la page Ogame, quels sont les "petits noms" 


Dans la partie précédente, j'ai dit que je ne donnerai pas les noms attribués à chaque partie sur Ogame mais certains semblent le demander, je vais donc essayer de tous vous les donner (du moins tous ceux utiles).

Pour cela, je vais vous montrer les différentes zones sur chaque page de Ogame et vous donner le nom qui leur ai attribué. Je ne vous donnerai en revanche pas les propriétés qui leur sont attribuables car vous pourrez tous aussi bien en attribuer une que dix.

Sur les screens vous pourrez voir que sur différentes pages, il y a parfois le même nom qui revient, il faudra ainsi faire attention à cela lors de l'écriture du fichier css. Mais tous les noms doivent désigner une zone précise.

Je vais mettre les screens, ce sera plus parlant. 

La barre latérale



Donc sur le screen, j'ai représenté :
  • A l'extérieur de la zone rouge, c'est la zone body.style
  • En rouge les contours de la zone body.style table (le body est facultatif car tout élément est dans body on écrira donc .style table). Pour le début je vais expliquer d'où vient le nom, ce qui ne sera plus fait par la suite. 

Le premier terme body désigne l'ensemble de la page. .style signifie que l'on se place dans le body de classe style (on peut donner différent classes à différents éléments ce qui est parfois très pratique). Ensuite le reste du nom signifie que l'on se place dans la partie table de body.style, table désigne comme son nom l'indique un tableau. Donc les noms sont faits de la façon suivante, à gauche le nom de l'élément le plus gros et ensuite on précise de plus en plus en allant vers la droite en séparant le nom de chaque élément par un espace. Sachant qu'une case est désigné par l'appellation td, vous aurez compris que pour donner des propriétés à une case de la barre latérale, j'utiliserai .style table td[*]Donc en bleu les contours des zones .style table td, à savoir qu'on ne peut configurer chaque case individuellement car elles sont toutes désignées de la même façon.[*]En vert , le texte qui s'appelle .style table div a, je ne vais pas trop rentrer dans les détails mais sachez que div est un bloc et a désigne les liens.[/list:u]

La barre de ressources



Sur l'image vous pouvez voir la barre de ressources du menu apercu mais quelle que soit la page la structure est la même :
  • La barre de ressources se trouve dans un bloc ici bordé de bleu qui se nomme body.table, mais vous vous souvenez que je vous ai dit qu'on se trouvait toujours dans body donc on l'appellera plus simplement table.
  • Le bloc (ou plutôt tableau si on veut employer le terme exact 
    ) est divisé en 2 sous tableau qui sont entourés de rouge. Leur nom est simple, on doit décrire l'emplacement en mettant le nom de l'élémenr le plus grand à gauche et du plus petit à droite comme expliqué pour la barre de menu. Ici il s'agit d'un tableau dans un tableau donc on l'appelle table table.
  • Enfin un tableau est divisé en cases qui sont désignées par le nom td donc en vert, nous avons des cases dans un tableau, lui même dans un tableau, d'où le nom table table td.
  • Quelaues petites précisions en plus : je ne l'ai pas indiqué mais la partie où l'on sélectionne la planète se nomme select.[/list:u]


La page apercu

Alors on reprend les même et on recommence 
 :
  • En bleu c'est table
  • En jaune, une case dans un tableau ? table td ? Et non ce n'est pas si simple ici il s'agit d'une case qu'on appelle th donc ce sera table th mais si vous avez déjà lu les fichiers css pour les skins, vous verrez que l'on ne met que th car en fait toutes les cases th se trouvent dans un tableau donc table th et th sont strictement équivalents, on prend donc la dénomination la plus courte (oui un peu fainéant parfois)
  • En orange, encore une case dans un tableau, table td ? Non encore perdu. Enfin pas tout à fait, la case est bien du type td mais on ne veut pas qu'elle soit comme les autres car c'est avec ces barres qu'on sépare le menu apercu en 3 mais vous le verrez plus tard, elles servent aussi à séparer le menu technologie. On a donc dit qu'elles faisaient partie de la classe c et on les appelle donc td.c. Rappelez vous que pour les zones faisant partie d'une classe, il n'est pas nécessaire de préciser leur emplacement, la classe suffit à les identifier.
  • Vous voyez aussi un petit carré rouge, en fait il est comme ça car je n'avais alors pas de colonies mais ce petit carré désigne la zone qui entoure les miniatures de chaque planète dans la page aperçu et se nomme table table.s th, ce qui explique qu'il est affiché comme un table table. One le nommera plus simplement table.s th [/list:u]


Le chantier spatial



Comme vous pouvez le voir cette page n'est pas la plus simple de Ogame, de nombreux éléments sont en effet disposés. Mais au lieu de parler rentrons dans le vif du sujet :
  • En bleu table, ca n'a toujours pas changé.
  • En vert table table, là je dois dire que je ne comprends pas trop l'intérêt d'avoir emboiter 2 table comme ca, une classe eut peut-être été plus appropriée mais on n'y peut rien.
  • En rouge, vous voyez une case dans un tableau. Cette fois vous ne vous faites pas avoir car à droite vous voyez aussi des cases dans le tableau mais d'une autre couleur ; vous vous dites donc "non ce n'est pas table table td, il y a une classe là dessous" et je vous dis bravo. En effet si il n'y avait pas cette classe, ca aurait été table table td mais ici, il s'agit de td.l (rappelez vous inutile de mettre table table devant si ca fait partie d'une classe).
  • En orange c'est encore une classe et il s'agit de td.k.
  • A l'intérieur du cadre orange, il y a un cadre noir. Le cadre noir est dans le cadre orange, le nom va donc commencer par td.k, dans ce cadre vous entrez des données pour commander des vaisseaux, c'est donc un cadre input. Le nom est donc td.k input.
  • En violet le cadre du bouton "envoyer" et "autre commande"désigné par td.c
  • Enfin en rose (attention à ne pas le confondre avec le violet) c'est le cadre ou l'on voit la liste des vaisseaux ou défenses que vous avez en construction et c'est désigné par l'appellationselect
  • En jaune le bouton envoyer qui se nomme input.[/list:u]

Petite remarque : pour les pages défenses la structure est rigoureusement la même donc vous aurez les 2 configurées en même temps, de même que recherche et bâtiments. Tout aura donc la même mise en forme et je ne les détaillerai donc pas. Il y a toutefois une petite finesse pour les bâtiments, en effet les cases de la colonne de droite se nomme td.l mais lorsque vous construisez un batiment celles-ci deviennent des cases td.k (du moins c'est le cas avec le compte commandant et ca doit l'être avec un compte normal je pense).


Le menu ressources



Alors c'est là aussi bien coloré :
  • En bleu c'est toujours table
  • En vert c'est th
  • En violet c'est td.c
  • En rose c'est select normal c'est un menu déroulant
  • En orange nous avons td.k
  • Et enfin en boir nous avons td.k input[/list:u]


Pas d'astuce particulière sur cette page mais comme vous le voyez pas mal de type à configurer.

Les flottes



Je ne vais pas rentrer dans les détails, le code couleur est le même que précédemment :
  • En bleu c'est toujours table
  • En violet c'est td.c
  • En vert c'est th
  • En jaune c'est input[/list:u]



Technologie



Toujours le même code couleur :
  • En bleu c'est toujours table
  • En violet c'est td.c
  • En rouge c'est td.l[/list:u]


Galaxie



Toujours pareil :
  • En bleu c'est toujours table
  • En violet c'est td.c
  • En rouge c'est td.l
  • En vert c'est th
  • En jaune c'est input
  • En noir ... euh c'est rien c'est pour masquer les coordonnées 
    [/list:u]



Alliance



Je récapitule à nouveau :
  • En bleu c'est toujours table
  • En violet c'est td.c
  • En jaune c'est th[/list:u]


Pour les administrateurs des alliances, le menu déroulant c'est select et les cases pour valider c'est input, cela est valable de façon générale pour les autres pages.
Les autres cases de l'administration sont des th ou td.c.


Statistiques



Alors là il y a plein de couleur et du nouveau aussi 
 :
  • En bleu c'est toujours table
  • En violet c'est td.c
  • En vert c'est p un petit nouveau
  • En orange c'est une table dans p donc p table
  • En jaune c'est th
  • Le fond rose c'est bien sûr select[/list:u]



Message



Les explications :
  • En bleu c'est toujours tablemais aussi table table (oui j'ai mal fait mon truc là)
  • En violet c'est td.c
  • En vert c'est th
  • En orange c'est td.b table
  • En jaune c'est input
  • Le fond rose c'est bien sûr select[/list:u]



Options



Les explications :
  • En bleu c'est toujours table
  • En violet c'est td.c
  • En vert c'est th
  • En jaune c'est input
  • En noir c'est pour ne pas être assailli de mail 
    [/list:u]



Description



Les explications :
  • En bleu c'est toujours tablemais aussi table table
  • En violet c'est td.c
  • En vert c'est th
  • En orange c'est p table
  • En rosep[/list:u]


Mouvement de flottes (merci à Cosmic Bug pour l'info) 

Pour changer la couleur des flottes en mouvements, celles-ci sont désignées par le bloc th suivi de font désignation le fait qu'elles se trouvent entre des balises de ce type leur imposant leur couleur. Ainsi pour désigner une flotte pacifique, on utilisera th > font[color==][/color], c'est-à-dire avec la couleur verte. Pour les flottes attaquantes, il faudra indiquer que c'est normalement en rouge (supposons du #ff0000), on utilisera donc th > font[color==][/color].

Attention, cette manipulation affectera toutes les cases th dont le contenu est écrit en rouge (ou en vert).



Bon je pense que maintenant vous connaissez la structure de toutes les pages, enfin plus ou moins.
Je n'ai pas pu faire les rapports de combats, n'en ayant pas sous la main.

Petits compléments : il y a un autre élément qui s'appelle img et qui est donc relatif à toutes les images qui se trouvent dans ce que j'ai précédemment appelé les dossiers images, c'est-à-dire tous les dossiers sauf img et pas pic.
Encore une précision avant de clore les explications, il y a une instruction à inclure à chaque fois et qui est celle-ci
Code:

body table tr td table tr
{
line-height : 14px;
}[/code:1]
Mettez le chiffre que vous voulez mais pas zéro car cela règle l'interligne pour les descriptions des batiments, recherche, chantier spatial et quantité de ressources. Ca veut dire que si vous mettez 0 toutes les lignes seront superposées et là, bonne chance pour la lecture.

Autre remarque : il faut savoir que si vous n'avez pas attribué de valeur à un type, celui-ci prendra la valeur du type immédiatment au-dessus qui le contient. Comme je vois que ce n'est pas très clair on va prendre un exemple : les td.c ou pour être très précis les body table td.c, si vous ne lui avez pas attribué de propriétés, celui-ci aura les propriétés de body table td, si lui même n'en a aucune, alors ce seront celle de body table et si ce dernier n'en a pas ce seront celles de body. 
C'est parfois utile pour ne pas avoir un fichier formate.css trop long. Mais bon cela n'est pas toujours utilisé et vous trouvez souvent des css avec des td.m, td.n, td.o & co qui ont tous les mêmes propriétés et qui en plus sont les mêmes que table td ou table table td, du coup ça ne sert à rien.

Enfin vous pouvez voir que je n'ai pas défini tous les td. car certains n'ont que peu d'intérêt et pour d'autres je n'ai pas réussi à voir à quoi ils correspondaient.

Vous avez pu voir que j'ai utilisé dans les tableau les td et dans mes remarques, je vous ai parlé d'un tr. En fait on peut utilisé les tr ou les td, ça se ressemble mais ce n'est pas exactement la même chose mais les td sont largement suffisants.

Ensuite moyen simple pour retenir les noms, les "boutons" sur lesquels vous appuyez pour valider sont toujours des input. Les zones où vous avez les choix parmi une liste ou où une liste se forme sont souvent des select. Les tableau sont des table et les cases à l'intérieur de ceux-ci sont des td.


Pas à pas

Alors l'étape la plus importante, on va enfin pouvoir faire notre skin. On va le commencer à zéro, oui il faut bien se lancer un jour 
.

Donc d'abord qu'est-ce qu'il faut ? Tout d'abord un thème. J'ai vu sur un forum que quelqu'un cherchait un thème sur la piraterie, on va donc tenter de le faire sur la marine, ça peut être intéressant, les vaisseaux au sens de navires 
.

POur le fond à la suite du premier essai non concluant, je vais changer, donc plutôt un vaisseau pirate en fond de body et une carte au trésor en fond de barre latérale ou une carte de navigation.
Ensuite pour le reste, ce serait sympa par exemple d'avoir en fond pour les descriptions des vaisseaux, recherches, ... quelque chose qui ressemblerait à du bois et pour les titres des catégories un bois plus foncé. Sur le premier on pourrait écrire couleur or et sur le second, on pourrait écrire en jaune. Il faudrait aussi mettre le bouton envoyer en bois foncé, de même que calculer.

Après pour les images, je ne compte pas le faire ici, ou alors si j'ai le temps mais ce n'est pas le plus compliqué.

Maintenant commençons.

Préléminaires

D'abord on va préparer le dossier pour le skin, je vais donc créer un dossier que je vais appeler test. A l'intérieur je vais créer plusieurs dossier, un images, un img, un gebauede, un pic, un gfx, un planeten avec un sous dossier small et enfin un fichier formate.

On a maintenant le squelette de notre skin et maintenant il va falloir embellir le tout et pour cela trouver des images. Je vais supposer que vous avez ces images, ça m'évite de les chercher
.

Et on va entamer le fichier formate.

La barre latérale

Voilà l'image que j'ai choisir



Maintenant qu'on a l'image, il faut savoir la mettre en fond de la barre latérale. Pour cela il faut repérer où se trouve le fond de la barre, quel est son nom ?
Pour cela regarder le post précédent et on voit alors que le fond est désigné par .style donc pour mettre l'image en fonc on va taper
Code:

.style
{
backgroun-image : url(img/carte.gif) ;
}[/code:1]
C'est le code pour mettre l'image en fond, ici mon image s'appelle carte, est au format .gif et se trouve dans le répertoire test/img.

Après il va falloir donner la largeur de la barre, en fait ici ça ne marche pas vraiment ainsi comme la taille est fixé mais ça va jouer sur la position de la barre de menu. Pour la mettre au milieu, on choisit une largeur de 172px.

Le css devient
Code:

.style
{
background-image : url(img/carte.gif) ;
width : 172px ;
}[/code:1]
Maintenant on va s'occuper du texte. Celui-ci se trouve dans .style table td et .style div a

J'ai donc dit que je voulait un texte or, pour la police prenons Tahoma, au moins on est sûr qu'elle marche, ensuite il nous faut la taille des caractères, à vous de voir mais je préfère donner la taille de mes cases, 11px et laisser ajuster la taille tout seul. Et puis on va centrer le texte.

Le css va donc donner ça
Code:

.style
{
background-image : url(img/carte.gif) ;
width : 172px ;
}

.style td
{
font-size : 11px ;
text-align : center ;
}

.style div a
{
color : gold ;
font-family :Tahoma, sans serif ; /*toujours mettre sans serif dans la liste des police*/
}[/code:1]
Je pense que ce sera suffisant pour .style.

On va maintenant de .style table quoique je ne vois pas grand chose à y mettre donc on va plutôt s'occuper des cases, les .style table td ou .style td qui en fait marche aussi.

On a dit que je voulais un fond bois mais pas forcément avec une planche régulières donc pour éviter de voir une couleur de fond apparaître, on va la mettre transparente.
Code:

.style
{
background-image : url(img/carte.gif) ;
width : 172px ;
}

.style td
{
font-size : 11px ;
text-align : center ;
background-color : transparent ;
background-image : url(img/bois1.jpg) ;
}

.style div a
{
color : gold ;
font-family :Tahoma, sans serif ; /*toujours mettre sans serif dans la liste des police*/
}[/code:1]

Pour ma planche de bois j'ai pris celle-ci



Vous remarquez qu'elle est plus grande qu'une case mais bon, ce n'est pas grave elle sera tronquée, et tronquée au bon endroit (oui oui je ne fais pas les choses au hasard cette fois 
).

Maintenant vous voyez qu'il y a encore les liens qui sont soulignés et c'est assez laid, il faut le dire. Donc pour enlever des liens, on va rajouter une ligne dans .style div a.

Code:

.style
{
background-image : url(img/carte.gif) ;
width : 172px ;
}

.style td
{
font-size : 11px ;
text-align : center ;
background-color : transparent ;
background-image : url(img/bois1.jpg) ;
}

.style div a
{
color : gold ;
font-family :Tahoma, sans serif ; /*toujours mettre sans serif dans la liste des police*/
text-decoration : none ;
}[/code:1]

Maintenant c'est bon pour la barre latérale, pas besoin de faire quelque chose de compliqué et puis j'ai dit que je ferais simple au début.

Si tous s'est bien passé vous devriez obtenir quelque chose dans ce genre



C'est pas si mal pour un début.

Maintenant on va s'occuper du corps de la page.


Le corps de la page

Alors le corps de la page maintenant, la partie la plus passionante. D'abord je préviens, j'ai voulu faire simple donc on ne va pas s'amuser à changer les polices de texte, on gardera celles par défaut, mais sachez que si vous voulez le faire les instructions sont :
Code:

font-family : Tahoma, sans-serif; /*pour la police comme indiqué dans la barre latérale avec ici Tahoma et au cas où sans serif*/
font-size : 11px; /*lettres de 11px de haut*/
color : red; /*pour écrire en rouge par exemple*/[/code:1]
Par quoi allons nous commencer ? D'abord on pourrait mettre la ligne que je vous ai dit de mettre pour régler l'interligne, ce serait un bon début :°

Code:


body table tr td table tr
{
line-height : 20px;
}
[/code:1]

Puis on pourrait mettre l'image de fond et fixer les paramètres globaux. Donc j'ai envie que le texte soit écrit en or (enfin vous allez voir c'est pas vraiment doré Confused ) et il faut aussi se poser la question du fond. Je veux que le fond soit fixe ou qu'il défile quand je fait défiler la page ? Le problème du fond qui défile est qu'il faut une image très grande et dont un petit bout veut aussi dire quelque chose ; a priori assez dur à trouver. On va prendre une image fixe.

En fond, je verrais bien cette image



Maintenant comment incorporer le tout ? Simplement avec ces instructions

Code:


body 
{
color : gold ;/*certains mots clés marchent aussi pour les couleurs*/
background-image : url(img/fond.jpg);/*mon image de fond s'appelle fond, est au format .jpg dans le répertoire img*/
background-attachment : fixed ;/*image définie comme fixe, pour qu'elle défile remplacer fixed par scroll*/
}
[/code:1]

On a donc défini nos paramètres de body, pas besoin d'en mettre des tonnes. Dans les autres fichiers formate vous verrez souvent des background-repeat qui servent à répéter l'image horizontalement ou verticalement (ici on a bien choisi l'image donc pas besoin), des scrollbar-truc (pour définir la couleur de l'ascenseur, pas très utile je trouve), margin-truc si vous voulez que ce ne soit pas trop collés, et plein d'autres choses qui ne sont que des détails et vous laisse découvrir si le sujet vous intéresse vraiment.

Maintenant, je vous ai dit que pour les ressources, je voulais un fond foncé, de même que pour les titres, et avec un aspect "bois" si possible. Pour cela on va tout simplement mettre une image en fond. Et cette image la voici :



Et pour là mettre en fond des titres et des ressources, on va regarder dans quel zone cela se situe. La barre de ressources en haut, on voit que c'est dans table table td, les titres c'est td.c et je veux aussi mettre ce fond pour la commande de vaisseau et les validation, donc input et select. Je vais donc taper :

Code:


table table td, td.c, input, select
{
background-image : url(img/bois3.jpg) ;
}
[/code:1]

Maintenant, on va travailler sur les pages du chantier spatial & co. Déjà input et select sont définis, table table td aussi. Mais bon je n'ai pas envie de mettre un fond uniforme foncé. Comment faire alors puisque table table td est déjà défini ? Je ne peux pas lui donner 2 valeurs différentes ?
C'est là qu'interviennent les classes, dans les pages chantier spatial & co, ces cases se nomme aussi td.l et td.k, on va donc donner les propriétés voulues à ces 2 derniers.

Pour l'image de fond, on m'a fait remarquer que mettre une barre séparatrice, ça fait plus pro (si on veut) donc je vais en mettre une, en fait c'est juste l'image de fond qui aura une barre en plus. Donc comme image je vais prendre celle-ci :

Et on va la mettre en fond de td.l et td.k, l'instruction je pense que vous commencez à la connaître :

Code:


td.l, td.k
{
background-image : url(img/bois5.jpg) ;
}
[/code:1]

Maintenant pour que le nom des contructions soit dans la barre, il faut que le commence à écrire en haut des cases (oui ça paraît bête comme ça, je sais 
) et de préférence en alignant sur la gauche. Pour cela, on utilise cette commande :

Code:


td.l
{
text-align : left ;
vertical-align : top ;
}
[/code:1]

Et pour l'ordre de recherche, ce seait mieux centré

Code:


td.k
{
text-align : center
}
[/code:1]

Pas besoin de mettre vertca-align, par défaut c'est centré. Par contre vois avez vu comment c'est écrit mine de métal ? De la même couleur que le reste, et souligné en plus Surprised . On va changer ça, en écrivant nos liens en marron, gras et non souligné :

Code:


a
{
color : #440000 ;
text-weight : bold ; /*c'est pour mettre en gras*/
text-decoration : none ; /* si vous voulez le faire clignoter taper blink à la place de none Razz */
}
[/code:1]

Et maintenant, qu'ai-je oublié ? Ah oui, il nous manque encore th qui est pas mal présent. Donc pour ces cases, j'ai bien envie de mettre un fond en bois mais clair comme ça un peu :



Donc on y va 

Code:


th
{
background-image : url(img/bois2.jpg) ;
}
[/code:1]

Il ne nous reste plus grand chose à faire maintenant, on va régler la taille des planètes sur la page aperçu par exemple, en les mettant dans un carré de 89px :

Code:


table.s th img
{
width : 89px;
height : 89px; 
}[/code:1]

Ensuite vous pouvez changer des polices si vous voulez ou encore mettre des bordures, ou autres mais je vais m'arrêter là, car vous le constatez on obtient un skin déjà fort sympathique je trouve 
.

Au fait pour les bordures, l'instruction c'est 
Code:


border : Npx #color type;
[/code:1]
Où N est la largeur de la bordure en pixels, color le code couleur de la bordure et type, le type de la bordure (inset, outset, solid, groove, ...).

Le css final :
Code:

.style
{
background-image : url(img/carte.gif) ;
width : 172px ;
}

.style td
{
font-size : 11px ;
text-align : center ;
background-color : transparent ;
background-image : url(img/bois1.jpg) ;
}

.style div a
{
color : gold ;
font-family :Tahoma, sans serif ;
text-decoration : none ;
}

body table tr td table tr
{
line-height : 20px;
}

body 
{
color : gold ;
background-image : url(img/fond.jpg);
background-attachment : fixed ;
}

th
{
background-image : url(img/bois2.jpg);
}

td.k
{
text-align : center;
}

td.l, td.k
{
background-image : url(img/bois5.jpg);
}

td.l
{
vertical-align :top;
}

table table td, input, select, td.c
{
background-image : url(img/bois3.jpg) ;
}

a
{
text-decoration : none ;
color : #440000 ;
font-weight : bold;
}[/code:1]

Et pour finir, quelques screens du thème quand même 
 :



Bon à part le choix de la couleur gold qui n'est pas top, il a un certains charme, non ? Surtout que c'était un thème simple (comparez la longueur du fichier formate avec celui d'un autre skin 
).

Et dernière petite chose pour vous encourager dans l'apprentissage du css, vous connaissez sûrement le skin animé Epicblue mais ce qui est assez marrant à faire aussi c'est un skin qui réagit au passage de la souris, comme celui-ci http://greven.ifrance.com/starwars2/
. Je ne vous en dis pas plus dessus, mais sachez que je ne me suis pas occupé des finitions dessus, vous le remarquerez, je l'ai en effet quelques peu modifié pour en faire mon skin (c'était un peu trop "interactif" à mon goût).

Sur ce je vous laisse et bonne chance pour vos futurs skins 
. Et excusez-moi pour ma "non-briéveté", je crois que j'ai battu un record de longueur de post sur ce coup 
.


Lun 11 Avr - 19:10 (2011)
Publicité






Message Publicité
PublicitéSupprimer les publicités ?

Lun 11 Avr - 19:10 (2011)
Montrer les messages depuis:    
Répondre au sujet    Alliance [GI-JOE] Index du Forum » Partie Publique » Aide et Astuce Toutes les heures sont au format GMT + 1 Heure
Page 1 sur 1

 
Sauter vers: 

Index | Creer un forum | Forum gratuit d’entraide | Annuaire des forums gratuits | Signaler une violation | Conditions générales d'utilisation