Rappel du premier message :
Tout d'abord bonjour,
je viens demander votre aide pour la PA de mon forum car je suis encore novice en codage. Actuellement j'en ai déjà une sur mon forum, mais je souhaiterais rajouter/modifier quelques éléments.
Dernière édition par Mzellebulle le Sam 7 Sep 2013 - 18:18, édité 2 fois
Tout d'abord bonjour,
je viens demander votre aide pour la PA de mon forum car je suis encore novice en codage. Actuellement j'en ai déjà une sur mon forum, mais je souhaiterais rajouter/modifier quelques éléments.
Commande
Adresse du forum : http://mzellepapote.exprimetoi.net/forum
Description des éléments : J'ai fait un schéma pour vous aider :)
Images :
https://i.servimg.com/u/f73/17/19/70/43/facebo10.png
https://i.servimg.com/u/f73/17/19/70/43/misspa10.png
https://i.servimg.com/u/f73/17/19/70/43/mister10.png
https://i.servimg.com/u/f73/17/19/70/43/amazin10.jpg
https://i.servimg.com/u/f73/17/19/70/43/maelin10.jpg
Autres précisions : La police utilisée est DaddysGirl (http://www.dafont.com/fr/daddysgirl.font)
Le HTML:
Le CSS:
Je remercie par avance la personne qui voudra bien réaliser ma commande :)
Adresse du forum : http://mzellepapote.exprimetoi.net/forum
Description des éléments : J'ai fait un schéma pour vous aider :)
- Spoiler:
Images :
https://i.servimg.com/u/f73/17/19/70/43/facebo10.png
https://i.servimg.com/u/f73/17/19/70/43/misspa10.png
https://i.servimg.com/u/f73/17/19/70/43/mister10.png
https://i.servimg.com/u/f73/17/19/70/43/amazin10.jpg
https://i.servimg.com/u/f73/17/19/70/43/maelin10.jpg
Autres précisions : La police utilisée est DaddysGirl (http://www.dafont.com/fr/daddysgirl.font)
Le HTML:
- Spoiler:
- Code:
<div class="center">
<br />
<div class="point"></div>
<a href="http://mzellepapote.exprimetoi.net/t3-reglement-du-forum?tt=1#?tid=6676da622b85f93c2f973dcca3e732b4">
<span class="menu">règlement</span>
</a>
<img src="http://image.noelshack.com/fichiers/2012/44/1351879218-878748748.png" class="space" />
<a href="http://mzellepapote.exprimetoi.net/f4-je-me-presente?tt=1">
<span class="menu">présentation</span>
</a>
<img src="http://image.noelshack.com/fichiers/2012/44/1351879218-878748748.png" class="space" />
<a href="http://mzellepapote.exprimetoi.net/f99-nos-partenaires?tt=1">
<span class="menu">partenariat</span>
</a>
<img src="http://image.noelshack.com/fichiers/2012/44/1351879218-878748748.png" class="space" />
<a href="http://mzellepapote.exprimetoi.net/f31-fonctionnement?tt=1">
<span class="menu">fonctionnement</span>
</a>
<img src="http://image.noelshack.com/fichiers/2012/44/1351879218-878748748.png" class="space" />
<a href="http://mzellepapote.exprimetoi.net/f86-miss-mister-papote?tt=1">
<span class="menu">miss & mister papote</span>
</a>
<br /><br />
<table align="center">
<tr>
<td>
<div class="blocstaff">
<div class="center">
<div class="yoo">
<span class="titrepa">L'équipe</span>
</div>
</div><br />
<div class="center">
<img src="http://i74.servimg.com/u/f74/18/13/93/21/ddd10.png" class="staff" /><br />
MademoiZelle<a href= "http://mzellepapote.exprimetoi.net/u1?tt=1l"> profil</a> • <a href="http://mzellepapote.exprimetoi.net/privmsg?mode=post&u=1&tt=1">contacter</a><br />
<img src="http://i74.servimg.com/u/f74/18/13/93/21/ccc10.png" class="staff" /><br />
Mae Lin<a href="http://mzellepapote.exprimetoi.net/u6?tt=1"> profil</a> • <a href="http://mzellepapote.exprimetoi.net/privmsg?mode=post&u=6&tt=1">contacter</a>
</div>
</div>
</td>
<td>
<div class="blocb">
<div class="center">
<div class="yoo">
<span class="titrepa">News</span>
</div><br />
<div class="textepa">
<marquee direction="up" scrollamount="1" height="150" width="300">
La NewzPapote du mois de septembre est en ligne !<br />
<br />
Pensez à voter pour le forum, merci !<br />
<br />
L'élection miss et mister papote démarre !<br />
<br />
01/09/2013 • Vous pouvez voter dès à présent pour le concours d'août !<br />
<br />
25/08/2013 • Mise en place de fiche de présentation pour les nouveaux membres
<br />
</marquee>
</div><br />
</div>
</div>
</td>
<td>
<div class="blocpoto">
<div class="center">
<div class="yoo">
<span class="titrepa">Partenariats</span>
</div><br />
<div class="cpart">
<a href="http://royaume-chimeres.forumetoile.com/">
<img src="http://i74.servimg.com/u/f74/18/13/93/21/chimer11.png" class="potos" />
</a>
<a href="http://www.nospetitsboutsdechoux.com">
<img src="http://i49.servimg.com/u/f49/13/69/44/03/bondin11.gif" class="potos" />
</a>
<a href="#">
<img src="http://i74.servimg.com/u/f74/18/13/93/21/13519512.png" class="potos" />
</a>
<a href="#">
<img src="http://i74.servimg.com/u/f74/18/13/93/21/13519512.png" class="potos" />
</a>
<a href="#">
<img src="http://i74.servimg.com/u/f74/18/13/93/21/13519512.png" class="potos" />
</a>
<a href="#">
<img src="http://i74.servimg.com/u/f74/18/13/93/21/13519512.png" class="potos" />
</a>
<a href="#">
<img src="http://i74.servimg.com/u/f74/18/13/93/21/13519512.png" class="potos" />
</a>
<a href="#">
<img src="http://i74.servimg.com/u/f74/18/13/93/21/13519512.png" class="potos" />
</a>
</div>
<a href="http://mzellepapote.exprimetoi.net/f99-nos-partenaires?tt=1">les autres</a> • <a href="http://mzellepapote.exprimetoi.net/f62-demande-de-partenariat?tt=1">demande</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="blocredit">
<div class="center">
<div class="yoo">
<span class="titrepa">Miss & Mister Papote</span>
</div>
</div><br />
<div class="center">
<img src="http://i74.servimg.com/u/f74/18/13/93/21/captur21.png" class="" /><br />
</div>
</td>
<td>
<div class="blocnews">
<div class="center">
<div class="yoo">
<span class="titrepa">Gagnants Concours</span>
</div>
</div>
<a href="http://mzellepapote.exprimetoi.net/t212-concours-aout1-nos-petons-au-soleil" class="postlink"><font color="#c23c72"><i>CONCOURS "Nos petons au soleil" CLÔTURÉ !<br> Venez voter !</i></font></a>
<br />
</div>
</td>
<td>
<div class="bloctop">
<div class="center">
<div class="yoo">
<span class="titrepa">Voter</span>
</div>
<div class="ctop">
<a href="http://mzellepapote.boosterforum.com/">
<img src="http://i74.servimg.com/u/f74/18/13/93/21/13518810.png" class="tops" />
</a>
<a href="http://www.weborama.fr/?id_vote=472958">
<img src="http://i74.servimg.com/u/f74/18/13/93/21/13518811.png" class="tops" />
</a>
<a href="http://gothic.fantasy.free.fr/rate.php?site=1376223229">
<img src="http://i74.servimg.com/u/f74/18/13/93/21/13518812.png" class="tops" />
</a>
</div>
</div>
</div>
</td>
</tr>
</table>
Le CSS:
- Spoiler:
- Code:
/* EN TETE DU FORUM
/
/* espace pour le menu*/
.space {
width:6px;
height:2px;
}
/* fin espace menu* /
/* staff presenté de manière simple avec uniquement une bordure */
.staff {
width:200px;
height:70px;
padding:2px;
border:1px solid #CABCAB;
}
/* fin staff */
/* top sites aux formes automatiquement arrondis */
.tops {
width:60px;
height:60px;
border:2px solid #c23c72;
opacity:0.8;
-webkit-border-radius: 120px;
-moz-border-radius: 120px;
border-radius: 120px;
-webkit-transform: rotate(2deg) ;
-moz-transform: rotate(2deg) ;
-o-transform: rotate(2deg) ;
-ms-transform: rotate(2deg) ;
transform: rotate(2deg) ;
}
/* fin top sites */
/* propriétés communes aux blocs */
.blocstaff,
.blocb,
.blocpoto,
.blocredit,
.blocnews,
.bloctop {
text-align:justify;
font-family : Verdana;
font-size:11px;
color:#222222;
letter-spacing: 1px;
padding:3px;
background-color:#DBC793;
border-left:3px solid #DC777B;
border-right:3px solid #DC777B;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow:white 1px 1px 0,0 0 3px #E4DED6;
-webkit-box-shadow:white 1px 1px 0,0 0 3px #E4DED6;
box-shadow:1px 1px 0 white,0 0 3px #E4DED6;
}
/* fin propriétés communes */
/* bloc staff */
.blocstaff{
width:300px;
height:240px;
}
/* fin bloc staff */
/* bloc News*/
.blocb{
width:340px;
height:240px;
}
/* fin bloc News */
/* bloc partenariat*/
.blocpoto{
width:190px;
height:240px;
}
/* fin bloc partenariat */
/* centre les logos partenaires */
.cpart {
width:98%;
height:150px;
overflow:auto;
}
/* fin logo partenaires */
/* bloc missmisterpapote */
.blocredit{
width:300px;
height:200px;
}
/* fin bloc missmisterpapote */
/* crédit texte */
.textc {
font-size:10px;
}
/* fin crédit texte */
/* bloc concours */
.blocnews {
width:340px;
height:200px;
}
/* fin bloc concours */
/* bloc topsites */
.bloctop {
width:190px;
height:200px;
}
/* fin bloc topsites */
/* centre logo tops*/
.ctop{
width:98%;
height:135px;
overflow:auto;
}
/* fin centre logo tops */
/* les titres avec pour police Kite One */
.titrepa {
font-family: 'Kite One', sans-serif;
font-size:27px;
color:#DC777B;
}
/* fin titre */
/* les liens rapides tout en haut de la PA */
.menu {
color:#DC777B;
letter-spacing: 1px;
font-variant:small-caps;
font-size:11px;
padding:2px;
padding-left:4px;
padding-right:4px;
background-color:#F0E4CE;
border-left:3px solid #DC777B;
border-right:3px solid #DC777B;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
-o-transition:all 0.5s ease;
}
/* fin liens rapides */
/* les pointillés dérrière le menu à peut-être adapter selon le forum */
.point {
border-top:8px dotted #F0E4CE;
margin-bottom:-10px;
}
/* fin pointillés */
/* simple texte qui se trouve dans les tables pour ne pas deborder */
.textepa {
width:90%;
height:180px;
overflow:auto;
}
/* fin texte */
/* les logos des partenaires dont l'opacité augmente au survol de la souris */
.potos {
width:88px;
height:31px;
opacity:0.5;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
-o-transition:all 0.5s ease;
}
.potos:hover {
opacity:0.7;
}
/* fin logos partenaires */
/* FIN EN TETE FORUM */
Je remercie par avance la personne qui voudra bien réaliser ma commande :)
Dernière édition par Mzellebulle le Sam 7 Sep 2013 - 18:18, édité 2 fois
j'ai réussi !