Partagez | 
 

 Thème PacMan

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Arawen
avatar
+ 2.000 messages
+ 2.000 messages


Féminin

Nombre de cartes24/40
Points513
CARTE FAVORITESan  ♥♥♥



MessageSujet: Thème PacMan   Dim 12 Juin - 19:44

EXPLICATIONS

Tout comme pour le topic de Brownie, ne vous inquiétez pas au niveau du code, je vais tenter de tout vous expliquer !

1ERE PARTIE : IMPORTATION DES CODES

Alors, déjà, la plupart du code css (pour changer les couleurs, les positionnement, etc) sont dans une feuille css qui est sur mon Dropbox. Pour importer ce code, il faut un créer un lien entre la page css et le poste du forum, d'ou la première ligne du code qui commence par < link ... > .  
La seconde ligne qui commence aussi par link permet de charger les polices d'écriture. Dans mon cas j'ai décidé de prendre Lobster.
Sans ces deux lignes-là, vous ne pourrez pas avoir ce rendu, il ne faut donc pas y toucher. Par contre, comme le code est présent sur mon dropbox, vous ne pouvez pas le modifier tout seul. Je vous met le lien pour télécharger la page css : PacMan.css. Si vous voulez changer quelque chose dedans, vous pouvez, il vous suffira ensuite de changer le lien pour mettre votre page css !

2EME PARTIE : HAUT DU TOPIC

Nous arrivons dans la partie visible du code ! Le premier < div > ouvert permet de mettre en place le fond et lecontour bleu. Le haut correspond à un gif venant de PacMan, il s'agit d'une image toute simple d'ou le < img />. Ensuite, il y a une table qui permet d'avoir dans un premier temps les légendes de votre topic, que vous ne pouvez pas modifier car ce sont des images, et ensuite, vos tickets. Dans l'exemple il s'agit de deux tickets de Lillis. Vous n'avez qu'à changer les liens et y mettre vos propres tickets.
Enfin, il y a l'image qui correspond au titre du thème qui correspond à PacMan. Il s'agit à nouveau d'une image.

3EME PARTIE : CATEGORIES

Le code est composé en gros de 3 parties. Le titre de la catégorie, le fond de cette catégorie, que vous pouvez mettre plusieurs fois de suite, et enfin la fin de catégorie avec les fantômes.
Alors, pour le titre, il est en deux parties : Le titre de la catégorie, que j'ai nommé "Catégorie", et le fond avec PacMan. Vous n'avez qu'à changer la partie Catégorie par le nom que vous voulez donner.
Ensuite, il y a la partie de rangement à proprement parler. Dans la première catégorie, j'ai mis deux zone de rangement et une seul dans la deuxième catégories. Vous pouvez en rajouter autant que vous voulez, il faut placer les bornes div entre vos cartes :
Code:
<div class="Rangement" style="margin-top:-10px; margin-bottom:-45px"> </div>
. Pour le rangement des cartes, j'ai utilisé l'effet Loupe. Pour mettre la légende, vous devez utiliser ce code là :
Code:
<a class="Loupe"><img src="URL CARTE" height="150" width="80" class="Opacite"><span><img src="URL CARTE"/ alt="Neige"><div class="NOM CARTE"><img src="LIEN DE LA LEGENDE "></div></span></a>
.Pour les lien, voici les lien : Facile - Touchable - Difficile - Intouchable
Enfin, il y a la dernière partie qui correspond juste au petit point avec les fantômes.

4EME PARTIE : CARTES VOULUES

Malheureusement, quand j'ai crée le thème, je ne pensais pas le mettre libre, du coup, je n'ai pas prévu comment faire les rond des cartes voulues. Pour cela, soit vous créez vous même les rond de taille 78*78, soit vous pouvez me demander. Ensuite, vous pouvez juste changer la partie Nom pour y mettre le nom du peronnage que vous souhaitez !





   
 












Les Jeux-Vidéos

Mikasa
Neige
Mikasa
Neige


Mikasa
Neige
Mikasa
Neige
Mikasa
Neige
Mikasa




Les Films & Séries

Mikasa
Neige
Mikasa
Neige





Nom perso

Nom perso

Nom perso

Nom perso

Nom perso





Code:
<center><link href='https://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/s//7zndx5le1rnasto/Pac_Man.css">

<div class="Fond"><img src="http://image.noelshack.com/fichiers/2016/19/1462827499-pacman-game.gif" style="width: 600px ; "/>
<table style="width: 770px; margin-top: -100px;">
<tr><td style="text-align: left; "><div class="un_coeur"><div class="img_perso" style="background-image:url('http://image.noelshack.com/fichiers/2016/19/1462828646-legende.png'); background-position: center center; background-repeat: no-repeat ; ">
</div>
<div class="infobulle" style="height:170px;"><p>[img]http://image.noelshack.com/fichiers/2016/19/1462915459-facilement-echangeable.png[/img]
[img]http://image.noelshack.com/fichiers/2016/19/1462913648-touchable-mini-2.png[/img]
[img]http://image.noelshack.com/fichiers/2016/19/1462915459-difficilement-touchable.png[/img]
[img]http://image.noelshack.com/fichiers/2016/19/1462949001-intouchable-mini.png[/img]</p></div></div></td>
   <td><div class="un_coeur"><div class="img_perso" style="background-image:url('http://image.noelshack.com/fichiers/2016/19/1462828646-ticket.png'); background-position: center center; background-repeat: no-repeat ; padding-right: 140px ;">
</div>
<div class="infobulle" style="width:300px;">[img]http://image.noelshack.com/fichiers/2014/14/1396342208-lilis-01-04-2014.png[/img] [img]http://image.noelshack.com/fichiers/2014/14/1396342208-lilis-01-04-2014.png[/img]</div></div>
</td>
 </tr>
</table>


<img src="http://image.noelshack.com/fichiers/2016/19/1462828093-pacman.png" />

<div class="titre">Catégorie</div><img src="http://image.noelshack.com/fichiers/2016/19/1462918282-pacman-titre.png" />
<div class="Rangement" style="margin-top:-15px;"><a class="Loupe"><img src="http://i68.servimg.com/u/f68/17/90/70/61/belle-10.png" height="150" width="80" class="Opacite"><span><img src="http://i68.servimg.com/u/f68/17/90/70/61/belle-10.png"/ alt="Mikasa"><div class="FondCarte"><img src="http://image.noelshack.com/fichiers/2016/19/1462918131-facile.png"></div></span></a><a class="Loupe"><img src="http://image.noelshack.com/fichiers/2015/36/1441071942-oeuvre4.png" height="150" width="80" class="Opacite"><span><img src="http://image.noelshack.com/fichiers/2015/36/1441071942-oeuvre4.png"/ alt="Neige"><div class="FondCarte"><img src="http://image.noelshack.com/fichiers/2016/19/1462918130-touchable.png"></div></span></a><a class="Loupe"><img src="http://i68.servimg.com/u/f68/17/90/70/61/belle-10.png" height="150" width="80" class="Opacite"><span><img src="http://i68.servimg.com/u/f68/17/90/70/61/belle-10.png"/ alt="Mikasa"><div class="FondCarte"><img src="http://image.noelshack.com/fichiers/2016/19/1462918130-difficile.png"></div></span></a><a class="Loupe"><img src="http://image.noelshack.com/fichiers/2015/36/1441071942-oeuvre4.png" height="150" width="80" class="Opacite"><span><img src="http://image.noelshack.com/fichiers/2015/36/1441071942-oeuvre4.png"/ alt="Neige"><div class="FondCarte"><img src="http://image.noelshack.com/fichiers/2016/19/1462918131-intouchable.png"></div></span></a>
</div>
<div class="Rangement" style="margin-top:-10px; margin-bottom:-45px"><a class="Loupe"><img src="http://i68.servimg.com/u/f68/17/90/70/61/belle-10.png" height="150" width="80" class="Opacite"><span><img src="http://i68.servimg.com/u/f68/17/90/70/61/belle-10.png"/ alt="Mikasa"><div class="FondCarte"><img src="http://image.noelshack.com/fichiers/2016/19/1462918130-difficile.png"></div></span></a><a class="Loupe"><img src="http://image.noelshack.com/fichiers/2015/36/1441071942-oeuvre4.png" height="150" width="80" class="Opacite"><span><img src="http://image.noelshack.com/fichiers/2015/36/1441071942-oeuvre4.png"/ alt="Neige"><div class="FondCarte"><img src="http://image.noelshack.com/fichiers/2016/19/1462918130-touchable.png"></div></span></a><a class="Loupe"><img src="http://i68.servimg.com/u/f68/17/90/70/61/belle-10.png" height="150" width="80" class="Opacite"><span><img src="http://i68.servimg.com/u/f68/17/90/70/61/belle-10.png"/ alt="Mikasa"><div class="FondCarte"><img src="http://image.noelshack.com/fichiers/2016/19/1462918130-difficile.png"></div></span></a><a class="Loupe"><img src="http://image.noelshack.com/fichiers/2015/36/1441071942-oeuvre4.png" height="150" width="80" class="Opacite"><span><img src="http://image.noelshack.com/fichiers/2015/36/1441071942-oeuvre4.png"/ alt="Neige"><div class="FondCarte"><img src="http://image.noelshack.com/fichiers/2016/19/1462918130-touchable.png"></div></span></a><a class="Loupe"><img src="http://i68.servimg.com/u/f68/17/90/70/61/belle-10.png" height="150" width="80" class="Opacite"><span><img src="http://i68.servimg.com/u/f68/17/90/70/61/belle-10.png"/ alt="Mikasa"><div class="FondCarte"><img src="http://image.noelshack.com/fichiers/2016/19/1462918130-difficile.png"></div></span></a><a class="Loupe"><img src="http://image.noelshack.com/fichiers/2015/36/1441071942-oeuvre4.png" height="150" width="80" class="Opacite"><span><img src="http://image.noelshack.com/fichiers/2015/36/1441071942-oeuvre4.png"/ alt="Neige"><div class="FondCarte"><img src="http://image.noelshack.com/fichiers/2016/19/1462918130-touchable.png"></div></span></a><a class="Loupe"><img src="http://i68.servimg.com/u/f68/17/90/70/61/belle-10.png" height="150" width="80" class="Opacite"><span><img src="http://i68.servimg.com/u/f68/17/90/70/61/belle-10.png"/ alt="Mikasa"><div class="FondCarte"><img src="http://image.noelshack.com/fichiers/2016/19/1462918130-difficile.png"></div></span></a>
</div>
<img src="http://image.noelshack.com/fichiers/2016/19/1462918282-pacman-header.png" />

<div class="titre">Catégories 2</div><img src="http://image.noelshack.com/fichiers/2016/19/1462918282-pacman-titre.png" />
<div class="Rangement" style="margin-top:-15px; margin-bottom:-45px"><a class="Loupe"><img src="http://i68.servimg.com/u/f68/17/90/70/61/belle-10.png" height="150" width="80" class="Opacite"><span><img src="http://i68.servimg.com/u/f68/17/90/70/61/belle-10.png"/ alt="Mikasa"><div class="FondCarte"><img src="http://image.noelshack.com/fichiers/2016/19/1462918130-difficile.png"></div></span></a><a class="Loupe"><img src="http://image.noelshack.com/fichiers/2015/36/1441071942-oeuvre4.png" height="150" width="80" class="Opacite"><span><img src="http://image.noelshack.com/fichiers/2015/36/1441071942-oeuvre4.png"/ alt="Neige"><div class="FondCarte"><img src="http://image.noelshack.com/fichiers/2016/19/1462918130-touchable.png"></div></span></a><a class="Loupe"><img src="http://i68.servimg.com/u/f68/17/90/70/61/belle-10.png" height="150" width="80" class="Opacite"><span><img src="http://i68.servimg.com/u/f68/17/90/70/61/belle-10.png"/ alt="Mikasa"><div class="FondCarte"><img src="http://image.noelshack.com/fichiers/2016/19/1462918130-difficile.png"></div></span></a><a class="Loupe"><img src="http://image.noelshack.com/fichiers/2015/36/1441071942-oeuvre4.png" height="150" width="80" class="Opacite"><span><img src="http://image.noelshack.com/fichiers/2015/36/1441071942-oeuvre4.png"/ alt="Neige"><div class="FondCarte"><img src="http://image.noelshack.com/fichiers/2016/19/1462918130-touchable.png"></div></span></a>
</div>
<img src="http://image.noelshack.com/fichiers/2016/19/1462918282-pacman-header.png" />

<div class="CartesVoulues"> <img src="http://image.noelshack.com/fichiers/2016/19/1462949927-cv.png" style="margin-top:80px ;"/><img src="http://image.noelshack.com/fichiers/2016/19/1462949927-cv.png" style="margin-top:80px ; margin-left:30px;"/><img src="http://image.noelshack.com/fichiers/2016/19/1462949927-cv.png" style="margin-top:80px ; margin-left:30px;"/><img src="http://image.noelshack.com/fichiers/2016/19/1462949927-cv.png" style="margin-top:80px ; margin-left:30px;"/><img src="http://image.noelshack.com/fichiers/2016/19/1462949927-cv.png" style="margin-top:80px ; margin-left:30px;"/>
<p style="font-family: 'Lobster', cursive; font-size: 12px; color:#0033ff; margin-top:-30px ; margin-right:430px;">Nom perso</p><p style="font-family: 'Lobster', cursive; font-size: 12px; color:#0033ff; margin-top:-30px ; margin-right:210px;">Nom perso</p><p style="font-family: 'Lobster', cursive; font-size: 12px; color:#0033ff; margin-top:-30px">Nom perso</p><p style="font-family: 'Lobster', cursive; font-size: 12px; color:#0033ff; margin-top:-30px ; margin-left:220px;">Nom perso</p><p style="font-family: 'Lobster', cursive; font-size: 12px; color:#0033ff; margin-top:-30px ; margin-left:440px;">Nom perso</p>
</div>
</div></center>

Je ne suis pas sure d’être très claire, je suis toujours disponible pour des critiques ou pour vous aider !
Merci à Brownie pour m'avoir autorisé à utiliser sa mise en page

Revenir en haut Aller en bas
 

Thème PacMan

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
 :: La Place publique :: Topics Libre Service-