AccueilRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.


23 résultats trouvés pour fiche_pub

Fiche de Partenariat - Bataille médiévale, tons marrons - Sam 2 Mai 2020 - 22:22

Fiche de Partenariat - Bataille médiévale, tons marrons



Bonsoir ! Je propose mon premier (il me semble) code en LS sur NU. J'espère qu'il ne comporte pas trop des fautes :)
C'est, comme le titre l'indique, une fiche de partenariat. C'est une fiche qui comporte du CSS, il faut donc soit avoir accès à la fiche de CSS du site où vous souhaitez l'héberger, soit avoir un forum où héberger la fiche en entier.
Vous pouvez voir ici le rendu de la fiche, des animations sont présentes sur les cases "Liens" et les cases "Pseudo".
> https://dame-nature-revenge.1fr1.net/h13-epic
Images :

Tag fiche_pub sur Never Utopia - graphisme, codage et game design Fiche_12
Au passage de la souris sur les "Liens" :
Tag fiche_pub sur Never Utopia - graphisme, codage et game design Fiche_10
Sur les "Pseudos" :
Tag fiche_pub sur Never Utopia - graphisme, codage et game design Fiche_11


Les couleurs, images, typographies, etc sont évidemment modifiables. L'image du haut fait 450px de large et les images du staff sont en 100x100 pixels. Et bien sûr, ne retirez pas mon copyright, merci. Voilà le code :

Code:
.a {
    color:#F4F3F3;
    text-decoration : none;
    }
   
    .fond_fiche{
    position : relative;
  height: 625px;
    width: 450px;
    background-color: #929180;
    }
   
    .banniere_nomdufo {
    position : absolute;
    top: -5px;
    height: auto;
    width: 450px;
    background-color:#A9A794 ;
    }
   
    .nomdufo{
    font-family: 'Cinzel', serif;
    color: #F4F3F3;
    font-size: 25px;
    padding-top:3px;
    font-weight : bold;
    text-align: center;
    letter-spacing : 1px;
    }
   
    .bloc_contexte{
    position : absolute;
    top : 45px;
    left: 10px;
    height:235px;
    width:260px;
    border-right: 1px solid #A9A794;
    }
   
    .contenu_contexte{
    position : absolute;
    top: 5px;
    left: 0px;
    height:  225px;
    width: 250px;
    overflow : auto;
    }
   
    .texte{
    font-family: 'Red Hat Display', sans-serif;
    font-size: 11px;
  color: #000000;
    text-align: justify;
    }
   
    .bloc_liens{
    position : absolute;
    right : 10px;
    width :150px;
    height: 25px;
    background-color:#A9A794;
    transition-duration : 1.5s;
    }
   
    .bloc_liens:hover{
    width : 135px;
    transition-duration : 1;5s;
    }
   
    .liensdufo{
    font-family: 'Cizel', serif;
    color: #F4F3F3;
    font-size: 20px;
    text-align :center;
    font-variant : small-caps;
    letter-spacing : 2px;
    transition-duration : 2s;
    }
   
    .liensdufo:hover{
    letter-spacing : 0px;
    transition-duration : 2s;
    }
   
    .banniere_messages_membres {
  position : absolute;
    top : 295px;
    height: auto;
    width: 450px;
    background-color:#A9A794 ;
    text-align: center;
    }
   
    .messages_membres{
    font-family: 'Red Hat Display', sans-serif;
    color: #F4F3F3;
    font-size: 20px;
    font-variant:small-caps;
   
    }
   
    .soustitre_staff {
    position : absolute;
    left : 90px;
    top : 332px;
    color: #F4F3F3;
    font-family :'Cinzel', serif;
    font-size : 23px;
    font-weight : bold;
    }
   
    .image_staff{
    position :absolute;
    left : 20px;
    border : 3px solid #F4F3F3;
    border-radius : 60px;
    }
   
    .pseudostaff{
    position: absolute;
    left : 75px;
    height: 25px;
    width: 140px;
    background-color:#A9A794;
    transition-duration : 1s ;
    }
   
    .pseudostaff:hover{
    width:130px;
  transition-duration : 1s ;
    }
   
    .texte_pseudostaff{
    color: #F4F3F3;
    font-size: 18px;
    font-family :'Cinzel', serif;
    text-align: right;
    padding-right:4px;
    font-variant : small-caps;
    font-weight : bold;
    letter-spacing : 0.5px;
    }
   
    .texte_rangstaff{
    position :absolute;
    right: 250px;
    width : 95px;
    height : 50px;
    font-style :italic;
    font-weight : bold;
    font-size : 12px;
    font-family : 'Red Hat Display', sans-serif;
    color : #F4F3F3;
    text-align : right;
    padding-right : 3px;
    overflow : auto ;
    }
   
    .soustitre_infos{
    position : absolute;
    right: 75px;
    top:332px;
    color: #F4F3F3;
    font-family :'Cinzel', serif;
    font-size : 23px;
    font-weight : bold;
    }
   
    .bloc_infos{
    position : absolute;
    right : 10px;
    top : 364px;
    width : 205px;
    height : 235px;
    border-left: 1px solid #A9A794;
    }
   
    .contenu_infos{
    position : absolute;
    top: 5px;
    left: 10px;
    height:  225px;
    width: 190px;
    overflow : auto;
    }
   
    .credits{
    position : absolute;
    bottom: 5px;
    left :210px ;
    font-family: 'Calibri', sans-serif;
    font-size : 8px;
  color : #000000;
    }


Code:
<img src="https://pre00.deviantart.net/5c26/th/pre/f/2017/112/9/8/the_last_one_by_88grzes-db6preo.jpg"
          style="height:auto;width:450px;" />
       
        <div class="fond_fiche">
         
        <div class="banniere_nomdufo">
          <div class="nomdufo">
            <a class="a" href="#" target="_blank">
              NOM DU FORUM </a>
          </div>
        </div>
          <div class="bloc_contexte">
            <div class="contenu_contexte">
          <div class="texte">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
        cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
        exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
        reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
           
          </div>
            </div>
          </div>
         
          <div class="bloc_liens" style="top:45px;"><div class="liensdufo">
            <a class="a" href="#" target="_blank">incipit</a> </div></div>
          <div class="bloc_liens" style="top:80px;"><div class="liensdufo">
            <a class="a" href="#" target="_blank">effectifs </a></div></div>
          <div class="bloc_liens" style="top:115px;"><div class="liensdufo">
            <a class="a" href="#" target="_blank">partenariats </a></div></div>
          <div class="bloc_liens" style="top:150px;"><div class="liensdufo">
            <a class="a" href="#" target="_blank">règlement </a></div></div>
          <div class="bloc_liens" style="top:185px;"><div class="liensdufo">
            <a class="a" href="#" target="_blank">autre </a></div></div>
            <div class="bloc_liens" style="top:220px;"><div class="liensdufo">
            <a class="a" href="#" target="_blank">autre </a></div></div>
            <div class="bloc_liens" style="top:255px;"><div class="liensdufo">
            <a class="a" href="#" target="_blank">autre </a></div></div>
         
            <div class="banniere_messages_membres">
          <span class="messages_membres">
            xx membres - xx messages
              </span></div>
       
          <div class="soustitre_staff"> Staff </div>
             
                      <div class="pseudostaff" style="top: 372px;" >
                        <div class="texte_pseudostaff">
                          <a class="a" href="#" target="_blank">Pseudo </a>
                        </div>
                </div>
         
          <div class="texte_rangstaff" style="top : 398px;"> fondateur
           
          </div>
         
  <div class="image_staff" style="background-image : url('https://i.servimg.com/u/f36/18/89/53/49/cheval10.jpg');
    height:70px; width:70px;top : 364px;"></div>
 
            <div class="pseudostaff" style="top: 452px;" >
                        <div class="texte_pseudostaff">
                          <a class="a" href="#" target="_blank">Pseudolong </a>
                    </div>
                </div>

          <div class="texte_rangstaff" style="top : 478px;"> administrateur & codeur
          </div>
         
  <div class="image_staff" style="background-image : url('https://i.servimg.com/u/f36/18/89/53/49/arbre_10.jpg');
    height:70px; width:70px;top : 444px;"></div>
         
            <div class="pseudostaff" style="top: 532px;" >
                        <div class="texte_pseudostaff">
                          <a class="a" href="#" target="_blank">Pseudo </a>
                    </div>
                </div>
         
          <div class="texte_rangstaff" style="top : 558px;"> moderateur
          </div>

<div class="image_staff" style="background-image : url('https://i.servimg.com/u/f36/18/89/53/49/lance_10.jpg');
    height:70px; width:70px;top : 524px;"></div>
         
         
          <div class="soustitre_infos" style=" margin : 0px; "> Infos </div>
         
          <div class="bloc_infos">
            <div class="contenu_infos">
            <div class="texte">
              :arrow_forward: une première information importante sur ton forum : sa date de création ? une particularité ?
              un évent en cours ? une description de l'ambiance ? quelque chose à venir ? une mise à jour
              récente ? <br /><br />
              :arrow_forward: une deuxième information importante sur ton forum : sa date de création ? une particularité ?
              un évent en cours ? une description de l'ambiance ? quelque chose à venir ? une mise à jour
              récente ? <br /><br />
      :arrow_forward: autre chose ?
             
              </div>
            </div>
            </div>
         
          <div class="credits">@Clém20</div>
         
          </div>

Et les deux typographies utilisées :
Code:
<link href="https://fonts.googleapis.com/css?family=Cinzel" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Red+Hat+Display&display=swap" rel="stylesheet">


Je vais apporter quelques précisions pour ceux qui seraient novices en codage et/ou ceux que cela intéresse :
Précisions:

- l'image en haut de la fiche a actuellement une largeur de 450 pixels et une hauteur définie en auto. Si vous regardez le code elle n'est pas "à l'intérieur" de la fiche, elle est au dessus, c'est pour éviter tout déréglage de la fiche si la hauteur de votre image était différente de celle de la mienne (car imaginons que votre image soit 50 pixels plus haute, tout le contenu de la fiche se retrouverait décalé de 50 pixels vers le bas et donc hors du fond de la fiche). Vous remarquez que sur le rendu il n'y a pas d'espace entre le bas de l'image et le haut de la fiche, ce qui arrive normalement si vous placez deux éléments indépendants à la suite. Si vous voulez que cela reste comme cela il vous faire attention à la ligne
Code:
top : -5px;
de la fonction
Code:
.banniere_nomdufo{
}
dans le CSS. Il ne faudra pas la supprimer, si vous la modifiez vous pourrez au choix créer un espace entre l'image et la fiche ou faire remonter le bandeau sur votre image.

- de manière générale si vous modifiez les balises
Code:
height : Xpx;
width : Xpx;
dans les fonctions du CSS les éléments de la fiche se retrouveront décalés d'une quelconque façon. Je vous le déconseille donc, sauf si vous avez le temps et l'envie de redimensionner tous les espacements de la fiche via les balises
Code:
top : Xpx;
bottom : Xpx;
left : Xpx;
right : Xpx;
des fonctions du CSS.

- le "nom du forum", les "liens" et les "pseudos" peuvent être des liens vers des sujets de votre forum, il faudra pour cela placer l'url du sujet en question à la place du # entre les guillemets ici :
Code:
 <a class="a" href="#" target="_blank"></a>

Pour que votre fiche soit agréable à ceux qui la verront ne supprimez pas le
Code:
target="_blank"
c'est la partie du code qui permet d'ouvrir un nouvel onglet avec le lien sélectionné. Pratique pour éviter les retours en arrière sur une unique page active Wink
Pour terminer sur les liens, vous pouvez voir que dans ce code ils ont une class associée, c'est la première fonction du CSS. Vous pouvez bien sûr modifier la couleur des liens, pour ce qui est du
Code:
text-decoration : none;
il permet d'empêcher que votre lien ne soit souligné, ce qui est nettement plus esthétique, faites attention à ne pas le supprimer.

-enfin, s'il s'avère que le nom du forum, du lien ou le pseudo que vous voulez écrire est un peu trop long, vous pouvez réduire l'espacement entre les lettres, respectivement de 1px, 0.5px et 2px via cette balise
Code:
letter-spacing : Xpx;
dans les fonctions associées au trois éléments précédemment cités. Si ce que vous voulez écrire est vraiment trop long il faudra modifier la taille de la div dans laquelle vous écrivez et par conséquent gérer sa disposition dans la fiche. Si jamais vous n'y arrivez pas n'hésitez pas à me demander par MP ou dans cette section du forum !

Youp

Fiche de pub coloréé en page html - Jeu 7 Jan 2016 - 16:50



Hey ! Voici une petite fiche de pub sympathique aux couleurs estivales. Il y'a des animations sur la partie staff, qui dévoile le nom du staff. La voici: (vous n'aurez pas les images dans le code, à vous de les mettre, mais je vous expliquerais où)



Ce livre nécessite une page html, une page qui sera hébergée sur un forum donc. Mais ne vous en faites pas, ce n'est vraiment pas sorcier


Le code de la page html et ses explications

Donc dans modules -> gestion des pages html -> créer en mode avancé, vous mettez ceci :
Code:
<!DOCTYPE html>
  <html>
    <head> 
      <meta charset="utf-8" />
      <title>Fiche de pub pour refresh</title>
      <base target="_blank" />
      <style type="text/css">
.page{
  width: 550px;
  height: 900px;
  background: lightblue;
  background-image: url('LIEN');
  background-repeat: no-repeat;
}

a {
  text-decoration:none;
  color: white !important;
}

.titre {
  color : #fb6920;
  font-size: 24px;
  font-weight: ;
  letter-spacing: px;
  font-family: 'Indie Flower';
  float: right;
  position: relative;
  margin-right: 20px;
  margin-top: 257px;
  text-shadow: 2px 2px 0px white, -1px -1px 0px white;
}    

.contexte{
  width: 350px;
  height: 310px;
  background: white;
  position: absolute;
  top: 300px;
  overflow: auto;
  margin-left: 25px;
  font-size: 15px;
  padding: 7px;
  text-align:justify;
  color: chocolate;
}

.contexte:first-letter {
  font-size:290%;
  float:left;
  background: #fb6920;
  color: white;
  padding-left: 6px;
  padding-right: 5px;
  margin-right: 3px;
}  

.staff1{
  width: 100px;
  height: 100px;
  background: white;
  position: absolute;
  top: 300px;
  left: 420px;
  background: white;
  color: chocolate;
}  

.imagestaff1 {
  height: 100%;
  width: 100%;
  position:absolute;
  top:0;
  left:0;
  background-image: url('LIEN');
  background-size: contain;
  -webkit-transition: all 1s linear;
  transition: all 1s linear;
}  

.staff1:hover > .imagestaff1 {
  filter:alpha(opacity=0);
  opacity:0;
  visibility:hidden;
}

.staff2 {
  width: 100px;
  height: 100px;
  background: white;
  position: absolute;
  top: 410px;
  left: 420px;
  background: white;
  color: chocolate;
}    


.imagestaff2 {
  height: 100%;
  width: 100%;
  position:absolute;
  top:0;
  left:0;
  background-image: url('LIEN');
  background-size: contain;
  -webkit-transition: all 1s linear;
  transition: all 1s linear;
}  

.staff2:hover > .imagestaff2 {
  opacity:0;
  filter:alpha(opacity=0);
  visibility:hidden;
}

.staff3{
  width: 100px;
  height: 100px;
  background: white;
  position: absolute;
  top: 520px;
  left: 420px;
  background: white;
  color: chocolate;
}

.imagestaff3 {
  height: 100%;
  width: 100%;
  position:absolute;
  top:0;
  left:0;
  background-image: url('LIEN');
  background-size: contain;
  -webkit-transition: all 1s linear;
  transition: all 1s linear;
}  

.staff3:hover > .imagestaff3 {
  opacity:0;
  filter:alpha(opacity=0);
  visibility:hidden;
}

.blocliens{
  width: 550px;
  height: 36px;
  position: absolute;
  top: 650px;
  vertical-align: middle;
}  

.lien1{
  width: 109px;
  height: 35px;
  background: #fb6920;
  color: white !important;
  display: inline-block ;
  position: relative;
  top: 0px;
  float:left;
  text-align:center;
  line-height:30px;
}

.lien1:hover{
  width: 109px;
  height: 35px;
  background: #b92b2a;
  color: white;
  display: inline-block ;
  position: relative;
  top: 0px;
  float:left;
  text-align:center;
  line-height:30px;
}

.lien2{
  width: 111px;
  height: 35px;
  background: gold;
  color: white;
  display: inline-block ;
  position: relative;
  top: 0px;
  float: left;
  text-align:center;
  line-height:30px;
}

.lien2:hover{
  width: 111px;
  height: 35px;
  background: #b92b2a;
  color: white;
  display: inline-block ;
  position: relative;
  top: 0px;
  float: left;
  text-align:center;
  line-height:30px;
}

.blocinfo{
  width: 400px;
  background: white;
  position: absolute;
  top: 710px;
  overflow: auto;
  margin-left: 50px;
  font-size: 15px;
  padding: 15px;
  text-align:justify;
  color: chocolate;
  border-radius: 20px;
}

.boutonphrase {
  color : #fb6920;
  font-size: 20px;
  font-family: 'Indie Flower';
  text-shadow: 2px 2px 0px white, -1px -1px 0px white;
  width: 190px;
  margin: auto;
}    

.bouton {
  width: 100px;
  margin: auto;
  margin-top: -17px;
}    

.crédit {
  font-size: 10px;
  position: absolute;
  top: 875px;
  margin-left: 200Px;
  color: grey;
}
</style>
      <link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Indie+Flower" >
    </head>       
    <body>                 
<div class="page">
                                                              
 <div class="titre">
                               Si tu devais partir en voyage, où irais-tu?                                
 </div>
                                                            
 <div class="contexte">
                               LE CONTEXTE BLABLABLA, ces balises -> <br /> <br /> Correspondent à un saut de ligne si vous souhaitez les utiliser. A la suite un petit lien vers le contexte en entier, vous pouvez le retirer: <a target="_blank" href="LIENde_la_suite_de_votre_contexte"><span style="color: rgb(185, 43, 42);">La suite...</span></a>                            
 </div>
                                                        
 <div class="staff1">
        
 <div style="height: 100px;  display:table-cell; vertical-align: middle; font-family: 'Indie Flower' ; text-align: center; width : 100px;">
          NOM STAFF      
 </div>
                  
 <div class="imagestaff1">
                    
 </div>
                                                        
 </div>
                                                        
 <div class="staff2">
        
 <div style="height: 100px;  display:table-cell; vertical-align: middle; font-family: 'Indie Flower' ; text-align: center; width : 100px;">
         NOM STAFF          
 </div>
                    
 <div class="imagestaff2">
                      
 </div>
                                                        
 </div>
                                                        
 <div class="staff3">
      
 <div style="height: 100px;  display:table-cell; vertical-align: middle; font-family: 'Indie Flower' ; text-align: center; width : 100px;">
        NOM STAFF    
 </div>
                    
 <div class="imagestaff3">
                    
 </div>
                                                        
 </div>
                                                        
 <div class="blocliens">
                                          
 <div class="lien1">
       <a href="LIEN" target="_blank">                  Règlement </a>                          
 </div>
                            
 <div class="lien2">
       <a href="LIEN" target="_blank">                      Base de données </a>                        
 </div>
                    
 <div class="lien1">
       <a href="LIEN" target="_blank">                     Fruits du démon </a>                          
 </div>
                              
 <div class="lien2">
       <a href="LIEN" target="_blank">                      Questions  </a>                          
 </div>
                          
 <div class="lien1">
       <a href="LIEN" target="_blank">                    Staff  </a>                    
 </div>
                                            
 </div>
                                              
 <div class="blocinfo">
                           Date d'ouverture: <br /> Membres enregistrés: <br />Nombre de messages postés : <br />  <br />                
 <div class="boutonphrase">
                 Venez nous rejoindre !                  
 </div><br />                  
 <div class="bouton">
                  <a title="OnePieceRefresh" href="LIEN_Forum"><img src="Image_bouton_partenariat" alt="logo partenaire" /></a>                  
 </div>
                                        
 </div>
                                    
 <div class="crédit">
                              @Youp sur <a target="_blank" href="http://www.never-utopia.com/"> <span style="color: rgb(185, 43, 42);">Never Utopia</span> </a>                              
 </div>
                                                                                
</div>
</body>
</html>


Ensuite, à chaque fois que vous voulez modifier votre code, vous devrez utiliser le mode avancé, soit l'engrenage sur lequel il est écrit "html". Sinon, cela va cause des bugs.

Code:
.page{
  width: 550px;
  height: 900px;
  background: lightblue;
 background-image: url('LIEN');
 background-repeat: no-repeat;
}

N'oubliez pas de remplacer le LIEN par un... roulement de tambour... Lien ! Razz Ce lien correspond à l'image en haut de la fiche, l'image ici fait 550 de largeur (width) et 275 de hauteur (height). Si vous désirez changer les proportions, il vous faudra changer certains placements comme celui du titre par exemple (modifier simplement la valeur top ).

Modifier aussi le lien des images de imagestaff1, 2 et 3 ainsi que le nom qui s'affiche en dessous (j'ai noté NOM STAFF). Les images font 100x100px.

Code:
<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Indie+Flower" />            

Correspond à la police google font que l'on utilise pour certaines parties de la fiche, vous pouvez la remplacer par une autre si vous le souhaitez bien sûr. Ajouter juste à la suite le code similaire que vous donne google font.

N'oubliez pas de modifier aussi tout les LIEN (donc pour la navigation rapide, ex règlement, staff etc..., sur le bouton de partenariat aussi), et l'image du bouton de partenariat.



Utiliser dans un message: mettre une iframe :

Hop hop, maintenant pour l'utiliser, il suffit d'utiliser une iframe sous cette forme:
Code:
<iframe src="Le_lien_de_ta_page_html" frameborder="0" scrolling="no" style="margin:auto; width: 550px; height: 900px;"></iframe>

Modifier les valeurs de hauteur et de largeur si vous avez modifier celle-ci sur votre page html. Enlever la première div si vous ne voulez pas que la fiche soit centrée.

Voili voilou, j'espère que le rendu vous plaît et si vous avez un problème avec la modification du code, n'hésitez pas à passer dans "personnalisations" ou "problème avec mon code". N'enlevez pas le crédit bien sûr (surtout celui qui amène vers N-U, mais sur ce point je vous fait confiance ^^

Fyraliel

Fiche de pub tons marrons/beiges - Lun 14 Sep 2015 - 16:10



Bonjour tout le monde ^^
Suite à la demande d'Amychan voici le LS de la fiche Wink

Tout d'abord voici un petit screen pour que vous puissiez voir à quoi ça ressemble ^^

Et maintenant le code ^^
Code:
<link href='https://fonts.googleapis.com/css?family=Great+Vibes' rel='stylesheet' type='text/css' / /><div style="height: 650px; width: 500px; background: #C78A31; text-align: center;"><img src="http://i21.servimg.com/u/f21/15/03/21/91/banniy10.png" style="margin: 20px 0 0 20px;" /><div style="height: 25px; width: 250px; color: #371605; font-size: 50px; font-family: 'Great Vibes'; margin: 30px 0 0 115px; border-bottom: 1px solid #371605;">Contexte</div><div style="height: 187px; width: 430px; background: #FEFDA5; border: 2px dotted #371605; border-radius: 5px; overflow: auto; text-align: justify; padding: 3px 2px 0 3px; font-family: Time New roman; font-size: 15px; color: #371605; margin: 10px 0 0 35px;">Haec igitur Epicuri non probo, inquam. De cetero vellem equidem aut ipse doctrinis fuisset instructior est enim, quod tibi ita videri necesse est, non satis politus iis artibus, quas qui tenent, eruditi appellantur aut ne deterruisset alios a studiis. quamquam te quidem video minime esse deterritum. Oportunum est, ut arbitror, explanare nunc causam, quae ad exitium praecipitem Aginatium inpulit iam inde a priscis maioribus nobilem, ut locuta est pertinacior fama. nec enim super hoc ulla documentorum rata est fides. Haec et huius modi quaedam innumerabilia ultrix facinorum impiorum bonorumque praemiatrix aliquotiens operatur Adrastia atque utinam semper quam vocabulo duplici etiam Nemesim appellamus: ius quoddam sublime numinis efficacis, humanarum mentium opinione lunari circulo superpositum, vel ut definiunt alii, substantialis tutela generali potentia partilibus praesidens fatis, quam theologi veteres fingentes Iustitiae filiam ex abdita quadam aeternitate tradunt omnia despectare terrena.</div><div style="height: 25px; width: 200px; color: #371605; font-size: 50px; font-family: 'Great Vibes'; margin: 30px 0 0 145px; border-bottom: 1px solid #371605;">Statistiques</div><div style="height: 187px; width: 430px; background: #FEFDA5; border: 2px dotted #371605; border-radius: 5px; overflow: auto; text-align: justify; padding: 3px 2px 0 3px; font-family: Time New roman; font-size: 15px; color: #371605; margin: 15px 0 0 35px;">Haec igitur Epicuri non probo, inquam. De cetero vellem equidem aut ipse doctrinis fuisset instructior est enim, quod tibi ita videri necesse est, non satis politus iis artibus, quas qui tenent, eruditi appellantur aut ne deterruisset alios a studiis. quamquam te quidem video minime esse deterritum. Oportunum est, ut arbitror, explanare nunc causam, quae ad exitium praecipitem Aginatium inpulit iam inde a priscis maioribus nobilem, ut locuta est pertinacior fama. nec enim super hoc ulla documentorum rata est fides. Haec et huius modi quaedam innumerabilia ultrix facinorum impiorum bonorumque praemiatrix aliquotiens operatur Adrastia atque utinam semper quam vocabulo duplici etiam Nemesim appellamus: ius quoddam sublime numinis efficacis, humanarum mentium opinione lunari circulo superpositum, vel ut definiunt alii, substantialis tutela generali potentia partilibus praesidens fatis, quam theologi veteres fingentes Iustitiae filiam ex abdita quadam aeternitate tradunt omnia despectare terrena.</div><a href="http://www.never-utopia.com/">Fyraliel</a></div>



Enjoy !

RozenBreizh

Fiche de Nouveautés/Publicité. - Jeu 28 Mai 2015 - 15:23



Bien le bonsoir ou bonjour à toute la communauté. :)

Après mettre cassé la tête, pas bien longtemps, je le reconnais, c'est allé assez vite pour cette fois-ci, je viens vous proposer en LS une nouvelle petite fiche tout en HTML cette fois-ci. Pour la petite info, je m'en sers pour faire mes actualisations de publicités/partenariat, mais cette fiche peut tout aussi bien être utilisé pour une fiche de présentation de votre forum si vous ne souhaitez pas user d'une publicité en iframe. :)

Html
Voici un aperçus de la fiche : Fiche de publicité. (screen).
Un petit merci fera apparaître le code Wink

/!\ Je rappelle que cette section existe en cas de problème!./!\



   
Merci de ne pas retirer le crédit à Never Utopia. :)


Le Code de la fiche:
Code:
<div style="background-image: url(URL DE VOTRE FOND EN IMAGE);width:550px;margin:auto;border-top:10px solid #000423;border-bottom:10px solid #000423;border-right:2px solid #000423;border-left:2px solid #000423;"><a href="URL DE VOTRE FORUM"><img src="URL DE VOTRE IMAGE DE PRESENTATION" /></a>
<div style="color:#000423 ;font-size: 20px; padding-left :15px; ; padding: 4px; margin: auto;"><b>Quêtes et Concours :</b></div>
<div style="text-align: justify;padding:5px;">Nemo quaeso miretur, si post exsudatos labores itinerum longos congestosque adfatim commeatus fiducia vestri ductante barbaricos pagos adventans velut mutato repente consilio ad placidiora deverti.Nemo quaeso miretur, si post exsudatos labores itinerum longos congestosque adfatim commeatus fiducia vestri ductante barbaricos pagos adventans velut mutato repente consilio ad placidiora deverti.</div>

<div style="color:#000423 ;font-size: 20px; padding-left :15px; ; padding: 4px; margin: auto;"><b>Les Prédéfinis ou Scénarios disponibles :</b></div>
<div style="text-align: justify;padding:5px;color:#000423 ;font-size: 12px;">Nemo quaeso miretur, si post exsudatos labores itinerum longos congestosque adfatim commeatus fiducia vestri ductante barbaricos pagos adventans velut mutato repente consilio ad placidiora deverti.Nemo quaeso miretur, si post exsudatos labores itinerum longos congestosque adfatim commeatus fiducia vestri ductante barbaricos pagos adventans velut mutato repente consilio ad placidiora deverti.</div>

<div style="color:#000423 ;font-size: 20px; padding-left :15px; ; padding: 4px; margin: auto;"><b>Nouveautés du Background :</b></div>
<div style="text-align: justify;padding:5px;color:#000423 ;font-size: 12px;">Nemo quaeso miretur, si post exsudatos labores itinerum longos congestosque adfatim commeatus fiducia vestri ductante barbaricos pagos adventans velut mutato repente consilio ad placidiora deverti.Nemo quaeso miretur, si post exsudatos labores itinerum longos congestosque adfatim commeatus fiducia vestri ductante barbaricos pagos adventans velut mutato repente consilio ad placidiora deverti.</div>

<div style="color:#000423 ;font-size: 20px; padding-left :15px; ; padding: 4px; margin: auto;"><b>Nouveautés du Forum en lui-même :</b></div>
<div style="text-align: justify;padding:5px;color:#000423 ;font-size: 12px;">Nemo quaeso miretur, si post exsudatos labores itinerum longos congestosque adfatim commeatus fiducia vestri ductante barbaricos pagos adventans velut mutato repente consilio ad placidiora deverti.Nemo quaeso miretur, si post exsudatos labores itinerum longos congestosque adfatim commeatus fiducia vestri ductante barbaricos pagos adventans velut mutato repente consilio ad placidiora deverti.</div>

<table style="margin:auto;">
<tr><td><span style="font-weight:700;font-size:20px;font-family:Times New Roman;color:#000423;padding-left:5px">Informations Techniques :</span> <div style="display:block;width:255px;height:90px;font-size:11px;overflow:auto;margin:auto;color:#000523;padding:2px;text-align:left">INFORMATIONS TECHNIQUES SUR VOTRE RPG </div></td><td><div style="display:block;width:255px;height:90px;font-size:11px;overflow:auto;margin:auto;color:#000523;padding:2px;text-align:left">INFORMATIONS TECHNIQUES SUR VOTRE RPG</div></td></tr></table>

<a href="URL DE VOTRE FORUM"><img src="URL DE VOTRE IMAGE DE PARTENARIAT DELA TAILLE VOULUE" /></a>
(c)Codage par Rozenbrez sur [url=http://www.never-utopia.com/]Never Utopia[/url].</div>


Personnalisation de la fiche :
Maintenant que vous avez le code je vais vous expliquer comment la personnaliser, ces explications sont pour les personnes ayant du mal à s'y retrouver dans le charabia du codage. :)

Le fond de votre fiche (background):
Code:
background-image: url(URL DE VOTRE FOND EN IMAGE);

J'ai choisi de mettre un fond imagé, mais vous pouvez très bien mettre un fond de couleur. Pour cela il vous faut juste changer l'intitulé:
Code:
background-color:#VOTRE COULEUR;


La taille de votre fiche (width et height) :
Pour changer la taille de votre fiche il faut modifier les nombres suivant :
- width:550px; (c'est la largeur de votre fiche.)
- Je n'ai pas mis définit de hauteur propre, ainsi la fiche s'adapte seule à la hauteur par rapport aux informations que vous mettrez dedans.

Les bordures de votre fiche (border) :
- border-top:10px solid #000423; (c'est la bordure du haut.)
- border-bottom:10px solid #000423; (c'est la bordure du bas.)
- border-right:2px solid #000423; (c'est la bordure de droite.)
- border-left:2px solid #000423; (c'est la bordure de gauche.)

- XXpx correspond à la taille de votre bordure, plus le chiffre est grand et plus votre bordure sera grande.
- Solid est le style de bordure désiré. Vous pouvez très bien en changer avec les propriétés suivantes :

  • dotted (pointillé)
  • dashed (tirets)
  • solid (solide)
  • double (double)
  • groove (rainurée)
  • ridge (relief)
  • inset (relief intérieur)
  • outset (relief extérieur)

-  #000423 est la couleur que vous donnez à votre bordure.

L'image de présentation :
Votre image de présentation doit présenter votre forum (logique!) et peut-être la bannière redimensionnée.
Code:
<a href="URL DE VOTRE FORUM"><img src="URL DE VOTRE IMAGE DE PRESENTATION" /></a>


Pour ma part j'ai fait une image en 550 pixels de largeur sur 300 pixels de hauteur. Sachant que mon image, c'est parfaitement bien adapter à la fiche sans aucun ajout de code pour la redimensionner. Donc à vous d'adapter la largeur de votre image par rapport à la largeur choisie de la fiche.

Voilà, je pense qu'avec ces informations basiques et les informations complémentaires dans le code en lui-même, vous arriverez à vous y retrouver pour finir la personnalisation. :)

Bise les enfants et à la prochaine fois.

A-Lice

Fiche de Pub Taupe - Dim 15 Mar 2015 - 20:22




Fiche de Pub Taupe


Suite à une demande de Moys voici une fiche de Pub avec transition pour les images du staff.

Je précise que l'arrière plan blanc correspond à mon forum.

HTML ~ Voici donc un aperçu : www


Et le code :
HTML :
Code:
<!DOCTYPE><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>div.staff {width: 100px; height: 75px; margin: auto; overflow: hidden; display: inline-block; margin-left: 5px;} .staff img {position: relative; bottom: 75px; transition: all 0.5s; width: 100px; height: 75px;} .staff:hover img {bottom: 200px; transition: all 0.5s;} .txt_staff {color: #9c887d; font-size: 14px; text-align: justify; overflow: auto; width: 80px; height: 55px; padding: 10px;}</style></head><body>
<div style="width: 530px; padding: 10px; margin: auto; background: #F5F5F2;">
  <img src="http://img15.hostingpics.net/pics/661225image791.jpg" style="width: 530px; height: 350px;" />
  <br /><br />
  <a href="Lien du forum" style="display: block; font-size: 35px; color: #9c887d; text-align: center;">Nom du forum</a>
  <br />
  <div style="width: 255px; display: inline-block; margin-right: 15px; background: #9c887d; height: 16px; color: #F5F5F2; font-size: 25px; text-align: center;">
    <span style="position: relative; top: -6px;">Contexte</span>
  </div>
  <div style="width: 255px; display: inline-block; background: #9c887d; color: #F5F5F2; height: 16px; font-size: 25px; text-align: center;">
    <span style="position: relative; top: -6px;">Informations</span>
  </div>
  <br />
  <div style="width: 215px; height: 140px; overflow: auto; display: inline-block; padding-left: 20px; padding-right: 20px; color: #9c887d; font-size: 11px; text-align: justify; margin-right: 15px;">
    Texte texte
  </div>
  <div style="width: 215px; height: 140px; overflow: auto; display: inline-block; padding-left: 20px; padding-right: 20px; color: #9c887d; font-size: 11px; text-align: justify;">
    Texte texte <br />x membres connectés
  </div>
  <br />
  <div style="width: 255px; display: inline-block; margin-right: 15px; background: #9c887d; color: #F5F5F2; height: 16px; font-size: 25px; text-align: center;">
    <span style="position: relative; top: -6px;">Nouveautés</span>
  </div>
  <div style="width: 255px; display: inline-block; background: #9c887d; color: #F5F5F2; font-size: 25px; height: 16px; text-align: center;">
    <span style="position: relative; top: -6px;">Staff</span>
  </div>
  <br />
  <div style="width: 215px; height: 80px; overflow: auto; display: inline-block; padding-left: 20px; padding-right: 20px; color: #9c887d; font-size: 11px; text-align: justify; margin-right: 15px;">
    Texte texte
  </div>
  <div style="width: 215px; height: 80px; overflow: auto; display: inline-block; padding-left: 20px; padding-right: 20px; color: #9c887d; font-size: 11px; text-align: justify;">
    <div class="staff"><div class="txt_staff">Texte ici
      </div><img src="http://img15.hostingpics.net/pics/219236image990.jpg" alt="staff" /></div>
    <div class="staff"><div class="txt_staff">Texte ici
      </div><img src="http://img15.hostingpics.net/pics/219236image990.jpg" alt="staff" /></div>
  </div>
  <br />
  <div style="background: #9c887d; color: #F5F5F2; font-size: 25px; height: 16px; text-align: center;">
    <span style="position: relative; top: -6px;">Nous lier</span>
  </div>
  <div style="color: #9c887d; font-size: 11px; text-align: justify; height: 80px; overflow: auto; padding: 15px;">
    Texte texte texte
  </div>
<a href="http://www.never-utopia.com" style="display: block; text-decoration: none; font-size: 11px; text-align: center; color: #9c887d;">A-Lice | Never-Utopia</a>
</div></body></html>


Le code est à mettre dans le panneau d'administration, dans Module -> HTML & JAVASCRIPT -> Gestion des pages HTML -> Création en mode avancé (HTML)


Et l'iframe pour poster :
Code:
<center><iframe src="Lien de la page HTML" border="0" frameborder="0" scrolling="no" style="margin: 10px;" width="570px" height="900px"></iframe></center>

Si vous venez à agrandir la taille de la fiche, pensez à le faire pour l'iframe aussi !


/!\ En cas de problème, c'est ici ou que ça ce passe.

RozenBreizh

Fiche de publicité en iframe. - Lun 26 Jan 2015 - 19:59



Bien le bonsoir ou bonjour à toute la communauté :)

Je viens vous proposer une fiche de publicité en iframe pour celles et ceux que ça intéresse :)


Html&CSS ▬ PhpBB 2
Voici un aperçus de la fiche : Fiche de publicité. (screen) ou en live.
Un petit merci fera apparaitre le code Wink

/!\ Je rappelle que cette section existe en cas de problème!./!\



Merci de ne pas retirer le copyright.


Code HTML:
Code:
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title>NOM DE VOTRE FORUM</title>
  <link href='http://fonts.googleapis.com/css?family=Oldenburg|Oswald|Lobster' rel='stylesheet' type='text/css' />
<style type="text/css">
.body {width: 450px; height: 760px; background-color: #338e9b;}
.text {padding: 25px; width: 430px; height: 200px; text-align: justify; color: #000423; overflow: auto; font-size: 12px; padding: 5px;}
.tableau{width:240px;}
.tableau2{color:#809399;font-family:arial;font-size:13px;margin:5px;padding: 8px;text-align: justify;border-top:3px solid #1D4565;border-bottom:3px solid #1D4565;
 background-color:#000423;height:100px;overflow:auto;} 
</style>
</head>
<body>
<center>
  <div class="body">
    <a href="URL_DE_VOTRE_FORUM"><img src="IMAGE_DILLUSTRATION" /></a>
    <div class="text">Mettre votre contexte ou un texte accrocheur!</div>
    <center>
      <table>
        <tr>
          <td class="tableau">
            <div class="tableau2">
              Mettre des infos sur votre rpg.
            </div>
          </td>
          <td class="tableau">
            <div class="tableau2">
              Mettre des infos sur le forum en général ou des liens menant à votre contexte, règlement et autres annexes utiles..
            </div>
          </td>
        </tr>
      </table>
    </center>
    <center>
      <a href="URL_DE_VOTRE_FORUM" style="color: #000423 !important; text-decoration: none !important; font-size: 18px;">PHRASE D'ACCROCHE/LOGO DE PARTENARIAT</a>
    </center>
  </div>
  </center>
  </body>
</html>



Explications:
Le code est à placer dans une feuille HTML de votre forum. Pour cela allez sur votre Panneau d'Administration. Pour avoir accès à l'onglet "Modules" il faut basculer en mode "Avancé". Puis dans votre onglet "Modules" => HTML & JAVASCRIPT => Gestion des pages HTML => Création en mode avancée (HTML).

Les tableaux sont à rajouter/enlever comme bon vous semble avec le morceau de code suivant:
Code:

<center>
  <table>
    <tr>
      <td class="tableau">
        <div class="tableau2">
          ✘<a href="http://antartica-rpg.actifforum.com/contact" style="color: #338e9b !important; text-decoration: none !important; font-size: 12px;">La Façonneuse.(contacter)</a>
          <br />
          ✘Ouvert depuis le 20/01/2015.
          <br />
        </div>
      </td>
      <td class="tableau">
        <div class="tableau2">
          ✘<a href="http://antartica-rpg.actifforum.com/t9-reglement-du-forum#9" style="color: #338e9b !important; text-decoration: none !important; font-size: 12px;">Règlement.</a>
          <br />
          ✘<a href="http://antartica-rpg.actifforum.com/t3-petit-guide-du-debutant#3" style="color: #338e9b !important; text-decoration: none !important; font-size: 12px;">Guide du Débutant.</a>
          <br />
          ✘<a href="http://antartica-rpg.actifforum.com/t4-background-1-la-vie-en-duerine" style="color: #338e9b !important; text-decoration: none !important; font-size: 12px;">Background #1.</a>
          <br />
          ✘<a href="http://antartica-rpg.actifforum.com/t14-les-races-de-duerine" style="color: #338e9b !important; text-decoration: none !important; font-size: 12px;">Les Races.</a>
          <br />
          ✘<a href="http://antartica-rpg.actifforum.com/t24-les-classes" style="color: #338e9b !important; text-decoration: none !important; font-size: 12px;">Les Classes.</a>
        </div>
      </td>
    </tr>
  </table>
</center>


Puis vous validez votre feuille. Ensuite vous prenez l'url de votre feuille "URL du lien" que vous allez placer dans le code suivant :
Code:
<iframe src="PLACER_LURL_DE_VOTRE_LIEN" width="XXpx" height="XXpx" border="none" frameborder="no"></iframe>


- width="XXpx" => vous devez mettre une largeur à votre iframe, je vous conseil de mettre 10 à 15 px en plus que ce que vous avez définie dans votre feuille.
- height="XXpx" => vous devez mettre une longueur à votre iframe, je vous conseil de mettre 10 à 15 px en plus que ce que vous avez définie dans votre feuille.

Et voilà vous avez une fiche de publicité en iframe qui ira sur tous les forums Very Happy

Onyx

Fiche de pub Multicolor - Sam 20 Déc 2014 - 23:43




Fiche de pub Multicolor


Voici une fiche de pub faite suite à la demande de Narakye.

Pour voir l'aperçu : cliquez ici.

Ce tutoriel est en 2 étapes :
> Création de la page html.
> Mise en place d'un iframe contenant la page HTML aux endroits où nous voulons utiliser le test.

Pour utiliser ce tutoriel, il faut être fondateur ou administrateur de forum ou avoir accès à un endroit où vous pouvez héberger une page HTML.

Mettre un crédit vers Never-Utopia est obligatoire.


Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^



1. Page HTML


Premièrement, nous doit créer une page HTML. Pour cela, on va dans :
> Panneau d'administration
> > Modules
> > > HTML & Javascript
> > > > Gestion des pages HTML

Ensuite, nous devons choisir l'option de création "Création en mode avancé (HTML)". Nous devons choisir un titre quelconque, puis s'assurer que les options suivantes sont cochées :

Voulez-vous utiliser le haut et le bas de page de votre forum ? NON
Utiliser cette page en tant que page d'accueil ? NON

Dans le contenu, nous allons mettre notre page de pub.
Code:
<!DOCTYPE>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Fiche de pub</title>
    <style type="text/css">
      /*Enleve les marges inutiles*/
      body {
        margin: 0px;
      }
     
      /*Liens de la fiche*/
      a {
        color: #ffffff;
        text-decoration: none;
      }
      a:hover {
        color: #000000;
      }
     
      /*Cadre de la fiche*/
      .pub_cadre {
        width: 738px;
        height: 770px;
        margin: auto;
        background-image: url('http://img11.hostingpics.net/pics/571798cadre.png');
        padding-top: 72px;
        text-align: center;
        font-family: arial;
        font-size: 13px;
        color: #545454;
      }
     
      /*Image du haut de la fiche*/
      .pub_image_top {
        position: relative;
        width: 450px;
        height: 310px;
        margin: auto;
        border-radius: 105px 105px 0px 0px;
        box-shadow: 0px 0px 10px #353535;
        z-index: 1;
      }
     
      /*Corps de la fiche*/
      .pub_body {
        position: relative;
        background-image: url('http://img11.hostingpics.net/pics/367932fond.png');
        width: 450px;
        height: 365px;
        margin: auto;
        padding-top: 15px;
        text-align: center;
        z-index: 2;
      }
     
      /*Bloc avec image qui glisse*/
      .pub_bloc1 {
        position: relative;
        width: 400px;
        height: 86px;
        margin: auto;
        border: 2px solid white;
        background-color: white;
        border-radius: 5px;
        text-align: left;
        overflow: hidden;
      }
      /*Texte derrière image qui glisse*/
      .pub_bloc1_text {
        width: 390px;
        height: 76px;
        background-color: #dfdfdf;
        padding: 5px;
        overflow: auto;
        text-align: justify;
      }
      /*Image qui glisse*/
      .pub_bloc1_img {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 400px;
        height: 86px;
        border-radius: 5px;
        transition: all 1s;
        -webkit-transition: all 1s;
      }
      /*Glissement de image*/
      .pub_bloc1:hover .pub_bloc1_img {
        left: 450px;
      }
     
      /*Fond bleu du bloc qui change de contenu*/
      .pub_bloc2 {
        position: relative;
        width: 404px;
        height: 209px;
        background-image: url('http://img11.hostingpics.net/pics/130557fond2.png');
        border-radius: 5px;
        margin: auto;
      }
     
      /*Bloc qui change de contenu*/
      .contenu_pubonglet {
        position: absolute;
        top: 15px;
        left: 15px;
        width: 363px;
        height: 169px;
        background-color: #dfdfdf;
        border-radius: 4px;
        padding: 5px;
        text-align: justify;
        overflow: auto;
        display: none;
        transition: all 0.5s;
        -webkit-transition: all 0.5s;
      }
     
      /*Barre bleu du bas*/
      .pub_bloc3 {
        width: 450px;
        height: 35px;
        margin: auto;
        background-color: #3f87e1;
        text-align: center;
      }
      .pub_bloc3 a {
        display: inline-block;
        font-size: 20px;
        font-family: monotype corsiva;
        margin: 8px;
        margin-left: 30px;
        margin-right: 30px;
      }
    </style>
  </head>
  <body>
    <script type="text/javascript">
      //<!--
        function change_pubonglet(name)
          {
            document.getElementById('pubonglet_'+anc_pubonglet).className = 'pubonglet_0 pubonglet';
            document.getElementById('pubonglet_'+name).className = 'pubonglet_1 pubonglet';
            document.getElementById('contenu_pubonglet_'+anc_pubonglet).style.display = 'none';
            document.getElementById('contenu_pubonglet_'+name).style.display = 'block';
            anc_pubonglet = name;
          }
      //-->
    </script>
    <div class="pub_cadre">
      <img src="URL_DE_IMAGE_DU_HAUT" alt="Image haut" class="pub_image_top" />
      <div class="pub_body">
        <div class="pub_bloc1">
          <div class="pub_bloc1_text">
            Texte derrière l'image.
          </div>
          <img src="URL_DE_IMAGE_DU_MILIEU" alt="Image milieu" class="pub_bloc1_img" />
        </div>
        <span class="pubonglet_1 pubonglet" id="pubonglet_Initial" onmouseover="javascript:change_pubonglet('Initial');"></span>
        <img src="http://img11.hostingpics.net/pics/436524histoire.png" alt="Image histoire"  class="pubonglet_0 pubonglet" id="pubonglet_Histoire" onmouseover="javascript:change_pubonglet('Histoire');" />
        <img src="http://img11.hostingpics.net/pics/396239staffstats.png" alt="Image staff" class="pubonglet_0 pubonglet" id="pubonglet_Staff" onmouseover="javascript:change_pubonglet('Staff');" />
        <img src="http://img11.hostingpics.net/pics/598703merci.png" alt="Image merci" class="pubonglet_0 pubonglet" id="pubonglet_Merci" onmouseover="javascript:change_pubonglet('Merci');" />
        <div class="pub_bloc2">
          <div class="contenu_pubonglet" id="contenu_pubonglet_Initial">
            Passez sur les mots pour voir leur contenu ~
          </div>
          <div class="contenu_pubonglet" id="contenu_pubonglet_Histoire">
            Contenu de l'onglet Histoire.
          </div>
          <div class="contenu_pubonglet" id="contenu_pubonglet_Staff">
            Contenu de l'onglet Staff
          </div>
          <div class="contenu_pubonglet" id="contenu_pubonglet_Merci">
            Contenu de l'onglet Merci
            Crédit : Onyx de <a href="http://www.never-utopia.com/" target="_blank">Never-Utopia</a>
          </div>
        </div>
      </div>
      <div class="pub_bloc3">
        <a href="LIEN_DU_REGLEMENT" target="_blank">
          Règlement
        </a>
        <a href="LIEN_DES_PREDEFINIS" target="_blank">
          Prédéfinis
        </a>
        <a href="LIEN_DE_NOUS_REJOINDRE" target="_blank">
          Nous rejoindre
        </a>
      </div>
    </div>
    <script type="text/javascript">
      //<!--
        var anc_pubonglet = 'Initial';
        change_pubonglet(anc_pubonglet);
      //-->
    </script>
  </body>
</html>


Une page HTML peut être modifiée en tout temps et les modifications qui y sont apportées sont aussi apportées là où vous avez posté l'iframe de la page HTML.



2. Iframe


Nous avons maintenant une page HTML contenant une fiche de pub. Sauf que si on la laisse là, ce n'est pas trop utile. Alors aux endroits ou nous vondrons mettre la fiche de pub, on va mettre un iframe contenant le lien de notre page HTML.

Quand on enregistre une page HTML et qu'on retourne dans la gestion des pages HTML, on a, dans la deuxième colone, ce qu'on appelle "URL du lien". C'est le lien de votre page HTML.

Pour l'iframe, il s'agit du code qui va suivre. Vous copiez/collez le "URL du lien" de votre page HTML là où c'est écrit en majuscules qu'il faut le mettre et vous postez l'iframe là où vous voulez l'utiliser ^^
Code:
<iframe src="URL_DU_LIEN_DE_LA_PAGE_HTML" style="margin: auto; display: block; border: none; width: 738px; height: 842px;"></iframe>



C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans "Problème avec mon code".

À plus !

Akina-chan

Fiche de pub futuriste - Jeu 11 Déc 2014 - 14:57



Coucou ! Je vous propose une fiche de pub :)

Un p'tit aperçu de celle-ci en image :
Tag fiche_pub sur Never Utopia - graphisme, codage et game design 8bw1

Elle te plaît ? Les codes sont à toi :)
Code:
<style type="text/css">.fond {width: 650px; background-image: url('http://zupimages.net/up/14/23/x35y.jpg'); border: 3px solid #ffffff; color: #ffffff; font-size: 20px; margin: auto;} .nom_forum {font-family: 'Audiowide', cursive; font-size: 40px; color: #ffffff; text-align: center; display: block;  margin-right: auto; margin-left: auto; margin-top: -10px;} .conteneur {margin: auto; position: relative; height: 100px; width: 100px; overflow: visible; display: inline-block;} .contenu_bulle {width: 100px; height: 102px; background: #004d50; opacity: 0; overflow: auto; -webkit-transition: 0.5s all linear; transition: 0.5s all linear; font-family: Unica One; font-size: 12px; text-align: justify; position: absolute; top: 0em;} .contenu_bulle:hover {opacity: 0.7;} .contenu_bulle a {color: #000000;}</style>
<div class="fond"><img style="width: 650px;" alt="image" src="http://zupimages.net/up/14/50/0p5m.png" />
  <span class="nom_forum">Atlantis Insurrection</span>
<table style="position: relative; top: -4em;"><tr><td style="width: 30%; font-family: 'Iceland', cursive;"><img alt="" border="0" src="http://image.noelshack.com/fichiers/2014/48/1416995936-722407chevronbis.png" />AI, c'est :
  <div style="border: 2px solid #004d50;"><img src="http://image.noelshack.com/fichiers/2014/20/1400069736-minicat-new.png" />Bientôt 2 ans de RP ;<br /><img src="http://image.noelshack.com/fichiers/2014/20/1400069736-minicat-new.png" />103 Héros;<br /><img src="http://image.noelshack.com/fichiers/2014/20/1400069736-minicat-new.png" />Le forum où vous créez votre Héros;<br /><img src="http://image.noelshack.com/fichiers/2014/20/1400069736-minicat-new.png" />Un Univers sombre et dangereux;<br /><img src="http://image.noelshack.com/fichiers/2014/20/1400069736-minicat-new.png" />Des Missions (MJ) et Intrigues;<br /><img src="http://image.noelshack.com/fichiers/2014/20/1400069736-minicat-new.png" />Un Système de compétences;<br /><img src="http://image.noelshack.com/fichiers/2014/20/1400069736-minicat-new.png" />Une gestion du gène ATA.</div><br /></td>
<td colspan="2" style="width: 70%; font-family: 'Iceland', cursive;"><img src="http://image.noelshack.com/fichiers/2014/48/1416995936-722407chevronbis.png" />Contexte :   
  <div style="border: 2px solid #004d50; height: 168px; overflow: auto;"> « Chacun d'entre vous s'est proposé pour cette mission et vous représentez une douzaine de pays. Vous êtes les les meilleurs et les plus brillants du monde et à la vue de cette aventure dans laquelle nous allons nous embarquer, vous êtes aussi les plus courageux.<br />J'espère que nous reviendrons tous un jour en ayant découvert un tout nouveau domaine à explorer pour l'Humanité, mais comme vous le savez tous, nous pourrions ne jamais revenir chez nous.<br />Je vous offre à tous une chance de retirer votre participation...<br />...<br />Commencez la séquence d'ouverture ! »</div>
<img src="http://image.noelshack.com/fichiers/2014/48/1416995936-722407chevronbis.png" />Actuellement sur AI :   
  <div style="border: 2px solid #004d50;"><img src="http://image.noelshack.com/fichiers/2014/20/1400069736-minicat-new.png" /> nouveauté; <img src="http://image.noelshack.com/fichiers/2014/20/1400069736-minicat-new.png" /> nouveauté; <img src="http://image.noelshack.com/fichiers/2014/20/1400069736-minicat-new.png" /> nouveauté; <img src="http://image.noelshack.com/fichiers/2014/20/1400069736-minicat-new.png" /> nouveauté.</div></td></tr>

<tr><td style="font-family: 'Iceland', cursive;" colspan="3"><img src="http://image.noelshack.com/fichiers/2014/48/1416995936-722407chevronbis.png" />Nous recherchons :
     
<div class="conteneur"><img style="border: 2px solid #004d50;" src="http://www.myfconline.com/character_avatars/9050_22528.gif" /> <div class="contenu_bulle">Nom Prénom<br />Rôle<br /><a href="#">Voir</a></div></div><div class="conteneur"><img style="border: 2px solid #004d50;" src="http://staceyuk.chaotic-creative.com/coppermine/cpg1416/albums/wpw-20080214/thumb_mckay_plain.png" /> <div class="contenu_bulle">Nom Prénom<br />Rôle<br /><a href="#">Voir</a></div></div><div class="conteneur"><img style="border: 2px solid #004d50;" src="http://img.photobucket.com/albums/v17/LoveEmpress/MyIcons3/lizabethdaily_2weekch_10.png" /> <div class="contenu_bulle">Nom Prénom<br />Rôle<br /><a href="#">Voir</a></div></div><div class="conteneur"><img style="border: 2px solid #004d50;" src="http://kaisa12.bloxode.com/images/miniature/113588688139.jpg" /> <div class="contenu_bulle">Nom Prénom<br />Rôle<br /><a href="#">Voir</a></div></div><div class="conteneur"><img style="border: 2px solid #004d50;" src="http://www.dreamwidth.org/userpic/164424/168770" /> <div class="contenu_bulle">Nom Prénom<br />Rôle<br /><a href="#">Voir</a></div></div><div class="conteneur"><img style="border: 2px solid #004d50;" src="http://www.hollow-art.com/files/bases/2014/08/20140810/19720/Rhona%20Mitra%20in%20Strike%20back-2517880.png" /> <div class="contenu_bulle">Nom Prénom<br />Rôle<br /><a href="#">Voir</a></div></div></td></tr>



<tr><td colspan="3" style="font-family: 'Iceland', cursive;"><img src="http://image.noelshack.com/fichiers/2014/48/1416995936-722407chevronbis.png" />Quelques liens :

<img src="http://image.noelshack.com/fichiers/2014/20/1400069736-minicat-new.png" /><a rel="nofollow" target="_blank" class="postlink" href="#">Contrat de confidentialité</a> <img src="http://image.noelshack.com/fichiers/2014/20/1400069736-minicat-new.png" /><a rel="nofollow" target="_blank" class="postlink" href="#">Contexte</a> <img src="http://image.noelshack.com/fichiers/2014/20/1400069736-minicat-new.png" /><a rel="nofollow" target="_blank" class="postlink" href="#"></a><a rel="nofollow" target="_blank" class="postlink" href="#"><span style="color: red;"> Se porter candidat </span></a><img src="http://image.noelshack.com/fichiers/2014/20/1400069736-minicat-new.png" /><a rel="nofollow" target="_blank" class="postlink" href="#">Poser une question</a> <img src="http://image.noelshack.com/fichiers/2014/20/1400069736-minicat-new.png" /><a rel="nofollow" target="_blank" class="postlink" href="#">Persos vacants</a>

<div style="text-align: center;"><a href="http://www.never-utopia.com/">Never Utopia</a></td></tr></table></div>
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Audiowide|Iceland" />


Voilà ! Profitez bien <3

Mini fiche de pub simple (2 cases / gris-rouge) - Sam 4 Oct 2014 - 16:21



Bonjour à tous,

Voilà une mini fiche pour ceux qui aiment comme moi les fiches petites mais efficaces.

Aperçu


Quelques informations :

- Les images se redimensionnent automatiquement sauf pour le logo de partenariat (bien sur...).
- Les couleurs personnalisables sont celles du fond et de la bordure du bas. A savoir que les 2 cases ainsi que leurs titres sont en transparence donc inutile de modifier leurs couleurs, elles s'adaptent automatiquement
- Il est possible de rajouter encore une icone pour les attendus pas plus.
- Merci de conserver le crédit.



Code:
<link href='http://fonts.googleapis.com/css?family=Anton' rel='stylesheet' type='text/css' />
<div style="width:400px; margin:auto; background: #606060; border-bottom:3px solid darkred;"><img src="IMAGE DU HEADER" alt="entete" width="400" />
<div style="width:185px; height:210px; background:rgba(255,255,255,0.1); margin-left: 10px; margin-top: 10px;"><span style="font-family: 'Anton'; font-weight: lighter; text-transform: lowercase; color:rgba(0,0,0,0.4); font-size: 20px; text-align:center; margin-top: 20px; display: block;padding-top:10px; padding-bottom:10px;">News</span><span style="width:165px; height:150px; font-family:Trebuchet MS; font-size:11px; color: black; padding : 10px; overflow : auto; display: block; text-align:justify;">- news
- news
- news
- news</span></div><div style="width:185px; height:210px; background:rgba(255,255,255,0.1); margin-right: 10px; margin-top: -210px; float: right; "><span style="font-family: 'Anton'; font-weight: lighter; text-transform: lowercase; color:rgba(0,0,0,0.4); font-size: 20px; text-align:center; margin-top:10px; margin-bottom:10px; display: block;">Stats</span><span style="width:165px; height:100px; font-family:Trebuchet MS; font-size:11px; color: black; padding : 10px; overflow : auto; display: block; text-align:justify;"><b>Ouvert depuis le :</b> XX/XX/XXXX
<b>Messages :</b> XXXX
<b>Membres :</b> XX
<b style="color:pink;">~ Groupe :</b> XX
<b style="color:orange;">~ Groupe :</b> XX
<b style="color:red;">~ Groupe :</b> XX
<b style="color:purple;">~ Groupe :</b> XX
<b>Dernier enregistré :</b> Nom Prénom</span>
<div style="width:185px; height:50px; margin-top: -20px; font-family:Trebuchet MS; font-size:9px; color: black; text-align: center; text-transform:uppercase;">Attendus
<a href="http://" target="_blank"><img src="ICONE" width="30" /></a> <a href="http://" target="_blank"><img src="ICONE" width="30" /></a> <a href="http://" target="_blank"><img src="ICONE" width="30" /></a> <a href="http://" target="_blank"><img src="ICONE" width="30" /></a></div></div>
<center><img src="IMAGE DU LOGO" alt="bouton partenariat" /></center>
[code]<a href="http://" target="_blank"><img src="http://" alt="bouton partenariat" /></a>[/code]
<a href="http://www.never-utopia.com/" style="font-size:8px; text-align:center; display:block; font-family:Trebuchet MS; text-transform:uppercase;">Lady sur Never-Utopia</a></div></div>

Databar

Fiche pub Rp Harry-potter - Mer 3 Sep 2014 - 5:27



Logo RPU - Webgraphx:
Tag fiche_pub sur Never Utopia - graphisme, codage et game design Logo-4761f48
Tag fiche_pub sur Never Utopia - graphisme, codage et game design Sans_t10



Tag fiche_pub sur Never Utopia - graphisme, codage et game design Shot-210


Credits: Moi meme (ouai j'ai pas le meme pseudo je sais x)) pour le forum "RolePlay universe" Ne pas redistribué en LS sur d'autre forum sans mon accord, merci de laissé mes credits Razz


Alors commençons Razz


Le CSS



Code:

.fondfiche{
width: 700px;
height: 846px;
border: 2px solid #5E5E5E;
background: #1E1E1E;
}

.bann{
width: 700px;
height: 210px;
background: url('http://img110.xooimage.com/files/d/7/0/11111-47709ca.png');
border-bottom: 10px solid #D66E00;
}

.sep{
margin-top: 4px;
height: 4px;
width: 700px;
background: #D66E00;
}

.sepm{
margin-top: 4px;
height: 2px;
width: 700px;
background: #D66E00;
}

.box2{
height: 200px;
width: 222px;
font-size: 14px;
color: #5E5E5E;
margin-top: 40px;
background: #141414;
border-radius: 10px;
border: 1px solid #232323;
}

.enteteb{
width: 100%;
height: 20px;
background: #D66E00;
border-radius: 10px 10px 0px 0px;
padding-top: 2px;
text-align: center;
font-size: 16px;
color: #FFFFFF;
font-weight: bold;
}

.box1{
height: 150px;
width: 222px;
font-size: 14px;
color: #5E5E5E;
margin-top: 30px;
background: #141414;
border-radius: 10px;
border: 1px solid #232323;
}
.conteneur{
padding: 2px;
width: 218px;
height: 117px;
overflow: auto;
}
.conteneur2{
padding: 4px;
width: 218px;
height: 155px;
overflow: auto;
}
.conteneurcont{
padding: 4px;
width: 440px;
height: 155px;
overflow: auto;
}
.navb{
height: 150px;
width: 222px;
margin-top: 30px;
background: #141414;
border-radius: 10px;
border: 1px solid #232323;
}

.cont{
height: 200px;
width: 448px;
font-size: 14px;
color: #5E5E5E;
margin-top: 40px;
background: #141414;
border-radius: 10px;
border: 1px solid #232323;
}

.partb{
margin-top: 8px;
}


.part{
height: 70px;
width: 672px;
margin-top: 40px;
font-size: 14px;
color: #5E5E5E;
background: #141414;
border-radius: 10px;
border: 1px solid #232323;
}

.credt{
background: #111111;
text-align: center;
font-size: 16px;
color: #5E5E5E;
font-weight: bold;
margin-top: 20px;
border-top: 2px solid #D66E00;
}

.bmenu
{
width: 100%;
/*background: #202126;*/
/*border-bottom: 1px solid #005B89;*/
border-top: 1px solid #303034;
color: #EBEBEB;
text-align: center;
margin: auto;
-moz-transition : all 1s;
    -webkit-transition : all 1s;
}

.bmenu:hover
{
width: 100%;
/*border-bottom: 1px solid #005B89;*/
border-top: 1px solid #303034;
background: #D66E00;
color: #EBEBEB;
text-align: center;
margin: auto;
-moz-transition : all 1s;
    -webkit-transition : all 1s;
}

a:link{
text-align: center;
text-decoration: none;
color: #FFFFFF;
}

a:link:hover{
text-align: center;
color: #FFFFFF;
}

li {list-style-type: none;}



Html




Code:
<div class="fondfiche">
  <div class="bann"></div>
  <div class="sepm"></div>
  <div class="sep"></div>
<table style="padding: 10px;">
  <tr>
  <td><div class="navb"><div class="enteteb">Navigation</div>
      <li class="bmenu"><a href="http://" target="_blank">Lien</a></li>
        <li class="bmenu"><a href="http://" target="_blank">Lien</a></li>
        <li class="bmenu"><a href="http://" target="_blank">Lien</a></li>
        <li class="bmenu"><a href="http://" target="_blank">Lien</a></li>
        <li class="bmenu"><a href="http://" target="_blank">Lien</a></li>
        <li class="bmenu"><a href="http://" target="_blank">Lien</a></li>
    </div></td><td><div class="box1"><div class="enteteb">Actualité</div><div class="conteneur">
blablablblab<br/>
lablblabblablablb<br/>
lablablblablablblablblalablblablbla<br/>
blablablblab<br/>
lablblabblablablb<br/>
lablablblablablblablblalablblablbla<br/>
blablablblab<br/>
lablblabblablablb<br/>
lablablblablablblablblalablblablbla<br/>
</div></div></td><td><div class="box1"><div class="enteteb">Le Staff</div></div></td>
</tr>
<tr>
  <td colspan ="2"><div class="cont"><div class="enteteb">Contexte</div>
 <div class="conteneurcont">


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vel finibus lectus, non congue lorem. Nunc tincidunt dui sed justo viverra lacinia. Mauris finibus metus non erat suscipit, et blandit elit placerat. Vestibulum tempus dignissim posuere. Maecenas quam nulla, egestas sit amet libero eget, sodales mollis eros. Aliquam dictum eleifend lobortis. Fusce rhoncus quam et fermentum facilisis. Praesent iaculis molestie pharetra.

Integer eleifend, nibh vel faucibus dictum, lacus arcu semper ex, sed varius nulla sapien cursus lectus. Integer ut massa sed nibh venenatis porta. Morbi sit amet nunc at dolor vulputate sollicitudin. Fusce laoreet eu nunc vel ullamcorper. Proin vel varius mi, ornare convallis nunc. Vestibulum finibus leo et lacinia tempor. Ut aliquet, sem condimentum tempor semper, elit metus vestibulum quam, faucibus vehicula mi nibh pellentesque mi. Nam imperdiet porttitor quam, nec faucibus est pulvinar sed.

Suspendisse in diam pellentesque, fermentum arcu id, sagittis mi. Suspendisse vehicula condimentum felis, in egestas leo. Donec sed porta est. Fusce imperdiet vel ligula quis convallis. Integer ac elit non odio dictum imperdiet. Nulla libero justo, semper egestas enim vitae, varius commodo turpis. Vestibulum auctor placerat neque. Nunc quam mauris, lobortis nec scelerisque a, tincidunt eu leo. Duis consequat, nisl at pretium volutpat, nulla nisl volutpat lectus, vel varius quam ante non magna.

Quisque varius, sem vehicula iaculis blandit, nibh enim viverra tortor, vel ultricies mi orci a lectus. Nam ultrices dui tellus, a molestie felis interdum quis. Aenean est massa, vehicula sit amet feugiat quis, dapibus accumsan nunc. Quisque molestie vehicula ultricies. Aliquam sem orci, laoreet non tellus eget, aliquet porttitor sem. Curabitur vestibulum nisl nulla, at auctor turpis porttitor ac. Cras tincidunt lacinia neque. Sed malesuada dolor arcu, sit amet vehicula ante ornare eget. Integer quis magna sit amet lorem facilisis feugiat. Quisque elementum leo neque, non sagittis odio varius dignissim. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras facilisis, enim ac vehicula commodo, ex velit porta arcu, sed ultrices dui velit non arcu.

Ut cursus metus felis, at scelerisque tortor vestibulum rutrum. Morbi suscipit volutpat ligula, eu bibendum elit viverra ut. Curabitur mollis cursus felis nec lacinia. Ut mollis varius arcu eu placerat. Cras tellus nisl, lobortis id arcu quis, efficitur porta velit. Integer convallis augue eget lectus vulputate pulvinar et eget lectus. Nunc quis leo erat. </div>   
  </div></td><td><div class="box2"><div class="enteteb">Statistique</div>
  <div class="conteneur2">
Nombre de membre:<br/>
Nombre de Post: <br/>
Age du forum<br/>
Recrutement:<br/></div>
  </div></td>
</tr>
<tr>
  <td colspan ="3"><div class="part"><div class="enteteb">Partenaires</div>
 <div class="partb">  <marquee>
<img src="http://i39.servimg.com/u/f39/18/09/95/45/atr112.gif" alt="RôlePlay universe | Multi-Rôle Play" style="border:none;" />
<img src="http://i39.servimg.com/u/f39/18/09/95/45/atr112.gif" alt="RôlePlay universe | Multi-Rôle Play" style="border:none;" />
<img src="http://i39.servimg.com/u/f39/18/09/95/45/atr112.gif" alt="RôlePlay universe | Multi-Rôle Play" style="border:none;" />
<img src="http://i39.servimg.com/u/f39/18/09/95/45/atr112.gif" alt="RôlePlay universe | Multi-Rôle Play" style="border:none;" />
<img src="http://i39.servimg.com/u/f39/18/09/95/45/atr112.gif" alt="RôlePlay universe | Multi-Rôle Play" style="border:none;" />
<img src="http://i39.servimg.com/u/f39/18/09/95/45/atr112.gif" alt="RôlePlay universe | Multi-Rôle Play" style="border:none;" />
<img src="http://i39.servimg.com/u/f39/18/09/95/45/atr112.gif" alt="RôlePlay universe | Multi-Rôle Play" style="border:none;" />
<img src="http://i39.servimg.com/u/f39/18/09/95/45/atr112.gif" alt="RôlePlay universe | Multi-Rôle Play" style="border:none;" />
<img src="http://i39.servimg.com/u/f39/18/09/95/45/atr112.gif" alt="RôlePlay universe | Multi-Rôle Play" style="border:none;" />
<img src="http://i39.servimg.com/u/f39/18/09/95/45/atr112.gif" alt="RôlePlay universe | Multi-Rôle Play" style="border:none;" />
<img src="http://i39.servimg.com/u/f39/18/09/95/45/atr112.gif" alt="RôlePlay universe | Multi-Rôle Play" style="border:none;" />
<img src="http://i39.servimg.com/u/f39/18/09/95/45/atr112.gif" alt="RôlePlay universe | Multi-Rôle Play" style="border:none;" />
  </marquee> </div></td>
</tr>
  </table><div class="credt"><center>Crée par Databar - RPU 2014 - Libre service <a href="http://www.never-utopia.com" target="blank">Never utopia</a></center></div>
</div>


Je precise, les images lien mit sur la version de demo ne renvoie vers aucun forum ^^

A-Lice

Affaire classée - Sam 23 Aoû 2014 - 0:08




Affaire classée


Suite à une demande d'Angie Dalton voici une fiche de Pub Affaire classée.

Je précise que l'arrière plan vert correspond à mon forum.

Voici donc un aperçu : www


Et le code :
HTML :
Code:
<!DOCTYPE><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><link href='http://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css' /></head><body>
<div style="width:650px; background-color: firebrick; border:1px solid black; margin:auto;"><div style="border-top-left-radius: 20px; border-top-right-radius: 20px; width:80px; background-color: firebrick; padding:5px; font-size:12px; color:black; border-top:solid 1px black; border-left:solid 1px black; border-right:1px solid black; text-align:center; transform:rotate(-90deg); position:relative; left:-59px; top:40px;">Pub</div><br/><br/>
<div style="width:93%; background-image:url(http://img15.hostingpics.net/pics/876228papertexturestockbyomg009d4q4wu0.jpg); transform:rotate(-1deg); border: solid 1px black; margin-left:auto; margin-right:auto; margin-top:-50px;"><div style="width:100%; background-image:url(http://img15.hostingpics.net/pics/876228papertexturestockbyomg009d4q4wu0.jpg); transform:rotate(-1deg); border: solid 1px black; margin:auto;"><div style="width:97%; background-image:url(http://img15.hostingpics.net/pics/876228papertexturestockbyomg009d4q4wu0.jpg); margin:auto; padding:10px; transform:rotate(2deg); border: solid 1px black; text-align:center;">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Torchwood_old_logo.svg/275px-Torchwood_old_logo.svg.png" alt="logo" style="width:150px; height:150px;" /><br /><br /><div style="width:90%; text-align:justify; font-size:13px; color:black; padding:10px; margin:auto;"><span style="display:block; text-align:center; font-size:25px; color:black;">Fiche de Pub</span>
  <br/>
  <br/>
  <div style="width:580px; height:200px; margin-left:-25px; overflow:hidden;"><img src="http://img11.hostingpics.net/pics/993999600200.png" /></div>
  <br/>
<div style="margin:auto; width:90%; padding:10px; text-align:justify; background-color:firebrick; color:white; border:black 1px solid;"><span style="display:block; text-align:center; font-size:25px; color:BurlyWood; font-family: 'Pacifico', cursive; padding:10px;">Nom du forum et/ou lien</span>
    <div style="width:95%; border:2px black dashed;padding:5px; margin:auto;"><span style="display:block; margin:auto; width:50%; border-bottom:2px solid white; text-shadow:0px 0px 2px white; font-size:18px; text-align:center; padding:5px;">Contexte</span><br />
  Blabla du contexte.
    </div> <br />
  <div style="width:95%; border:2px black dashed; text-align:center; padding:5px; margin:auto;"><span style="display:block; margin:auto; width:50%; border-bottom:2px solid white; text-shadow:0px 0px 2px white; font-size:18px; text-align:center; padding:5px;">Staff</span><br />
      <div style="display:inline-block; padding:5px;"><img src="http://img15.hostingpics.net/pics/847387renzoicon03.png" alt="" style="width:100px; height:100px;" /></div> <div style="padding:5px; display:inline-block;"><img src="http://img15.hostingpics.net/pics/847387renzoicon03.png" alt="" style="width:100px; height:100px;" /></div> <div style="display:inline-block; padding:5px;"><img src="http://img15.hostingpics.net/pics/847387renzoicon03.png" alt="" style="width:100px; height:100px;" /></div> <div style="padding:5px; display:inline-block;"><img src="http://img15.hostingpics.net/pics/847387renzoicon03.png" alt="" style="width:100px; height:100px;" /></div>
    </div><br />
    <div style="display:inline-block; margin-left:1%; width:31%; border:2px black dashed;padding:5px;"><span style="display:block; margin:auto; width:50%; border-bottom:2px solid white; text-shadow:0px 0px 2px white; font-size:18px; text-align:center; padding:5px;">Stat's</span><br />
    Blabla.
      </div> <div style="display: inline-block; width:61%; border:2px black dashed;padding:5px;"><span style="display:block; margin:auto; width:50%; border-bottom:2px solid white; text-shadow:0px 0px 2px white; font-size:18px; text-align:center; padding:5px;">Ce que tu veux</span><br />
  Blabla.
    </div> <br /><br />
    <div style="width:95%; border:2px black dashed;padding:5px; margin:auto;"><span style="display:block; margin:auto; width:50%; border-bottom:2px solid white; text-shadow:0px 0px 2px white; font-size:18px; text-align:center; padding:5px;">En savoir plus...</span><br />
      <a href="">Blabla d'un lien</a><br />
      <a href=""><img src="" alt="" /></a>
     
    </div> <br />
  </div>
</div>
</div></div></div><a href="http://www.never-utopia.com/" style="text-decoration:none; font-size:12px; color:black; text-align:center; padding:5px; display:block;">© A-Lice | Never-Utopia</a></div></body></html>


Cette fiche a été codé pour être mise en page HTML (Panneau d'administration -> Modules -> Gestion des pages HTML -> Création en mode avancé (HTML)) Et pour la partager, il faut le faire via iframe.


Iframe :
Code:
<center><iframe src="LIEN DE LA PAGE HTML" border="0" frameborder="0" scrolling="no" style="margin:10px;" width="710px" height="1450px"></iframe></center>


D'ailleurs, il faut adapter la hauteur (height) de l'iframe à celle de la Pub.


La suite de l'ensemble se trouve ici :


Règlement
Contexte
Présentation
Prédéfini
Liens
Récapitulatif
Contenu RP
Demande de Partenariat
Pub

/!\ En cas de problème, c'est ici que ça ce passe.

A-Lice

Affaire classée - Demande de partenariat - Sam 23 Aoû 2014 - 0:08




Affaire classée


Suite à une demande d'Angie Dalton voici une demande de partenariat Affaire classée.

Je précise que l'arrière plan vert correspond à mon forum.

Voici donc un aperçu : www


Et le code :
HTML :
Code:
<div class="fiche_part"><div class="etiquette_part">Demande de partenariat</div><br/>
<div class="fond1_part"><div class="fond2_part"><div class="fond3_part">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Torchwood_old_logo.svg/275px-Torchwood_old_logo.svg.png" alt="logo" style="width:150px; height:150px;" /><br /><br /><div class="txt_part"><span class="titre_part">Demande de partenariat</span>

<div class="img_part"><img src="http://img11.hostingpics.net/pics/993999600200.png" /></div>
<div class="bloc_part"><span class="titre2_part">Nom du forum</span>
Texte ici
</div>
</div>
</div></div></div><a href="http://www.never-utopia.com/" class="credit_part">© A-Lice | Never-Utopia</a></div>



CSS :
Code:
.fiche_part {
width:650px;
background-color: firebrick;
border:1px solid black;
margin:auto;
}
.etiquette_part {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
width:160px;
background-color: firebrick;
padding:5px; font-size:12px;
color:black;
border-top:solid 1px black;
border-left:solid 1px black;
border-right:1px solid black;
text-align:center;
transform:rotate(-90deg);
position:relative;
left:-100px;
top:80px;
}
.fond1_part {
width:93%;
background-image:url(http://img15.hostingpics.net/pics/876228papertexturestockbyomg009d4q4wu0.jpg);
transform:rotate(-1deg);
border: solid 1px black;
margin-left:auto;
margin-right:auto;
margin-top:-50px;
}
.fond2_part {
width:100%;
background-image:url(http://img15.hostingpics.net/pics/876228papertexturestockbyomg009d4q4wu0.jpg);
transform:rotate(-1deg);
border: solid 1px black;
margin:auto;
}
.fond3_part {
width:97%;
background-image:url(http://img15.hostingpics.net/pics/876228papertexturestockbyomg009d4q4wu0.jpg);
margin:auto;
padding:10px;
transform:rotate(2deg);
border: solid 1px black;
text-align:center;
}
.txt_part {
width:90%;
text-align:justify;
font-size:13px;
color:black;
padding:10px;
margin:auto;
}
.titre_part {
display:block;
text-align:center;
font-size:25px;
color:black;
}
.img_part {
width:580px;
height:200px;
margin-left:-25px;
overflow:hidden;
}
.bloc_part {
margin:auto;
width:90%;
padding:10px;
text-align:justify;
background-color:firebrick;
color:white;
border:black 1px solid;
}
.titre2_part {
display:block;
text-align:center;
font-size:25px;
color:BurlyWood;
padding:10px;
}
a.credit_part {
text-decoration:none;
color:black;
text-align:center;
padding:5px;
display:block;
}


Pour ceux qui désirent prendre l'ensemble du pack « Affaire classée », voici le CSS complet du pack, à ne copier qu'une seule fois pour toutes les fiches.


CSS :
Code:
.g_fiche {
width:600px;
background-color: firebrick;
border:1px solid black;
margin:auto;
}
.g_etiquette {
border-top-left-radius: 20px;
border-top-right-radius: 20px;
width:80px;
background-color: firebrick;
padding:5px;
font-size:12px;
color:black;
border-top:solid 1px black;
border-left:solid 1px black;
border-right:1px solid black;
text-align:center;
transform:rotate(-90deg);
position:relative;
left:-60px;
top:40px;
}
.g_fond1 {
width:90%;
background-image:url(http://img15.hostingpics.net/pics/876228papertexturestockbyomg009d4q4wu0.jpg);
transform:rotate(-1deg);
border: solid 1px black;
margin-left:auto;
margin-right:auto;
margin-top:-50px;
}
.g_fond2 {
width:100%;
background-image:url(http://img15.hostingpics.net/pics/876228papertexturestockbyomg009d4q4wu0.jpg);
transform:rotate(-1deg);
border: solid 1px black;
margin:auto;
}
.g_fond3 {
width:97%;
background-image:url(http://img15.hostingpics.net/pics/876228papertexturestockbyomg009d4q4wu0.jpg);
margin:auto;
padding:10px;
transform:rotate(2deg);
border: solid 1px black;
text-align:center;
}
.g_texte {
width:90%;
text-align:justify;
font-size:13px;
color:black;
padding:10px;
margin:auto;
}
.g_titre {
display:block;
text-align:center;
font-size:25px;
color:black;
}
.g_soustitre {
display:inline-block;
text-indent:30px;
font-size:16px;
}
a.g_credit {
text-decoration:none;
color:black;
display:block;
text-align:center;
padding:5px;
}
.g_img_cont {
width:100px;
height:100px;
padding:3px;
}
.g_img_cont2 {
margin-left:-30px;
width:565px;
}
.g_titre_lien {
display:inline-block;
text-align:right;
font-size:18px;
width:465px;
}
.g_bloc_lien {
margin:auto;
width:465px;
background-color:firebrick;
}
.g_txt_lien {
height:110px;
display:inline-block;
text-align:justify;
color:black;
overflow:auto;
width:350px;
padding-right:5px;
padding-top:5px;
}
.g_img_lien {
display:inline-block;
float:left;
padding:5px;
}
.g_titre_bord {
display:inline-block;
margin:auto;
width:210px;
text-align:center;
font-size: 18px;
padding:5px;
color:black;
}
.g_txt_bord {
display:inline-block;
margin-left:10px;
width:210px;
height:300px;
background-color:firebrick;
border:solid 1px black;
padding:5px;
overflow:auto;
color:white;
}
.g_txt_rp {
margin:auto;
width:90%;
padding:10px;
text-align:justify;
background-color:firebrick;
color:white;
border:black 1px solid;
}
.g_titre_rp {
display:block;
text-align:center;
font-size:25px;
color:BurlyWood;
font-family: 'Pacifico', cursive;
padding:10px;
}
.g_soustitre_rp {
display:block;
text-align:right;
color:burlywood;
font-size:12px;
border-bottom:dashed 2px burlywood;
font-family: courrier new;
padding:10px;
text-shadow:1px 1px 3px white;
}
.g_parole_rp {
display:inline-block;
color:BurlyWood;
text-indent:25px;
font-style:italic;
font-size:14px;
}
.g_img_part {
width:580px;
height:200px;
margin-left:-25px;
overflow:hidden;
}


Et le HTML qui y correspond :
Code:
<div class="g_fiche" style="width:650px;"><div class="g_etiquette" style="width:160px; position:relative; left:-100px; top:80px;">Demande de partenariat</div><br/>
<div style="width:93%;" class="g_fond1"><div class="g_fond2"><div class="g_fond3">
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Torchwood_old_logo.svg/275px-Torchwood_old_logo.svg.png" alt="logo" style="width:150px; height:150px;" /><br /><br /><div class="g_texte"><span class="g_titre">Demande de partenariat</span>

<div class="g_img_part"><img src="http://img11.hostingpics.net/pics/993999600200.png" /></div>
<div class="g_txt_rp"><span class="g_titre_rp">Nom du forum</span>
Texte ici
</div>
</div>
</div></div></div><a href="http://www.never-utopia.com/" class="g_credit">© A-Lice | Never-Utopia</a></div>


Un petit commentaire (un avis ?) suffit pour voir le code.

La suite de l'ensemble se trouve ici :


Règlement
Contexte
Présentation
Prédéfini
Liens
Récapitulatif
Contenu RP
Demande de Partenariat
Pub

/!\ En cas de problème, c'est ici que ça ce passe.

A-Lice

En rouge et noir - Mer 13 Aoû 2014 - 22:36




En rouge et noir


Voici le fruit d'une collaboration avec Dakota (:

Je précise que l'arrière plan vert correspond à mon forum.

HTML ~ Voici donc un aperçu : www


Et le code :
Code:
<!Doctype><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link href='http://fonts.googleapis.com/css?family=Francois+One' rel='stylesheet' type='text/css' /></head><body>
  <div style="width:565px; height:1009px; background:url(http://i39.servimg.com/u/f39/18/91/99/24/fond_f11.jpg); margin:auto; color:silver;"><img src="http://i39.servimg.com/u/f39/18/91/99/24/fiche_12.jpg" alt="" style="width:565px; height:169px;" /><br/>
    <span style="display:block; font-size:22px; text-transform:uppercase; font-family: 'Francois One', sans-serif; padding:3px; letter-spacing:-1px; margin-top:5px; text-align:center;">- <span style="color:firebrick;">Nom du forum</span> - Genre - <span style="color:firebrick;">Nom du forum</span> - Genre -</span><br/>
    <span style="display:block; text-indent:40px; position:relative; top:30px; font-size:20px; font-family: 'Francois One', sans-serif; letter-spacing:-1px;">Le forum en quelques mots</span><br/>
    <div style="margin-left:15px; width:350px; height:150px; background:#232625; overflow:auto; border-radius:15px; border-right:1px solid silver; border-bottom:1px solid silver; padding:10px; float:left;">Blabla est un forum de blabla</div> <br/>
    <span style="font-size:25px; text-align:center; line-height:25px; display:block; height:140px; overflow:auto; font-family: 'Francois One', sans-serif;">
      <a href="LIEN ICI" style="color:firebrick; text-decoration:none;">Lien 1</a><br/>
      <a href="LIEN ICI" style="color:firebrick; text-decoration:none;">Lien 1</a><br/>
      <a href="LIEN ICI" style="color:firebrick; text-decoration:none;">Lien 1</a><br/>
      <a href="LIEN ICI" style="color:firebrick; text-decoration:none;">Lien 1</a></span><br/>
    <span style="display:block; text-indent:85px; position:relative; top:30px; font-size:20px; font-family: 'Francois One', sans-serif; letter-spacing:-1px;">Le contexte</span><br/>
    <div style="margin-right:15px; width:470px; height:130px; background:#232625; overflow:auto; border-radius:15px; border-right:1px solid silver; border-bottom:1px solid silver; padding:10px; float:right;">C'est l'histoire de blabla</div><br/>
    <div style="margin-left:15px; float:left; margin-top:75px; width:150px;">
      <span style="font-size:25px; color:firebrick; text-align:center; display:block; font-family: 'Francois One', sans-serif;">Stats</span><br/>
      • XX membres<br/>
      • XX messages<br/>
      • Ouvert le XX<br/></div><br/>
    <span style="display:block; text-indent:45px; position:relative; top:45px; font-size:20px; font-family: 'Francois One', sans-serif; letter-spacing:-1px;">La vie du forum</span><br/>
    <div style="margin-right:15px; margin-top:15px; width:350px; height:150px; background:#232625; overflow:auto; border-radius:15px; border-right:1px solid silver; border-bottom:1px solid silver; padding:10px; float:right;">Actuellement sur  blabla il se passe</div><br/><br/>
    <div style="height:70px; overflow:hidden; clear:both; position:relative; top:65px;">
      <a href="LIEN DU FORUM" style="font-size:25px; text-decoration:none; color:firebrick; font-family: 'Francois One', sans-serif; position:relative; right:20px; left:200px;">Rejoignez-nous !</a>
      <img src="http://img4.hostingpics.net/pics/960813bouton.png" style="border-radius:15px; margin-right:15px; float:right;" /><br/>
    <a href="http://www.never-utopia.com/" style="text-decoration:none; color:white; margin-left:15px; position:relative; top:8px; font-size:13px;">© Fiche par Dakota et A-Lice sur Never-Utopia</a></div>
</div></body></html>


Un petit commentaire (un avis ?) suffit pour voir le code.

Précisions : - Cette fiche a été codé pour être mise dans une page HTML (Panneau d'administration -> Modules -> HTML & JAVASCRIPT -> Gestion des pages HTML -> Création en mode avancé (HTML)

- Il est donc préférable de la distribuer avec ce code :
Code:
<center><iframe src="ICI LE LIEN DE LA PAGE HTML" border="0" frameborder="0" scrolling="no" style="margin:10px;" width="565px" height="1039px"></iframe></center>


/!\ En cas de problème, c'est ici que ça ce passe.

A-Lice

Fiche de Pub - Sweet Darkness - Dim 15 Juin 2014 - 21:13




Fiche de Pub


Suite à une demande d'Eternal Moon voici un ensemble de fiches "Sweet Darkness".

Je précise que l'arrière plan bleu correspond à mon forum.


Voici donc un aperçu : www



Et le code :
Code:
<br /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><link href='http://fonts.googleapis.com/css?family=Handlee|Berkshire+Swash' rel='stylesheet' type='text/css'><div style="margin:auto; width:96%; border-radius: 200px; background-color:#141517; border:4px solid #767676; padding:10px; box-shadow:0px 0px 8px #767676; text-align:center;"><br/>
<span style="display:block; width:60%; margin:auto; color:white; font-size:25px; text-align:center; border:2px dotted #767676; border-radius: 100px; padding:10px; background-color:#2F3C3E; font-family: 'Berkshire Swash', cursive; text-shadow:2px 2px 2px #141517;">Fiche de Pub</span><br /><br /><div style="margin:auto; width:95%; height:200px; border-radius: 100px; border:2px dotted #767676; text-align:justify; color:white; overflow:hidden;"><img src="http://img4.hostingpics.net/pics/909792Bannierefofo.png" style="margin-left:-130px;" alt="" /></div><br/><br/>
  <div style="margin:auto; width:75%; background-color:#2F3C3E; border:2px dotted #767676; padding:10px; text-align:justify; color:white;"><span style="display:block; font-size:18px; color:#141517; text-align:center; text-shadow:2px 2px 2px white; font-family: 'Handlee', cursive;">Contexte</span><br /><div style="height:250px; overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ipsum, elementum non tempor quis, pellentesque eget libero. Vestibulum venenatis tellus sit amet felis volutpat porttitor. Nunc ullamcorper tortor in tellus ultrices, in vestibulum nulla dictum. Fusce at aliquet dolor. Proin vitae porta quam, eu feugiat risus. Pellentesque a nisl elit. Integer aliquam auctor lacus, nec pellentesque turpis cursus sit amet.
Duis congue nunc a dictum porta. Nunc et sapien rhoncus, rhoncus eros nec, elementum velit. Nunc vel euismod nunc. Nam varius urna vitae mi elementum imperdiet. Pellentesque pulvinar sapien id leo pharetra dapibus. Aliquam posuere venenatis elit sit amet venenatis. Maecenas vitae ante tempus, ultrices nisi id, porttitor magna. Ut sodales ante sed ullamcorper mattis. Vestibulum non arcu non nisl rutrum commodo. Ut purus leo, commodo quis dapibus elementum, ornare vitae tortor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ipsum, elementum non tempor quis, pellentesque eget libero. Vestibulum venenatis tellus sit amet felis volutpat porttitor. Nunc ullamcorper tortor in tellus ultrices, in vestibulum nulla dictum. Fusce at aliquet dolor. Proin vitae porta quam, eu feugiat risus. Pellentesque a nisl elit. Integer aliquam auctor lacus, nec pellentesque turpis cursus sit amet.   
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ipsum, elementum non tempor quis, pellentesque eget libero. Vestibulum venenatis tellus sit amet felis volutpat porttitor. Nunc ullamcorper tortor in tellus ultrices, in vestibulum nulla dictum. Fusce at aliquet dolor. Proin vitae porta quam, eu feugiat risus. Pellentesque a nisl elit. Integer aliquam auctor lacus, nec pellentesque turpis cursus sit amet.
    </div></div><br />
  <div style="display:inline-block; margin:auto; width:35%; background-color:#2F3C3E; border:2px dotted #767676; padding:10px; text-align:justify; color:white;"><span style="display:block; font-size:18px; color:#141517; text-align:center; text-shadow:2px 2px 2px white; font-family: 'Handlee', cursive;">Stat's</span><br /><div style="height:150px; overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ipsum, elementum non tempor quis, pellentesque eget libero. Vestibulum venenatis tellus sit amet felis volutpat porttitor. Nunc ullamcorper tortor in tellus ultrices, in vestibulum nulla dictum. Fusce at aliquet dolor. Proin vitae porta quam, eu feugiat risus. Pellentesque a nisl elit. Integer aliquam auctor lacus, nec pellentesque turpis cursus sit amet.
    <p>Duis congue nunc a dictum porta. Nunc et sapien rhoncus, rhoncus eros nec, elementum velit. Nunc vel euismod nunc. Nam varius urna vitae mi elementum imperdiet. Pellentesque pulvinar sapien id leo pharetra dapibus. Aliquam posuere venenatis elit sit amet venenatis. Maecenas vitae ante tempus, ultrices nisi id, porttitor magna. Ut sodales ante sed ullamcorper mattis. Vestibulum non arcu non nisl rutrum commodo. Ut purus leo, commodo quis dapibus elementum, ornare vitae tortor.
    </p>
    </div></div> <div style="display:inline-block; margin:auto; width:35%; background-color:#2F3C3E; border:2px dotted #767676; padding:10px; text-align:justify; color:white;"><span style="display:block; font-size:18px; color:#141517; text-align:center; text-shadow:2px 2px 2px white; font-family: 'Handlee', cursive;">Liens</span><br /><div style="height:150px; overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ipsum, elementum non tempor quis, pellentesque eget libero. Vestibulum venenatis tellus sit amet felis volutpat porttitor. Nunc ullamcorper tortor in tellus ultrices, in vestibulum nulla dictum. Fusce at aliquet dolor. Proin vitae porta quam, eu feugiat risus. Pellentesque a nisl elit. Integer aliquam auctor lacus, nec pellentesque turpis cursus sit amet.
    <p>Duis congue nunc a dictum porta. Nunc et sapien rhoncus, rhoncus eros nec, elementum velit. Nunc vel euismod nunc. Nam varius urna vitae mi elementum imperdiet. Pellentesque pulvinar sapien id leo pharetra dapibus. Aliquam posuere venenatis elit sit amet venenatis. Maecenas vitae ante tempus, ultrices nisi id, porttitor magna. Ut sodales ante sed ullamcorper mattis. Vestibulum non arcu non nisl rutrum commodo. Ut purus leo, commodo quis dapibus elementum, ornare vitae tortor.
    </p>
  </div></div><br /><br />
  <div style="margin:auto; width:75%; background-color:#2F3C3E; border:2px dotted #767676; padding:10px; text-align:justify; color:white;"><span style="display:block; font-size:18px; color:#141517; text-align:center; text-shadow:2px 2px 2px white; font-family: 'Handlee', cursive;">Nouveautés</span><br /><div style="height:150px; overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ipsum, elementum non tempor quis, pellentesque eget libero. Vestibulum venenatis tellus sit amet felis volutpat porttitor. Nunc ullamcorper tortor in tellus ultrices, in vestibulum nulla dictum. Fusce at aliquet dolor. Proin vitae porta quam, eu feugiat risus. Pellentesque a nisl elit. Integer aliquam auctor lacus, nec pellentesque turpis cursus sit amet.
    <p>Duis congue nunc a dictum porta. Nunc et sapien rhoncus, rhoncus eros nec, elementum velit. Nunc vel euismod nunc. Nam varius urna vitae mi elementum imperdiet. Pellentesque pulvinar sapien id leo pharetra dapibus. Aliquam posuere venenatis elit sit amet venenatis. Maecenas vitae ante tempus, ultrices nisi id, porttitor magna. Ut sodales ante sed ullamcorper mattis. Vestibulum non arcu non nisl rutrum commodo. Ut purus leo, commodo quis dapibus elementum, ornare vitae tortor.
    </p>
    </div></div><br />
  <div style="margin:auto; width:75%; background-color:#2F3C3E; border:2px dotted #767676; padding:10px; text-align:justify; color:white;"><span style="display:block; font-size:18px; color:#141517; text-align:center; text-shadow:2px 2px 2px white; font-family: 'Handlee', cursive;">Logo's</span><br /><div style="height:100px; overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ipsum, elementum non tempor quis, pellentesque eget libero. Vestibulum venenatis tellus sit amet felis volutpat porttitor. Nunc ullamcorper tortor in tellus ultrices, in vestibulum nulla dictum. Fusce at aliquet dolor. Proin vitae porta quam, eu feugiat risus. Pellentesque a nisl elit. Integer aliquam auctor lacus, nec pellentesque turpis cursus sit amet.
    </div></div><br />
  <br/><a href="http://www.never-utopia.com/" style="font-size:11px; color:#767676; text-decoration:none;">© By A-Lice sur Never-Utopia</a>
</div>


Perso je mets ce code dans une page HTML (panneau d'admin > modules > gestion des pages HTML > création en mode avancé (HTML) en cochant bien "non" à "Voulez-vous utiliser le haut et le bas de page de votre forum ?") et ensuite je la donne à mes partenaires sous forme d'une iframe comme ceci :
Code:
<center><iframe src="LIEN DE LA PAGE HTML" border="0" frameborder="0" scrolling="no" style="margin:10px;" width="650px" height="1450px"></iframe></center>



La suite des fiches se trouve ici :


-Annonce
-Contexte
-Règlement
-Présentation
-Prédéfini
-Demande de partenariat
-Partenariat
-Pub

A-Lice

Fiche de Partenariat - Sweet Darkness - Dim 15 Juin 2014 - 21:10




Fiche de Partenariat


Suite à une demande d'Eternal Moon voici un ensemble de fiches "Sweet Darkness".

Je précise que l'arrière plan bleu correspond à mon forum.


Voici donc un aperçu : www


Et le code :
Code:
<br /><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><link href='http://fonts.googleapis.com/css?family=Handlee|Berkshire+Swash' rel='stylesheet' type='text/css' /><div style="margin:auto; width:96%; border-radius: 200px; background-color:#141517; border:4px solid #767676; padding:10px; box-shadow:0px 0px 8px #767676; text-align:center;"><br/>
<span style="display:block; width:60%; margin:auto; color:white; font-size:25px; text-align:center; border:2px dotted #767676; radius: 100px; padding:10px; background-color:#2F3C3E; font-family: 'Berkshire Swash', cursive; text-shadow:2px 2px 2px #141517;">Fiche de Partenariat</span><br /><br /><div style="margin:auto; width:95%; height:200px; border-radius: 100px; border:2px dotted #767676; text-align:justify; color:white; overflow:hidden;"><img src="http://img4.hostingpics.net/pics/909792Bannierefofo.png" style="margin-left:-130px;" alt="" /></div><br/><br/>
  <div style="margin:auto; width:75%; background-color:#2F3C3E; border:2px dotted #767676; padding:10px; text-align:justify; color:white;"><span style="display:block; font-size:18px; color:#141517; text-align:center; text-shadow:2px 2px 2px white; font-family: 'Handlee', cursive;">Contexte</span><br /><div style="height:250px; overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ipsum, elementum non tempor quis, pellentesque eget libero. Vestibulum venenatis tellus sit amet felis volutpat porttitor. Nunc ullamcorper tortor in tellus ultrices, in vestibulum nulla dictum. Fusce at aliquet dolor. Proin vitae porta quam, eu feugiat risus. Pellentesque a nisl elit. Integer aliquam auctor lacus, nec pellentesque turpis cursus sit amet.
Duis congue nunc a dictum porta. Nunc et sapien rhoncus, rhoncus eros nec, elementum velit. Nunc vel euismod nunc. Nam varius urna vitae mi elementum imperdiet. Pellentesque pulvinar sapien id leo pharetra dapibus. Aliquam posuere venenatis elit sit amet venenatis. Maecenas vitae ante tempus, ultrices nisi id, porttitor magna. Ut sodales ante sed ullamcorper mattis. Vestibulum non arcu non nisl rutrum commodo. Ut purus leo, commodo quis dapibus elementum, ornare vitae tortor.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ipsum, elementum non tempor quis, pellentesque eget libero. Vestibulum venenatis tellus sit amet felis volutpat porttitor. Nunc ullamcorper tortor in tellus ultrices, in vestibulum nulla dictum. Fusce at aliquet dolor. Proin vitae porta quam, eu feugiat risus. Pellentesque a nisl elit. Integer aliquam auctor lacus, nec pellentesque turpis cursus sit amet.   
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ipsum, elementum non tempor quis, pellentesque eget libero. Vestibulum venenatis tellus sit amet felis volutpat porttitor. Nunc ullamcorper tortor in tellus ultrices, in vestibulum nulla dictum. Fusce at aliquet dolor. Proin vitae porta quam, eu feugiat risus. Pellentesque a nisl elit. Integer aliquam auctor lacus, nec pellentesque turpis cursus sit amet.
    </div></div><br />
  <div style="display:inline-block; margin:auto; width:35%; background-color:#2F3C3E; border:2px dotted #767676; padding:10px; text-align:justify; color:white;"><span style="display:block; font-size:18px; color:#141517; text-align:center; text-shadow:2px 2px 2px white; font-family: 'Handlee', cursive;">Stat's</span><br /><div style="height:150px; overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ipsum, elementum non tempor quis, pellentesque eget libero. Vestibulum venenatis tellus sit amet felis volutpat porttitor. Nunc ullamcorper tortor in tellus ultrices, in vestibulum nulla dictum. Fusce at aliquet dolor. Proin vitae porta quam, eu feugiat risus. Pellentesque a nisl elit. Integer aliquam auctor lacus, nec pellentesque turpis cursus sit amet.
    <p>Duis congue nunc a dictum porta. Nunc et sapien rhoncus, rhoncus eros nec, elementum velit. Nunc vel euismod nunc. Nam varius urna vitae mi elementum imperdiet. Pellentesque pulvinar sapien id leo pharetra dapibus. Aliquam posuere venenatis elit sit amet venenatis. Maecenas vitae ante tempus, ultrices nisi id, porttitor magna. Ut sodales ante sed ullamcorper mattis. Vestibulum non arcu non nisl rutrum commodo. Ut purus leo, commodo quis dapibus elementum, ornare vitae tortor.
    </p>
    </div></div> <div style="display:inline-block; margin:auto; width:35%; background-color:#2F3C3E; border:2px dotted #767676; padding:10px; text-align:justify; color:white;"><span style="display:block; font-size:18px; color:#141517; text-align:center; text-shadow:2px 2px 2px white; font-family: 'Handlee', cursive;">Liens</span><br /><div style="height:150px; overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ipsum, elementum non tempor quis, pellentesque eget libero. Vestibulum venenatis tellus sit amet felis volutpat porttitor. Nunc ullamcorper tortor in tellus ultrices, in vestibulum nulla dictum. Fusce at aliquet dolor. Proin vitae porta quam, eu feugiat risus. Pellentesque a nisl elit. Integer aliquam auctor lacus, nec pellentesque turpis cursus sit amet.
    <p>Duis congue nunc a dictum porta. Nunc et sapien rhoncus, rhoncus eros nec, elementum velit. Nunc vel euismod nunc. Nam varius urna vitae mi elementum imperdiet. Pellentesque pulvinar sapien id leo pharetra dapibus. Aliquam posuere venenatis elit sit amet venenatis. Maecenas vitae ante tempus, ultrices nisi id, porttitor magna. Ut sodales ante sed ullamcorper mattis. Vestibulum non arcu non nisl rutrum commodo. Ut purus leo, commodo quis dapibus elementum, ornare vitae tortor.
    </p>
  </div></div><br /><br />
  <div style="margin:auto; width:75%; background-color:#2F3C3E; border:2px dotted #767676; padding:10px; text-align:justify; color:white;"><span style="display:block; font-size:18px; color:#141517; text-align:center; text-shadow:2px 2px 2px white; font-family: 'Handlee', cursive;">Staff</span><br /><div style="height:150px; overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ipsum, elementum non tempor quis, pellentesque eget libero. Vestibulum venenatis tellus sit amet felis volutpat porttitor. Nunc ullamcorper tortor in tellus ultrices, in vestibulum nulla dictum. Fusce at aliquet dolor. Proin vitae porta quam, eu feugiat risus. Pellentesque a nisl elit. Integer aliquam auctor lacus, nec pellentesque turpis cursus sit amet.
    <p>Duis congue nunc a dictum porta. Nunc et sapien rhoncus, rhoncus eros nec, elementum velit. Nunc vel euismod nunc. Nam varius urna vitae mi elementum imperdiet. Pellentesque pulvinar sapien id leo pharetra dapibus. Aliquam posuere venenatis elit sit amet venenatis. Maecenas vitae ante tempus, ultrices nisi id, porttitor magna. Ut sodales ante sed ullamcorper mattis. Vestibulum non arcu non nisl rutrum commodo. Ut purus leo, commodo quis dapibus elementum, ornare vitae tortor.
    </p>
    </div></div><br />
  <div style="margin:auto; width:75%; background-color:#2F3C3E; border:2px dotted #767676; padding:10px; text-align:justify; color:white;"><span style="display:block; font-size:18px; color:#141517; text-align:center; text-shadow:2px 2px 2px white; font-family: 'Handlee', cursive;">Logo's</span><br /><div style="height:100px; overflow:auto;">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ipsum, elementum non tempor quis, pellentesque eget libero. Vestibulum venenatis tellus sit amet felis volutpat porttitor. Nunc ullamcorper tortor in tellus ultrices, in vestibulum nulla dictum. Fusce at aliquet dolor. Proin vitae porta quam, eu feugiat risus. Pellentesque a nisl elit. Integer aliquam auctor lacus, nec pellentesque turpis cursus sit amet.
    </div></div><br />
  <br/><a href="http://www.never-utopia.com/" style="font-size:11px; color:#767676; text-decoration:none;">© By A-Lice sur Never-Utopia</a>
</div>

Perso je mets ce code dans une page HTML (panneau d'admin > modules > gestion des pages HTML > création en mode avancé (HTML) en cochant bien "non" à "Voulez-vous utiliser le haut et le bas de page de votre forum ?") et ensuite je la donne  sous forme d'une iframe comme ceci :
Code:
<center><iframe src="LIEN DE LA PAGE HTML" border="0" frameborder="0" scrolling="no" style="margin:10px;" width="650px" height="1450px"></iframe></center>



La suite des fiches se trouve ici :


-Annonce
-Contexte
-Règlement
-Présentation
-Prédéfini
-Demande de partenariat
-Partenariat
-Pub

A-Lice

Partenaires ▬ Sweet Darkness - Dim 15 Juin 2014 - 21:06




Fiche de Demande de Partenariat


Suite à une demande d'Eternal Moon voici un ensemble de fiches "Sweet Darkness".

Je précise que l'arrière plan bleu correspond à mon forum.


Voici donc un aperçu : www


Et le code :
Code:
<link href='http://fonts.googleapis.com/css?family=Handlee|Berkshire+Swash' rel='stylesheet' type='text/css' />
<div style="margin:auto; width:80%; border-radius: 200px; background-color:#141517; border:4px solid #767676; padding:10px; box-shadow:0px 0px 8px #767676; text-align:center;">
<span style="display:block; width:60%; margin:auto; color:white; font-size:25px; text-align:center; border:2px dotted #767676; border-radius: 100px; 100px; padding:10px; background-color:#2F3C3E; font-family: 'Berkshire Swash', cursive; text-shadow:2px 2px 2px #141517;">Devenons coupains \o/</span><br /><br />
<div style="margin:auto; width:75%; border-radius: 100px; background-color:#2F3C3E; border:2px dotted #767676; padding:40px; text-align:justify; color:white;"><span style="display:block; font-size:18px; color:#141517; text-align:center; text-shadow:2px 2px 2px white; font-family: 'Handlee', cursive; font-weight:bold;">Le nom du forum</span>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec mi ipsum, elementum non tempor quis, pellentesque eget libero. Vestibulum venenatis tellus sit amet felis volutpat porttitor. Nunc ullamcorper tortor in tellus ultrices, in vestibulum nulla dictum. Fusce at aliquet dolor. Proin vitae porta quam, eu feugiat risus. Pellentesque a nisl elit. Integer aliquam auctor lacus, nec pellentesque turpis cursus sit amet.

Duis congue nunc a dictum porta. Nunc et sapien rhoncus, rhoncus eros nec, elementum velit. Nunc vel euismod nunc. Nam varius urna vitae mi elementum imperdiet. Pellentesque pulvinar sapien id leo pharetra dapibus. Aliquam posuere venenatis elit sit amet venenatis. Maecenas vitae ante tempus, ultrices nisi id, porttitor magna. Ut sodales ante sed ullamcorper mattis. Vestibulum non arcu non nisl rutrum commodo. Ut purus leo, commodo quis dapibus elementum, ornare vitae tortor.

</div>
<a href="http://www.never-utopia.com/" style="font-size:11px; color:#767676; text-decoration:none;">© By A-Lice sur Never-Utopia</a>
</div>



La suite des fiches se trouve ici :


-Annonce
-Contexte
-Règlement
-Présentation
-Prédéfini
-Demande de partenariat
-Partenariat
-Pub

Koalz

Fiche publicité cadre bleu marine/noire - Mer 11 Juin 2014 - 11:55



Yop ^w^
Cette fiche est totalement modifiable, aucune contrainte de couleurs ou taille du texte, typographie, etc. Ne simplement pas réutilisé la base pour créer un autre code.
Juste, laisser le copyright s'il vous plais.
Le code sera visible après avoir posté, car un merci ça faut toujours plaisir ^w^
Merci <(*w*<)



NOM du FORUM

RéglementContexte Avatars Prédéfinis


Ecrire ici le contexte ou un résumer alléchant.


「P'tite description.」

Un petit texte descriptif sur l'ambiance, ce que l'on peut y trouver, sa force, ses qualités, etc...

「Nos Statistiques.」

¤ C'est un monde qui a vu le jour un date.
¤ Il compte un total de nombre d'inscrits petits monstres qui on fait nombres de messages bêtises entre temps.
¤ C'est également une alliance entre (nombre d'admin) puissants admins terriblement vilains èwé :


Nom&Prénom ~ Nom&Prénom ~ Nom&Prénom

「Nous Lier ?」





fiche by koalz



Code:
<center><div style="background-color: #110917; width: 550px; height: auto; border-top: 10px solid #1b1422; border-bottom: 10px solid #1b1422;-moz-box-shadow: #000000 1px 0px 5px;"><a href="URLduFORUM"><img src="URL Image Entête" /></a><span style="text-shadow: 1px 1px 10px"><span style="font-family: Mistral; font-size: 46px; color: #d9d9d9; position: relative; top: -5px;">

<i>NOM du FORUM</i></span></span>
<span style="background-color : #1b1422; padding: 5px; -moz-border-radius-topright: 12px; -moz-border-radius-bottomleft: 12px; color: white; text-shadow: 0px 0px 3px white; margin-left: 4px; letter-spacing: 2px; font-size: 18px; font-family: Georgia;"><a href="URL du réglement" style="color: #d9d9d9;"><i>Réglement</i></font></a></span><span style="background-color : #1b1422; padding: 5px; -moz-border-radius-topright: 12px; -moz-border-radius-bottomleft: 12px; color: white; text-shadow: 0px 0px 3px white; margin-left: 4px; letter-spacing: 2px; font-size: 18px; font-family: Georgia;"><a href="URL du contexte" style="color: #d9d9d9;"><i>Contexte</i></a></span> <span style="background-color : #1b1422; padding: 5px; -moz-border-radius-topright: 12px; -moz-border-radius-bottomleft: 12px; color: white; text-shadow: 0px 0px 3px white; margin-left: 4px; letter-spacing: 2px; font-size: 18px; font-family: Georgia;"><a href="URL liste avatar" style="color: #d9d9d9;"><i>Avatars</i></a></span> <span style="background-color : #1b1422; padding: 5px; -moz-border-radius-topright: 12px; -moz-border-radius-bottomleft: 12px; color: white; text-shadow: 0px 0px 3px white; margin-left: 4px; letter-spacing: 2px; font-size: 18px; font-family: Georgia;"><a href="URL prédéfinis" style="color: #d9d9d9;"><i>Prédéfinis</i></a></span>

<div style="background-color: #1b1422; width: auto; height: auto; position: relative; top: 10px;padding: 10px;"><div style="text-align: justify;"><div style="width: 530px; text-align: justify; padding-right: 3px; font-size: 11px; color: #000"><span style="line-height: 12px; font-size: 9px; color: #7E8296; text-align: center;">
Ecrire ici le contexte ou un résumer alléchant.</span>
</div></div></div>
<div style="background-color: #1b1422; width: auto; height: auto; position: relative; top: 10px;padding: 10px;"><div style="font-family: Trajan Pro; font-size: 15px; color: #d9d9d9; position: relative; left: 10px;"><div style="text-align: left;"><div style="font-family: Garamond; font-size: 20px; color: #d9d9d9; position: relative; left: 10px;"><div style="text-align: left;"><b>「P'tite description.」</b></div></div></div></div><div style="text-align: justify;"><span style="line-height: 12px; font-size:11px; color: #7E8296; ">
Un petit texte descriptif sur l'ambiance, ce que l'on peut y trouver, sa force, ses qualités, etc...</span></div></div><br /><div style="background-color: #1b1422; width: auto; height: auto; position: relative; top: 10px;padding: 10px;"><div style="font-family: Trajan Pro; font-size: 15px; color: #d9d9d9; position: relative; left: 10px;"><div style="text-align: left;"><div style="font-family: Garamond; font-size: 20px; color: #d9d9d9; position: relative; left: 10px;"><div style="text-align: left;"><b>「Nos Statistiques.」</b></div></div></div></div><div style="text-align: justify;"><div style="line-height: 12px; font-size:11px; color: #7E8296; ">
¤ C'est un monde qui a vu le jour un <b>date</b>.
¤ Il compte un total de <b>nombre d'inscrits</b> petits monstres qui on fait <b>nombres de messages</b> bêtises entre temps.
¤ C'est également une alliance entre (nombre d'admin) puissants admins terriblement vilains èwé :

<center><img width="50px;" src="url image de l'admin" /> <img width="50px;" src="url image de l'admin" /> <img width="50px;" src="url image de l'admin" />
<b>Nom&Prénom</b> ~ <b>Nom&Prénom</b> ~ <b>Nom&Prénom</b></center></div></div></div><br /><div style="background-color: #1b1422; width: auto; height: auto; position: relative; top: 10px;padding: 10px;"><div style="font-family: Trajan Pro; font-size: 15px; color: #d9d9d9; position: relative; left: 10px;"><div style="text-align: left;"><div style="font-family: Garamond; font-size: 20px; color: #d9d9d9; position: relative; left: 10px;"><div style="text-align: left;"><b>「Nous Lier ?」</b></div></div></div></div><div style="text-align: justify;"><div style="line-height: 12px; font-size:11px; color: #7E8296; "><center>
<a href="Url du forum"><img src="URL image pub"></a> <a href="Url du forum"><img src="URL image pub"></a> <a href="Url du forum"><img src="URL image pub"></a>

<a href="Url du forum"><img src="URL image pub"></a> <a href="Url du forum"><img src="URL image pub"></a>
</center></div></div></div><br /><span style="font-size: 10px; color: #7E8296;">fiche by <a href="http://www.never-utopia.com/u13592">koalz</a></span><br /></div></center>

Nesis

Fiche de Pub Blanc & Vert - Jeu 9 Mai 2013 - 18:49




Nom du Forum / Blog



Contexte

Victus universis caro ferina est lactisque abundans copia qua sustentantur, et herbae multiplices et siquae alites capi per aucupium possint, et plerosque mos vidimus frumenti usum et vini penitus ignorantes.

Ex turba vero imae sortis et paupertinae in tabernis aliqui pernoctant vinariis, non nulli velariis umbraculorum theatralium latent, quae Campanam imitatus lasciviam Catulus in aedilitate sua suspendit omnium primus; aut pugnaciter aleis certant turpi sono fragosis naribus introrsum reducto spiritu concrepantes; aut quod est studiorum omnium maximum ab ortu lucis ad vesperam sole fatiscunt vel pluviis, per minutias aurigarum equorumque praecipua vel delicta scrutantes.

Particularité du Forum

Victus universis caro ferina est lactisque abundans copia qua sustentantur, et herbae multiplices et siquae alites capi per aucupium possint, et plerosque mos vidimus frumenti usum et vini penitus ignorantes.

Ex turba vero imae sortis et paupertinae in tabernis aliqui pernoctant vinariis, non nulli velariis umbraculorum theatralium latent, quae Campanam imitatus lasciviam Catulus in aedilitate sua suspendit omnium primus; aut pugnaciter aleis certant turpi sono fragosis naribus introrsum reducto spiritu concrepantes; aut quod est studiorum omnium maximum ab ortu lucis ad vesperam sole fatiscunt vel pluviis, per minutias aurigarum equorumque praecipua vel delicta scrutantes.

Essentiel hors RPG


♠ Administrateur :
♠ Modérateurs :
♠ Graphiste / Codeur :
♠ Statistiques :
♠ Date de création :
Lien du forum

© FICHE DE PUB PAR AMYLITH -NESIS



Code:
<div style="background-color: #fff; width: 500px; border-radius: 20px 0px; border: 3px solid #8bb784; padding: 10px; margin: auto; text-align: center;">
<link href='http://fonts.googleapis.com/css?family=Milonga' rel='stylesheet' type='text/css' /><div style="margin: auto; font-family: Milonga; font-size: 30px; letter-spacing: 5px; text-align: center;color: #8bb784;text-shadow : 2px 2px 2px #82ac88; text-align: center;"> Nom du Forum / Blog 
</div>
<img src="http://img4.hostingpics.net/pics/536516330100.png" />

<div style=" font-family: Milonga; font-size: 25px; letter-spacing: 2px; text-align: center; color: #8bb784; text-shadow: 2px 2px 2px #82ac88;"> Contexte 
</div>
<div style="margin: auto; width: 450px; padding-left: 12px; padding-right: 12px; backgrond-color: #fff; text-align: justify; color: #8bb784; border-radius: 20px 0px; border: 3px solid #8bb784;box-shadow: 2px 2px 2px #8bb784;overflow: auto;">Victus universis caro ferina est lactisque abundans copia qua sustentantur, et herbae multiplices et siquae alites capi per aucupium possint, et plerosque mos vidimus frumenti usum et vini penitus ignorantes.

Ex turba vero imae sortis et paupertinae in tabernis aliqui pernoctant vinariis, non nulli velariis umbraculorum theatralium latent, quae Campanam imitatus lasciviam Catulus in aedilitate sua suspendit omnium primus; aut pugnaciter aleis certant turpi sono fragosis naribus introrsum reducto spiritu concrepantes; aut quod est studiorum omnium maximum ab ortu lucis ad vesperam sole fatiscunt vel pluviis, per minutias aurigarum equorumque praecipua vel delicta scrutantes.
</div>
<div style="margin: auto; font-family: Milonga; font-size: 25px; letter-spacing: 2px; text-align: center; color: #8bb784;text-shadow : 2px 2px 2px #82ac88;"> Particularité du Forum
</div>
<div style="margin: auto width: 450px; padding-left: 12px; padding-right: 12px; backgrond-color: #fff; text-align: justify; color: #8bb784; border-radius: 20px 0px; border: 3px solid #8bb784;box-shadow: 2px 2px 2px #8bb784;overflow: auto;">Victus universis caro ferina est lactisque abundans copia qua sustentantur, et herbae multiplices et siquae alites capi per aucupium possint, et plerosque mos vidimus frumenti usum et vini penitus ignorantes.

Ex turba vero imae sortis et paupertinae in tabernis aliqui pernoctant vinariis, non nulli velariis umbraculorum theatralium latent, quae Campanam imitatus lasciviam Catulus in aedilitate sua suspendit omnium primus; aut pugnaciter aleis certant turpi sono fragosis naribus introrsum reducto spiritu concrepantes; aut quod est studiorum omnium maximum ab ortu lucis ad vesperam sole fatiscunt vel pluviis, per minutias aurigarum equorumque praecipua vel delicta scrutantes.
</div>
<div style="margin: auto font-family: Milonga; font-size: 25px; letter-spacing: 2px; text-align: center; color: #8bb784;text-shadow : 2px 2px 2px #82ac88;"> Essentiel hors RPG
</div>
<div style="margin: auto width: 450px; padding-left: 12px; padding-right: 12px; backgrond-color: #fff; text-align: justify; color: #8bb784; border-radius: 20px 0px; border: 3px solid #8bb784;box-shadow: 2px 2px 2px #8bb784;overflow: auto;">
♠ Administrateur :
♠ Modérateurs :
♠ Graphiste / Codeur :
♠ Statistiques :
♠ Date de création :
♠  <a href="http://"> Lien du forum</a>
</div>
<div style="text-align: center;">© FICHE DE PUB PAR AMYLITH -NESIS </div>
</div>

Illusion

♦ Fiche de PUB - LS ♦ - Dim 5 Mai 2013 - 18:44



Hello c: ,

Je ne savais pas quoi faire tout à l'heure, alors j'ai fait une fiche de PUB ! Elle est pas merveilleuse maybon... Elle est colorée *o*. Voilà, donc si elle vous plaît, n'hésitez pas à la prendre ! Vous pouvez la modifier si vous le voulez, mais merci de toujours laisser le PUF !







Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue. Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue. Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue. Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue. Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.

• • •

Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.

• • •

Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.


code by Illusion (c)



J'aime les petits 'merci' (a). J'aime les petits 'merci' (a). J'aime les petits 'merci' (a). J'aime les petits 'merci' (a). J'aime les petits 'merci' (a). J'aime les petits 'merci' (a).

Code:
<div style="border-radius:25px; border-top: 1px dashed black; border-bottom: 1px dashed black; border-left:2px solid black;border-right:2px solid black; background-color: #e7eaf0; width: 470px; height:690px; text-align: left;"><br/><br/><div style="border-radius:25px; border: 1px dashed black; background-color: #eb4481; width: 300px; height:40px; margin: auto;text-align: center;"><span style="border-bottom:1px dashed black;font-size:15px; color: black;">VOTRE FORUM</span><br /><a href="URL DU FORUM"><i><span style="font-size:11px; color: black;">ADRESSE DE VOTRE FORUM</span></i></a></div>
<img src="http://i80.servimg.com/u/f80/16/46/34/02/mousta10.png" /><br /><br /><br /><div style="width:390px; height:100px; border-left:2px solid black; border-right: 2px solid black; border-radius: 25px; background-color: #f0e735; overflow:auto;margin: auto;"><img src="http://i80.servimg.com/u/f80/16/46/34/02/yellow10.png" title="Il était une fois" /><div style="margin-left:10px; color: black; text-align: left;">Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue. Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue. Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue. Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue. Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue. </div></div><br /><div style="font-size:25px; color: black; text-align: center;">•    •    •</div><br /><div style="width:390px; height:100px; border-left:2px solid black; border-right: 2px solid black; border-radius: 25px; background-color: #99f035; overflow:auto;margin: auto;"><img src="http://i80.servimg.com/u/f80/16/46/34/02/green10.png" title="Les statistiques, et autres infos" /><div style="margin-left:10px;color: black; text-align: left;">Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.</div></div><br /><div style="font-size:25px; color: black; text-align: center;">•    •    •</div><br /><div style="width:390px; height:100px; border-left:2px solid black; border-right: 2px solid black; border-radius: 25px; background-color: #96b6f5; overflow:auto;margin: auto;"><img src="http://i80.servimg.com/u/f80/16/46/34/02/blue10.png" title="Le mot de la fin" /><div style="margin-left:10px;color:black; text-align: left;">Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.Il était une fois, au pays des Bisounours, une coquille d’œuf et une fleur bleue.</div></div><br /><br /><div style="margin-right:10px; font-size:11px; text-align: right; color: black;">code by <a href="http://www.never-utopia.com/"><i>Illusion</i></a> (c)</div></div>

Capouccino

Tableau de pub \o/ - Jeu 2 Mai 2013 - 13:27



Bijour le peuple, ! Alors voilà un tableau de pub :3
Par contre il est un peu petit, lorsque j'aurais l'image de fond agrandie, je le referais en plus grand o/

En espérant que ça vous plaise ^^



Statistiques
- Non. Non. Non ! Je refuse de croire que c'était voulu ! Je le refuse ! tu secoues la tête avec énergie, retenant les larmes. Vous ne savez rien, vous ne savez rien ! Vous n'avez pas vu ce regard fou qu'était le sien ! Vous n'avez pas entendu ces paroles venimeuses qu'il prononçait ! C'était une haine sans pareille, une haine dénuée de sens. Il me haïssait pour une raison que j'ignore. Mais je refuse de croire en cette hypothèse ! Pas après tout ce temps passé à la haïr. Non. J'ai vécu trop d'années dans la souffrance et la haine...
Contexte
- Non. Non. Non ! Je refuse de croire que c'était voulu ! Je le refuse ! tu secoues la tête avec énergie, retenant les larmes. Vous ne savez rien, vous ne savez rien ! Vous n'avez pas vu ce regard fou qu'était le sien ! Vous n'avez pas entendu ces paroles venimeuses qu'il prononçait ! C'était une haine sans pareille, une haine dénuée de sens. Il me haïssait pour une raison que j'ignore. Mais je refuse de croire en cette hypothèse ! Pas après tout ce temps passé à la haïr. Non. J'ai vécu trop d'années dans la souffrance et la haine...
Prédéfinis
TEXTE
Infos
TEXTE
Boutons
TEXTE



Code:
<style>#img_halo, #img_halo2, #img_halo3{text-align:center;font-size:7px;width:45px;height:58px;margin:10px auto;position:absolute;z-index:1;overflow:hidden;}#img_halo{background-image:url('http://img96.xooimage.com/files/9/a/5/parchopetit2-3dd1fdf.png')}#img_halo2{background-image:url('http://img97.xooimage.com/files/9/6/d/parchopetit3-3dd20d0.png')}#img_halo3{background-image:url('http://img97.xooimage.com/files/b/3/2/parchopetit4-3dd2256.png')}#img_halo:hover, #img_halo1:hover, #img_halo2:hover, #img_halo3:hover{font-size:14px;z-index:2;height:350px;width:250px;margin-left:-60px;margin-top:-100px;margin-left:0;margin-right:0;background-image:url('http://img96.xooimage.com/files/e/8/8/parcho-1.5-3dd1e54.png')}#img_halo1, #img_halo4{text-align:center;font-size:7px;width:60px;height:30px;margin:10px auto;position:absolute;z-index:1;overflow:hidden;}#img_halo1{background-image:url('http://img96.xooimage.com/files/2/a/f/parcholongpetit1-3dd2481.png')}#img_halo4{background-image:url('http://img96.xooimage.com/files/2/a/f/parcholongpetit1-3dd2481.png')}#img_halo1:hover, #img_halo4:hover{background-image:url('http://img98.xooimage.com/files/0/f/6/parcholong-3dd23be.png');z-index:2;height:150px;width:250px;margin-bottom:0;margin-top:-100px;margin-left:0;margin-right:0;font-size:14px}.fond{background-position:0% 50%;background-image:url('http://img92.xooimage.com/files/9/1/d/pa-3-3d383ff.png');background-repeat:no-repeat;height:197px;}.tabcenter{margin-left:auto;margin-right:auto;}.texte{opacity:0;overflow:hidden;font-size:12px}.texte:hover{opacity:1;padding:15px;width:200px;height:280px;overflow:auto}.texte2{opacity:0;overflow:hidden;font-size:12px}.texte2:hover{opacity:1;padding:15px;width:200px;height:80px;overflow:auto}</style>

<div class="fond" style="color:#000000"><table style="height:150px;width:200px;padding-top:10px;padding-left:55px;"><td><div style="margin-bottom:35px"><span id="img_halo1">Statistiques
<div class="texte2">TEXTE</div></span></div></td><td><div style="margin-top:15px;margin-left:15px"><span id="img_halo">Contexte
<div class="texte">TEXTE</div></span></div></td><td><div style="margin-bottom:10px;margin-left:55px"><span  id="img_halo2">Prédéfinis
<div class="texte">TEXTE</div></span></div></td><td><div style="margin-left:55px;margin-bottom:45px"><span id="img_halo3">Infos
<div class="texte">TEXTE</div></span></div></td><td><div style="margin-top:70px;margin-right:10px"><span id="img_halo4">Boutons<div class="texte2">TEXTE</div></span></div></td></table></div>

Apokalip'z

Fiche de pub personalisable - Mar 26 Fév 2013 - 17:44



Coucou, voilà une fiche de pub que vous pouvez personnaliser grâce aux quelques astuce que je vais vous donner,...

voilà le rendu et le code:

Spoiler:



NOM DE TON FORUM


NOM DU FORUM




Déscription

Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici

Nouvelles

Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici

Statistiques

Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici

Crédits Du forum

Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici

© Fiche Crée Par Natsu Dragneel de Never utopia



Code:
<div style="border: 4px solid #000000; -moz-border-radius: 10px; -webkit-border-radius: 10px; background-attachment: fixed; background-color: #C4D3D9; width: 650px;">


<center><a href="LIEN DE TON FORUM"><img src="LIEN DE LA BANNIERE OU MINI BANNIERE" alt="NOM DE TON FORUM"/></a></center>
<span style="font-family: Lucida Handwriting; font-style: italic; font size: 70px">
<center>NOM DU FORUM</center>
</span>


<center><div style="border: 2px dashed #000000;font-size: large; -moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: white";>Déscription</div></center>
Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici

<center><div style="border: 2px dashed #000000;font-size: large; -moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: white";>Nouvelles</div></center>
Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici

<center><div style="border: 2px dashed #000000;font-size: large; -moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: white";>Statistiques</div></center>
Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici

<center><div style="border: 2px dashed #000000;font-size: large; -moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: white";>Crédits Du forum</div></center>
Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici  Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici Ton Texte Ici

<span style="border: 2px dotted #000000; font-size: 10px; background-color: #ffffff;">© Fiche Crée Par Natsu Dragneel de <a href="http://www.never-utopia/">Never utopia</a> </span></div>



Si vous voulez utiliser cette fiche veuillez ne pas Supprimer ou Modifier la partie Copyright Du code.


Si vous voulez modifier quelque chose au code voici quelques trucs en spoiler

Spoiler:
- Pour modifier la couleur du fond de la fiche recherchez:
Code:

<div style="border: 4px solid #000000; -moz-border-radius: 10px; -webkit-border-radius: 10px; background-attachment: fixed; background-color: #C4D3D9; width: 650px;">

et modifiez le #C4D3D9 par le code couleur de votre choix

- Pour modifier la couleur et/ou la sorte de bord de la fiche recherchez:
Code:

<div style="border: 4px solid #000000; -moz-border-radius: 10px; -webkit-border-radius: 10px; background-attachment: fixed; background-color: #C4D3D9; width: 650px;">

et modifiez le #000000 par le code couleur de votre choix et/ou le solid par la sorte de border souhaité.

- Pour modifier la couleur du fond des Titres tels que: Description, Nouvelles, Statistiques, Crédits du forum. Recherchez:
Code:

<center><div style="border: 2px dashed #000000;font-size: large; -moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: white";>Déscription</div></center>

et modifiez le white par le code couleur de votre choix

- Pour modifier la couleur et/ou la sorte de bord des Titres tels que: Description, Nouvelles, Statistiques, Crédits du forum. Recherchez:
Code:

<center><div style="border: 2px dashed #000000;font-size: large; -moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: white";>Déscription</div></center>

et modifiez le #000000 par le code couleur de votre choix et/ou le dashed par la sorte de border souhaité.

- Pour Mettre la Bannière ou l'image de votre choix, cherchez:
Code:

<center><a href="LIEN DE TON FORUM"><img src="LIEN DE LA BANNIERE OU MINI BANNIERE" alt="NOM DE TON FORUM"/></a></center>

et Remplacez le "LIEN DE TON FORUM" Par le lien de votre forum ,
Remplacez le "LIEN DE LA BANNIERE OU MINI BANNIERE" par le lien de votre image, et remplacez le "NOM DE TON FORUM" par le nom de votre forum

- Pour mettre le nom de votre forum en grand (comme le Tsugi no sakkaku dans l'exemple (le rendu) )
Vous devez rechercher ce code:
Code:

<span style="font-family: Lucida Handwriting; font-style: italic; font size: 70px">
<center>NOM DU FORUM</center>
</span>

et remplacez le "NOM DU FORUM" par le nom de votre forum

Voilà avec tout ça, le tour est joué ;D

Klash

Fiche de Pub, i-frame - Dim 24 Juin 2012 - 18:30



Bonjour à tous, je vous propose donc une fiche de pub pré-remplie, ils vous suffira donc je changer ce qui vous intéresse soit dans la partie html ou bien le css pour utiliser cette fiche, il vous faut être fondateur de votre forum.

Ce qui donne une fois fini :


Il va falloir créer une page Html rien de compliquer je vous rassure c'est tout simple. D'abord ouvrez votre panneau d'administration, puis allez dans module, puis pages html et cliquez sur création en mode avancé (html).


Puis coller le code de la fiche en entier que je vais vous passer.
Ensuite validez et là vous aurez votre page html de crée. Le lien vous servira pour votre fiche de pub, donc copiez-le.


Puis utilisez le lien pour faire votre pub.

Le lien de la pub sera à insérer comme suit:
Code:
<iframe src="votre lien de page html" width="610px" height="1175"; frameborder="no"; ></iframe>



Code complet de la fiche merci de laisser le crédit un petit merci aussi serait sympa enjoy you like it.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fiche pub</title>
<style type="text/css">

.titre-forum
{
font-family: "palatino linotype",palatino,serif;
color: #545D5E;
margin-top: -60px;
margin-bottom: 15px;
font-size: 30px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
text-shadow: 3px 3px 1px #cccccc;
filter: dropshadow(color=#cccccc, offx=3, offy=3);
}

.header {
border-bottom:ridge 1px #161616;
margin: auto;
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgb(255,255,255) 0%, rgb(229,229,229) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(255,255,255)), color-stop(100%,rgb(229,229,229))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* IE10+ */
background: linear-gradient(top, rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */

width: 560px;
height: 80px;
-moz-border-radius: 20px 20px 0px 10px / 10px 10px 10px 0px;
-webkit-border-radius: 20px 20px 0px 10px / 10px 10px 10px 0px;
-khtml-border-radius: 20px 20px 0px 10px / 10px 10px 10px 0px;
border-radius: 20px 20px 0px 10px / 10px 10px 10px 0px;
-moz-box-shadow: 2px 4px 4px #8a8a8a;
-webkit-box-shadow: 2px 4px 4px #8a8a8a;
box-shadow: 2px 4px 4px #8a8a8a;

 
   
}



.back {
background: rgb(238,238,238); /* Old browsers */
background: -moz-linear-gradient(top,  rgb(238,238,238) 0%, rgb(204,204,204) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(238,238,238)), color-stop(100%,rgb(204,204,204))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgb(238,238,238) 0%,rgb(204,204,204) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgb(238,238,238) 0%,rgb(204,204,204) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgb(238,238,238) 0%,rgb(204,204,204) 100%); /* IE10+ */
background: linear-gradient(top,  rgb(238,238,238) 0%,rgb(204,204,204) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */

-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border-top: 3px solid #cccccc;
border-bottom: 2px solid #cccccc;
}

.titre {
color: #eae9e9;
font-family: helvetica,serif;
margin-bottom: 10px;
padding: 1px;
font-size: 16px;

}

.lier {
color: #eae9e9;
font-family: helvetica,serif;
margin-bottom: 10px;
padding: 1px;
font-size: 16px;
text-align: center;
background-color: #eae9e9;
background-repeat: no-repeat;
background-position: center center;
font-size: 18px;
letter-spacing: 4px;
display: block;
width: 100%;
color: #717171;
}

.stat {
color: #eae9e9;
font-family: helvetica,serif;
margin-bottom: 10px;
padding: 1px;
font-size: 16px;
text-align: center;
background-color: #eae9e9;
background-repeat: no-repeat;
background-position: center center;
font-size: 18px;
letter-spacing: 4px;
display: block;
width: 100%;
color: #717171;
}

.lien a {
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgb(255,255,255) 0%, rgb(229,229,229) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(255,255,255)), color-stop(100%,rgb(229,229,229))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* IE10+ */
background: linear-gradient(top, rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
background-repeat: no-repeat;
background-position: center center;
font-size: 13px;
display: block;
width: 100%;
height: 34px;
color: #717171;
text-shadow: 1px 1px 0px #FFFFFF;
line-height: 34px;
}

.lien a:hover {
background: rgb(226,226,226); /* Old browsers */
background: -moz-linear-gradient(top, rgb(226,226,226) 0%, rgb(219,219,219) 50%, rgb(209,209,209) 51%, rgb(254,254,254) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(226,226,226)), color-stop(50%,rgb(219,219,219)), color-stop(51%,rgb(209,209,209)), color-stop(100%,rgb(254,254,254))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(226,226,226) 0%,rgb(219,219,219) 50%,rgb(209,209,209) 51%,rgb(254,254,254) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgb(226,226,226) 0%,rgb(219,219,219) 50%,rgb(209,209,209) 51%,rgb(254,254,254) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgb(226,226,226) 0%,rgb(219,219,219) 50%,rgb(209,209,209) 51%,rgb(254,254,254) 100%); /* IE10+ */
background: linear-gradient(top, rgb(226,226,226) 0%,rgb(219,219,219) 50%,rgb(209,209,209) 51%,rgb(254,254,254) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
background-repeat: no-repeat;
background-position: center center;
font-size: 13px;
display: block;
width: 100%;
height: 34px;
color: #717171;
text-shadow: 1px 1px 0px #FFFFFF;
line-height: 34px;
}


.bod {
background-color: #aaaaaa;
min-height: 58px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

.para {
display: block;
float: left;
margin-left: 10px;
margin-top: 3px;
position: absolute;
width: 260px;
height: 150px;
overflow: auto;
border: double 2px #000000;
padding: 1px;   
}

.para1 {
display: block;
position: absolute;
float: left;
margin-top: 3px;
margin-left: 280px;
width: 260px;
height: 150px;
overflow: auto;
border: double 2px #000000;
padding: 1px;   
}

.para2 {
display: block;
position: absolute;
float: left;
margin-left: 10px;
margin-top: 165px;
width: 260px;
height: 150px;
overflow: auto;
border: double 2px #000000;
padding: 1px;   
}

.para3 {
display: block;
position: absolute;
float: left;
margin-left: 280px;
margin-top: 165px;
width: 260px;
height: 150px;
overflow: auto;
border: double 2px #000000;
padding: 1px;
margin-bottom: 50px;   
}

.second {
background-color: #aaaaaa;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: 555px;
height: 330px;
margin: auto;
border: 1px dotted #000;
text-align: justify;
color: #eae9e9;
font-size: 13px;
}

.troisième {
background-color: #aaaaaa;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: 555px;
margin: auto;
border: 1px dotted #000;
text-align: center;
color: #eae9e9;
font-size: 13px;
}

.quatrième {
background-color: #aaaaaa;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: 555px;
margin: auto;
border: 1px dotted #000;
text-align: center;
color: #eae9e9;
font-size: 13px;
}

.border {
border: 1px dotted #000;
width: 555px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-left: auto;
margin-right: auto;
}

.qeel_infos {
color: #000;   
background: rgb(245,246,246); /* Old browsers */
background: -moz-linear-gradient(top, rgb(245,246,246) 0%, rgb(219,220,226) 21%, rgb(184,186,198) 49%, rgb(221,223,227) 80%, rgb(245,246,246) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(245,246,246)), color-stop(21%,rgb(219,220,226)), color-stop(49%,rgb(184,186,198)), color-stop(80%,rgb(221,223,227)), color-stop(100%,rgb(245,246,246))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(245,246,246) 0%,rgb(219,220,226) 21%,rgb(184,186,198) 49%,rgb(221,223,227) 80%,rgb(245,246,246) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgb(245,246,246) 0%,rgb(219,220,226) 21%,rgb(184,186,198) 49%,rgb(221,223,227) 80%,rgb(245,246,246) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgb(245,246,246) 0%,rgb(219,220,226) 21%,rgb(184,186,198) 49%,rgb(221,223,227) 80%,rgb(245,246,246) 100%); /* IE10+ */
background: linear-gradient(top, rgb(245,246,246) 0%,rgb(219,220,226) 21%,rgb(184,186,198) 49%,rgb(221,223,227) 80%,rgb(245,246,246) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=0 ); /* IE6-9 */
width: 500px;
padding: 10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-left: auto;
margin-right: auto;
}
   
</style>
</head>


<body>
<table width="600" border="0" cellspacing="0" cellpadding="10" class="back">
  <tr>
    <td><div class="header"></div><div class= titre-forum> Ton Forum </div></td>
  </tr>
  <tr>
    <td><div class="border">
    <div class="bod">
  <table width="100%" border="0" cellspacing="5" cellpadding="0" style="height: 58px;">
  <tr>
    <td width="83" align="center" valign="middle" class="lien"><a href="http://" target="_blank">Lien</a><td width="83" align="center" valign="middle" class="lien"><a href="http://" target="_blank">Lien</a><td width="83" align="center" valign="middle" class="lien"><a href="http://" target="_blank">Lien</a><td width="83" align="center" valign="middle" class="lien"><a href="http://" target="_blank">Lien</a><td width="83" align="center" valign="middle" class="lien"><a href="http://" target="_blank">Lien</a></td>

  </tr></table></div></div>


<div class="second">
<table width="100%" border="0" cellspacing="10">
  <tr>
    <div class="para"width="90%"valign="top"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p></div>
<div class="para1"width="90%"valign="top"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p></div>
    <div class="para2"width="90%"valign="top"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p></div>
    <div class="para3"width="90%"valign="top"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p></div>
    </tr></table></div>
     
<div class="troisième">
<table width="100%" border="0" cellspacing="10">
  <tr>
    <td class="pub" width="90%" valign="top">
  <span class="lier"> Nous lier ?</span><br><br>
    <a href="http://www.never-utopia.com/" target="_blank"><img src="http://i70.servimg.com/u/f70/09/00/56/80/miniba15.png"/></a><br><br>
    <textarea><a href="http://www.never-utopia.com/" target="_blank"><img src="http://i70.servimg.com/u/f70/09/00/56/80/miniba15.png"/></a></textarea><br><br>
   
    <a href="http://www.never-utopia.com/" target="_blank"><img src="http://img4.hostingpics.net/pics/666823logo6.jpg"/></a><br><br>
    <textarea><a href="http://www.never-utopia.com/" target="_blank"><img src="http://img4.hostingpics.net/pics/666823logo6.jpg"/></a></textarea><br><br>
   
    <a href="http://www.never-utopia.com/" target="_blank"><img src="http://img4.hostingpics.net/pics/876649logo1.jpg"/></a><br><br>
    <textarea><a href="http://www.never-utopia.com/" target="_blank"><img src="http://img4.hostingpics.net/pics/876649logo1.jpg"/></a></textarea>
    </td></tr></table></div>
   
    <div class="quatrième">
<table width="100%" border="0" cellspacing="10">
  <tr>
    <td class="stats" width="90%" valign="top">
  <span class="stat">Quelques Stats</span><br><br>
<div class="qeel_infos">Nous avons <strong><span class="FORUMCOUNTUSER">0</span></strong> utilisateurs enregistrés.<br>
Nos membres ont postés un total de <strong><span class="FORUMCOUNTPOST">0</span></strong> messages.<br>
Dernier membre à nous avoir rejoints. <strong><span class="FORUMLASTUSER">Klash</span></strong>.<br>
</div><br />Mise en page et codage par © <a href="http://www.never-utopia.com/">Never-Utopia</a></td></tr></table></div>
</body>
</html>

Klash

Fiche de Pub - Dim 24 Juin 2012 - 18:12



Bonjour à tous, je vous propose donc une fiche de pub pré remplie, ils vous suffira donc je changer ce qui vous intéresse soit dans la partie html ou bien le css pour utiliser cette fiche, il vous faut être fondateur de votre forum.  

Ce que ça donne une fois fini en direct :


En image : https://2img.net/r/hpimg11/pics/478447sans.jpg


Il va falloir crée une page Html rien de compliquer je vous rassure c'est tout simple d'abord ouvrez votre panneau d'administration puis allez dans module puis pages Html ensuite cliquez sur crée une page Html.

Puis coller le code de la fiche en entier:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Fiche pub</title>
<style type="text/css">
body {
  margin: 0px;
  }
.titre-forum
{
font-family: "palatino linotype",palatino,serif;
color: #545D5E;
margin-top: -60px;
margin-bottom: 15px;
font-size: 30px;
font-weight: bold;
text-transform: uppercase;
text-align: center;
text-shadow: 3px 3px 1px #cccccc;
filter: dropshadow(color=#cccccc, offx=3, offy=3);
}

.header {
border-bottom:ridge 1px #161616;
margin: auto;
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgb(255,255,255) 0%, rgb(229,229,229) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(255,255,255)), color-stop(100%,rgb(229,229,229))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* IE10+ */
background: linear-gradient(top, rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */

width: 560px;
height: 80px;
-moz-border-radius: 20px 20px 0px 10px / 10px 10px 10px 0px;
-webkit-border-radius: 20px 20px 0px 10px / 10px 10px 10px 0px;
-khtml-border-radius: 20px 20px 0px 10px / 10px 10px 10px 0px;
border-radius: 20px 20px 0px 10px / 10px 10px 10px 0px;
-moz-box-shadow: 2px 4px 4px #8a8a8a;
-webkit-box-shadow: 2px 4px 4px #8a8a8a;
box-shadow: 2px 4px 4px #8a8a8a; 
}


.back {
background: rgb(238,238,238); /* Old browsers */
background: -moz-linear-gradient(top,  rgb(238,238,238) 0%, rgb(204,204,204) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(238,238,238)), color-stop(100%,rgb(204,204,204))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,  rgb(238,238,238) 0%,rgb(204,204,204) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,  rgb(238,238,238) 0%,rgb(204,204,204) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top,  rgb(238,238,238) 0%,rgb(204,204,204) 100%); /* IE10+ */
background: linear-gradient(top,  rgb(238,238,238) 0%,rgb(204,204,204) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eeeeee', endColorstr='#cccccc',GradientType=0 ); /* IE6-9 */

-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
border-top: 3px solid #cccccc;
border-bottom: 2px solid #cccccc;
}

.titre {
color: #eae9e9;
font-family: helvetica,serif;
margin-bottom: 10px;
padding: 1px;
font-size: 16px;

}

.lier {
color: #eae9e9;
font-family: helvetica,serif;
margin-bottom: 10px;
padding: 1px;
font-size: 16px;
text-align: center;
background-color: #eae9e9;
background-repeat: no-repeat;
background-position: center center;
font-size: 18px;
letter-spacing: 4px;
display: block;
width: 100%;
color: #717171;
}

.stat {
color: #eae9e9;
font-family: helvetica,serif;
margin-bottom: 10px;
padding: 1px;
font-size: 16px;
text-align: center;
background-color: #eae9e9;
background-repeat: no-repeat;
background-position: center center;
font-size: 18px;
letter-spacing: 4px;
display: block;
width: 100%;
color: #717171;
}

.lien a {
background: rgb(255,255,255); /* Old browsers */
background: -moz-linear-gradient(top, rgb(255,255,255) 0%, rgb(229,229,229) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(255,255,255)), color-stop(100%,rgb(229,229,229))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* IE10+ */
background: linear-gradient(top, rgb(255,255,255) 0%,rgb(229,229,229) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#e5e5e5',GradientType=0 ); /* IE6-9 */
background-repeat: no-repeat;
background-position: center center;
font-size: 13px;
display: block;
width: 100%;
height: 34px;
color: #717171;
text-shadow: 1px 1px 0px #FFFFFF;
line-height: 34px;
}

.lien a:hover {
background: rgb(226,226,226); /* Old browsers */
background: -moz-linear-gradient(top, rgb(226,226,226) 0%, rgb(219,219,219) 50%, rgb(209,209,209) 51%, rgb(254,254,254) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(226,226,226)), color-stop(50%,rgb(219,219,219)), color-stop(51%,rgb(209,209,209)), color-stop(100%,rgb(254,254,254))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(226,226,226) 0%,rgb(219,219,219) 50%,rgb(209,209,209) 51%,rgb(254,254,254) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgb(226,226,226) 0%,rgb(219,219,219) 50%,rgb(209,209,209) 51%,rgb(254,254,254) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgb(226,226,226) 0%,rgb(219,219,219) 50%,rgb(209,209,209) 51%,rgb(254,254,254) 100%); /* IE10+ */
background: linear-gradient(top, rgb(226,226,226) 0%,rgb(219,219,219) 50%,rgb(209,209,209) 51%,rgb(254,254,254) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e2e2e2', endColorstr='#fefefe',GradientType=0 ); /* IE6-9 */
background-repeat: no-repeat;
background-position: center center;
font-size: 13px;
display: block;
width: 100%;
height: 34px;
color: #717171;
text-shadow: 1px 1px 0px #FFFFFF;
line-height: 34px;
}


.bod {
background-color: #aaaaaa;
min-height: 58px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

.para {
display: block;
float: left;
margin-left: 10px;
margin-top: 3px;
position: absolute;
width: 260px;
height: 150px;
overflow: auto;
border: double 2px #000000;
padding: 1px;
}

.para1 {
display: block;
position: absolute;
float: left;
margin-top: 3px;
margin-left: 280px;
width: 260px;
height: 150px;
overflow: auto;
border: double 2px #000000;
padding: 1px;
}

.para2 {
display: block;
position: absolute;
float: left;
margin-left: 10px;
margin-top: 165px;
width: 260px;
height: 150px;
overflow: auto;
border: double 2px #000000;
padding: 1px;
}

.para3 {
display: block;
position: absolute;
float: left;
margin-left: 280px;
margin-top: 165px;
width: 260px;
height: 150px;
overflow: auto;
border: double 2px #000000;
padding: 1px;
margin-bottom: 50px;
}

.second {
background-color: #aaaaaa;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: 555px;
height: 330px;
margin: auto;
border: 1px dotted #000;
text-align: justify;
color: #eae9e9;
font-size: 13px;
}

.troisième {
background-color: #aaaaaa;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: 555px;
margin: auto;
border: 1px dotted #000;
text-align: center;
color: #eae9e9;
font-size: 13px;
}

.quatrième {
background-color: #aaaaaa;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
width: 555px;
margin: auto;
border: 1px dotted #000;
text-align: center;
color: #eae9e9;
font-size: 13px;
}

.border {
border: 1px dotted #000;
width: 555px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-left: auto;
margin-right: auto;
}

.qeel_infos {
color: #000;
background: rgb(245,246,246); /* Old browsers */
background: -moz-linear-gradient(top, rgb(245,246,246) 0%, rgb(219,220,226) 21%, rgb(184,186,198) 49%, rgb(221,223,227) 80%, rgb(245,246,246) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgb(245,246,246)), color-stop(21%,rgb(219,220,226)), color-stop(49%,rgb(184,186,198)), color-stop(80%,rgb(221,223,227)), color-stop(100%,rgb(245,246,246))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgb(245,246,246) 0%,rgb(219,220,226) 21%,rgb(184,186,198) 49%,rgb(221,223,227) 80%,rgb(245,246,246) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgb(245,246,246) 0%,rgb(219,220,226) 21%,rgb(184,186,198) 49%,rgb(221,223,227) 80%,rgb(245,246,246) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgb(245,246,246) 0%,rgb(219,220,226) 21%,rgb(184,186,198) 49%,rgb(221,223,227) 80%,rgb(245,246,246) 100%); /* IE10+ */
background: linear-gradient(top, rgb(245,246,246) 0%,rgb(219,220,226) 21%,rgb(184,186,198) 49%,rgb(221,223,227) 80%,rgb(245,246,246) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=0 ); /* IE6-9 */
width: 500px;
padding: 10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
margin-left: auto;
margin-right: auto;
}
 
</style>
</head>


<body>
<table width="600" border="0" cellspacing="0" cellpadding="10" class="back">
  <tr>
    <td>
      <div class="header"></div>
      <div class= titre-forum> Ton Forum </div>
    </td>
  </tr>
  <tr>
    <td>
      <div class="border">
        <div class="bod">
          <table width="100%" border="0" cellspacing="5" cellpadding="0" style="height: 58px;">
            <tr>
              <td width="83" align="center" valign="middle" class="lien">
                <a href="http://" target="_blank">Lien</a>
              </td>
              <td width="83" align="center" valign="middle" class="lien">
                <a href="http://" target="_blank">Lien</a>
              </td>
              <td width="83" align="center" valign="middle" class="lien">
                <a href="http://" target="_blank">Lien</a>
              </td>
              <td width="83" align="center" valign="middle" class="lien">
                <a href="http://" target="_blank">Lien</a>
              </td>
              <td width="83" align="center" valign="middle" class="lien">
                <a href="http://" target="_blank">Lien</a>
              </td>
            </tr>
          </table>
        </div>
      </div>
      <div class="second">
        <table width="100%" border="0" cellspacing="10">
          <tr>
            <div class="para"width="90%"valign="top"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p></div>
            <div class="para1"width="90%"valign="top"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p></div>
            <div class="para2"width="90%"valign="top"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p></div>
            <div class="para3"width="90%"valign="top"><p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p></div>
          </tr>
        </table>
      </div>
      <div class="troisième">
        <table width="100%" border="0" cellspacing="10">
          <tr>
            <td class="pub" width="90%" valign="top">
              <span class="lier"> Nous lier ?</span><br /><br />
              <a href="http://www.never-utopia.com/" target="_blank"><img src="http://i70.servimg.com/u/f70/09/00/56/80/miniba15.png"/></a><br /><br />
              <textarea><a href="http://www.never-utopia.com/" target="_blank"><img src="http://i70.servimg.com/u/f70/09/00/56/80/miniba15.png"/></a></textarea><br /><br />
   
              <a href="http://www.never-utopia.com/" target="_blank"><img src="http://img4.hostingpics.net/pics/666823logo6.jpg"/></a><br /><br />
              <textarea><a href="http://www.never-utopia.com/" target="_blank"><img src="http://img4.hostingpics.net/pics/666823logo6.jpg"/></a></textarea><br /><br />
   
              <a href="http://www.never-utopia.com/" target="_blank"><img src="http://img4.hostingpics.net/pics/876649logo1.jpg"/></a><br /><br />
    <textarea><a href="http://www.never-utopia.com/" target="_blank"><img src="http://img4.hostingpics.net/pics/876649logo1.jpg"/></a></textarea>
    </td></tr></table></div>
   
    <div class="quatrième">
<table width="100%" border="0" cellspacing="10">
  <tr>
    <td class="stats" width="90%" valign="top">
      <span class="stat">Quelques Stats</span><br /><br />
      <div class="qeel_infos">Nous avons <strong><span class="FORUMCOUNTUSER">0</span></strong> utilisateurs enregistrés.<br />
        Nos membres ont postés un total de <strong><span class="FORUMCOUNTPOST">0</span></strong> messages.<br />
        Dernier membre à nous avoir rejoints. <strong><span class="FORUMLASTUSER">Klash</span></strong>.<br />
      </div><br />Mise en page et codage par © <a href="http://www.never-utopia.com/">Never-Utopia</a></td></tr></table></div></td></tr></table>
</body>
</html>


Ensuite validez et là vous aurez votre page html de créé.

Le lien vous servira pour votre fiche de pub, donc copiez le. Le lien de la pub sera à insérer comme suit :
Code:
<iframe src="votre lien de page html" style="width: 610px; height: 1175px; margin: auto; border: none;"></iframe>



Merci de laisser le crédit un petit merci aussi serait sympa, enjoy if you like it.

EDIT : Vous trouverez également d'autres modèles ici.


Revenir en haut

La date/heure actuelle est Jeu 2 Juil 2020 - 20:50