AccueilFAQRechercherMembresGroupesS'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.



12 résultats trouvés pour présentation

Shaneliae

Fiche de présentation "luxe" - Jeu 29 Déc 2016 - 16:39


Fiche de présentation "luxe"



Bonjour à tous !

Voici une petit fiche de présentation que j'ai faite il y a quelques temps pour un de mes personnages. Je vous la laisse donc ici et à vous d'en faire ce que vous voulez ♥

- Voici un aperçu !
- La fiche en direct
- La fiche fait 500px de large et sa hauteur varie en fonction du contenu
- L'image d'en-tête doit faire 500px de large et 250px de hauteur


Le HTML



Code:
<link href="https://fonts.googleapis.com/css?family=Cinzel|Cinzel+Decorative|Open+Sans" rel="stylesheet" /><div class="astree-cadre"> <div style="background: url('http://www.imgweave.com/view/9733.png') no-repeat top center; width: 500px; height: 250px;"></div><span class="astree-nom">Prénom p²<br/>Nom</span> <div class="astree-titre">Identité</div><ul> <li><span>Âge :</span> XX ans</li><li><span>Sexe :</span> Truc</li><li><span>Race :</span> Machin</li><li><span>Rôle :</span> Bidule de chez Machin Chose</li><li><span>Célébrité utilisée :</span> Emma Stone</li></ul> <div class="astree-titre">Histoire</div><span class="astree-chapitre">Chapitre 1</span> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem consectetur deleniti ducimus eligendi eos error harum impedit in ipsum laboriosam maxime odio officiis perspiciatis quidem rem, vel voluptatum. Ducimus, sequi.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem consectetur deleniti ducimus eligendi eos error harum impedit in ipsum laboriosam maxime odio officiis perspiciatis quidem rem, vel voluptatum. Ducimus, sequi.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem consectetur deleniti ducimus eligendi eos error harum impedit in ipsum laboriosam maxime odio officiis perspiciatis quidem rem, vel voluptatum. Ducimus, sequi. <a href="#">Je suis un super lien !</a></p><span class="astree-chapitre">Chapitre 2</span> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem consectetur deleniti ducimus eligendi eos error harum impedit in ipsum laboriosam maxime odio officiis perspiciatis quidem rem, vel voluptatum. Ducimus, sequi.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem consectetur deleniti ducimus eligendi eos error harum impedit in ipsum laboriosam maxime odio officiis perspiciatis quidem rem, vel voluptatum. Ducimus, sequi.</p><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem consectetur deleniti ducimus eligendi eos error harum impedit in ipsum laboriosam maxime odio officiis perspiciatis quidem rem, vel voluptatum. Ducimus, sequi.</p><div class="astree-titre">Catégorie 1</div><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem consectetur deleniti ducimus eligendi eos error harum impedit in ipsum laboriosam maxime odio officiis perspiciatis quidem rem, vel voluptatum. Ducimus, <q>Je suis un super texte mis en avant !</q> </p><div class="astree-titre">Catégorie 2</div><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem consectetur deleniti ducimus eligendi eos error harum impedit in ipsum laboriosam maxime odio officiis perspiciatis quidem rem, vel voluptatum. Ducimus, <q>Je suis un super texte mis en avant !</q> </p><div class="astree-titre">Autre</div><ul> <li><span>Lorem :</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Debitis iure minus necessitatibus saepe totam. </li><li><span>Ipsum ?</span> Lorem ipsum dolor sit amet, consectetur adipisicing elit. </li></ul> <div class="astree-credits"><a href="http://www.never-utopia.com/" target="_blank">Never Utopia | Shaneliae</a></div></div>


Le CSS


Quand vous être membre


Voici le code à ajouter en début de message, suivi du HTML :
Code:
<style>.astree-cadre{border: 2px solid #968070; background-color: #292929; max-width: 500px; margin: 20px auto; color: #ababab; font-family: 'Open Sans', sans-serif; font-size: 13px;}.astree-cadre a{color: #968070; text-decoration: none !important; -webkit-transition: all 0.1s ease; transition: all 0.1s ease;}.astree-cadre a:hover{color: #8b2f32; -webkit-transition: all 0.1s ease; transition: all 0.1s ease;}.astree-nom{display: block; text-align: center; margin: -15px auto 40px; color: #968070; font-family: 'Cinzel Decorative', serif; font-size: 45px; line-height: 25px; text-shadow: 0 0 2px #000;}.astree-titre{border-bottom: 2px solid #968070; color: #968070; text-shadow: 0 0 2px #000; padding: 5px 20px; font-family: 'Cinzel Decorative', serif; font-size: 30px; margin-top: 20px;}.astree-cadre ul{list-style: none; padding: 0 20px;}.astree-cadre li span{font-family: 'Cinzel', serif; color: #968070; font-size: 16px;}.astree-chapitre{display: inline-block; font-family: 'Cinzel', serif; font-size: 25px; color: #968070; margin: 25px; padding: 5px 15px; border-left: 5px solid #968070; text-shadow: 0 0 2px #000;}.astree-cadre p{margin: 10px 20px; text-align: justify;}.astree-cadre p > q{display: block; font-family: 'Cinzel', serif; color: #968070; font-size: 16px; line-height: 28px;}.astree-cadre p > q:before, .astree-cadre p > q:after{content: '';}.astree-credits a{display: block; text-align: center; font-family: 'Cinzel', serif; color: #968070; line-height: 40px;}</style>


Quand vous êtes administrateur


Voici le CSS à mettre dans le feuille de style CSS de votre forum :
Code:
/***** Fiche de présentation Luxe *****/

.astree-cadre {
        border: 2px solid #968070;
        background-color: #292929;
        max-width: 500px;
        margin: 20px auto;
        color: #ababab;
        font-family: 'Open Sans', sans-serif;
        font-size: 13px;
    }

    .astree-cadre a {
        color: #968070;
        text-decoration: none;
        -webkit-transition: all 0.1s ease;
        transition: all 0.1s ease;
    }
    .astree-cadre a:hover {
        color: #8b2f32;
        -webkit-transition: all 0.1s ease;
        transition: all 0.1s ease;
    }

    .astree-nom {
        display: block;
        text-align: center;
        margin: -15px auto 40px;
        color: #968070;
        font-family: 'Cinzel Decorative', serif;
        font-size: 45px;
        line-height: 25px;
        text-shadow: 0 0 2px #000;
    }

    .astree-titre {
        border-bottom: 2px solid #968070;
        color: #968070;
        text-shadow: 0 0 2px #000;
        padding: 5px 20px;
        font-family: 'Cinzel Decorative', serif;
        font-size: 30px;
        margin-top: 20px;
    }

    .astree-cadre ul {
        list-style: none;
        padding: 0 20px;
    }

    .astree-cadre li span {
        font-family: 'Cinzel', serif;
        color: #968070;
        font-size: 16px;
    }

    .astree-chapitre {
        display: inline-block;
        font-family: 'Cinzel', serif;
        font-size: 25px;
        color: #968070;
        margin: 25px;
        padding: 5px 15px;
        border-left: 5px solid #968070;
        text-shadow: 0 0 2px #000;
    }

    .astree-cadre p {
        margin: 10px 20px;
        text-align: justify;
    }

    .astree-cadre p > q {
        display: block;
        font-family: 'Cinzel', serif;
        color: #968070;
        font-size: 16px;
        line-height: 28px;
    }

    .astree-cadre p > q:before, .astree-cadre p > q:after {
        content: '';
    }

    .astree-credits a {
        display: block;
        text-align: center;
        font-family: 'Cinzel', serif;
        color: #968070;
        line-height: 40px;
    }


Il est conseillé de ne pas faire de sauts de ligne dans ce code pour obtenir le résultat attendu. Si vous avez besoin d'en faire pour question de lisibilité, je vous conseille d'éditer ce code sur un éditeur, puis de le passer sur un Minifier comme HTML Minifier avant de poster.


Merci d'avoir lu ce LS ♥

Vous avez une question ou un problème avec ce LS ? Cette section est là pour vous, je ne répondrai à aucune question par MP ou posée à la suite du sujet.

Kanae

Présentation simple et bleutée - Ven 16 Déc 2016 - 7:55



Présentation Simple et Bleutée



Coucou ! Cette fiche vous est proposée suite à la demande de Vani qui voulait une fiche toute simple et qui s'intégrait bien à son forum à dominante bleue.

Petit aperçu :
Cliquez ici


Le code vous est offert directement et sans balise < hide > mais un petit mot gentil fait toujours plaisir et une critique constructive permet toujours de s'améliorer.
N'hésitez donc pas à me faire part de vos impressions !


Intégrer la police au Templace Overall_header



Rendez-vous dans PA > Affichage > Templates > Overall_header et copier/coller le code suivant juste après la balise "head" :

Code:
<link href="https://fonts.googleapis.com/css?family=Italianno" rel="stylesheet">


N'oubliez pas de valider votre Template ou la police n'apparaîtra pas !

La police sera utilisable sur l'ensemble de votre forum.



Code du message



Voici le code à intégrer directement par le membre dans son message :

Code:
<div class="fond_presa"><div class="titre_presa">Prénom Nom</div>
<div style="text-align: center;"><img src="http://img11.hostingpics.net/pics/928930soulign.png" /></div><table style="margin: 40px 20px 0 20px;"><tr><td><div class="text_info_1"><b>IDENTITE</b>

<b>Nom :</b> Indiquez
<b>Prénom :</b> Indiquez
<b>Surnom :</b> Indiquez
<b>Âge :</b> Indiquez

<b>Archipel d'origine :</b> Indiquez

<b>Profession :</b> Indiquez
<b>Groupe :</b> Indiquez

<b>Autre :</b> Indiquez</div></td><td><img src="url de l'image" class="image_presa"></td></tr></table>

<div class="titre_presa">Descriptions</div>
<div style="text-align: center;"><img src="http://img11.hostingpics.net/pics/928930soulign.png" /></div><div class="text_info_2"><b>DESCRIPTION DU DRAGON</b>

Commencez la description</div><table style="margin: 40px 20px 0 20px;"><tr><td><div class="text_info_3"><b>DESCRIPTION PHYSIQUE</b>

Décrivez votre personnage</div></td><td><div class="text_info_4"><b>DESCRIPTION MENTALE</b>

Décrivez votre personnage</div></td></tr></table>

<div class="titre_presa">Histoire</div>
<div style="text-align: center;"><img src="http://img11.hostingpics.net/pics/928930soulign.png" /></div>

<div class="text_info_5"><b>VOTRE PASSE</b>

Histoire de votre personnage</div>
<div class="titre_presa">Et vous ?</div>
<div style="text-align: center;"><img src="http://img11.hostingpics.net/pics/928930soulign.png" /></div>

<div class="text_info_6"><b>Derrière l'écran</b>

<b>Prénom :</b> Indiquez
<b>Pseudo :</b> Indiquez
<b>Âge :</b> Indiquez

<b>Comment avez-vous connu le forum ?</b> Indiquez
<b>Quelque chose à ajouter ?</b> Indiquez</div>

<div class="credit_presa"> <a style="color: #F3F7F8;" href="http://www.never-utopia.com">© Never-Utopia</a><br /><span style="color: #C6D3DD;">Kanae</span></div>
</div>



Code du CSS du forum



Et voici le code à intégrer au CSS :

Code:
/******* FICHE DE PRESENTATION *******/
.fond_presa {
  background-image:url(http://img11.hostingpics.net/pics/522854fondimage.png);
  width: 600px;
  margin: auto;
  padding: 20px;
  }
.titre_presa {
  font-family: 'Italianno', cursive;
  text-align: center;
  font-size: 80px;
  margin-top: 60px;
  color: #FFFFFF;
  }
.text_info_1 {
  background-color: #F3F7F8;
  width: 260px;
  height: 270px;
  padding: 25px;
  color: #6F91A8;
  }
.text_info_2 {
  margin: 40px 20px 0 20px;
  background-color: #F3F7F8;
  width: 510px;
  height: 100px;
  padding: 25px;
  overflow: auto;
  color: #6F91A8;
  }
.text_info_3 {
  background-color: #F3F7F8;
  width: 206px;
  height: 263px;
  padding: 25px;
  color: #6F91A8;
  overflow: auto;
  }
.text_info_4 {
  background-color: #F3F7F8;
  width: 206px;
  height: 263px;
  padding: 25px;
  margin-left: 40px;
  color: #6F91A8;
  overflow: auto
  }
.text_info_5 {
  background-color: #F3F7F8;
  margin: 0 20px 0 20px;
  width: 510px;
  height: 270px;
  padding: 25px;
  color: #6F91A8;
  overflow: auto;
  }
.text_info_6 {
  background-color: #F3F7F8;
  margin: 0 20px 0 20px;
  width: 510px;
  height: 150px;
  padding: 25px;
  color: #6F91A8;
  overflow: auto;
  }
.image_presa {
  margin-left: 40px;
  width: 200px;
  height: 320px;
  border: 1px #E6EEF0;
  }
.credit_presa {
  text-align: center;
  margin: -30px 20px -30px 0;
  font-size: 10px;
  line-height: 12px;
  }
/******* FIN FICHE DE PRESENTATION *******/


Et voilà, le tour est joué !

Fiche de Présentation à 2 Onglets, Simple mais Efficace ! - Ven 11 Nov 2016 - 4:42



Bonjour !

Aujourd'hui je vous présente mon premier code ! C'est une petite fiche avec divers transitions pour rajouter des effets stylés.

Vous trouverez une fiche en deux onglets en hover, lorsque votre souris est sur les onglets le contenu apparait !

Bon je vous laisse avec l'aperçu !
Aperçu:
Nom du Personnage
RPG
IRL
TEXTE 1
TEXTE 2
TEXTE 3
TEXTE 4
Texte 5
Onyx, Nin, Prae, Élu et Chroma
TEXTE 1
TEXTE 2
TEXTE 3
Onyx, Prae, Nin, Élu et Chroma


Voici le code !

À mettre dans le CSS :
Code:
.Encadrement{
  margin: auto;
  width: 806px;
  background-image: url('');
  position: relative;
  border-radius : 5px;
  border: solid 4px black;
  z-index: 1;
  transition-property: height;
  transition-duration: 0.5s;
  -webkit-transition-property: height;
  -webkit-transition-duration: 0.5s;
  position: relative;
}
.prez_title {
    width: 400px;
    height: 140px;
    line-height: 140px;
    vertical-align: middle;
    text-decoration: none;
    text-align: center;
    color: black;
    font-weight: lighter;
    font-family: 'Times';
    color: black;
    margin: 0;
    padding: 0;
    text-align: center;
    font-size: 30px;
}
.info_rpg,
.info_irl {
    width: 806px;
    overflow: hidden;
    max-height: 0px;
    transition: 1s;
    -webkit-transition: 1s;
    }
.RPG:hover ~ .info_rpg,
.info_rpg:hover,
.IRL:hover ~ .info_irl,
.info_irl:hover {
    max-height: 1220px;
}
.prez_section {
    background-color: #d2d2d2;
    margin: auto;
    margin-top: 10px;
    border: solid 2px;
    font-size: 18px;
    overflow: auto;
}

.RPG {
  width: 401px;
  height: 140px;
  float: left;
  opacity: 1;
  font-size: 30px;
  border-bottom: solid 2px;
  border-right: solid 2px;
  background: url('https://i97.servimg.com/u/f97/19/32/17/74/bloggi10.jpg');
}

.RPG:hover {
  background : #d2d2d2;
}

.IRL{
  width: 403px;
  height: 140px;
  float: left;
  font-size: 30px;
  opacity: 1;
  border-bottom: solid 2px;
  background-image: url('http://p3.storage.canalblog.com/38/40/284584/88026921_o.jpg');
  text-align: center;
}

.IRL:hover{
  background: #d2d2d2;
}

.Credit{
margin-top: 15px;
font-size: 8px;
text-align: right;
padding-right: 5px;
padding-bottom: 5px;
}

.NomPersonnage{
margin: auto;
width: 805px;
text-align: center;
font-size: 40px;
position: relative;
z-index: 26;
color: #191970;
font-family: 'Slabo 27px', serif;
transition-property: letter-spacing;
transition-duration: 1s;
}

.NomPersonnage:hover{
letter-spacing: 3px; 
}


Partie html à poster dans les messages :
Code:
<link href="https://fonts.googleapis.com/css?family=Slabo+27px" rel="stylesheet" /><div class="NomPersonnage"><i>NOM DU PERSONNAGE</i></div><div class="Encadrement"><div class="RPG"><div class="prez_title">RPG</div></div><div class="IRL"><div class="prez_title">IRL</div></div><div  style="clear: both;"></div><div class="info_rpg"><div style="margin-bottom: 15px;"></div><div class="prez_section" style="height: 300px; width: 780px;">TEXTE 1</div><div class="prez_section" style="height: 300px; width: 500px; float: left; margin-left: 10px;">TEXTE 2</div><div class="prez_section" style="height: 300px; width: 268px; float: left; margin-left: 10px;">TEXTE 3</div><div style="clear: both; margin-bottom: 10px;"></div><div class="prez_section" style="height: 180px; width: 780px;">TEXTE 4</div><div class="prez_section" style="height: 190px; width: 780px;">TEXTE 5</div><div class="Credit">Onyx, Nin, Prae, Élu et Chroma</div></div><div class="info_irl"><div style="margin-bottom: 15px;"></div><div class="prez_section" style="height: 550px; width: 780px;">TEXTE 1</div><div class="prez_section" style="height: 300px; width: 780px;">TEXTE 2</div><div class="prez_section" style="height: 130px; width: 780px;">TEXTE 3</div><div class="Credit"><a href="http://www.never-utopia.com/">Onyx, Prae</a>, Nin, Élu et Chroma</div></div></div>

Fiche de présentation moderne noire et blanche [HTML] - Ven 19 Aoû 2016 - 15:15



Bonjour, je viens vous présenter ceci : :)


Pseudo

Prénom :
Age :
Sexe :
Situation familiale :
Signes distinctifs :
Groupe :
Classe :
Armes :


Caractère

Raptim igitur properantes ut motus sui rumores celeritate nimia praevenirent, vigore corporum ac levitate confisi per flexuosas semitas ad summitates collium tardius evadebant. et cum superatis difficultatibus arduis ad supercilia venissent fluvii Melanis alti et verticosi, qui pro muro tuetur accolas circumfusus, augente nocte adulta terrorem quievere paulisper lucem opperientes. arbitrabantur enim nullo inpediente transgressi inopino adcursu adposita quaeque vastare, sed in cassum labores pertulere gravissimos.

Mensarum enim voragines et varias voluptatum inlecebras, ne longius progrediar, praetermitto illuc transiturus quod quidam per ampla spatia urbis subversasque silices sine periculi metu properantes equos velut publicos signatis quod dicitur calceis agitant, familiarium agmina tamquam praedatorios globos post terga trahentes ne Sannione quidem, ut ait comicus, domi relicto. quos imitatae matronae complures opertis capitibus et basternis per latera civitatis cuncta discurrunt.

Procedente igitur mox tempore cum adventicium nihil inveniretur, relicta ora maritima in Lycaoniam adnexam Isauriae se contulerunt ibique densis intersaepientes itinera praetenturis provincialium et viatorum opibus pascebantur.

Histoire

Raptim igitur properantes ut motus sui rumores celeritate nimia praevenirent, vigore corporum ac levitate confisi per flexuosas semitas ad summitates collium tardius evadebant. et cum superatis difficultatibus arduis ad supercilia venissent fluvii Melanis alti et verticosi, qui pro muro tuetur accolas circumfusus, augente nocte adulta terrorem quievere paulisper lucem opperientes. arbitrabantur enim nullo inpediente transgressi inopino adcursu adposita quaeque vastare, sed in cassum labores pertulere gravissimos.

Mensarum enim voragines et varias voluptatum inlecebras, ne longius progrediar, praetermitto illuc transiturus quod quidam per ampla spatia urbis subversasque silices sine periculi metu properantes equos velut publicos signatis quod dicitur calceis agitant, familiarium agmina tamquam praedatorios globos post terga trahentes ne Sannione quidem, ut ait comicus, domi relicto. quos imitatae matronae complures opertis capitibus et basternis per latera civitatis cuncta discurrunt.

Procedente igitur mox tempore cum adventicium nihil inveniretur, relicta ora maritima in Lycaoniam adnexam Isauriae se contulerunt ibique densis intersaepientes itinera praetenturis provincialium et viatorum opibus pascebantur.

Merwyn sur NU


L'image est en 200x320 redimensionnée automatiquement. Merci de ne pas retirer le crédit ! Un simple merci dévoilera le code ~

Code:
<link href='http://fonts.googleapis.com/css?family=Fredericka+the+Great' rel='stylesheet' type='text/css' /><style> .prez { margin:auto; width: 500px; background-image:url(http://iwallpapers2.free.fr/images/Photographie/Black_Collection/Bois_sombre_Texture_1920x1080.jpg); height:650px; border-top-left-radius: 100px; border-bottom-right-radius:100px;box-shadow: 5px 0px 5px 5px rgba(0,0,0,0.5);} .titreprez { text-align:center; color:white; text-shadow: 0px 1px lightgrey; font-family: 'Fredericka the Great'; font-size:35px; margin-top:-10px; } .zioum { -webkit-transition: 0.5s; transition: 0.5s;margin-right:-400px; width:150px; height:220px; -webkit-transform:rotate(-05deg); transform:rotate(-05deg); opacity:0.8; } .zioum:hover { -webkit-transform:rotate(05deg); transform:rotate (05deg); opacity:1; } .infos { overflow:auto; display: inline-block; float: right; width:300px; height: 200px; background-color: #282929; color: white; padding:10px; margin-right:10px;} .texteprez { width: 450px; margin:auto; height: 100px; background-color: #282929; color: white; padding:10px; overflow:auto; text-align:justify; margin-top:10px; }</style>

<div class="prez"><div class="titreprez">Pseudo</div>
<img src="http://img11.hostingpics.net/pics/9132735AvrilLavigne.jpg" class="zioum" /><div class="infos">Prénom :
Age :
Sexe :
Situation familiale :
Signes distinctifs :
Groupe :
Classe :
Armes :</div><br />
<div class="titreprez">Caractère</div>
<div class="texteprez">Raptim igitur properantes ut motus sui rumores celeritate nimia praevenirent, vigore corporum ac levitate confisi per flexuosas semitas ad summitates collium tardius evadebant. et cum superatis difficultatibus arduis ad supercilia venissent fluvii Melanis alti et verticosi, qui pro muro tuetur accolas circumfusus, augente nocte adulta terrorem quievere paulisper lucem opperientes. arbitrabantur enim nullo inpediente transgressi inopino adcursu adposita quaeque vastare, sed in cassum labores pertulere gravissimos.

Mensarum enim voragines et varias voluptatum inlecebras, ne longius progrediar, praetermitto illuc transiturus quod quidam per ampla spatia urbis subversasque silices sine periculi metu properantes equos velut publicos signatis quod dicitur calceis agitant, familiarium agmina tamquam praedatorios globos post terga trahentes ne Sannione quidem, ut ait comicus, domi relicto. quos imitatae matronae complures opertis capitibus et basternis per latera civitatis cuncta discurrunt.

Procedente igitur mox tempore cum adventicium nihil inveniretur, relicta ora maritima in Lycaoniam adnexam Isauriae se contulerunt ibique densis intersaepientes itinera praetenturis provincialium et viatorum opibus pascebantur.
</div>
<div class="titreprez" style="margin-bottom:-10px;">Histoire</div>
<div class="texteprez">Raptim igitur properantes ut motus sui rumores celeritate nimia praevenirent, vigore corporum ac levitate confisi per flexuosas semitas ad summitates collium tardius evadebant. et cum superatis difficultatibus arduis ad supercilia venissent fluvii Melanis alti et verticosi, qui pro muro tuetur accolas circumfusus, augente nocte adulta terrorem quievere paulisper lucem opperientes. arbitrabantur enim nullo inpediente transgressi inopino adcursu adposita quaeque vastare, sed in cassum labores pertulere gravissimos.

Mensarum enim voragines et varias voluptatum inlecebras, ne longius progrediar, praetermitto illuc transiturus quod quidam per ampla spatia urbis subversasque silices sine periculi metu properantes equos velut publicos signatis quod dicitur calceis agitant, familiarium agmina tamquam praedatorios globos post terga trahentes ne Sannione quidem, ut ait comicus, domi relicto. quos imitatae matronae complures opertis capitibus et basternis per latera civitatis cuncta discurrunt.

Procedente igitur mox tempore cum adventicium nihil inveniretur, relicta ora maritima in Lycaoniam adnexam Isauriae se contulerunt ibique densis intersaepientes itinera praetenturis provincialium et viatorum opibus pascebantur.
</div></div>
<div style="margin:auto; width:100px; text-align:center; color: lightgrey;text-shadow: 1px 1px black; font-size: 08px; margin-top:-20px;">Merwyn sur <a Href="http://www.never-utopia.com">NU</a></div>

Fiche de présentation printanière [HTML] - Mer 10 Aoû 2016 - 15:05



Bonjour  Very Happy

Je viens vous présenter ceci :


Fiche de présentation



TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE
__________________________________________________

TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE

Codage de Never-Utopia


Code:
<div style="margin: auto; text-align: center; color: #808080; background-image: url(http://image.noelshack.com/fichiers/2015/49/1448988826-beige-rose.jpg); border: 3px solid #B8B9A0; width:400px; height:500px; font-family: 'Centaur'; font-size: 14px;">
<div style="font-family:'Matura MT Script Capitals'; color:#B1AF9C; letter-spacing: 2px; font-size:22px; text-shadow: 1px 1px #9A9F82;">Fiche de présentation</div><br /><br /><br /><div style="width:380px; height:485px;"><img src="http://www.printermania.com/images/100x100.gif" style="float: left; margin-left: 10px; padding:5px; border-radius:10px; height:100px; width:100px" /><div style="float: right; width:200px; height:200px; overflow:auto; margin-right: 10px; text-align:center;">TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE </div><div style="clear: both;text_align: center;">__________________________________________________</div><div style="text-align:center;"><div style="height:140px; overflow:auto;"><br>TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE TEXTE</div>
<a href="http://www.never-utopia.com/">Codage de Never-Utopia</a></div></div></div>

Enelia

Fiche de présentation Sombre - Ven 22 Juil 2016 - 20:06



Bon voilà, j'avais crée ça pour un ami, mais au final son forum ne s'est pas fait alors je propose ça ici ^^

Voici le rendu de la fiche : www



Ici c'est la partie que le joueur devra remplir

Code:
<div class="cadre">
 <div class="titre">Nom Prénom</div>
 <br />
 <div class="image"><img src="http://img15.hostingpics.net/pics/454841500250.jpg" /></div>
 <br />
 <table><tr><td>
<div class="gene">Généralité âge</div></td><td><table><tr><td><div class="faction"><img src="http://img15.hostingpics.net/pics/252028Reptile.jpg" /></div></td></tr><tr><td><div class="arme">Armes :</div>
</td></tr></table></td></tr></table>
 <div class="titrecat">Pouvoir</div>
 <br />
 <div class="texte">Novitates autem si spem adferunt, ut tamquam in herbis non fallacibus fructus appareat, non sunt illae quidem repudiandae, vetustas tamen suo loco conservanda; maxima est enim vis vetustatis et consuetudinis. Quin in ipso equo, cuius modo feci mentionem, si nulla res impediat, nemo est, quin eo, quo consuevit, libentius utatur quam intractato et novo. Nec vero in hoc quod est animal, sed in iis etiam quae sunt inanima, consuetudo valet, cum locis ipsis delectemur, montuosis etiam et silvestribus, in quibus diutius commorati sumus.

Haec dum oriens diu perferret, caeli reserato tepore Constantius consulatu suo septies et Caesaris ter egressus Arelate Valentiam petit, in Gundomadum et Vadomarium fratres Alamannorum reges arma moturus, quorum crebris excursibus vastabantur confines limitibus terrae Gallorum.

Ut enim quisque sibi plurimum confidit et ut quisque maxime virtute et sapientia sic munitus est, ut nullo egeat suaque omnia in se ipso posita iudicet, ita in amicitiis expetendis colendisque maxime excellit. Quid enim? Africanus indigens mei? Minime hercule! ac ne ego quidem illius; sed ego admiratione quadam virtutis eius, ille vicissim opinione fortasse non nulla, quam de meis moribus habebat, me dilexit; auxit benevolentiam consuetudo. Sed quamquam utilitates multae et magnae consecutae sunt, non sunt tamen ab earum spe causae diligendi profectae.</div>
 <br />
 <div class="titrecat">Description physique</div>
 <br />
 <div class="texte">Novitates autem si spem adferunt, ut tamquam in herbis non fallacibus fructus appareat, non sunt illae quidem repudiandae, vetustas tamen suo loco conservanda; maxima est enim vis vetustatis et consuetudinis. Quin in ipso equo, cuius modo feci mentionem, si nulla res impediat, nemo est, quin eo, quo consuevit, libentius utatur quam intractato et novo. Nec vero in hoc quod est animal, sed in iis etiam quae sunt inanima, consuetudo valet, cum locis ipsis delectemur, montuosis etiam et silvestribus, in quibus diutius commorati sumus.

Haec dum oriens diu perferret, caeli reserato tepore Constantius consulatu suo septies et Caesaris ter egressus Arelate Valentiam petit, in Gundomadum et Vadomarium fratres Alamannorum reges arma moturus, quorum crebris excursibus vastabantur confines limitibus terrae Gallorum.

Ut enim quisque sibi plurimum confidit et ut quisque maxime virtute et sapientia sic munitus est, ut nullo egeat suaque omnia in se ipso posita iudicet, ita in amicitiis expetendis colendisque maxime excellit. Quid enim? Africanus indigens mei? Minime hercule! ac ne ego quidem illius; sed ego admiratione quadam virtutis eius, ille vicissim opinione fortasse non nulla, quam de meis moribus habebat, me dilexit; auxit benevolentiam consuetudo. Sed quamquam utilitates multae et magnae consecutae sunt, non sunt tamen ab earum spe causae diligendi profectae.</div>
 <br />
 <div class="titrecat">Description mentale</div>
 <br />
 <div class="texte">Novitates autem si spem adferunt, ut tamquam in herbis non fallacibus fructus appareat, non sunt illae quidem repudiandae, vetustas tamen suo loco conservanda; maxima est enim vis vetustatis et consuetudinis. Quin in ipso equo, cuius modo feci mentionem, si nulla res impediat, nemo est, quin eo, quo consuevit, libentius utatur quam intractato et novo. Nec vero in hoc quod est animal, sed in iis etiam quae sunt inanima, consuetudo valet, cum locis ipsis delectemur, montuosis etiam et silvestribus, in quibus diutius commorati sumus.

Haec dum oriens diu perferret, caeli reserato tepore Constantius consulatu suo septies et Caesaris ter egressus Arelate Valentiam petit, in Gundomadum et Vadomarium fratres Alamannorum reges arma moturus, quorum crebris excursibus vastabantur confines limitibus terrae Gallorum.

Ut enim quisque sibi plurimum confidit et ut quisque maxime virtute et sapientia sic munitus est, ut nullo egeat suaque omnia in se ipso posita iudicet, ita in amicitiis expetendis colendisque maxime excellit. Quid enim? Africanus indigens mei? Minime hercule! ac ne ego quidem illius; sed ego admiratione quadam virtutis eius, ille vicissim opinione fortasse non nulla, quam de meis moribus habebat, me dilexit; auxit benevolentiam consuetudo. Sed quamquam utilitates multae et magnae consecutae sunt, non sunt tamen ab earum spe causae diligendi profectae.</div>
 <br />
 <div class="titrecat">Histoire</div>
 <br />
 <div class="texteh">Novitates autem si spem adferunt, ut tamquam in herbis non fallacibus fructus appareat, non sunt illae quidem repudiandae, vetustas tamen suo loco conservanda; maxima est enim vis vetustatis et consuetudinis. Quin in ipso equo, cuius modo feci mentionem, si nulla res impediat, nemo est, quin eo, quo consuevit, libentius utatur quam intractato et novo. Nec vero in hoc quod est animal, sed in iis etiam quae sunt inanima, consuetudo valet, cum locis ipsis delectemur, montuosis etiam et silvestribus, in quibus diutius commorati sumus.

Haec dum oriens diu perferret, caeli reserato tepore Constantius consulatu suo septies et Caesaris ter egressus Arelate Valentiam petit, in Gundomadum et Vadomarium fratres Alamannorum reges arma moturus, quorum crebris excursibus vastabantur confines limitibus terrae Gallorum.

Ut enim quisque sibi plurimum confidit et ut quisque maxime virtute et sapientia sic munitus est, ut nullo egeat suaque omnia in se ipso posita iudicet, ita in amicitiis expetendis colendisque maxime excellit. Quid enim? Africanus indigens mei? Minime hercule! ac ne ego quidem illius; sed ego admiratione quadam virtutis eius, ille vicissim opinione fortasse non nulla, quam de meis moribus habebat, me dilexit; auxit benevolentiam consuetudo. Sed quamquam utilitates multae et magnae consecutae sunt, non sunt tamen ab earum spe causae diligendi profectae.</div>
 <br />
<div style="text-align: center; color: white;">c AngelsMari sur <a href="http://www.never-utopia.com/">Never Utopia</a></div>
</div>



Ici c'est le CSS a mettre dans le panneau administration, mais vous pouvez tout simplement ajouter des balises pour l'utiliser sans être admin

Code:
.cadre{
 background-image: url('http://img15.hostingpics.net/pics/569791test.jpg');
 width: 500px;
 text-align: justify;
 color: white;
}

.titre{
 font-family: 'Comic Sans MS';
 font-size: 40px;
 text-shadow: #DF3A01 1px 5px;
 color: #D7DF04;
 text-align: center;
}

.image{
 height: 250px;
 width: 500px;
}


.gene{
 height: 250px;
 width: 120px;
 font-size: 12px;
 color: white;
}

.faction{
 height: 124px;
 width: 370px;
}

.arme{
 height: 124px;
 width: 370px;
 color: white;
}
.titrecat{
 font-family: 'Comic Sans MS';
 font-size: 25px;
 text-shadow: #B43104 1px 5px;
 color: #A48904;
 text-align: center;
}
 
.texte{
 width: 480px;
 overflow: auto;
 height: 125px;
 margin-left: 10px;
}
.texteh{
 width: 480px;
 overflow: auto;
 height: 160px;
 margin-left: 10px;
}


Pour changer la partie avec l'image reptilien c'est ici :

Vous avez juste à enlever la balise de l'image dans cette partie du code
Code:
<div class="faction"><img src="http://img15.hostingpics.net/pics/252028Reptile.jpg" /></div>

Fiche de présentation bleutée tout en rondeur. - Mer 20 Juil 2016 - 18:54



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

Pour me "reposer" la tête quand je ne souhaite pas plancher sur mon univers, je graphe et je code. Et là j'ai eu l'envie et l'inspiration pour coder la nouvelle fiche de présentation que j'userais. Et comme j'en suis fier, je viens la partager avec vous. :)

Html&CSS ▬ PhpBB 2
Voici un aperçus de la fiche : Fiche de présentation. (screen).

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



   
Merci de ne pas retirer l'indication pour trouver ce LS en bas de la fiche, qui fait aussi office de "crédit" :)


Le Code HTML de la fiche:
Code:
<div class="bfichepresentation">
<div class="btitrepresentation">Prénom(s)&Nom(s) du personnage.</div>
<table style="margin:auto;">
<tr><td><div style="display:block;width:200px;height:350px;font-size:11px;overflow:auto;margin:auto;color:#000523;padding:2px;text-align:left"><img src="http://img15.hostingpics.net/pics/958473avatarpnj.png" /></div></td><td><div style="display:block;width:350px;height:350px;font-size:11px;overflow:auto;margin:auto;padding:2px;text-align:left">
<span style="font-weight:700;font-size:25px;font-family:'Times New Roman';color:#80afcc;padding-left:5px;">Informations générales</span>
<b>- Race :</b>
<b>- Peuple :</b> (Merrow et Lamia uniquement.)
<b>- Sexe :</b>
<b>- Âge actuel :</b>
<b>- Date&Lieu de naissance :</b>

<b>- Lieu de résidence actuelle :</b>
<b>- Classe Social :</b> (Citoyen, Noble ou Hors-la-loi.)
<b>- Métier :</b>
<b>- Magie :</b>
<b>- Liste des sorts/techniques connus :</b> (Listez les techniques de combat et les sorts que votre personnage connais. Vous pouvez tout inventer, cependant le Staff se réserve le droit de refuser ou demander des modifications s'ils jugent les techniques trop puissantes.)</div></td></tr></table>
<div class="btitrepresentation">Physique :</div>
<table style="margin:auto;">
<tr><td><span style="font-weight:700;font-size:20px;font-family:'Times New Roman';color:#80afcc;padding-left:5px">Description de la queue :</span> <div style="display:block;width:245px;height:150px;font-size:11px;overflow:auto;margin:auto;color:#DEDEDE;padding:2px;text-align:justify;background: #346c82;border-radius: 10px;">REDIGER ICI.</div></td><td><span style="font-weight:700;font-size:20px;font-family:'Times New Roman';color:#80afcc;padding-left:5px">Description du torse :</span><div style="display:block;width:245px;height:150px;font-size:11px;overflow:auto;margin:auto;color:#DEDEDE;padding:2px;text-align:justify;background: #346c82;border-radius: 10px;">REDIGER ICI.</div></td></tr></table><br />
<div class="btitrepresentation">Caractère/Mental :</div>
<div style="display:block;font-size:11px;color:#DEDEDE;padding: 5px;text-align:justify;width: 540px;">Et est admodum mirum videre plebem innumeram mentibus ardore quodam infuso cum dimicationum curulium eventu pendentem. haec similiaque memorabile nihil vel serium agi Romae permittunt. ergo redeundum ad textum.
Quod cum ita sit, paucae domus studiorum seriis cultibus antea celebratae nunc ludibriis ignaviae torpentis exundant, vocali sonu, perflabili tinnitu fidium resultantes. denique pro philosopho cantor et in locum oratoris doctor artium ludicrarum accitur et bybliothecis sepulcrorum ritu in perpetuum clausis organa fabricantur hydraulica, et lyrae ad speciem carpentorum ingentes tibiaeque et histrionici gestus instrumenta non levia.</div><br />
<div class="btitrepresentation">Biographie.</div>
<div style="display:block;font-size:11px;color:#DEDEDE;padding: 5px;text-align:justify;width: 540px;">Et est admodum mirum videre plebem innumeram mentibus ardore quodam infuso cum dimicationum curulium eventu pendentem. haec similiaque memorabile nihil vel serium agi Romae permittunt. ergo redeundum ad textum.
Quod cum ita sit, paucae domus studiorum seriis cultibus antea celebratae nunc ludibriis ignaviae torpentis exundant, vocali sonu, perflabili tinnitu fidium resultantes. denique pro philosopho cantor et in locum oratoris doctor artium ludicrarum accitur et bybliothecis sepulcrorum ritu in perpetuum clausis organa fabricantur hydraulica, et lyrae ad speciem carpentorum ingentes tibiaeque et histrionici gestus instrumenta non levia.</div><br />
<div class="btitrepresentation">Informations complémentaires :</div>
<div style="display:block;font-size:11px;color:#DEDEDE;padding: 5px;text-align:justify;width: 540px;"><b>- Situation maritale :</b> ( Célibataire, Marié, Veuf/Veuve.)
<b>- Orientation Sexuelle :</b> (Hétérosexuel / Bisexuel / Homosexuel / Pansexuel / Asexuelle / Altersexuelle / etc.)

<b>- Son inventaire de départ :</b> (lister les objets que possède votre personnage. Le Staff s’octroie le droit de vous refuser certains objets s’ils sont jugé trop puissant.)

<b>- En cas de départ, que souhaitez vous pour votre personnage :</b> (dite nous ce que vous voulez que nous en fassions. Le mettre en prédéfini, en PNJ, le faire considérer disparu ou mort ? Cela pour que ces liens puissent à leur tour prendre en considération le statut de votre personnage.)</div>

<div style="font-size:10px;text-align:center;">Codage en libre-service sur <a target="_blank" href="http://www.never-utopia.com/">Never-Utopia</a>.</div></div>


Le Code CSS de la fiche:
Code:
/** Fiche de présentation **/
.bfichepresentation {
  margin: auto;
width: 550px;
background: #0c324f;
border-top: 5px solid #80afcc;
border-bottom: 5px solid #80afcc;
text-align: justify;
font-size: 12px;
color: #DEDEDE;
 border-radius : 20px;}

.btitrepresentation {
width: 540px;
height: 20px;
background: #80afcc;
text-align: center;
font-size: 25px;
color: #346c82;
padding: 5px; }  
/** Fin Fiche de Présentation **/

Onyx

Formulaire de présentation - Sam 2 Juil 2016 - 5:49




Formulaire de présentation


Salut !

Fournir une fiche de présentation aux membres pour qu'ils puissent poster une belle présentation est une excellente idée. Sauf que parfois, certains membres ont de la difficulté à remplir la fiche de présentation parce qu'ils ont de la difficulté avec le codage.

Du coup, ce formulaire permettra à vos membres de simplement remplir les champs du formulaire et les entrées se mettront automatiquement au bon endroit dans une fiche. Pas mal, n'est-ce pas ?

Pour voir l'aperçu du formulaire de présentation en direct : cliquez ici.
Pour voir l'aperçu du formulaire de présentation en image : cliquez ici.
Pour voir l'aperçu de la fiche de présentation en image : cliquez ici.


Attention :
Évidemment, vous aurez probablement plus de champs à faire remplir que moi ou peut-être s'appelleront-ils différemment. Du coup, vous voudrez sans doute personnaliser votre code. Pour savoir comment faire, je vous envoie sur ce tutoriel afin de comprendre les formulaires et les différentes étapes (la construction des champs et la récupération des données du formulaire).


Ce LS est en quatre parties.
  • Tout d'abord, nous allons créer le formulaire dans une page HTML.
  • Ensuite, nous allons activer l'autorisation de recevoir des formulaires externes pour que le formulaire fonctionne.
  • Puis, nous allons ajouter le CSS pour la fiche de présentation.
  • Enfin, nous allons ajouter une iframe pour que les membres puissent remplir le formulaire.


Laisser les crédits vers Never-Utopia est obligatoire.


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



1. Créer le formulaire (Page HTML)


Pour commencer, nous allons créer une page HTML dans laquelle nous allons mettre le code de notre formulaire.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > MODULES
> > > HTML & JAVASCRIPT
> > > > GESTION DES PAGES HTML

Ensuite, on clique sur le bouton vert "Création en mode avancé (HTML)".
On choisit un titre quelconque, comme "Formulaire de présentation".
On coche "Non" aux questions "Voulez-vous utiliser le haut et le bas de page de votre forum ?" et "Utiliser cette page en tant que page d'accueil ?".

Enfin, on met le code suivant et on enregistre :
Code:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <base target="_blank" />
    <meta name="author" content="Onyx" />
    <title>Formulaire de Présentation</title>
    <style type="text/css">
      /*Corps*/
      body {
      margin: 0px;
      color: #757575;
      font-family: 'Verdana';
      font-size: 13px;
      }
      /*Formulaire*/
      #monId {
      background-color: #dfdfdf;
      box-shadow: inset 0px 0px 15px #656565;
      margin: auto;
      border-radius: 10px;
      width: 500px;
      padding: 15px;
      }
      /*Titres*/
      h1, h2, h3 {
      color: #757575;
      text-align: center;
      font-family: 'Monotype Corsiva', cursive;
      font-size: 32px;
      font-weight: normal;
      }
      /*Petit titre*/
      h2 {
      font-size: 24px;
      }
      /*Champs text, number, password, textarea et select*/
      input[type="text"], input[type="number"], input[type="password"], textarea, select {
      display: inline-bloc;
      width: 97%;
      margin-top: 3px;
      background-color: #efefef;
      color: #858585;
      padding: 5px;
      border: none;
      border-radius: 5px;
      box-shadow: inset 2px 2px 2px #bfbfbf, inset -2px -2px 1px #bfbfbf;
      font-size: 13px;
      font-family: 'Arial';
      }
      /*Champs radio*/
      input[type="radio"] {
      display: inline-bloc;
      margin-top: 3px;
      vertical-align: bottom;
      }
      /*Champs submit et reset*/
      input[type="submit"], input[type="reset"] {
      margin-top: 10px;
      text-align: center;
      display: inline-block;
      font-weight: bold;
      background-color: #fdfdfd;
      border: 1px solid #c4c4c4;
      color: #757575;
      padding: 8px;
      padding-top: 8px;
      padding-bottom: 8px;
      border-radius: 5px;
      box-shadow: 2px 2px 2px #747474, inset 0px 0px 15px #a3a3a3;
      }
      /*Champs submit et reset au survol*/
      input[type="submit"]:hover, input[type="reset"]:hover {
      cursor: pointer;
      background-color: #ffffff;
      box-shadow: 4px 4px 4px #747474, inset 0px 0px 15px #a3a3a3;
      color: #656565;
      }
      /*Champs reset et prévisualiser*/
      input[type="reset"], input[name="preview"] {
      margin-top: 0px;
      margin-right: 10px;
      font-weight: normal;
      }
      /*Champs textarea*/
      textarea {
      min-width: 97%;
      max-width: 97%;
      min-height: 100px;
      }
      /*Astérisques rouges*/
      .redd {
      color: red;
      }
      /*Crédits*/
      .credits {
      margin: 10px auto -10px auto;
      font-size: 11px;
      text-align: center;
      }
      .credits a {
      color: darkgreen;
      text-decoration: none;
      }
      .credits a:hover {
      color: blue;
      }
    </style>
    <script type="text/javascript">
    //<!--
      /*Fonction pour créer le message*/
      function creationMessage(NomForm) {   
           
        /* On met le titre dans le champ "titre" */
        NomForm.titre.value =
          "Présentation de " + NomForm.prenom.value + " " + NomForm.nom.value;

        /* On met le message dans le champ "message" */
        NomForm.message.value =
          "<link href='https://fonts.googleapis.com/css?family=Lobster|Pacifico|Dancing+Script' rel='stylesheet' type='text/css' />" +
          "<div class='prez'>" +
          "<img src='" + NomForm.urlimghaut.value + "' class='prez_haut' />" +
          "<div class='prez_nom'>" + NomForm.prenom.value + " " + NomForm.nom.value + "</div>" +
          "<div class='prez_citation'>« " + NomForm.citation.value + " »</div>" +
          "<div class='prez_bloc'>" +
          "<img src='" + NomForm.urlimgava.value + "' class='prez_ava' />" +
          "<div class='prez_right'>" +
          "<span class='prez_champ'>Prénom :</span> " + NomForm.prenom.value + "<br />" +
          "<span class='prez_champ'>Nom :</span> " + NomForm.nom.value + "<br />" +
          "<span class='prez_champ'>Surnom :</span> " + NomForm.surnom.value + "<br />" +
          "<span class='prez_champ'>Âge :</span> " + NomForm.age.value + "<br />" +
          "<span class='prez_champ'>Groupe :</span> " + NomForm.group.value + "<br />" +
          "<span class='prez_champ'>Pouvoir :</span> " + NomForm.pouvoir.value + "<br />" +
          "<span class='prez_champ'>Aime :</span> " + NomForm.aime.value + "<br />" +
          "<span class='prez_champ'>Déteste :</span> " + NomForm.deteste.value + "<br />" + "</div><div style='clear: both;'></div></div><div class='prez_title'>" +
          "Description physique</div><div class='prez_bloc'>" + NomForm.descphy.value + "</div><div class='prez_title'>" +
          "Description psycologique</div><div class='prez_bloc'>" + NomForm.descpsy.value + "</div><div class='prez_title'>" +
          "Histoire</div><div class='prez_bloc'>" + NomForm.hist.value + "</div><div class='prez_title'>" +
          "Informations sur le joueur</div><div class='prez_bloc'>" +
          "<img src='" + NomForm.urlimgbas.value + "' class='prez_bas' />" +
          "<div class='prez_right2'>" +
          "<span class='prez_champ'>Prénom :</span> " + NomForm.nomhrp.value + "<br />" +
          "<span class='prez_champ'>Âge :</span> " + NomForm.agehrp.value + "<br />" +
          "<span class='prez_champ'>Comment j'ai connu le forum :</span> " + NomForm.connu.value + "<br />" +
          "<span class='prez_champ'>Mon avis sur le forum :</span> " + NomForm.avis.value + "<br />" +
          "<span class='prez_champ'>Le code secret :</span> [hide]" + NomForm.secret.value + "[/hide]</div><div style='clear: both;'></div></div>" +
          "<div class='prez_credit'>Par <a href='http://www.never-utopia.com/u27' target='_blank'>Onyx</a> de <a href='http://www.never-utopia.com' target='_blank'>Never-Utopia</a>, inspiré de <a href='http://www.never-utopia.com/t43339-fiche-bois-sombre' target='_blank'>cette fiche</a> de Pastomaniac.</div></div></div>";

        /*On vérifie si on peut ou non envoyer le message*/
        var champsobligatoires = document.getElementsByClassName("obligatoire");
        var totalchampsobligatoires = 0;
        for (i = 0; i < champsobligatoires.length; i++) {
          var champvaleur = champsobligatoires[i].value;
          if (champvaleur.length > 0) {
            totalchampsobligatoires = totalchampsobligatoires + 1;
          }
        }
        if (totalchampsobligatoires < champsobligatoires.length) {
          alert("Tous les champs obligatoires (ceux avec un astérisque rouge) doivent être remplis.");
          return false;
        }
        else {
          return true;
        }
      }
    //-->
    </script>
  </head>
  <body>
    <form id="monId" action="/posting.forum" method="post" name="NomForm" enctype="multipart/form-data" target="_blank" onSubmit="return creationMessage(this)">
      <input type="hidden" name="mode" value="newtopic" />
      <input type="hidden" name="topictype" value="0" checked="checked" />
      <input type="hidden" name="message" value="" />
      <input type="hidden" name="f" value="10" />
      <input type="hidden" name="subject" id="titre" value="" />
      <h1>Formulaire de Présentation</h1>
      <h2>Informations sur le personnage</h2>
      <label for="prenom">Prénom<span class="redd">*</span> :</label><br />
      <input class="obligatoire" type="text" name="prenom" id="prenom" /><br />
      <br />
      <label for="nom">Nom<span class="redd">*</span> :</label><br />
      <input class="obligatoire" type="text" name="nom" id="nom" /><br />
      <br />
      <label for="surnom">Surnom :</label><br />
      <input type="text" name="surnom" id="surnom" /><br />
      <br />
      <label for="age">Âge<span class="redd">*</span> :</label><br />
      <input class="obligatoire" type="text" name="age" id="age" /><br />
      <br />
      <label for="group">Groupe<span class="redd">*</span> :</label><br />
      <select name="group" id="group">
        <option>Premier</option>
        <option>Deuxième</option>
        <option>Troisième</option>
        <option>Quatrième</option>
        <option>Etc.</option>
      </select><br />
      <br />
      <label for="pouvoir">Pouvoir<span class="redd">*</span> :</label><br />
      <input class="obligatoire" type="text" name="pouvoir" id="pouvoir" /><br />
      <br />
      <label for="aime">Aime<span class="redd">*</span> :</label><br />
      <input class="obligatoire" type="text" name="aime" id="aime" /><br />
      <br />
      <label for="deteste">Déteste<span class="redd">*</span> :</label><br />
      <input class="obligatoire" type="text" name="deteste" id="deteste" /><br />
      <br />
      <h2>Descriptions du personnage</h2>
      <label for="descphy">Description Physique<span class="redd">*</span> :</label><br />
      <textarea class="obligatoire" name="descphy" id="descphy"></textarea><br />
      <br />
      <br />
      <label for="descpsy">Description Psychologique<span class="redd">*</span> :</label><br />
      <textarea class="obligatoire" name="descpsy" id="descpsy"></textarea><br />
      <br />
      <br />
      <label for="hist">Histoire<span class="redd">*</span> :</label><br />
      <textarea class="obligatoire" name="hist" id="hist"></textarea><br />
      <br />
      <br />
      <h2>Informations sur le joueur</h2>
      <label for="nomhrp">Prénom :</label><br />
      <input type="text" name="nomhrp" id="nomhrp" /><br />
      <br />
      <label for="agehrp">Âge :</label><br />
      <input type="text" name="agehrp" id="agehrp" /><br />
      <br />
      <label for="connu">Comment avez-vous connu le forum<span class="redd">*</span> ?</label><br />
      <input class="obligatoire" type="text" name="connu" id="connu" /><br />
      <br />
      <label for="avis">Votre avis sur le forum ?</label><br />
      <textarea name="avis" id="avis"></textarea><br />
      <br />
      <label for="secret">Le code secret<span class="redd">*</span> ?</label><br />
      <input class="obligatoire" type="text" name="secret" id="secret" /><br />
      <br />
      <h2>Personnaliser la mise en page</h2>
      <label for="urlimghaut">URL de l'image du haut (500px par 200px) :</label><br />
      <input type="text" name="urlimghaut" id="urlimghaut" value="http://img15.hostingpics.net/pics/959085haut.jpg" /><br />
      <br />
      <label for="citation">Petite citation :</label><br />
      <input type="text" name="citation" id="citation" value="Petite citation" /><br />
      <br />
      <label for="urlimgava">URL de l'image du personnage (200px par 320px) :</label><br />
      <input type="text" name="urlimgava" id="urlimgava" value="http://img15.hostingpics.net/pics/485538middle.jpg" /><br />
      <br />
      <label for="urlimgbas">URL de l'image du joueur (100px par 100px) :</label><br />
      <input type="text" name="urlimgbas" id="urlimgbas" value="http://img15.hostingpics.net/pics/858946bas.jpg" /><br />
      <br />
      <br />
      <div style="text-align: center;">
        <input type="reset" name="reseta" value="Rénitialiser le formulaire" />
        <input type="submit" name="preview" value="Prévisualiser le formulaire" />
        <input type="submit" name="post" value="Envoyer le formulaire" />
      </div>
      <br />
      <div class="credits">Par <a href="http://www.never-utopia.com/u27" target="_blank">Onyx</a> de <a href="http://www.never-utopia.com" target="_blank">Never-Utopia</a>.</div>
    </form>
  </body>
</html>


Lorsque vous modifiez votre formulaire, il faut cliquer sur le triple engrenage (), pas l'engrenage normal. Sinon, cela va se déformer d'une façon très très horrible.


Une fois le code mis et enregistré, vouz aurez une petite modification à faire.

Vous devez vous rendre, sur votre forum, dans le forum ou sous-forum où les gens pourront passer poster leur présentation. Puis, vous regardez l'adresse de la page. Juste après le nom de votre forum, il y aura ceci : "/f" avec un nombre qui suit. Le nombre correspond à l'id spécifique de ce forum.

Vous devez copier ce nombre et venir remplace le 10 à cet endroit :
Code:
  <input type="hidden" name="f" value="10" />


Cela va permettre que la présentation des utilisateurs du formulaire soit postée au bon endroit.



2. Activer les formulaires externes


Il y a une vérification par Forumactif qui a pour but d'éviter le spam et qui bloque les messages créés dans des formulaires qui ne sont pas ceux de base de Forumactif. Du coup, si vous ne suivez pas cette étape, le formulaire rempli vous retournera sur une page qui dira "erreur technique n°230" à la place d'envoyer directement le message.

Pour éviter cela, vous devez vous rendre sur :
> Panneau d'administration
> > Général
> > > Forum
> > > > Sécurité

Et vous devez cocher "Non" à la question "Interdire les formulaires non officiels à poster des messages et messages privés sur le forum". Vous enregistrez et c'est fait !

L'erreur n°230 ne devrait maintenant plus vous causer problème ~



3. Mise en forme de la fiche de présentation (CSS)


Si quelqu'un postait une fiche avec le formulaire, vous verriez sans doute que ce n'est pas très esthétique pour le moment. Du coup, nous allons mettre en forme la fiche de présentation à l'aide du CSS.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > IMAGES ET COULEURS
> > > > COULEURS
> > > > > FEUILLE DE STYLE CSS

Puis, nous allons ajouter le CSS suivant :
Code:
/*Bloc de la présentation*/
.prez {
  background-color: #202020;
  box-shadow: 5px 5px 3px #555555;
  margin: auto;
  margin-top: 5px;
  margin-bottom: 8px;
  width: 500px;
  color: #959595;
  padding-bottom: 10px;
  font-family: 'Verdana';
  font-size: 12px;
}
/*Image du haut de la présentation*/
.prez_haut {
  display: inline-block;
  width: 500px;
  height: 200px;
  border-bottom: 40px solid #050505;
}
/*Nom de la présentation*/
.prez_nom {
  font-family: 'Pacifico', cursive;
  font-size: 30px;
  color: #202020;
  text-shadow: -2px -2px 1px white;
  width: 100%;
  text-align: center;
  margin-top: -60px;
  margin-bottom: 15px;
}
/*Petite citation de la présentation*/
.prez_citation {
  width: 100%;
  text-align: center;
  color: #747474;
  font-family: 'Dancing Script', cursive;
  font-size: 15px;
  letter-spacing: 1px;
  margin-bottom: 25px;
}
/*Blocs de la présentation*/
.prez_bloc {
  background-color: #353535;
  border: 3px solid #101010;
  padding: 10px;
  margin: 0px 10px 0px 10px;
}
/*Autres images de la présentation*/
.prez_ava, .prez_bas {
  display: inline-block;
  width: 200px;
  height: 320px;
  float: left;
  border: #000000 1px dotted;
}
/*Partie de droite du premier bloc de la présentation*/
.prez_right, .prez_right2 {
  display: inline-block;
  margin-left: 5px;
  float: left;
  width: 240px;
}
/*Champs de la présentation*/
.prez_champ {
  color: #dfdfdf;
}
/*Sous-titres de la présentation*/
.prez_title {
  text-align: center;
  font-family: 'Lobster', cursive;
  padding: 5px;
  font-size: 16px;
  background: #000000;
  color: #959595;
  border-top: 2px solid #353535;
  
  margin: 15px 0px 5px 0px;
}
/*Images du bas de la présentation*/
.prez_bas {
  width: 100px;
  height: 100px;
}
/*Partie de droite du dernier bloc de la présentation*/
.prez_right2 {
  width: 340px;
}
/*Crédits*/
.prez_credit {
  margin: 5px auto -10px auto;
  font-size: 10px;
  text-align: center;
}




4. Ajouter l'iframe du formulaire


Maintenant que la page HTML est créée avec le formulaire, que les formulaires ont été autorisé et que le CSS pour la fiche de présentation est installé, il faut mettre le formulaire accessible aux membres.

Pour cela, vous pouvez, soit mettre le lien vers le formulaire à quelque part sur votre forum, soit le poster dans une iframe dans un message et les membres vont le remplir directement là.

Pour la 2e option, vous devez vous rendre là où vous voulez que le formulaire soit et y mettre le code suivant :
Code:
<iframe style="display: block; height: 2100px; width: 550px; margin: auto;" src="LIEN DE LA PAGE HTML" frameborder="0"></iframe>


Comme vous pouvez le deviner, il faut mettre le lien de la page HTML là où c'est écrit. Mais peut-être que vous vous demandez d'où sort ce lien? Ce n'est pas trop compliqué ^^

Quand on va dans la gestion de nos pages HTML, la dernière qui a été enregistrée (donc normalement, votre formulaire), se trouve en haut de la liste. Il vous suffit de copier l'url de votre page HTML et de la mettre là où nous l'avons vu ci-haut. C'est vraiment écrit "URL DU LIEN", alors vous ne pouvez pas vous tromper Wink

Sinon, vous devez aussi changer le width (largeur) et le height (hauteur) pour que cela corresponde à votre formulaire ^^





C'est tout! Si jamais vous avez des problèmes avec ce LS, n'hésitez pas à passer dans Un problème avec mon code ou Personnalisations si vous voulez de l'aide pour personnaliser le formulaire ou la fiche de présentation.

À plus !

Frosty Blue

From Within - fiche de présentation - Jeu 9 Juin 2016 - 13:05



Voici une fiche de présentation assez sobre qui a été conçue pour que la couleur principale (le rouge dans l'aperçu) puisse être modifiée en fonction de la couleur du groupe. De ce fait le css est placé dans le message. Il est toutefois possible de le placer dans la fiche css du forum (si vous êtes administrateur) du moment que vous avez le courage de vous y atteler ^^

Tout est modifiable mais le crédit est indélébile.

Aperçu - Hover 1 - Hover 2


Code:
<div class="aay-perso"><div class="aay-presgroup">Groupe</div><div class="aay-presname">Prénom Nom</div><br>
<div class="aay-presinfo"><span class="info">Age:</span> réponse
<span class="info">Sexe:</span> réponse
<span class="info">Métier:</span> réponse
<span class="info">Taille:</span> réponse
<span class="info">Poids:</span> réponse
<span class="info">Couleur des yeux/cheveux:</span> réponse
<span class="info">Signes distinctifs:</span> réponse
</div><div class="aay-photo"><img src="http://i84.servimg.com/u/f84/19/41/51/11/pres11.jpg"/><div class="aay-photo-src"><i>Nom du personnage, Manga/Anime/Source</i></div></div>
<div class="aay-title">Caractère</div>
<div class="aay-bloctxt">Quod cum ita sit, paucae domus studiorum seriis cultibus antea celebratae nunc ludibriis ignaviae torpentis exundant, vocali sonu, perflabili tinnitu fidium resultantes. denique pro philosopho cantor et in locum oratoris doctor artium ludicrarum accitur et bybliothecis sepulcrorum ritu in perpetuum clausis organa fabricantur hydraulica, et lyrae ad speciem carpentorum ingentes tibiaeque et histrionici gestus instrumenta non levia.

Proinde concepta rabie saeviore, quam desperatio incendebat et fames, amplificatis viribus ardore incohibili in excidium urbium matris Seleuciae efferebantur, quam comes tuebatur Castricius tresque legiones bellicis sudoribus induratae.

Ac ne quis a nobis hoc ita dici forte miretur, quod alia quaedam in hoc facultas sit ingeni, neque haec dicendi ratio aut disciplina, ne nos quidem huic uni studio penitus umquam dediti fuimus. Etenim omnes artes, quae ad humanitatem pertinent, habent quoddam commune vinculum, et quasi cognatione quadam inter se continentur.</div>
<div class="aay-title">Histoire</div>
<div class="aay-bloctxt">Quod cum ita sit, paucae domus studiorum seriis cultibus antea celebratae nunc ludibriis ignaviae torpentis exundant, vocali sonu, perflabili tinnitu fidium resultantes. denique pro philosopho cantor et in locum oratoris doctor artium ludicrarum accitur et bybliothecis sepulcrorum ritu in perpetuum clausis organa fabricantur hydraulica, et lyrae ad speciem carpentorum ingentes tibiaeque et histrionici gestus instrumenta non levia.

Proinde concepta rabie saeviore, quam desperatio incendebat et fames, amplificatis viribus ardore incohibili in excidium urbium matris Seleuciae efferebantur, quam comes tuebatur Castricius tresque legiones bellicis sudoribus induratae.

Ac ne quis a nobis hoc ita dici forte miretur, quod alia quaedam in hoc facultas sit ingeni, neque haec dicendi ratio aut disciplina, ne nos quidem huic uni studio penitus umquam dediti fuimus. Etenim omnes artes, quae ad humanitatem pertinent, habent quoddam commune vinculum, et quasi cognatione quadam inter se continentur.</div>
<div class="aay-player"><img src="http://i84.servimg.com/u/f84/19/41/51/11/pres11.jpg"/><div class="aay-playerinfo"><span class="info">Pseudo:</span> réponse
<span class="info">Age:</span> réponse
<span class="info">Quelque chose à nous dire?</span> réponse
<span class="info">Code du règlement:</span> réponse
</div></div><div class="aay-opinion"><span class="in">Opinion sur tel(s) groupe(s):</span><br>Votre opinion
<br><span class="in2"> Opinion sur tel(s) groupe(s):</span> Votre opinion
</div>
<div class="crédits">Code by Frosty Blue de <a href="http://www.never-utopia.com">never Utopia</a></div></div>

<style type="text/css"> .aay-presgroup {margin-left: auto; background: #fa5858; width: 150px; padding: 17px;text-align: center; color: #f4f4f4; font-family: 'Abel'; text-shadow: 1px 2px 1px rgba(0,0,0,0.4); display: inline-block; font-size: 17px; line-height: 23px; text-transform: uppercase; margin-right: 10px;} .aay-presname {margin-right: auto; width: 350px; padding: 10px; text-align: center; color: #fa5858; background: #eaebeb; overflow: hidden; font-family: 'Abel'; font-size: 35px; line-height: 37px; display: inline-block; vertical-align: top; text-shadow: -1px -2px 1px rgba(0,0,0,0.4), 1px 2px 1px rgba(255,255,255,1); text-transform: uppercase; letter-spacing: 1px;} .aay-perso {margin: auto; text-align: justify; width: 565px;} .aay-presinfo {float: left; width: 320px; height: 200px; overflow: auto; padding: 10px; margin-right: 10px;background: #eaebeb;} .info {color: white; text-shadow: 1px 1px 0px rgba(0,0,0,0.3), 0px 0px 5px rgba(0,0,0,0.2); font-size: 13px; text-transform: uppercase; font-style: normal;} .aay-photo {width: 215px; background: black; vertical-align: top; height: 220px; overflow: hidden;} .aay-photo img {-webkit-filter: grayscale(80%); filter: grayscale(80%); transition: 1s; -webkit-transition: 1s; position: relative; z-index: 1;} .aay-photo-src {position: relative; top: -60px; background: rgba(195,195,195,0.6); color: white; text-align: center; font-size: 12px; z-index: 2; padding: 5px; opacity: 0; transition: 1s; -webkit-transition: 1s;} .aay-photo:hover img {-webkit-filter: grayscale(0%); filter: grayscale(0%); transition: 2s; -webkit-transition: 2s;} .aay-photo:hover .aay-photo-src {opacity: 1; transition: 2s; -webkit-transition: 2s;} .aay-bloctxt {background: #eaebeb; padding: 10px; height: 250px; overflow: auto; border-top: #fa5858 4px solid; position: relative; z-index: 2;} .aay-title {text-shadow: -1px -2px 1px rgba(0,0,0,0.4), 1px 2px 1px rgba(255,255,255,1); text-transform: uppercase; letter-spacing: 1px; font-family: 'Abel'; color: #fa5858; font-size: 25px; position: relative; left: 5px; bottom: -15px; z-index: 1;} .aay-player {width: 215px; height: 220px; display: inline-block; margin-right: 15px; background: #fa5858;} .aay-opinion {display: inline-block; width: 315px; padding: 10px; height: 200px; overflow: auto; background: #eaebeb; text-align: justify; vertical-align: top;} .aay-player img {position: relative: 1; -webkit-filter: grayscale(50%); filter: grayscale(50%); transition: 1s; -webkit-transition: 1s; } .aay-playerinfo {padding: 10px; position: relative; z-index: 2; background: #fa5858; transition: 1s; -webkit-transition: 1s; opacity: 0; overflow: auto; width: 200px; height: 202px; top: -222px;} .aay-player:hover .aay-playerinfo {opacity: 1; transition: 2s; -webkit-transition: 2s;} .in {font-style: normal; color: #fa5858; text-shadow: 1px 1px 0px rgba(0,0,0,0.3), 0px 0px 5px rgba(0,0,0,0.2); font-size: 14px; text-transform: uppercase;} .in2 {font-style: normal; color: #0080ff; text-shadow: 1px 1px 0px rgba(0,0,0,0.3), 0px 0px 5px rgba(0,0,0,0.2); font-size: 14px; text-transform: uppercase;} .crédits {text-align: right; color: silver; opacity: 0.4; font-size: 11px; font-family: 'Abel'; position: relative; right: 5px;}</style><link href='https://fonts.googleapis.com/css?family=Abel' rel='stylesheet' type='text/css' />

Shaneliae

Fiche de présentation - Steampunk et vieux livre - Mar 19 Mai 2015 - 16:02


Fiche de présentation de style Steampunk à effet "livre"



Bonjour à vous !

Je vous présente ci-dessous un LS fait à partir d'une demande de Matthew Williams.

Nous avons donc ici une fiche de présentation de style "steampunk" avec un effet "vieux livre". Nous avons donc une première couverture qui recouvre la présentation et quand on passe le curseur sur la couverture on obtient la présentation. Bref ! Assez parlé, voici les visuels !

Le contour bleu foncé des screens ci-dessous correspondent au fond actuel de mon forum test.
Ici, un aperçu de la présentation au repos.
Maintenant, la présentation "ouverte"
Et enfin, lorsque l'on passe le curseur sur les différentes catégories.
Il y a aussi un effet en hover sur les URL.

Pour voir la fiche en direct


Informations complémentaires



Je propose deux versions de ce LS : une pour les admin qui vont placer les codes dans leur feuille de style CSS, et une pour les membres lambda qui souhaitent poster une présentation avec un style particulier.

La présentation fait en tout 530*950 px (530px de largeur, et 950 de hauteur).
Les petites images font 120*200px et sont codées pour ne faire que cette taille. Mettez donc des images de cette dimension, ou si elles sont plus grandes, avec un rapport de taille équivalent.

La fiche est entièrement en HTML, vérifié donc que le HTML n'est pas désactivé dans vos messages et sur votre forum !

Le crédit vers Never Utopia ne doit pas être retiré !


Fiche officielle avec CSS



Le CSS



Code:
/***** Fiche de présentation Steampunk-livre *****/

.couverture_livre {
  background-image: url('http://i19.servimg.com/u/f19/18/91/36/39/couver10.jpg');
  width: 530px;
  height: 950px;
  margin: auto;
  transform: all;
  -webkit-transform: all;
  transition: 2s;
  webkit-transition: 2s;
  position: relative;
}

.couverture_livre:hover {
  transform: all;
  -webkit-transform: all;
  transition: 2s;
  -webkit-transition: 2s;
  z-index: 5;
}

.page_livre {
  color: #1F140B;
  font-family: courrier new;
  text-align: justify;
  background-image: url('http://i19.servimg.com/u/f19/18/91/36/39/page_s10.jpg');
  width: 530px;
  height: 950px;
  margin: auto;
  position: relative;
  display: block;
  opacity: 0;
  transform: all;
  -webkit-transform: all;
  transition: 2s;
  webkit-transition: 2s;
  z-index: 1;
}

.page_livre:hover {
  opacity: 1;
  transform: all;
  -webkit-transform: all;
  transition: 2s;
  webkit-transition: 2s;
}

.tableau_steam {
  margin: auto;
}

.page_livre a{
  color: #6D2A0C !important;
  font-family: impact;
  transition: 1s;
  webkit-transition: 1s;
}

.page_livre a:hover{
  color: #D17923 !important;
  letter-spacing: 3px;
  text-shadow: 0px 0px 3px #1F140B;
}

.image_steam {
  width: 120px;
  height: 200px;
  overflow: hidden;
  background-color: rgba(204, 147, 56, 0.7);
}

.autre_cadre {
  font-family: courier new;
  text-align: left;
  width: 355px;
  height: 180px;
  overflow: auto;
  background-color: rgba(204, 147, 56, 0.7);
  padding: 10px; font-size: 14px;
}

.police_autre {
  font-weight: bold;
  font-family: 'Orbitron', sans-serif;
  font-size: 15px;
}

.grand_cadre {
  border-radius: 10px;
  width: 480px;
  overflow: auto;
  margin: auto;
  background-color: rgba(204, 147, 56, 0.7);
  padding: 10px;
}

.petit_cadre {
  height: 10px;
  opacity: 0;
  overflow: auto;
  -webkit-transition: all 1s;
  transition: all 1s;
  margin: auto;
}

.cadre_cache:hover .petit_cadre {
  height: 180px;
  width: 450px;
  opacity:1;
}

.police_titres {
  font-family: 'Aldrich', sans-serif;
  font-size: 18px;
  font-weight: bold;
  display: block;
  text-align: center;
}

.info_importante {
  font-family: 'Impact';
  color: #49270D;
  letter-spacing: 2px;
}


Le HTML



Code:
<div class="couverture_livre"><div class="page_livre">

<table class="tableau_steam"><tr><td><img src="URL DE L'AVATAR ICI" alt="UN PETIT MOT SUR L'AVATAR" class="image_steam" style="border-radius: 10px 2px 2px 10px;" /></td><td><div class="autre_cadre" style="border-radius: 2px 10px 10px 2px;"><span class="police_autre">Nom</span> : Réponse

<span class="info_importante">Information à mettre en évidence</span>

<a href="LIEN DE L'URL">Titre de l'url</a>
</div></td></tr></table>

<div class="grand_cadre"><div class="cadre_cache"><span class="police_titres">
Physique</span><div class="petit_cadre">

Ton Physique.

</div></div></div>
<div class="grand_cadre"><div class="cadre_cache"><span class="police_titres">
Caractère</span><div class="petit_cadre">

Ton Caractère.

</div></div></div>
<div class="grand_cadre"><div class="cadre_cache"><span class="police_titres">
Histoire</span><div class="petit_cadre">

Ton Histoire.

</div></div></div>
<table class="tableau_steam"><tr><td><div class="autre_cadre" style="border-radius: 10px 2px 2px 10px;"><span class="police_autre">Nom</span> : Réponse
</div></td><td><img src="URL DE L'AVATAR ICI" alt="UN PETIT MOT SUR L'AVATAR" class="image_steam" style="border-radius: 2px 10px 10px 2px;" /></td></tr></table>

<a href="http://www.never-utopia.com/" style="text-align: center; color: #e0c060 !important; display: block; letter-spacing: 1px;">©Shaneliae | Never Utopia</a>

</div></div>
<link href='http://fonts.googleapis.com/css?family=Orbitron|Aldrich' rel='stylesheet' type='text/css'>
[/hide]

Fiche uniquement en HTML



Code:
<style>.couverture_livre {background-image: url('http://i19.servimg.com/u/f19/18/91/36/39/couver10.jpg'); width: 530px; height: 950px; margin: auto; transform: all; -webkit-transform: all; transition: 2s; webkit-transition: 2s; position: relative;} .couverture_livre:hover {transform: all; -webkit-transform: all; transition: 2s; -webkit-transition: 2s; z-index: 5;} .page_livre {color: #1F140B; font-family: courier new; text-align: justify; background-image: url('http://i19.servimg.com/u/f19/18/91/36/39/page_s10.jpg'); width: 530px; height: 950px; margin: auto; position: relative; display: block; opacity: 0; transform: all; -webkit-transform: all; transition: 2s; webkit-transition: 2s; z-index: 1;} .page_livre:hover {opacity: 1; transform: all; -webkit-transform: all; transition: 2s; webkit-transition: 2s;} .tableau_steam {margin: auto;} .page_livre a{color: #6D2A0C !important; font-family: impact; transition: 1s; webkit-transition: 1s;} .page_livre a:hover{color: #D17923 !important; letter-spacing: 3px; text-shadow: 0px 0px 3px #1F140B;} .image_steam {width: 120px; height: 200px; overflow: hidden; background-color: rgba(204, 147, 56, 0.7);} .autre_cadre {font-family: courier new; text-align: left; width: 355px; height: 180px; overflow: auto; background-color: rgba(204, 147, 56, 0.7); padding: 10px; font-size: 14px;} .police_autre {font-weight: bold; font-family: 'Orbitron', sans-serif; font-size: 15px;} .grand_cadre {border-radius: 10px; width: 480px; overflow: auto; margin: auto; background-color: rgba(204, 147, 56, 0.7); padding: 10px;} .petit_cadre{height: 10px; opacity: 0; overflow: auto; -webkit-transition: all 1s; transition: all 1s; margin: auto;} .cadre_cache:hover .petit_cadre{height: 180px; width: 450px; opacity:1;} .police_titres {font-family: 'Aldrich', sans-serif; font-size: 18px; font-weight: bold; display: block; text-align: center;} .info_importante {font-family: 'Impact'; color: #49270D; letter-spacing: 2px;}</style>

<div class="couverture_livre"><div class="page_livre">

<table class="tableau_steam"><tr><td><img src="URL DE L'AVATAR ICI" alt="UN PETIT MOT SUR L'AVATAR" class="image_steam" style="border-radius: 10px 2px 2px 10px;" /></td><td><div class="autre_cadre" style="border-radius: 2px 10px 10px 2px;"><span class="police_autre">Nom</span> : Réponse

<span class="info_importante">Information à mettre en évidence</span>

<a href="LIEN DE L'URL">Titre de l'url</a>
</div></td></tr></table>

<div class="grand_cadre"><div class="cadre_cache"><span class="police_titres">
Physique</span><div class="petit_cadre">

Ton Physique.

</div></div></div>
<div class="grand_cadre"><div class="cadre_cache"><span class="police_titres">
Caractère</span><div class="petit_cadre">

Ton Caractère.

</div></div></div>
<div class="grand_cadre"><div class="cadre_cache"><span class="police_titres">
Histoire</span><div class="petit_cadre">

Ton Histoire.

</div></div></div>
<table class="tableau_steam"><tr><td><div class="autre_cadre" style="border-radius: 10px 2px 2px 10px;"><span class="police_autre">Nom</span> : Réponse
</div></td><td><img src="URL DE L'AVATAR ICI" alt="UN PETIT MOT SUR L'AVATAR" class="image_steam" style="border-radius: 2px 10px 10px 2px;" /></td></tr></table>

<a href="http://www.never-utopia.com/" style="text-align: center; color: #e0c060 !important; display: block; letter-spacing: 1px;">©Shaneliae | Never Utopia</a>

</div></div>
<link href='http://fonts.googleapis.com/css?family=Orbitron|Aldrich' rel='stylesheet' type='text/css'>


Merci pour avoir lu ce LS ♥

Vous avez une question ou un problème avec ce LS ? Cette section est là pour vous, je ne répondrai à aucune question par MP ou posée à la suite du sujet.

Nephilime

Fiche de présentation imagée - Ven 16 Jan 2015 - 20:04



Bonsoir amis n'utopiens !

Je vous présente une fiche de présentation un peu plus sophistiquée que d'ordinaire sans pour autant faire trop lourd à mon sens. Les images de droite transite pour laisser apparaître le texte.

Voici un petit apperçu : initialement puis au survol de d'une image de droite.

Les codes permettant la transition venant d'Okhmhaka (que je remercie vraiment chaleureusement Very Happy ) seul y figure le crédit de NU que vous êtres bien évidemment priés de ne pas retirer.
Les images de droite font 370*185px, celle de gauche fait 178*559px et celle du haut fait 550*112px.


Voici donc la partie CSS à ajouter à la feuille de codage :
Code:
/* ------------------------------- CODES CSS fiches ------------------------------------- */

.bloc_pcp
{
  width: 550px;
  height: 675px;
  margin: auto;
  background-color: #2e2e2c;
  border: 2px solid #202020;
  border-bottom: none;
  color: #101010;
}
.bloc_pcp .entete_pres
{
  width: 550px;
  height: 102px;
  text-align: center;
  padding-top: 10px;
  background: url('http://img15.hostingpics.net/pics/972122Sanstitre.jpg'); /*Image du haut*/
  border-bottom: 2px solid #202020;
 
}
.bloc_pcp .colonne_gauche
{
  width: 172px;
  height: 553px;
  float: left;
  background: url('http://img15.hostingpics.net/pics/887715Sanstitre2.jpg'); /*Image de gauche*/
  padding: 3px;
  border-right: 2px solid #202020;
  border-bottom: 2px solid #202020;
}
.bloc_pcp .colg_text
{
  width: 166px;
  height: 520px;
  overflow: auto;
  overflow-x: hidden
}
.bloc_pcp .police
{
  font-family: Berkshire Swash;
  font-size: 14px;
  letter-spacing: 2px;
}
.bloc_pcp .cate
{
  width: 370px;
  height: 185px;
  overflow: hidden;
  background-color: #a3a3a3;
  border-bottom: 2px solid #202020;
}
.bloc_pcp .cate_img
{
  position: relative;
  z-index: 2;
  width: 370px;
  height: 185px;
  margin-left: 0px;
  -webkit-transition: all ease 2s;
  transition: all ease 2s;
}
.bloc_pcp .cate:hover .cate_img
{
  margin-left: 400px;
  -webkit-transition: all ease 2s;
  transition: all ease 2s;
}
.bloc_pcp .cate_description
{
  position: relative;
  z-index: 1;
  width: 370px;
  height: 185px;
  margin-top: -185px;
  text-align: left;
  font-size: 11px;
  color: #555555;
  padding: 3px;
  overflow: auto;
}

/* ---------------------------- FIN CODES FICHES ------------------------- */



Et la partie HTML à copier dans vos sujets de présentation :
Code:
<link href='http://fonts.googleapis.com/css?family=Berkshire+Swash' rel='stylesheet' type='text/css' />
   <div class="bloc_pcp"><div class="entete_pres"> <br/><span style="font-size: 23px; font-family: Berkshire Swash; letter-spacing: 2px;">[Nom du personnage]</span>

   "citation"</div><div class="colonne_gauche"><div class="colg_text">
   <span class="police">Prénom: </span>


   <span class="police">Nom:</span>


   <span class="police">Date de naissance:</span>


   <span class="police">Clan:</span>


   <span class="police">Rang:</span>


   <span class="police">Arme:</span>


   <span class="police">Signe particulier:</span> </div><a href="http://www.never-utopia.com/" target="_blank"><span style="font-size: 11px;"> |Never Utopia|</span></a></div><div class="cate"><div class="cate_img"><img src="http://img15.hostingpics.net/pics/836909Sanstitre3.jpg" /></div><div class="cate_description"> <br />  <span class="police"> Physique </span>

   texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte</div></div><div class="cate"><div class="cate_img"><img src="http://img15.hostingpics.net/pics/115164Sanstitre4.jpg" /></div><div class="cate_description"> <br />  <span class="police"> Caractère </span>

   texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte</div></div><div class="cate"><div class="cate_img"><img src="http://img15.hostingpics.net/pics/353049Sanstitre5.jpg" /></div><div class="cate_description"><br />  <span class="police"> Histoire </span>

   texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte texte</div></div>
   </div>

Akina-chan

Une fiche de présentation dark ! - Mer 9 Juil 2014 - 15:31



Voilà une fiche de présentation qui ne me sert plus à rien.
aperçu:






Présentation de Pseudo



200*400px de préférence

Qui suis-je ?



Nom :
Prénom: (Surnom si il y a)
Age:
Sexe:
Orientation sexuelle :
Pouvoir(s) : (uniquement pour les démons)
Arme(s) :
Couleur utilisée pour la ChatBox :



Ai-je besoin de chirurgie ?


Quapropter a natura mihi videtur potius quam ab indigentia orta amicitia, applicatione magis animi cum quodam sensu amandi quam cogitatione quantum illa res utilitatis esset habitura. Quod quidem quale sit, etiam in bestiis quibusdam animadverti potest, quae ex se natos ita amant ad quoddam tempus et ab eis ita amantur ut facile earum sensus appareat. Quod in homine multo est evidentius, primum ex ea caritate quae est inter natos et parentes, quae dirimi nisi detestabili scelere non potest; deinde cum similis sensus exstitit amoris, si aliquem nacti sumus cuius cum moribus et natura congruamus, quod in eo quasi lumen aliquod probitatis et virtutis perspicere videamur.



C'est mon caractère !!


Quapropter a natura mihi videtur potius quam ab indigentia orta amicitia, applicatione magis animi cum quodam sensu amandi quam cogitatione quantum illa res utilitatis esset habitura. Quod quidem quale sit, etiam in bestiis quibusdam animadverti potest, quae ex se natos ita amant ad quoddam tempus et ab eis ita amantur ut facile earum sensus appareat. Quod in homine multo est evidentius, primum ex ea caritate quae est inter natos et parentes, quae dirimi nisi detestabili scelere non potest; deinde cum similis sensus exstitit amoris, si aliquem nacti sumus cuius cum moribus et natura congruamus, quod in eo quasi lumen aliquod probitatis et virtutis perspicere videamur.



Ce que j'ai vécu à cause de Lilith


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.

Sin autem ad adulescentiam perduxissent, dirimi tamen interdum contentione vel uxoriae condicionis vel commodi alicuius, quod idem adipisci uterque non posset. Quod si qui longius in amicitia provecti essent, tamen saepe labefactari, si in honoris contentionem incidissent; pestem enim nullam maiorem esse amicitiis quam in plerisque pecuniae cupiditatem, in optimis quibusque honoris certamen et gloriae; ex quo inimicitias maximas saepe inter amicissimos exstitisse.

Siquis enim militarium vel honoratorum aut nobilis inter suos rumore tenus esset insimulatus fovisse partes hostiles, iniecto onere catenarum in modum beluae trahebatur et inimico urgente vel nullo, quasi sufficiente hoc solo, quod nominatus esset aut delatus aut postulatus, capite vel multatione bonorum aut insulari solitudine damnabatur.

Haec dum oriens diu perferret, caeli reserato tepore Constantius consulatu suo septies et Caesaris ter egressus Arelate Valentiam petit, in Gundomadum et Vadomarium fratres Alamannorum reges arma moturus, quorum crebris excursibus vastabantur confines limitibus terrae Gallorum.

Accenderat super his incitatum propositum ad nocendum aliqua mulier vilis, quae ad palatium ut poposcerat intromissa insidias ei latenter obtendi prodiderat a militibus obscurissimis. quam Constantina exultans ut in tuto iam locata mariti salute muneratam vehiculoque inpositam per regiae ianuas emisit in publicum, ut his inlecebris alios quoque ad indicanda proliceret paria vel maiora.



Je suis son pantin...


Prénom : (si ça vous dérange pas de le donner)
Age :
Ce que vous aimez faire, vos hobbies :
Comment avez-vous connu le forum :
Un truc à dire en plus ?

Rappel : Seul la race humaine est acceptée.



Bien entendu, vous pouvez modifier les couleurs et le fond !

Pour le code, un petit merci, ça fait de mal à personne et ça fait surtout toujours plaisir.
Code:
<link href='http://fonts.googleapis.com/css?family=Nothing+You+Could+Do' rel='stylesheet' type='text/css' /><table style= "background-image: url(http://i50.tinypic.com/2zpiooo.png); border-radius: 50px; border: 2px #660000 solid; color :white;"><tr><td colspan="2" style="text-align: center;"><div class="histoire4" style="text-align: center;"><span style="font-family: 'Nothing You Could Do', cursive; font-size: 36px; text-align: center;">

Présentation de Pseudo

</span>
</div></td></tr><tr><td><div style= "text-align: center;"><img src="http://i45.tinypic.com/a5dbnm.png" />
200*400px de préférence</div></td><td style="text-align: center;"><div class="histoire4" style="text-align: center;"><span style="font-family: 'Nothing You Could Do', cursive; font-size: 24px; text-align: center;">
Qui suis-je ?
</span>
</div>

Nom :
Prénom: (Surnom si il y a)
Age:
Sexe:
Orientation sexuelle :
Pouvoir(s) : (uniquement pour les démons)
Arme(s) :
Couleur utilisée pour la ChatBox :
</td></tr>
<tr><td width="50%" style= "padding-bottom: 20px; padding-top: 20px; padding-left: 20px; padding-right: 10px; text-align: center;"><div class="histoire4" style="text-align: center;"><span style="font-family: 'Nothing You Could Do', cursive; font-size: 24px; text-align: center;">


Ai-je besoin de chirurgie ?
</span>
</div>
<div style="text-align: justify;">Quapropter a natura mihi videtur potius quam ab indigentia orta amicitia, applicatione magis animi cum quodam sensu amandi quam cogitatione quantum illa res utilitatis esset habitura. Quod quidem quale sit, etiam in bestiis quibusdam animadverti potest, quae ex se natos ita amant ad quoddam tempus et ab eis ita amantur ut facile earum sensus appareat. Quod in homine multo est evidentius, primum ex ea caritate quae est inter natos et parentes, quae dirimi nisi detestabili scelere non potest; deinde cum similis sensus exstitit amoris, si aliquem nacti sumus cuius cum moribus et natura congruamus, quod in eo quasi lumen aliquod probitatis et virtutis perspicere videamur.</div></td>
<td width="50%" style= "padding-bottom: 20px; padding-top: 20px; padding-right: 20px; padding-left: 10px; text-align: center;"><div class="histoire4" style="text-align: center;"><span style="font-family: 'Nothing You Could Do', cursive; font-size: 24px; text-align: center;">


C'est mon caractère !!
</span>
</div>
<div style="text-align: justify;">Quapropter a natura mihi videtur potius quam ab indigentia orta amicitia, applicatione magis animi cum quodam sensu amandi quam cogitatione quantum illa res utilitatis esset habitura. Quod quidem quale sit, etiam in bestiis quibusdam animadverti potest, quae ex se natos ita amant ad quoddam tempus et ab eis ita amantur ut facile earum sensus appareat. Quod in homine multo est evidentius, primum ex ea caritate quae est inter natos et parentes, quae dirimi nisi detestabili scelere non potest; deinde cum similis sensus exstitit amoris, si aliquem nacti sumus cuius cum moribus et natura congruamus, quod in eo quasi lumen aliquod probitatis et virtutis perspicere videamur.</div></td></tr>
<tr><td colspan="2" style="padding: 20px; text-align: center;"><div class="histoire4" style="text-align: center;"><span style="font-family: 'Nothing You Could Do', cursive; font-size: 24px;">


Ce que j'ai vécu à cause de Lilith
</span>
</div>
<div style="text-align: justify;">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.

Sin autem ad adulescentiam perduxissent, dirimi tamen interdum contentione vel uxoriae condicionis vel commodi alicuius, quod idem adipisci uterque non posset. Quod si qui longius in amicitia provecti essent, tamen saepe labefactari, si in honoris contentionem incidissent; pestem enim nullam maiorem esse amicitiis quam in plerisque pecuniae cupiditatem, in optimis quibusque honoris certamen et gloriae; ex quo inimicitias maximas saepe inter amicissimos exstitisse.

Siquis enim militarium vel honoratorum aut nobilis inter suos rumore tenus esset insimulatus fovisse partes hostiles, iniecto onere catenarum in modum beluae trahebatur et inimico urgente vel nullo, quasi sufficiente hoc solo, quod nominatus esset aut delatus aut postulatus, capite vel multatione bonorum aut insulari solitudine damnabatur.

Haec dum oriens diu perferret, caeli reserato tepore Constantius consulatu suo septies et Caesaris ter egressus Arelate Valentiam petit, in Gundomadum et Vadomarium fratres Alamannorum reges arma moturus, quorum crebris excursibus vastabantur confines limitibus terrae Gallorum.

Accenderat super his incitatum propositum ad nocendum aliqua mulier vilis, quae ad palatium ut poposcerat intromissa insidias ei latenter obtendi prodiderat a militibus obscurissimis. quam Constantina exultans ut in tuto iam locata mariti salute muneratam vehiculoque inpositam per regiae ianuas emisit in publicum, ut his inlecebris alios quoque ad indicanda proliceret paria vel maiora.</td></tr>
<tr><td colspan="2" style="text-align: center;"><div class="histoire4" style="text-align: center;"><span style="font-family: 'Nothing You Could Do', cursive; font-size: 24px;">


Je suis son pantin...
</span>
</div>
Prénom : (si ça vous dérange pas de le donner)
Age :
Ce que vous aimez faire, vos hobbies :
Comment avez-vous connu le forum :
Un truc à dire en plus ?

Codage d'Akina-chan de <a href="http://www.never-utopia.com/">Never-Utopia</a>

</td></tr></table>


Revenir en haut

La date/heure actuelle est Mar 21 Nov 2017 - 22:21