Lun 20 Juin - 18:46 | |
|
Jeu 23 Juin - 6:32 | Bonjour, - Code:
-
<script type="text/javascript"> var random_images_array = ['liendelimage.png', 'liendelimage.png', 'liendelimage.png', 'liendelimage.png']; // placer les liens des images ici function getRandomImage(imgAr) { var num = Math.floor( Math.random() * imgAr.length ); var img = imgAr[ num ]; var imgStr = '<img src="' + img + '" alt = "">'; document.write(imgStr); document.close(); } </script> <link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet" type="text/css"><!-- PAGE D'ACCUEIL --><div class="POK"><!-- BIENVENUE --><div class="welcPOK">Bienvenue {USERNAME}</div><div class="boxPOK"><!-- BLOC LIENS --><div class="lksPOK"><!-- IMAGE 200*200 --><img src="http://www.aht.li/2780872/200200.png" /><!-- LIENS --><a href="" target="_blank">Lien</a><!-- II --><a href="" target="_blank">Lien</a><!-- III --><a href="" target="_blank">Lien</a><!-- IV --><a href="" target="_blank">Lien</a><!-- V --><a href="" target="_blank">Lien</a></div><!-- STAFF - IMAGES EN 650*225 --><div class="staffPOK"><!-- I --><div><!-- IMAGE --><img src="http://www.aht.li/2913829/650225.png"/><!-- PSEUDONYME / RANG / MP --><span>Pseudonyme - Rang - <a href="" target="_blank">MP</a></span><!-- DESCRIPTION --><p>Description.</p></div><!-- II --><div class="II"><!-- IMAGE --><img src="http://www.aht.li/2913829/650225.png"/><!-- PSEUDONYME / RANG / MP --><span>Pseudonyme - Rang - <a href="" target="_blank">MP</a></span><!-- DESCRIPTION --><p>Description.</p></div><!-- III --><div class="III"><!-- IMAGE --><img src="http://www.aht.li/2913829/650225.png"/><!-- PSEUDONYME / RANG / MP --><span>Pseudonyme - Rang - <a href="" target="_blank">MP</a></span><!-- DESCRIPTION --><p>Description.</p></div><!-- IV --><div class="IV"><!-- IMAGE --><img src="http://www.aht.li/2913829/650225.png"/><!-- PSEUDONYME / RANG / MP --><span>Pseudonyme - Rang - <a href="" target="_blank">MP</a></span><!-- DESCRIPTION --><p>Description.</p></div><!-- V --><div class="V"><!-- IMAGE --><img src="http://www.aht.li/2913829/650225.png"/><!-- PSEUDONYME / RANG / MP --><span>Pseudonyme - Rang - <a href="" target="_blank">MP</a></span><!-- DESCRIPTION --><p>Description.</p></div><br/><!-- VI --><div class="VI"><!-- IMAGE --><img src="http://www.aht.li/2913829/650225.png"/><!-- PSEUDONYME / RANG / MP --><span>Pseudonyme - Rang - <a href="" target="_blank">MP</a></span><!-- DESCRIPTION --><p>Description.</p></div><!-- VII --><div class="VII"><!-- IMAGE --><img src="http://www.aht.li/2913829/650225.png"/><!-- PSEUDONYME / RANG / MP --><span>Pseudonyme - Rang - <a href="" target="_blank">MP</a></span><!-- DESCRIPTION --><p>Description.</p></div><!-- VIII --><div class="VIII"><!-- IMAGE --><img src="http://www.aht.li/2913829/650225.png"/><!-- PSEUDONYME / RANG / MP --><span>Pseudonyme - Rang - <a href="" target="_blank">MP</a></span><!-- DESCRIPTION --><p>Description.</p></div><!-- IX --><div class="IX"><!-- IMAGE --><img src="http://www.aht.li/2913829/650225.png"/><!-- PSEUDONYME / RANG / MP --><span>Pseudonyme - Rang - <a href="" target="_blank">MP</a></span><!-- DESCRIPTION --><p>Description.</p></div><!-- X --><div class="X"><!-- IMAGE --><img src="http://www.aht.li/2913829/650225.png"/><!-- PSEUDONYME / RANG / MP --><span>Pseudonyme - Rang - <a href="" target="_blank">MP</a></span><!-- DESCRIPTION --><p>Description.</p></div></div><!-- HASARDEX --><div class="hazPOK" style="background:url(http://image.noelshack.com/fichiers/2016/25/1466440698-hasardex.png);"><!-- TITRE --><span>Hasardex</span><!-- POKEMONS --><div class="imgHAZ"><a href="" target="_blank"><script type="text/javascript">getRandomImage(random_images_array)</script></a></div></div></div></div> Partie CSS : - Code:
-
/* PAGE D'ACCUEIL */ .POK { margin:auto; width:800px; line-height:16px; } .POK a{text-decoration:none !important;} /* BIENVENUE */ .welcPOK { margin-bottom:5px; text-align:center; color:grey; font-size:42px; text-transform:uppercase; font-family:Fjalla One; /* MODIFIABLE */ } /* FOND PAGE D'ACCUEIL */ .boxPOK { height:530px; border-radius:150px; text-align:left; background:lightgrey; /* MODIFIABLE */ } /* BLOC LIENS */ .lksPOK { position:absolute; margin-top:45px; margin-left:-75px; width:230px; height:440px; border-radius:50px; background:#191919; /* MODIFIABLE */ } /* IMAGE BLOC LIENS */ .lksPOK img{ display:block; margin:10px auto; width:200px; height:200px; border-radius:200px; border:10px solid; border-color:grey; /* MODIFIABLE */ } /* LIEN BLOC LIENS */ .lksPOK a{ display:block; margin:5px auto; width:90%; padding:5px 0; background:grey; color:white; letter-spacing:1px; /* MODIFIABLE */ text-align:center; text-transform:uppercase; font-family:Fjalla One; font-size:18px; transition:all 0.65s; -webkit-transition:all 0.65s; } /* SURVOL LIEN BLOC LIENS */ .lksPOK a:hover { letter-spacing:3px; /* MODIFIABLE */ } /* BLOC STAFF */ .staffPOK { position:absolute; margin-top:25px; margin-left:200px; width:650px; height:225px; border-radius:45px; overflow:hidden; text-align:left; background:black; /* MODIFIABLE */ } .staffPOK div{ display:inline-block; margin:5px 15px; width:100px; height:100px; overflow:hidden; transition:all 0.65s; -webkit-transition:all 0.65s; } /* PSEUDONYME / RANG / MP STAFF */ .staffPOK div:hover span{ position:absolute; z-index:5; margin-top:15px; margin-left:-585px; width:200px; height:20px; background:crimson; color:black; /* MODIFIABLE */ } /* DESCRIPTION STAFF */ .staffPOK div:hover p{ position:absolute; z-index:3; margin-top:-180px; margin-left:25px; width:300px; height:140px; padding:5px; overflow:auto; text-align:justify; background:white; color:black; /* MODIFIABLE */ } /* IMAGE STAFF */ .staffPOK div img{ width:100px; height:100px; border-radius:150px; transition:all 0.65s; -webkit-transition:all 0.65s; } .staffPOK div:hover img{ width:650px; height:225px; border-radius:45px; } .staffPOK div:hover { position:absolute; margin-top:0; margin-left:0; width:650px; height:225px; border-radius:45px; } .staffPOK .II:hover {position:absolute; margin-top:0; margin-left:-130px;} .staffPOK .III:hover {position:absolute; margin-top:0; margin-left:-260px;} .staffPOK .IV:hover {position:absolute; margin-top:0; margin-left:-390px;} .staffPOK .V:hover {position:absolute; margin-top:0; margin-left:-520px;} .staffPOK .VI:hover {position:absolute; margin-top:-110px; margin-left:0;} .staffPOK .VII:hover {position:absolute; margin-top:-110px; margin-left:-130px;} .staffPOK .VIII:hover {position:absolute; margin-top:-110px; margin-left:-260px;} .staffPOK .IX:hover {position:absolute; margin-top:-110px; margin-left:-390px;} .staffPOK .X:hover {position:absolute; margin-top:-110px; margin-left:-520px;} /* HASARDEX */ .hazPOK { position:absolute; margin-top:320px; margin-left:250px; width:500px; height:150px; } /* TITRE HASARDEX */ .hazPOK span{ position:absolute; margin-top:-25px; width:500px; text-align:center; color:grey; font-size:42px; text-transform:uppercase; font-family:Fjalla One; /* MODIFIABLE */ } /* POKEMONS HAZARDEX */ .imgHAZ{ margin:36px auto 0; width:75px; height:75px; overflow:hidden; text-align:center; } Instructions : I. Copier/coller le code initial dans un sujet dédié de sa partie administration II. Modifier le code à partir du logiciel de sa préférence III. Actualiser le code du sujet dédié IV. Remplacer l'intégralité du code dans la partie correspondante du panneau d'administration ∟ Affichage > Page d'accueil > Généralités ∞ Répéter les étapes II à IV à chaque modification |
|
Ven 1 Juil - 14:55 | Vraiment Magnifique ! Merci beaucoup ! J'ai juste un soucis ( oui vraiment désolé je suis perfectionniste...) Est-ce qu'il y aurait moyen que les petites images du staff, quand elles sont miniatures ne soient pas écrasé ? Peut être une image en miniature et une autre agrandit ? Dites moi ce que vous en pensez :) https://2img.net/image.noelshack.com/fichiers/2016/26/1467377676-pa.png |
|
Sam 2 Juil - 0:50 | - Code:
-
<script type="text/javascript"> var random_images_array = ['liendelimage.png', 'liendelimage.png', 'liendelimage.png', 'liendelimage.png']; // placer les liens des images ici function getRandomImage(imgAr) { var num = Math.floor( Math.random() * imgAr.length ); var img = imgAr[ num ]; var imgStr = '<img src="' + img + '" alt = "">'; document.write(imgStr); document.close(); } </script> <link href="https://fonts.googleapis.com/css?family=Fjalla+One" rel="stylesheet" type="text/css"><!-- PAGE D'ACCUEIL --><div class="POK"><!-- BIENVENUE --><div class="welcPOK">Bienvenue {USERNAME}</div><div class="boxPOK"><!-- BLOC LIENS --><div class="lksPOK"><!-- IMAGE 200*200 --><img src="http://www.aht.li/2780872/200200.png" /><!-- LIENS --><a href="" target="_blank">Lien</a><!-- II --><a href="" target="_blank">Lien</a><!-- III --><a href="" target="_blank">Lien</a><!-- IV --><a href="" target="_blank">Lien</a><!-- V --><a href="" target="_blank">Lien</a></div><!-- STAFF - IMAGES I EN 100*100 & IMAGES II EN 650*225 --><div class="staffPOK"><!-- I --><div><!-- IMAGE --><img class="IPOK" src="http://www.aht.li/2838068/100100.png" /><!-- IMAGE II --><img class="IIPOK" src="http://www.aht.li/2913829/650225.png"/><!-- PSEUDONYME / RANG / MP --><span>Pseudonyme - Rang - <a href="" target="_blank">MP</a></span><!-- DESCRIPTION --><p>Description.</p></div><!-- II --><div class="II"><!-- IMAGE --><img class="IPOK" src="http://www.aht.li/2838068/100100.png" /><!-- IMAGE II --><img class="IIPOK" src="http://www.aht.li/2913829/650225.png"/><!-- PSEUDONYME / RANG / MP --><span>Pseudonyme - Rang - <a href="" target="_blank">MP</a></span><!-- DESCRIPTION --><p>Description.</p></div><!-- III --><div class="III"><!-- IMAGE --><img class="IPOK" src="http://www.aht.li/2838068/100100.png" /><!-- IMAGE II --><img class="IIPOK" src="http://www.aht.li/2913829/650225.png"/><!-- PSEUDONYME / RANG / MP --><span>Pseudonyme - Rang - <a href="" target="_blank">MP</a></span><!-- DESCRIPTION --><p>Description.</p></div><!-- IV --><div class="IV"><!-- IMAGE --><img class="IPOK" src="http://www.aht.li/2838068/100100.png" /><!-- IMAGE II --><img class="IIPOK" src="http://www.aht.li/2913829/650225.png"/><!-- PSEUDONYME / RANG / MP --><span>Pseudonyme - Rang - <a href="" target="_blank">MP</a></span><!-- DESCRIPTION --><p>Description.</p></div><!-- V --><div class="V"><!-- IMAGE --><img class="IPOK" src="http://www.aht.li/2838068/100100.png" /><!-- IMAGE II --><img class="IIPOK" src="http://www.aht.li/2913829/650225.png"/><!-- PSEUDONYME / RANG / MP --><span>Pseudonyme - Rang - <a href="" target="_blank">MP</a></span><!-- DESCRIPTION --><p>Description.</p></div><br/><!-- VI --><div class="VI"><!-- IMAGE --><img class="IPOK" src="http://www.aht.li/2838068/100100.png" /><!-- IMAGE II --><img class="IIPOK" src="http://www.aht.li/2913829/650225.png"/><!-- PSEUDONYME / RANG / MP --><span>Pseudonyme - Rang - <a href="" target="_blank">MP</a></span><!-- DESCRIPTION --><p>Description.</p></div><!-- VII --><div class="VII"><!-- IMAGE --><img class="IPOK" src="http://www.aht.li/2838068/100100.png" /><!-- IMAGE II --><img class="IIPOK" src="http://www.aht.li/2913829/650225.png"/><!-- PSEUDONYME / RANG / MP --><span>Pseudonyme - Rang - <a href="" target="_blank">MP</a></span><!-- DESCRIPTION --><p>Description.</p></div><!-- VIII --><div class="VIII"><!-- IMAGE --><img class="IPOK" src="http://www.aht.li/2838068/100100.png" /><!-- IMAGE II --><img class="IIPOK" src="http://www.aht.li/2913829/650225.png"/><!-- PSEUDONYME / RANG / MP --><span>Pseudonyme - Rang - <a href="" target="_blank">MP</a></span><!-- DESCRIPTION --><p>Description.</p></div><!-- IX --><div class="IX"><!-- IMAGE --><img class="IPOK" src="http://www.aht.li/2838068/100100.png" /><!-- IMAGE II --><img class="IIPOK" src="http://www.aht.li/2913829/650225.png"/><!-- PSEUDONYME / RANG / MP --><span>Pseudonyme - Rang - <a href="" target="_blank">MP</a></span><!-- DESCRIPTION --><p>Description.</p></div><!-- X --><div class="X"><!-- IMAGE --><img class="IPOK" src="http://www.aht.li/2838068/100100.png" /><!-- IMAGE II --><img class="IIPOK" src="http://www.aht.li/2913829/650225.png"/><!-- PSEUDONYME / RANG / MP --><span>Pseudonyme - Rang - <a href="" target="_blank">MP</a></span><!-- DESCRIPTION --><p>Description.</p></div></div><!-- HASARDEX --><div class="hazPOK" style="background:url(http://image.noelshack.com/fichiers/2016/25/1466440698-hasardex.png);"><!-- TITRE --><span>Hasardex</span><!-- POKEMONS --><div class="imgHAZ"><a href="" target="_blank"><script type="text/javascript">getRandomImage(random_images_array)</script></a></div></div></div></div> Partie CSS : - Code:
-
/* PAGE D'ACCUEIL */ .POK { margin:auto; width:800px; line-height:16px; } .POK a{text-decoration:none !important;} /* BIENVENUE */ .welcPOK { margin-bottom:5px; text-align:center; color:grey; font-size:42px; text-transform:uppercase; font-family:Fjalla One; /* MODIFIABLE */ } /* FOND PAGE D'ACCUEIL */ .boxPOK { height:530px; border-radius:150px; text-align:left; background:lightgrey; /* MODIFIABLE */ } /* BLOC LIENS */ .lksPOK { position:absolute; margin-top:45px; margin-left:-75px; width:230px; height:440px; border-radius:50px; background:#191919; /* MODIFIABLE */ } /* IMAGE BLOC LIENS */ .lksPOK img{ display:block; margin:10px auto; width:200px; height:200px; border-radius:200px; border:10px solid; border-color:grey; /* MODIFIABLE */ } /* LIEN BLOC LIENS */ .lksPOK a{ display:block; margin:5px auto; width:90%; padding:5px 0; background:grey; color:white; letter-spacing:1px; /* MODIFIABLE */ text-align:center; text-transform:uppercase; font-family:Fjalla One; font-size:18px; transition:all 0.65s; -webkit-transition:all 0.65s; } /* SURVOL LIEN BLOC LIENS */ .lksPOK a:hover { letter-spacing:3px; /* MODIFIABLE */ } /* BLOC STAFF */ .staffPOK { position:absolute; margin-top:25px; margin-left:200px; width:650px; height:225px; border-radius:45px; overflow:hidden; text-align:left; background:black; /* MODIFIABLE */ } .staffPOK div{ display:inline-block; margin:5px 15px; width:100px; height:100px; overflow:hidden; transition:all 0s; -webkit-transition:all 0s; } /* PSEUDONYME / RANG / MP STAFF */ .staffPOK div:hover span{ position:absolute; z-index:5; margin-top:15px; margin-left:-585px; width:200px; height:20px; background:crimson; color:black; /* MODIFIABLE */ } /* DESCRIPTION STAFF */ .staffPOK div:hover p{ position:absolute; z-index:3; margin-top:-180px; margin-left:25px; width:300px; height:140px; padding:5px; overflow:auto; text-align:justify; background:white; color:black; /* MODIFIABLE */ } /* IMAGES STAFF */ .staffPOK div .IIPOK{ width:100px; height:100px; border-radius:100px; transition:all 0.65s; -webkit-transition:all 0.65s; } .staffPOK div:hover .IIPOK{ width:650px; height:225px; border-radius:45px; } .staffPOK div .IPOK { width:100px; height:100px; border-radius:100px; } .staffPOK div:hover .IPOK{ width:0px; height:0px;opacity:0; } .staffPOK div:hover { position:absolute; margin-top:0; margin-left:0; width:650px; height:225px; border-radius:45px; transition:all 0.65s; -webkit-transition:all 0.65s; } .staffPOK .II:hover {position:absolute; margin-top:0; margin-left:-130px;} .staffPOK .III:hover {position:absolute; margin-top:0; margin-left:-260px;} .staffPOK .IV:hover {position:absolute; margin-top:0; margin-left:-390px;} .staffPOK .V:hover {position:absolute; margin-top:0; margin-left:-520px;} .staffPOK .VI:hover {position:absolute; margin-top:-110px; margin-left:0;} .staffPOK .VII:hover {position:absolute; margin-top:-110px; margin-left:-130px;} .staffPOK .VIII:hover {position:absolute; margin-top:-110px; margin-left:-260px;} .staffPOK .IX:hover {position:absolute; margin-top:-110px; margin-left:-390px;} .staffPOK .X:hover {position:absolute; margin-top:-110px; margin-left:-520px;} /* HASARDEX */ .hazPOK { position:absolute; margin-top:320px; margin-left:250px; width:500px; height:150px; } /* TITRE HASARDEX */ .hazPOK span{ position:absolute; margin-top:-25px; width:500px; text-align:center; color:grey; font-size:42px; text-transform:uppercase; font-family:Fjalla One; /* MODIFIABLE */ } /* POKEMONS HAZARDEX */ .imgHAZ{ margin:36px auto 0; width:75px; height:75px; overflow:hidden; text-align:center; } |
|