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.



202 résultats trouvés pour html

Ayael

Galerie d'avatar avec crédit et zoom au survol. - Jeu 23 Mar 2017 - 17:49



Bonjour, cela fait longtemps :p Je viens proposer ce code que j'ai fais pour mon forum récemment, il s'agit d'une galerie d'avatar avec une zone pour les crédits et un effet de zoom au survol. Simple mais efficace, contenant seulement du HTML et du CSS

Un exemple en live pour faire mumuse ; Capture d'écran/ capture au survol


Les dimensions des images sont bien entendu modifiables à volonté mais prenez garde à conserver les proportions autrement l'image miniature apparaitra déformée.


Le CSS :
Code:
/* Affichage des images*/
   
div.proposition_avatar {
width: 500px;  /*largeur du cadre total, modifiable selon le nombre d'image que vous voulez par ligne. */
margin-top:70px; /* marge en haut pour éviter que l'image chevauche quelque chose d'autre au survol.*/
margin-bottom:70px; /* marge en bas pour éviter que l'image chevauche quelque chose d'autre au survol.*/
line-height: 0;

/*centre le bloc sur la page*/
margin-left:auto;
margin-right:auto;
}


div.proposition_avatar p, div.proposition_avatar p img {
width: 120px; /* Largeur de la miniature */
height: 240px; /* Hauteur de la miniature */
float:left;

}

div.proposition_avatar p {
display: inline-block;
position: relative;
margin: 1px; /* marge entre les images, peut être augmenté si nécessaire */
}


div.proposition_avatar p img {
display: block;
position: absolute;
left: 0;
top: 0;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
 
}

div.proposition_avatar p:hover img {
height: 400px; /* Hauteur finale de l'image */
width: 200px; /* Largeur finale de l'image */
z-index: 99;
 
/*Gère la position de la grande image, peut être modifié */
left: -25%; /*Décale l'image vers la gauche*/
top: -25%; /* Décale l'image vers le haut*/
}

/*********** Gère la partie "crédit"*/

/*crédit pour la miniature*/
div.proposition_avatar p .credit {
position:absolute;
display:block;
z-index:2;

width:110px; /* largeur du cadre, à modifier en fonction de la largeur de votre image miniature*/
padding:5px;
line-height:15px;

bottom:0px; /* positionne le cadre en bas de l'image, peut être modifié*/
background-color:rgba(0, 0, 0, 0.5); /* couleur de fond du cadre, par défaut noir, peut être modifié*/ 
font-family:arial; /* Police d'écriture, peut être modifié*/
text-align:center; /*centre le texte, peut être modifié*/
color:#fff; /*couleur du texte, peut être modifié*/
font-size:11px; /*taille du texte, peut-être modifié*/

-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
      }
      
/* crédit au survol des images*/
div.proposition_avatar p:hover span.credit {
z-index:99;
width:190px!important; /*largeur du cadre, à modifier en fonction de la largeur de votre grande image -10px */
font-size:16px;
bottom:-100px; /*permet de positionner le cadre en bas de l'image, doit être modifié en fonction de la taille de votre grande image*/
left:-25%; /* Permet de positionner le cadre sur la gauche, peut être modifié*/
}



Le html

Code:
<div class="proposition_avatar">   

   <p><img src="lien image en grandeur finale"/><span class="credit">Texte de crédit ou autre </span></p><!--NEXT--><p><img src="lien image en grandeur finale"/><span class="credit">Texte de crédit ou autre </span></p>

<div class="clear: both;"></div>
</div>


Cet élément est multipliable à l'infini selon le nombre d'image que vous voulez afficher :
Code:
<!--NEXT--><p><img src="lien image en grandeur finale"/><span class="credit">Texte de crédit ou autre </span></p>


Comme je suis d'humeur généreuse, j'ai également codé une variante ou le crédit n'apparait QUE au survol de l'image. Le html est le même, seul le CSS change.

CSS : crédit uniquement au survol
Code:
/* Affichage des images*/
   
div.proposition_avatar {
width: 500px;  /*largeur du cadre total, modifiable selon le nombre d'image que vous voulez par ligne. */
margin: auto; /*centre le cadre*/
margin-top:70px; /* marge en haut pour éviter que l'image chevauche quelque chose d'autre au survol.*/
margin-bottom:70px; /* marge en bas pour éviter que l'image chevauche quelque chose d'autre au survol.*/
line-height: 0;
}


div.proposition_avatar p, div.proposition_avatar p img {
width: 120px; /* Largeur de la miniature */
height: 240px; /* Hauteur de la miniature */
float:left;

}

div.proposition_avatar p {
display: inline-block;
position: relative;
margin: 1px; /* marge entre les images, peut être augmenté si nécessaire */
}


div.proposition_avatar p img {
display: block;
position: absolute;
left: 0;
top: 0;
-webkit-transition: all 0.2s linear;
transition: all 0.2s linear;
 
}

div.proposition_avatar p:hover img {
height: 400px; /* Hauteur finale de l'image */
width: 200px; /* Largeur finale de l'image */
z-index: 99;
 
/*Gère la position de la grande image, peut être modifié */
left: -25%; /*Décale l'image vers la gauche*/
top: -25%; /* Décale l'image vers le haut*/
}

/*********** Gère la partie "crédit"*/


.credit {
display:none;
}
      
/* crédit au survol des images*/
div.proposition_avatar p:hover span.credit {
display:block;
padding:5px;
line-height:15px;
position:absolute;
color:#fff; /*couleur du texte, peut être modifié*/
background-color:rgba(0, 0, 0, 0.5); /* couleur de fond du cadre, par défaut noir, peut être modifié*/ 
font-family:arial; /* Police d'écriture, peut être modifié*/
z-index:99;
width:190px!important; /*largeur du cadre, à modifier en fonction de la largeur de votre grande image -10px */
font-size:16px;
bottom:-100px; /*permet de positionner le cadre en bas de l'image, doit être modifié en fonction de la taille de votre grande image*/
left:-25%; /* Permet de positionner le cadre sur la gauche, peut être modifié*/
}




Voilà, en espérant que cela sera utile à certains d'entre vous !

Cheshire Cat

Profil gris avec effet au survol - Dim 19 Fév 2017 - 14:54



Bonjour ou bonsoir !
Je suis de nouveau là, de retour pour vous proposer un nouveau libre service de profil avec un style assez simple !

Si vous rencontrez un problème avec ce libre service, n'hésitez pas à demander de l'aide dans la section Problème avec mon code. De plus, vous pouvez vous référer à la section Personnalisations si jamais vous n'y connaissez rien en codage et que vous avez du mal à changer les couleurs et autres.

Aperçu en image:


Optimisé pour tous les navigateurs - Version PHPBB2

Quelques infos:
- La taille de la création est de 200 pixels.
- La taille des avatars dans le code est de 320 pixels, mais adaptable si vous modifiez la valeur.
- Les couleurs et les polices sont modifiables et sont toutes indépendantes de la charte de couleur dans l'onglet Couleurs.

Installer votre nouveau profil:
Pour commencer l'installation de notre nouveau profil, nous allons devoir aller dans Panneau d'administration > Accueil > Affichage > Templates > Généralités > viewtopic_body et chercher cette partie, si votre template n'est pas encore modifiée
Code:
<!-- BEGIN displayed -->
   <tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
         <span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
            <span class="postdetails poster-profile">
            {postrow.displayed.POSTER_RANK}<br />
            {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
            <!-- BEGIN profile_field -->
            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
            <!-- END profile_field -->
            {postrow.displayed.POSTER_RPG}
         </span><br />
         <img src="http://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" />
      </td>


Vous supprimez et vous remplacez par ce qui suis
Code:
<!-- BEGIN displayed -->
   <tr id="p{postrow.displayed.U_POST_ID}">
      <td valign="top">
                     <div class="profil_posteur">
            <div class="pseudo_sujet">
                                  <a name="{postrow.displayed.U_POST_ID}" id="{postrow.displayed.U_POST_ID}"></a>
                                  {postrow.displayed.POSTER_NAME}
                             </div>
            <div class="rang_sujet">
                                  {postrow.displayed.POSTER_RANK}
                             </div>
            <div class="hover_profil">
                                     <div class="avatar_sujet">
                                       {postrow.displayed.POSTER_AVATAR}
                                     </div>
                                     <div class="infosprofil_sujet">
                  <!-- BEGIN profile_field -->
                                             <div class="label_sujet">
                    {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}
                                             </div>
                  <!-- END profile_field -->
                 {postrow.displayed.POSTER_RPG}
                                     </div>
            </div>
            <div class="rang_sujet">
              {postrow.displayed.RANK_IMAGE}
                             </div>
                     </div>
      </td>


Une fois cela fait, enregistrez et validez votre template.

Nous allons ensuite devoir ajouter le CSS qui va le rendre super stylé. Du coup, on va aller dans Affichage > Images et Couleurs > Couleurs > Feuille de style CSS
Code:
/* Profil du membre dans les sujets */
.profil_posteur{
  width:200px;
  background:#927d75;
  padding:8px 0;
  font-family:calibri; /* Police sur toute la zone du profil */
  box-sizing:border-box; /* Cette propriete permet d ajuster le padding en fonction de la taille du bloc */
}
/* La partie suivante centre a la fois le pseudo, le rang écrit et l image du rang */
.pseudo_sujet, .rang_sujet{
  text-align:center;
}
/* La partie suivante concerne uniquement le pseudo du membre */
.pseudo_sujet{
  font-size:16px;
}
/* La partie suivante concerne les div du rang */
.rang_sujet{
  font-size:10px;
  letter-spacing:2px;
  text-transform:uppercase;
}
/* La partie suivante concerne uniquement l image du rang */
.rang_sujet img{
  max-width:100%;
}
/* La partie suivante concerne l'effet sur le profil */
.hover_profil{
  position:relative; /* Ne pas modifier cette partie */
  width:200px; /* A modifier en fonction de la taille de votre avatars */
  height:320px; /* A modifier en fonction de la taille de votre avatars */
  overflow:hidden;
  margin:8px 0;
}
.avatar_sujet{
  position:absolute;
  top:0;
  left:0;
  /* La propriete filter permet d appliquer un flou a l image */
  -webkit-filter: blur(0px);
  -moz-filter: blur(0px);
  -o-filter: blur(0px);
  -ms-filter: blur(0px);
  filter: blur(0px);
  /* La valeur scale permet d agrandir la zone concernee */
  -webkit-transform:scale(1);
  transform:scale(1);
  /* La propriete transition permet d avoir un effet fluide */
  -webkit-transition:all 400ms;
  transition:all 400ms;
}
.hover_profil:hover .avatar_sujet{
  /* La propriete filter permet d appliquer un flou a l image */
  -webkit-filter: blur(2px);
  -moz-filter: blur(2px);
  -o-filter: blur(2px);
  -ms-filter: blur(2px);
  filter: blur(2px);
  /* La valeur scale permet d agrandir la zone concernee */
  -webkit-transform:scale(2);
  transform:scale(2);
}
.infosprofil_sujet{
  position:absolute; /* Ne pas modifier cette partie */
  top:10px; /* Ne pas modifier cette partie */
  left:10px; /* Ne pas modifier cette partie */
  width:180px;
  height:300px;
  overflow:auto;
  padding:10px;
  background:rgba(0, 0, 0, 0.2); /* La derniere valeur permet de modifier l opacite de la couleur de fond */
  border:4px solid #f9fdf9;
  box-sizing:border-box; /* Cette propriete permet d ajuster le padding en fonction de la taille du bloc */
  opacity:0;
  /* La valeur scale permet d agrandir la zone concernee */
  -webkit-transform:scale(1.5);
  transform:scale(1.5);
  /* La propriete transition permet d avoir un effet fluide */
  -webkit-transition:all 400ms;
  transition:all 400ms;
}
.hover_profil:hover .infosprofil_sujet{
  opacity:1;
  /* La valeur scale permet d agrandir la zone concernee */
  -webkit-transform:scale(1);
  transform:scale(1);
}
.label_sujet{
  background:#f9fdf9;
  padding:3px;
  text-transform:uppercase;
  font-size:10px;
  letter-spacing:1px;
  margin:0 0 5px 0;
}
/* Ne pas modifier cette partie */
.label_sujet:last-child{
  margin:0 0 0 0;
}
/* empeche certaines infos du profil de depasser*/
.infosprofil_sujet img,
.infosprofil_sujet textarea {
  max-width: 100%;
  box-sizing: border-box;
}


Si jamais vous voulez une image dans vos profils, vous devez mettre le champ en tout premier et avec une image par défaut, sans quoi cela peut provoquer quelques problèmes avec le code actuel.

Voici aussi les champs à renseigner pour ne pas afficher le titre du label


Donc, si vous suivez ces indications, ajoutez ceci à votre CSS
Code:
/* Ne pas modifier cette partie */
.label_sujet:first-child{
  padding:0;
}
/* Ne pas modifier cette partie */
.label_sujet:first-child > img{
  width:100%; /* le pourcentage permet de redimensionner l image quelque soit sa taille et celle de la zone */
}


N'oubliez pas de l'enregistrer, et voilà vos nouveaux profils ! Very Happy

J'espère que ça vous plaît, et n'hésitez surtout pas à poster un petit "merci", ça fait toujours très plaisir :mouton:

Cheshire Cat

Profil simple aux bordures arrondies - Dim 19 Fév 2017 - 14:53



Bonjour à tous !
Aujourd'hui je vous propose un profil très simple et facilement modifiable ^-^

Si vous rencontrez un problème avec ce libre service, n'hésitez pas à demander de l'aide dans la section Problème avec mon code. De plus, vous pouvez vous référer à la section Personnalisations si jamais vous n'y connaissez rien en codage et que vous avez du mal à changer les couleurs et autres.

Rendu en image:


Optimisé pour tous les navigateurs - Version PHPBB2

Quelques infos:
- La taille est adaptée automatiquement
- Les couleurs et les polices sont modifiables et sont toutes indépendantes de la charte de couleur dans l'onglet Couleurs.
- L'image "Info du profil" est modifiable.

Installer votre nouveau profil:
Pour commencer l'installation de nos nouveau profil, nous allons devoir aller dans Panneau d'administration > Accueil > Affichage > Templates > Généralités > viewtopic_body et chercher cette partie, si votre template n'est pas encore modifiée
Code:
<!-- BEGIN displayed -->
 <tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
 <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
 <span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
 <span class="postdetails poster-profile">
 {postrow.displayed.POSTER_RANK}<br />
 {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
 <!-- BEGIN profile_field -->
 {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
 <!-- END profile_field -->
 {postrow.displayed.POSTER_RPG}
 </span><br />
 <img src="http://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" />
 </td>


Vous supprimez et vous remplacez par ce qui suis
Code:
<!-- BEGIN displayed -->
 <tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
 <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
 <span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a></span>
                   <div class="SujetPseudo">{postrow.displayed.POSTER_NAME}</div>
                   <div class="SujetProfil">
 <div class="SujetRang">
                                   {postrow.displayed.POSTER_RANK}<br />
                                   {postrow.displayed.RANK_IMAGE}
                           </div>
                           <span class="SujetAvatar">
                           {postrow.displayed.POSTER_AVATAR}
                           </span>
                   </div>
                   <div class="SujetInfosProfil">
                           <div>
 <!-- BEGIN profile_field -->
                           <div class="SujetLabel">{postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}</div>
 <!-- END profile_field -->
 <div class="SujetFeuillePerso">{postrow.displayed.POSTER_RPG}</div>
                           </div>
                           <img src="http://img11.hostingpics.net/pics/480042Infoduprofil.png" alt="Infos fermées" class="ImageInfosClosed" />
                   </div>
 </td>


Une fois cela fait, enregistrez et validez votre template.

Nous allons ensuite devoir ajouter le CSS qui va le rendre super stylé. Du coup, on va aller dans Affichage > Images et Couleurs > Couleurs > Feuille de style CSS
Code:
/* Commande profil par Cheshire Cat */
/* Concerne le pseudo du membre */
.SujetPseudo{
  margin-bottom:-12px; /* fait descendre le pseudo en dessous de la bordure du profil */
  text-align:center;
  text-transform:uppercase;
  font-size:20px;
}
/* Empêche le pseudo d'être écrit en gras */
.SujetPseudo strong{
  font-weight:normal;
}
/* Concerne l'avatar et le rang */
.SujetProfil{
  margin:0 5px;
  width:230px;
  padding:15px;
  box-sizing:border-box;
  border-radius:15px;
  border:1px solid #d6d59c;
  background-color:#fafdf9;
}
/* Concerne le rang */
.SujetRang{
  margin:5px 0 15px;
  text-align:center;
  font-size:15px;
  color:#6e520f;
  letter-spacing:1px;
}
/* Concerne les informations du profil */
.SujetInfosProfil{
  width:135px;
  padding:0px 15px 0px 15px;
  margin-top:-1px;
  margin-left:34px;
  box-sizing-border-box;
  border-bottom-left-radius:15px;
  border-bottom-right-radius:15px;
  border:1px solid #d6d59c;
  background-color:#fafdf9;
  transition:all 800ms;
  font-size:11px;
}
/* Ajoute un padding supérieur au passage de la souris pour afficher les informations */
.SujetInfosProfil:hover{
  padding:15px 15px 0 15px;
}
/* Concerne la parite interne aux informations */
.SujetInfosProfil > div{
  height:0px;
  overflow:auto;
  transition:all 800ms; /* créé une transition progressive avant et après passage de la souris */
}
/* Affiche les informations au survol */
.SujetInfosProfil:hover > div{
  height:180px;
}
/* Concerne les champs du profil */
.SujetLabel{
  margin-bottom:5px;
  margin-right:5px;
  padding:3px;
  background-color:rgba(233, 236, 234, 0.7);
  border:1px solid #bcb7ba;
  color:#6e520f;
}
/* Supprime le margin-bottom pour le dernier champ du profil */
.SujetLabel:last-of-type{
  margin-bottom:0;
}
/* Concerne la feuille de personnage */
.SujetFeuillePerso{
  color:#6e520f;
}
/* Concerne le lien vers la feuille de personnage */
.SujetFeuillePerso a[href="/u1rpgsheet"]{
  text-align:center;
  letter-spacing:1px;
  display:block;
  margin:10px 0 5px;
  color:#6e520f;
  border-bottom:1px solid #6e520f;
}
/* Supprime les balises BR avant et après le lien vers la feuille de personnage */
.SujetFeuillePerso br:first-of-type,
.SujetFeuillePerso br:nth-of-type(2){
  display:none;
}
/* Concerne l'image en bas des informations du profil */
.ImageInfosClosed{
  margin-bottom:-1px;
  margin-left:-15px;
  opacity:0.6;
}

/* empeche certaines infos du profil de depasser*/
.SujetInfosProfil > div img,
.SujetInfosProfil > div textarea {
  max-width: 100%;
  box-sizing: border-box;
}


N'oubliez pas de l'enregistrer, et voilà vos nouveaux profils ! Very Happy

Un petit merci fait toujours plaisir, alors hésite pas ! :mouton:

Cheshire Cat

Catégories style steampunk - Dim 19 Fév 2017 - 14:49



Bonjour ou bonsoir !
Je suis de nouveau là, de retour pour vous proposer un nouveau libre service de catégories avec un style plutôt steampunk ^-^
Si vous rencontrez un problème avec ce libre service, n'hésitez pas à demander de l'aide dans la section Problème avec mon code. De plus, vous pouvez vous référer à la section Personnalisations si jamais vous n'y connaissez rien en codage et que vous avez du mal à changer les couleurs et autres.

Un aperçu en image:
Spoiler:


Optimisé pour tous les navigateurs - Version PHPBB2

Installer vos nouvelles catégories:
Pour commencer l'installation de nos nouvelles catégories, nous allons devoir aller dans Panneau d'administration > Accueil > Affichage > Templates > Généralités > Index_box et remplacer le code d'origine par le suivant.

Code:
<div class="catLiens">
  <!-- BEGIN switch_user_logged_in -->
  <a href="{U_SEARCH_NEW}">{L_SEARCH_NEW} - </a>
  <a href="{U_SEARCH_SELF}">{L_SEARCH_SELF} - </a>
  <!-- END switch_user_logged_in -->
  <a href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
</div>
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<div class="categorie">
 {catrow.tablehead.L_FORUM}
 <!-- END tablehead -->
 <!-- BEGIN forumrow -->
  <div class="catCentre">
  <div class="inline catGauche">
          <div class="catStats">{catrow.forumrow.TOPICS} sujets et {catrow.forumrow.POSTS} messages</div>
          <div class="inline catLast">
                  <img class="newOldLock" title="{catrow.forumrow.L_FORUM_FOLDER_ALT}" src="{catrow.forumrow.FORUM_FOLDER_IMG}" alt="{catrow.forumrow.L_FORUM_FOLDER_ALT}" /><br />
  {catrow.forumrow.LAST_POST}
          </div>
          <div class="inline catAvatar">
 <!-- BEGIN avatar -->
                  {catrow.forumrow.avatar.LAST_POST_AVATAR}
  <!-- END avatar -->
          </div>
  <div class="inline sousForums">{catrow.forumrow.LINKS}</div>
  </div>
  <div class="inline catDroite">
  <a class="catTitreForum" href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a>
  <div class="catDescrip">{catrow.forumrow.FORUM_DESC}</div>
        </div>
  </div>
 <!-- END forumrow -->
 <!-- BEGIN tablefoot -->
  <img src="http://zupimages.net/up/17/13/mt9t.png" />
</div><!-- END tablefoot --><!-- END catrow -->


Une fois cela fait, enregistrez et validez votre template.

Nous allons ensuite devoir ajouter le CSS qui va le rendre super stylé. Du coup, on va aller dans Affichage > Images et Couleurs > Couleurs > Feuille de style CSS

Code:
/* Catégories réalisées par Cheshire Cat */
.catLiens{
  text-align:center;
}
.categorie{
  width:800px;
  margin:0 auto;
  font-family:calibri;
  font-size:12px;
}
.inline{
  display:inline-block;
  vertical-align:top;
}
.categorie h2{
  margin:20px 0 0;
  padding:30px 0;
  box-sizing:border-box;
  background-image:url('http://zupimages.net/up/17/13/mt9t.png');
  font-size:30px;
  font-weight:normal;
  text-align:center;
  color: #523e32;
  text-shadow: 0 0 3px #55493f;
}
.catCentre{
  padding:0 20px 40px 20px;
  background:#21130d;
}
.categorie h2 + .catCentre{
  padding-top:40px;
}
.catGauche{
  width:400px;
  background-color:#a9a08b;
  margin-right:10px;
  padding:10px;
  box-sizing:border-box;
}
.catStats{
  color:#654f3f;
  font-size:15px;
  margin-bottom:3px;
  text-transform:uppercase;
  letter-spacing:1px;
}
.catLast{
  width:130px;
  height:120px;
  padding:5px;
  box-sizing:border-box;
  background-color:#ccc6b8;
  text-align:center;
  line-height:20px;
  overflow:auto;
}
.catAvatar{
  width:80px;
  height:120px;
  margin:0 10px;
  overflow:hidden;
  background-color:#ccc6b8;
}
.catAvatar img{
  width:100%;
}
.sousForums{
  width:150px;
  height:120px;
  background-color:#ccc6b8;
  font-size:0;
  overflow: auto;
}
.sousForums a{
  display:block;
  background:#fff;
  font-size:12px;
  text-align:center;
  margin-bottom:5px;
}
.catDroite{
  width:350px;
  background-color:#a9a08b;
  padding:10px;
  box-sizing:border-box;
}
.catTitreForum {
  font-size:15px;
  text-transform:uppercase;
  letter-spacing:1px;
}
.catDescrip{
  height:120px;
  background-color:#ccc6b8;
  margin-top:5px;
  padding:10px;
  overflow:auto;
  text-align:justify;
  box-sizing:border-box;
}


N'hésitez pas à poster un petit message, ça fait toujours plaisir !

Cheshire Cat

Page d'accueil Rose/Violet/Blanc pastel - Dim 19 Fév 2017 - 14:48



Bonjour à vous tous !
Aujourd'hui je suis là pour vous proposer une petite PA toute gentille.

Si vous rencontrez un problème avec ce libre service, n'hésitez pas à demander de l'aide dans la section Problème avec mon code. De plus, vous pouvez vous référer à la section Personnalisations si jamais vous n'y connaissez rien en codage et que vous avez du mal à changer les couleurs et autres.

Rendu en image:


Optimisé pour tous les navigateurs - Toutes versions

Pour installer votre Page d'Accueil, il vous faudra aller créer une page HTML. Faites Panneau d'administration > Affichage > Images et Couleurs > Couleurs > Feuille de style CSS et copiez le code qui va suivre dans votre feuille de style
Code:
/* Commande de Page d'accueil par Cheshire Cat */
      .inline{
         display:inline-block;
         vertical-align:top;
      }
      .PA{
         background-color:#f1ead6;
         width:800px;
         margin:20px auto;
         padding:10px 20px 20px 20px;
         box-sizing:border-box;
         box-shadow:1px 1px 3px #b1a9a9;
         border-radius:30px;
         font-family:calibri;
         font-size:13px;
         color:#674b4b;
      }
      .PA a{
         color:#de8585;
         transition:all 400ms;
      }
      .PA a:hover{
         color:#8a4c4c;
      }
      .PA h1{
         margin:0 -20px 10px;
         padding-bottom:10px;
         text-align:center;
         font-weight:normal;
         font-size:40px;
         border-bottom:2px solid #b79f9f;
         font-family:'Montez';
      }
      .PA h2{
         margin:0 20px 10px;
         text-align:center;
         font-weight:normal;
         font-size:30px;
         border-bottom:2px solid #b79f9f;
         font-family:'Montez';
      }
      .PA-Gauche{
         width:250px;
      }
      .contexte{
         height:240px;
         margin-bottom:20px;
         padding:10px;
         background-color:#f9f7f7;
         box-shadow:1px 1px 3px #b1a9a9;
         border-radius:20px;
         overflow:auto;
         text-align:justify;
         line-height:16px;
      }
      .PA-Droite{
         width:480px;
         margin-left:20px;
      }
      .staff-votes{
         width:235px;
         margin-right:20px;
      }
      .staff{
         padding:0 10px;
         margin-bottom:10px;
      }
      .infobulle{
         position:relative;
         width:100px;
         height:100px;
         overflow:hidden;
         border-radius:10px;
         background-color:#EFEFEF;
         box-shadow:1px 1px 3px #b1a9a9;
      }
      .infobulle:first-of-type{
         margin-right:10px;
      }
      .infobulle > img{
         width:100%;
      }
      .infobulle div{
         position:absolute;
         top:100px;
         left:0;
         width:100px;
         height:100px;
         padding:10px;
         box-sizing:border-box;
         background-color:#fbf7f7;
         text-align:center;
         font-size:15px;
         line-height:25px;
         opacity:0;
         transition:all 600ms;
      }
      .infobulle:hover div{
         top:0;
         opacity:0.9;
      }
      .votes{
         text-align:center;
         font-size:0;
      }
      .votes img{
         margin:0 3px;
      }
      .nouveautes{
         width:200px;
         height:190px;
         margin-bottom:10px;
         padding:10px;
         overflow:auto;
         background-color:#f9f7f7;
         box-shadow:1px 1px 3px #b1a9a9;
         border-radius:20px;
         text-align:justify;
         line-height:20px;
      }
      .partenaires{
         padding:10px;
         background-color:#f9f7f7;
         box-shadow:1px 1px 3px #b1a9a9;
         border-radius:20px;
         text-align:center;
         line-height:17px;
      }
      #boxe_defil {
         position:relative;
         height:31px;
         overflow:hidden;
      }
      #defile {
         position:absolute;
         margin-top:1px;
         background-color:transparent;
      }
      .credits{
         font-size:10px;
         padding:0 20px;
      }


Ensuite dirigez vous dans Affichage > Page d'Accueil > Généralités. Copiez le code qui va suivre et collez-le dans la zone.
Code:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montez" />      
<div class="PA">
        
 <h1>
 Namaste {USERNAME}
 </h1>
        
 <div class="inline PA-Gauche">
            
 <h2>
 Contexte
 </h2>
            
 <div class="contexte">
               En se réveillant un matin après des rêves agités, Gregor Samsa se retrouva, dans son lit, métamorphosé en un monstrueux insecte. Il était sur le dos, un dos aussi dur qu’une carapace, et, en relevant un peu la tête, il vit, bombé, brun, cloisonné par des arceaux plus rigides, son abdomen sur le haut duquel la couverture, prête à glisser tout à fait, ne tenait plus qu’à peine. Ses nombreuses pattes, lamentablement grêles par comparaison avec la corpulence qu’il avait par ailleurs, grouillaient désespérément sous ses yeux. « Qu’est-ce qui m’est arrivé ? » pensa-t-il. Ce n’était pas un rêve.            
 </div>
            
 <div class="credits">
               © PA codée par Cheshire Cat de <a href="http://epicode.bbactif.com/">Epicode</a> et <a href="http://www.never-utopia.com">N-U</a><br />            
 </div>
        
 </div>
        
 <div class="inline PA-Droite">
            
 <div class="inline staff-votes">
              
 <h2>
 Staff
 </h2>
              
 <div class="staff">
                  
 <div class="infobulle inline">
                     <img alt="Pseudo" src="https://i37.servimg.com/u/f37/19/61/08/98/avamoi10.jpg" />                    
 <div>
                        Alrun<br />                        Fondatrice<br />                        <a href="#">Profil</a> - <a href="#">MP</a>                    
 </div>
                  
 </div>
                  
 <div class="infobulle inline">
                     <img alt="Pseudo" src="http://img11.hostingpics.net/pics/675085toto.png" />                    
 <div>
                        Tomgoku<br />                        Fondateur<br />                        <a href="#">Profil</a> - <a href="#">MP</a>                    
 </div>
                  
 </div>
              
 </div>
              
 <h2>
 Top-sites
 </h2>
              
 <div class="votes">
                  <a href="#"><img alt="Top-site" src="https://i37.servimg.com/u/f37/19/61/08/98/space_10.gif" /></a>                  <a href="#"><img alt="Top-site" src="https://i37.servimg.com/u/f37/19/61/08/98/space_10.gif" /></a>                  <a href="#"><img alt="Top-site" src="https://i37.servimg.com/u/f37/19/61/08/98/space_10.gif" /></a>                  <a href="#"><img alt="Top-site" src="https://i37.servimg.com/u/f37/19/61/08/98/space_10.gif" /></a>              
 </div>
            
 </div>
            
 <div class="inline">
              
 <h2 class="">
 Nouveautés
 </h2>
              
 <div class="nouveautes">
               00/00/0000 - Texte descriptif ou lien<br />               00/00/0000 - Texte descriptif ou lien<br />               00/00/0000 - Texte descriptif ou lien<br />               00/00/0000 - Texte descriptif ou lien<br />               00/00/0000 - Texte descriptif ou lien<br />               00/00/0000 - Texte descriptif ou lien<br />              
 </div>
            
 </div>
            
 <h2>
 Partenaires
 </h2>
            
 <div class="partenaires">
              
 <div id="boxe_defil">
                  
 <div id="defile">
                     <a href="http://feminin-pluriel.discutland.net/"><img title="Féminin Pluriel" alt="Féminin Pluriel" src="http://img110.xooimage.com/files/d/b/6/logo-5185e32.gif" /></a>                     <a href="http://www.ouaf-ouaf-pub.com/"><img title="Ouaf Ouaf Pub" alt="Ouaf Ouaf Pub" src="http://image.noelshack.com/fichiers/2016/42/1476784253-oop-kit88.gif" /></a>                     <a href="http://voyances-ombeline.forumgratuit.be/"><img title="Au delà des voyances" alt="Au delà des voyances" src="http://i18.servimg.com/u/f18/11/27/81/85/logo_811.png" /></a>                     <a href="http://dream-pub.forumactif.fr/"><img title="Dream Pub" alt="Dream Pub" src="http://i68.tinypic.com/2n9hnrc.jpg" /></a>                     <a href="http://lecture-publicites.forumactif.com/"><img title="Lecture et publicités" alt="Lecture et publicités" src="https://i37.servimg.com/u/f37/19/58/81/65/logo_810.png" /></a>                  
 </div>
              
 </div>
               <script type="text/javascript">
               var defile;// l'element a deplacer
               var psinit = 480; // position horizontale de depart
               var pscrnt = psinit;      
               function texteDefile() {
                  if (!defile) defile = document.getElementById('defile');
                  if (defile) {
                     if(pscrnt < ( - defile.offsetWidth) ){
                        pscrnt = psinit;
                           } else {
                     pscrnt+= -1; // pixel par deplacement
                  }
                     defile.style.left = pscrnt+"px";
                  }
               }
               window.setInterval("texteDefile()",20); // delai de deplacement
               </script>            
 </div>
        
 </div>
      
</div>


Vous avez le droit de poster pour dire un p'tit "merci", ça fait toujours plaisir ! Very Happy

IceCreamMaster

Fiche de RP beige simple - Dim 12 Fév 2017 - 0:00



Fiche de RP beige



C'est ma toute première fiche :3

Le code est en hide. Aperçu :3

Marie

Affichage liste de membres en flip Card - Mer 8 Fév 2017 - 22:45


Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide


Bonjour/ Bonsoir!

Alors, je viens vous proposer un petit LS faite de mes propres mains! Je l'appelle le "Flip Card Member List". Bon il existe surement mais j'ai la flemme de trouver un nom original donc voilà! Puis, si ça vous convient pas c'est la même! Razz Bon, je charriais et c'était entièrement ironique!

Affichage : Flip - Affichage en survol :Backflip! - Lien d'un forum test : Ici Version du forum : PHPBB2



Template memberlist_body:

Code:
<form action="{S_MODE_ACTION}" method="get">
    <table cellspacing="0" cellpadding="5" border="0" align="center" class="forumline" width="100%">
      <tr>
          <th class="thTop" nowrap="nowrap">{L_ORDER_OR_SELECT}</th>
      </tr>
      <tr>
          <td class="row1">
          <table cellspacing="2" cellpadding="0" border="0" align="center" class="genmed">
            <tr>
                <td width="100%">{L_USER_SELECT} <input type="text" class="post" name="username" maxlength="25" size="20" value="{L_USER_SELECT_VALUE}" />     
                {L_SELECT_SORT_METHOD} {S_MODE_SELECT}     
                {L_ORDER} {S_ORDER_SELECT}     
                {S_HIDDEN_SID}
                <input class="liteoption" type="submit" name="submit" value="{L_SUBMIT}" /></td>
            </tr>
          </table>
          </td>
      </tr>
    </table>
    </form>
   
    <!-- BEGIN memberrow -->
     
          <div class="memberlist"><div class="flipa"><div class="flipb"><div class="flipping">
                      <div class="backflip"><div class="avatar_member_list"><a href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG}</a></div></div>
                      <div class="sousavatar"><div style="padding: 5px;"><div class="pseudo_member"><a class="gen" href="{memberrow.U_VIEWPROFILE}">{memberrow.USERNAME}</a></div><div class="groups"><span class="gen">{memberrow.GROUPS}</span></div>
                        <div class="stat_member"> Ce membre nous a rejoint le {memberrow.JOINED}. <br/><br/>Sa dernière visite est {memberrow.LASTVISIT}{memberrow.POSTS}. <br/><br/>Boîte à mp:{memberrow.PM_IMG}{memberrow.WWW_IMG}</div></div></div></div></div></div>
                    </div>
      <!-- END memberrow -->
      <!-- BEGIN switch_no_user -->
     
      <!-- END switch_no_user -->
   
        <br/><div class="copyright">Codé par Allhyka pour<a href="http://www.never-utopia.com" target="_blank"> Never-Utopia</a></div>
   
    <!-- BEGIN switch_pagination -->
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
          <td><span class="nav">{PAGE_NUMBER}</span></td>
          <td align="right"><span class="nav">{PAGINATION}</span></td>
      </tr>
    </table>
    <br />
    <!-- END switch_pagination -->




Le CSS:

Code:

/**** CODER PAR MARIE POUR NEVER-UTOPIA. MERCI DE LAISSER LE COPYRIGHT***/

/**** AFFICHAGE MEMBRE LISTE****/

.memberlist {
display:inline-block;
vertical-align:top;
margin-bottom: 15px;
margin-right: 15px;
}

 /*** FORMAT DE L'IMAGE DE L'AVATAR ***/
.avatar_member_list img{
  width: 100px;/** taille de l'image de l'avatar que vous désiré qu'il s'affiche **/
  height: 160px;
}


/*** L'ANIMATION FLIP CARD ***/
.flipa {
  width: 100px; /** les tailles doivent être le même format que l'image de l'avatar! **/
  height: 160px;
  overflow: hidden;
  background-color: #D0D7D2;
  border: 2px outset black; /**** La bordure autour ***/
  box-shadow: 10px 10px 2px 0px #5E5E5E;
}

.flipb {
  width: 100px; /*** Remettez la taille de l'avatar plus haut ***/
  height: 160px;
  perspective:1000;
  box-shadow: 2px 2px #999696;
}

.flipping {
  transform-style:preserve-3d;
  transition: all 1.2s ease-in-out;
  box-shadow: 2px 2px #999696;
}

.flipb:hover .flipping {
 transform: rotateY(180deg); /*** Le sens du flip***/
}

.backflip {
  width: 100px; /*** Remettez la taille de l'avatar plus haut ***/
  height: 160px;
  box-shadow: 3px 3px 0px #999696;
  overflow: hidden;
  backface-visibility: hidden;
  position: absolute;
  transition: all 1.2s ease-in-out;
}

/*** DERRIERE L'AVATAR ***/

.sousavatar {
  width: 100px; /*** Remettez la taille de l'avatar plus haut ***/
  height: 160px;
  background-color: #fff;
  overflow: hidden;
  box-shadow: 2px 2px #999696;
  opacity: 0;
  transform: rotateY(180deg);
  transition: all 1.2s ease-in-out;
  backface-visibility: hidden;
  position: absolute;
  overflow: auto;
}

.pseudo_member {
 
 font-family: 'Playball', cursive; /**L'écriture**/
  text-align: center;
  color: #000;
  line-height: 100%;
  font-size: 16px;
  text-transform: uppercase;
}

.stat_member {
  font-family: georgia; /**L'écriture**/
  font-size: 10px;
  color: #000;
  text-align: left;
 }

.groups {
  font-family: arial; /**L'écriture**/
  text-align: center;
  font-size: 7px;
  color: #000;
  line-height: 100%;
  text-transform: uppercase;
  margin-bottom: 5px;
  border-bottom:1px solid #000;
}


.flipb:hover .sousavatar {
  opacity: 1;
}

.copyright {
font-size: 10px;
text-align: right;
font-family: georgia;
}


Pour tout problème ou question, il suffira de poster un petit sujet là --> Problème avec mon code <--- Je viendrai vous aider avec plaisir ! :)


Voilà!

J'espère que ce LS vous aura plus!

A bientôt pour d'autre LS! :wesh:

Littleelda

Contenue rp style cerisier - Ven 3 Fév 2017 - 21:35



Fiche de RP cerisier



Bonjour,
voici mon premier libre service, j'espère qu'il vous plaira.

Deux trois choses à savoir avant :

- la taille (balise "width") est en pourcentage afin de s'adapter sur normalement tout les forums et je l'ai fixé à 80% mais vous pouvez la diminuer ou la mettre à 100% si vous préférez (pensez à changer celle de la zone de texte aussi).
- Pour l'image des cerisiers j'ai mis une image de 700 px de large afin qu'elle convienne au plus de forums possible. Vous pouvez la retoucher si nécessaire.

Voilà, j'espère qu'elle sera simple et facile d'accès. =)

Aperçu photo:




Aperçu tel quel:







Titre de votre rp


Feat. Pseudos des participants




Et confisus cum clientes miser sis aetatem dederis amicitiam esses summittendo ut postridie si miser nec esses esses ubi ut cum si ut unde venias ubi tandem vel ambigente hesterno cum paria stipite tot te haerebis tot numerando te ambigente tot et ad confisus incognitus eadem interrogatus per nec salutandi diutius adsiduitati illo stipite confisus indiscretus tot tempus summittendo si ubi adscitus incognitus vero amicitiam dederis repentinus interrogatus vero adscitus ut adfabilitate haerebis in reverteris discesseris ambigente ubi haerebis et dederis in paria salutandi quo interrogatus tandem discesseris sis quo tot clientes incognitus agnitus haerebis conteres triennio vero dierum tandem.Et confisus cum clientes miser sis aetatem dederis amicitiam esses summittendo ut postridie si miser nec esses esses ubi ut cum si ut unde venias ubi tandem vel ambigente hesterno cum paria stipite tot te haerebis tot numerando te ambigente tot et ad confisus incognitus eadem interrogatus per nec salutandi diutius adsiduitati illo stipite confisus indiscretus tot tempus summittendo si ubi adscitus incognitus vero amicitiam dederis repentinus interrogatus vero adscitus ut adfabilitate haerebis in reverteris discesseris ambigente ubi haerebis et dederis in paria salutandi quo interrogatus tandem discesseris sis quo tot clientes incognitus agnitus haerebis conteres triennio vero dierum tandem.



©Codage by Littleelda from Never Utopia






Edit : merci pour l'ajout de balise et pour le coup de main, j'ai eu un trou. je viens de le mettre à jour, j'espère que ça plaira =)

Créer un coin sympathique pour converser (chatbox en page html) - Jeu 2 Fév 2017 - 12:15


Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Lien pour comprendre pourquoi le contenu n'est pas sous hide


Bien le bonjour à toutes et à tous.

Aujourd'hui, je viens vous proposer de coder une page HTML de votre forum pour y créer un coin sympathique pour votre CB. Pourquoi est-ce que je préfère passer par une page indépendante au lieu de mettre la CB directement sur mon forum ? Tout simplement par ce que les CB ne s'intègre pas forcément à la structure et au design réalisé.

Toutes versions ▬ CSS, HTML & Templates ▬ Aperçu (screen)

Si vous avez le moindre problème avec ce LS, n'oubliez pas que la section Problème avec mon code est à votre disposition.


Le code de la page HTML :


Pour commencer, il faut débuter une nouvelle page HTML :

Panneau d'administration (en avancée) => Modules => HTML & JAVASCRIPT => Gestion des pages HTML => Création en mode avancé.

Donnez un titre à votre page. J'ai fait au plus simple avec "tchatbox".

Maintenant insérez le code entier :

Code:
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Titre de votre page.</title>
  <style type="text/css">
    body {
      margin: 0px;
      background-image: url('http://img15.hostingpics.net/pics/550548fondPA.png');
    }

    .reglement_CB {
      height: 610px;
      width: 470px;
      padding: 10px;
      text-align: justify;
      color: black;
      font-size: 14px;
    }

    .cb_page {
      box-shadow: 0px 0px 2px black;
      margin-top: 5px;
      margin-left: 5px;
      width: 850px;
      height: 630px;
    }

    .cb_page,
    .reglement_CB {
      display: inline-block;
      vertical-align: top;
    }
  </style>
</head>

<body>
  <iframe src="/chatbox/index.forum" class="cb_page" frameborder="0"></iframe>
  <div class="reglement_CB">
    <div style="text-align: center;"><img src="http://img11.hostingpics.net/pics/392986titrereglecb.png" /></div><br /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes,
    nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
  </div>
</body>
</html>


Détail du code :


Code:
<style type="text/css">
  body {
    margin: 0px;
    background-image: url('http://img15.hostingpics.net/pics/550548fondPA.png');
  }

  .reglement_CB {
    height: 610px;
    width: 470px;
    padding: 10px;
    text-align: justify;
    color: black;
    font-size: 14px;
  }

  .cb_page {
    box-shadow: 0px 0px 2px black;
    margin-top: 5px;
    margin-left: 5px;
    width: 850px;
    height: 630px;
  }

  .cb_page,
  .reglement_CB {
    display: inline-block;
    vertical-align: top;
  }
</style>

Ceci est le CSS de votre page HTML, il doit être impérativement entre les balises :
Code:
<style type="text/css"></style>

Si vous souhaitez personnaliser votre CB avec du CSS, vous devez passer par la feuille de CSS de votre forum et non dans la page HTML, sinon ça ne prendra pas en compte vos modifications.


Code:
<iframe src="/chatbox/index.forum" class="cb_page" frameborder="0" ></iframe>

Ceci est votre CB mise en iframe pour l'intégrer à la page. Elle a la classe "cb_page", donc dans le CSS vous pouvez lui donner les propriétés que vous souhaitez, notamment sa hauteur (height) et sa largeur (width). La hauteur et la largeur sont impératives sinon votre CB sera toute petite.


Code:
<div class="reglement_CB"><div style="text-align: center;"><img src="http://img11.hostingpics.net/pics/392986titrereglecb.png" /></div><br />
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
</div>

J'ai mis en place cette partie pour incorporer le règlement de la CB. Vous pouvez y mettre ce qui vous chante, comme une image, des liens menant à divers sujets de votre forum, etc.


Faire venir les membres sur la page.


Votre salon privé est opérationnel, mais il faut faire venir les membres maintenant.

Il n'y aura rien de plus simple dans la pratique. Il suffit d'insérer le lien de votre page HTML où vous le souhaitez :

Spoiler:


Pour ma part, j'ai fait une image de présentation et l'ai inséré dans le template : "overall_footer_begin"

Code:
<div style="text-align: center;"><a href="Lien de votre page HTML" target="_blank"><img src="Lien de l'image de présentation" alt="Visiter la chatbox" /></a></div>


A vous de voir comment vous voulez rendre visible cette invitation à la papote.


Merci d'avoir suivi ce petit LS. N'oubliez pas de créditer Never-Utopia si vous l'utilisez.

Solaris

Soft Ice - Contexte - Mer 1 Fév 2017 - 20:45



Soft Ice - Contexte



Cette section est présente pour vous aider avec vos problèmes de code. Je ne répondrais pas aux MPs que l'on m'enverra à ce sujet.


Bien le bonjour à vous ! C'est caché là, pour proposeeeeeeer ! >< Bref.

Voici mon premier libre service. Je compte faire un pack contenant plusieurs élément regroupés sous le nom "Soft Ice". En voici un aperçu. Le fond bleu pâle autour du cadre n'est pas fourni. Very Happy Le code est compatible avec la dernière version de Firefox, Edge et Chrome... le reste n'a pas été testé.

Pour rappel, il est interdit d'enlever la signature de la fiche. Merci de votre compréhension


Voici le HTML :

Code:
<div class="soft-ice-container"><img class="soft-ice-image" src="http://orig10.deviantart.net/feb1/f/2011/163/8/a/ice_city_by_molybdenumgp03-d3ipf49.jpg" alt="Illustration du contexte" /><section class="soft-ice-content-container"><div class="soft-ice-title soft-ice-title-big">À l'aube d'un Lorem Ipsum</div>
<div class="soft-ice-text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.</div>
<div class="soft-ice-title">Chapitre 1</div>
<div class="soft-ice-text"><img class="soft-ice-image-round left" src="http://i.imgur.com/BQtRmzZ.png" alt="Ice cube" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.<div class="soft-ice-clear"></div></div>
<div class="soft-ice-title">Chapitre 2</div>
<div class="soft-ice-text"><img class="soft-ice-image-round right" src="http://i.imgur.com/BQtRmzZ.png" alt="Ice cube" />Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?<div class="soft-ice-clear"></div></div>
<div class="soft-ice-title">Chapitre 3</div>
<img class="soft-ice-image soft-ice-image-secondary" src="http://orig10.deviantart.net/feb1/f/2011/163/8/a/ice_city_by_molybdenumgp03-d3ipf49.jpg" alt="Illustration contexte 2" /><div class="soft-ice-text">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</div>
<small>Codage © Solaris @ Never-Utopia</small></section></div>


Ainsi que le code CSS :

Code:
.soft-ice-container {
   background-color: #fff;
   border-style: solid;
   border-width: 2px 1px;
   border-color: #a6beee;
   border-radius: 1em 1em 1em 1em / 3em 3em 3em 3em;
   color: #414245;
   overflow: hidden;
   box-shadow: 0 0 3px 0 #a6beee;
   text-shadow: 3px 4px 3px #a6beee;
}

.soft-ice-image {
   width: 100%;
   border-radius: 0 0 50% 50% / 0 0 15px 15px;
   border-bottom: 2px solid #a6beee;
   height: auto;
}

.soft-ice-image-secondary {
   margin: 0 5%;
   width: 90%;
}

.soft-ice-content-container {
   padding: 0.5em 1em 1em;
}

.soft-ice-title {
   border-bottom: 2px solid #a6beee;
   border-left: 1px solid #a6beee;
   border-radius: 1em 0 0 1em;
   font-size: 20px;
   padding: 0.25em 1em;
   margin-right: 0.75em;
   position: relative;
}

.soft-ice-title::after {
   content: "";
   position: absolute;
   width: 0.5em;
   height: 1em;
   right: -0.5em;
   bottom: -2px;
   border-style: solid;
   border-width: 1px 2px 2px 0;
   border-color: #a6beee #a6beee #a6beee transparent;
   border-radius: 0 0.5em 0.5em 0;
}

.soft-ice-title::before {
   content: "";
   position: absolute;
   width: 0.25em;
   height: 0.5em;
   right: 0;
   bottom: 1em;
   border-style: solid;
   border-width: 0 0 1px 1px;
   border-color: transparent transparent #a6beee #a6beee;
   border-radius: 0.25em 0 0 0.25em;
}

.soft-ice-title-big {
   font-size: 30px;
   margin-bottom: 0.25em;
}

.soft-ice-text {
   position: relative;
   margin: 0 1em;
   padding: 5px 5px 7px;
   border-bottom: 1px solid #a6beee;
}

.soft-ice-text::before {
   content: "";
   position: absolute;
   left: -0.5em;
   bottom: -1px;
   height: 1em;
   width: 0.5em;
   border-bottom: 1px solid #a6beee;
   border-left: 1px solid #a6beee;
   border-radius: 1em 0 0 1em;
}

.soft-ice-text::after {
   content: "";
   position: absolute;
   right: -0.5em;
   bottom: -1px;
   height: 1em;
   width: 0.5em;
   border-bottom: 1px solid #a6beee;
   border-right: 1px solid #a6beee;
   border-radius: 0 1em 1em 0;
}

.soft-ice-image-round {
   width: 150px;
   height: auto;
   border: 1px solid #a6beee;
   border-radius: 50%;
}

.soft-ice-image-round.left {
   float: left;
   margin-right: 1em;
}

.soft-ice-image-round.right {
   float: right;
   margin-left: 1em;
}

.soft-ice-clear {
   clear: both;
}


Le code CSS est à ajouter dans le Panneau d'Administration > Affichage > Couleurs > Feuille de style CSS
Il est recommandé de mettre un retour chariot (un appui sur la touche entrée) après le titre principal, ainsi qu'autour des titres secondaires, à des fins esthétiques, mais aussi de clarté.


Voici comment utiliser au mieux ce template de contexte


Tout ce qui suit est à placer dans la section .soft-ice-content-container, avant la balise small.

.soft-ice-title : Pour tous les titres
.soft-ice-title-big : Pour les titres principaux

.soft-ice-text : Bloc de texte
.soft-ice-image-round : Dans un bloc de texte, sert à placer une image ronde
.left ou .right : Couplé avec .soft-ice-image-round, permet de placer l'image à gauche ou à droite respectivement. L'une des deux est obligatoire
.soft-ice-clear : Juste avant la fermeture de la div .soft-ice-text, mais seulement s'il y a une image en .left ou .right

.soft-ice-image : Une image large, avec une bordure en dessous.
.soft-ice-image-secondary : Classe pour les images secondaires du message, mais pas les rondes.


Liens vers les autres modèles :
Rien pour le moment

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.

Système de profil à 2 personnages qui change selon la catégorie - Mer 21 Déc 2016 - 22:12




Système de profil à 2 personnages qui change selon la catégorie


Salut !

Suite à la demande de 24nono38, j'ai conçu un code qui permet l'affichage de 2 personnages différent selon la catégorie où un message est posté.

Je m'explique :
Disons que vous avez un forum rpg avec section "monde des rêves" et "monde réel" et que vos joueurs incarnent un personnage différent selon le monde où ils sont. Vous voulez que le profil de vos joueurs affichent les données du personnage qu'ils jouent selon la catégorie où ils jouent.
Il vous suffira de créer des champs de profil où les joueurs mettront les informations du 2e personnage, soit les champs généraux comme âge, humeur, métier ainsi que des champs plus spéciaux comme rang, url de l'avatar, nom du 2e personnage.
Ensuite, le javascript s'occupera de faire apparaître les bons champs et les bonnes informations selon la catégorie où ils postent.
Utile, non?

Pour voir l'aperçu du premier profil : cliquez ici.
Pour voir l'aperçu du 2e profil : cliquez ici.

Ce LS est en quatre parties.
  • Tout d'abord, nous allons installer le profil dans le template.
  • Puis, nous allons mettre en forme le profil à l'aide du CSS.
  • Ensuite, nous allons créer les champs du 2e personnage dans le profil.
  • Enfin, nous allons installer et modifier le javascript qui fera fonctionner le tout.


- La version du forum est PhpBB2.

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


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



1. Le profil (Template Viewtopic_Body)


Nous allons commencer par aller dans les templates, plus précisément dans le template "Viewtopic_Body" .

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > TEMPLATES
> > > > GÉNÉRAL
> > > > > VIEWTOPIC_BODY

Vous devez trouver ce bout de code (lignes 61 à 67) :
Code:
      <td class="nav" valign="middle" width="100%">
         <span class="nav">
                <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
                <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}"><span>{L_ALBUM}</span></a>-->
                {NAV_CAT_DESC_SECOND}
            </span>
      </td>   


Et le remplacer par ceci :
Code:
      <td class="nav" valign="middle" width="100%">
         <span class="nav">
                <a class="nav" href="{U_INDEX}"><span>{L_INDEX}</span></a>
                <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}"><span>{L_ALBUM}</span></a>-->
                <span class="profil_navig">{NAV_CAT_DESC_SECOND}</span>
            </span>
      </td>   



Puis, vous devez trouver ceci (lignes 139 à 150) :
Code:
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
         <span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
            <span class="postdetails poster-profile">
            {postrow.displayed.POSTER_RANK}<br />
            {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
            <!-- BEGIN profile_field -->
            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
            <!-- END profile_field -->
            {postrow.displayed.POSTER_RPG}
         </span><br />
         <img src="http://illiweb.com/fa/empty.gif" alt="" style="width:150px;height:1px" />
      </td>


Et le remplacer par ceci :
Code:
          <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
            <div class="postdetails poster-profile">
              <div class="profil_utilisateur">
                <div class="name">
                  <a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a>
                  <div class="profil_pseudo">
                    <strong>{postrow.displayed.POSTER_NAME}</strong>
                  </div>
                </div>
                <div class="profil_avatar">{postrow.displayed.POSTER_AVATAR}</div>
                <div class="profil_rang">{postrow.displayed.POSTER_RANK}</div>
                <div class="profil_contact">
                  <!-- BEGIN contact_field -->
                  {postrow.displayed.contact_field.CONTENT}
                  <!-- END contact_field -->
                  {postrow.displayed.PROFILE_IMG}
                  {postrow.displayed.PM_IMG}
                  {postrow.displayed.EMAIL_IMG}
                  {postrow.displayed.ONLINE_IMG}
                </div>
                <div class="profil_infos">
                  <div class="profil_champs">
                    <!-- BEGIN profile_field -->
                    <span class="profil_champ">
                      {postrow.displayed.profile_field.LABEL} <span>{postrow.displayed.profile_field.CONTENT}</span>
                    </span>
                    <!-- END profile_field -->
                  </div>
                </div>
              </div>
        </div>
      </td>



Enfin, vous devez trouvez ceci (lignes 253 à 261) :
Code:
      <td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28">
         <table border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td valign="middle">
                  {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}<!-- BEGIN contact_field --> {postrow.displayed.contact_field.CONTENT}<!-- END contact_field --> {postrow.displayed.ONLINE_IMG}
               </td>
            </tr>
         </table>
      </td>


Et le remplacer par cela :
Code:
      <td class="{postrow.displayed.ROW_CLASS} messaging gensmall"{postrow.displayed.THANK_BGCOLOR} width="100%" height="28">
         <table border="0" cellspacing="0" cellpadding="0">
            <tr>
               <td valign="middle">
               </td>
            </tr>
         </table>
      </td>




2. Mise en forme (CSS)


Si vous regardez votre profil, vous voyez sans doute que ce n'est pas très esthétique pour le moment. Du coup, nous allons le mettre en forme à 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 profil*/
.profil_utilisateur {
  width: 200px;
  margin: auto;
  position: relative;
}

/*Pseudo*/
.profil_pseudo {
  border-bottom: 1px solid #635f5f;
  padding: 5px 2px 5px 2px;
  font-size: 20px;
  margin: auto;
  text-align: center;
}

/*Bloc avatar*/
.profil_avatar {
  margin: 5px auto;
  box-shadow: 0px 0px 5px #635f5f;
  width: 200px;
  height: 320px;
  background: #ffffff;
}
/*Image avatar*/
.profil_avatar img {
  width: 200px;
  height: 320px;
}

/*Rang*/
.profil_rang {
  border-bottom: 1px solid #635f5f;
  border-top: 1px solid #635f5f;
  padding: 3px;
  font-size: 20px;
  margin: 5px auto;
  text-align: center;
  color: #41506f;
  font-family: 'Verdana';
  font-size: 14px;
  font-style: italic;
}

/*Liens sous le rang*/
.profil_contact {
  text-align: center;
}

/*Bloc qui contient les infos*/
.profil_infos {
  margin: 10px auto 5px auto;
  width: 190px;
  padding: 5px;
  background: #ffffff;
  border-bottom: 1px solid #635f5f;
  border-top: 1px solid #635f5f;
}
.profil_champ {
  color: #6f6f6f;
  font-size: 11px;
  display: none;
}
.profil_champ .label {
  color: #000000!important;
}




3. Créer les champs du 2e personnage (profil)


Maintenant, il faut créer les champs qui vont correspondrent aux informations du 2e personnage.

Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > UTILISATEURS & GROUPES
> > > UTILISATEURS
> > > > PROFILS

Puis vous créez les champs. Je suppose que je n'ai pas besoin de vous expliquer comment faire? La seule chose que je vous conseille, c'est de les mettre en ordre. À l'exception du rang, de l'image de l'avatar et du pseudo du 2e personnage, les informations s'affichent dans l'ordre où vous les mettez.

Voilà mon résultat si cela peut vous aider :
Spoiler:




4. Faire fonctionner le système de double profil (Javascript)


Enfin, on passe au javascript.

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

Si le "Activer la gestion des codes Javascript" est à "non", il faut le changer pour "oui" et enregistrer.


Ensuite, on clique sur "Créer un nouveau Javascript"
On choisit un nom, par exemple comme "Système de double profil".
On choisit le placement "Sur les sujets".

Enfin, on met le javascript suivant et on enregistre :
Code:
$(function(){
   
      /*Noms des champs du profil NORMAL*/
      var champnamenormal = [
        "Je suis né(e) le : ",
        "Age du personnage : ",
        "Coté coeur : ",
        "Nombre de messages : ",
        "Je suis arrivé(e) le : ",
        "Dans l'animus je suis : ",
        "Métier : ",
        "Avatar : ",
        "Crédit kit : ",
        "Multi-compte : ",
        "Pseudo : ",
        "Mon âge : ",
        "Localisation : ",
        "Emploi : ",
        "Humeur : ",
        "Let's rock : "
      ];
   
      /*Nom des champs du profil SPÉCIAL tels qu'ils sont créés*/
      var champnamespecial = [
        "Je suis né(e) le (2e perso) : ",
        "Age du personnage (2e perso) : ",
        "Coté coeur (2e perso) : ",
        "Nombre de messages : ",
        "Je suis arrivé(e) le : ",
        "Hors de l'animus je suis (2e perso) : ",
        "Métier (2e perso) : ",
        "Avatar (2e perso) : ",
        "Crédit kit (2e perso) : ",
        "Multi-compte : ",
        "Pseudo : ",
        "Mon âge : ",
        "Localisation (2e perso) : ",
        "Emploi : ",
        "Humeur (2e perso) : ",
        "Let's rock (2e perso) : "
      ];
   
      /*Nom des champs du profil SPÉCIAL tels qu'ils doivent apparaîtrent*/
      var champnamespecialvrai = [
        "Je suis né(e) le : ",
        "Age du personnage : ",
        "Coté coeur : ",
        "Nombre de messages : ",
        "Je suis arrivé(e) le : ",
        "Hors de l'animus je suis : ",
        "Métier : ",
        "Avatar : ",
        "Crédit kit : ",
        "Multi-compte : ",
        "Pseudo : ",
        "Mon âge : ",
        "Localisation : ",
        "Emploi : ",
        "Humeur : ",
        "Let's rock : "
      ];
   
      /*Variables*/
      var champs;
      var champ;
      var champnormal;
      var champspecial;
      var champtext;
      var nouvellevaleur;
      var principal;
      var pseudomachin;
      var cate = $('.profil_navig:first').find('a:first').attr('href');

      /*Catégorie où le profil spécial doit être affiché*/
      var catespecial = "URL DE LA CATÉGORIE SPÉCIALE";
   
      /*Nom du champ du l'image de l'avatar du profil spécial*/
      var avatar2 = "Image avatar (2e perso) : ";
   
      /*Nom du champ du Nom du personnage du profil spécial*/
      var pseudo2 = "Prénom et Nom (2e perso) : ";
   
      /*Nom du champ du rang du personnage du profil spécial*/
      var rang2 = "Rang (2e perso) : ";
   
   
      /*Code à ne pas toucher qui affiche les bonnes données dans le profil SPÉCIAL*/
      if (cate == catespecial) {
        $('.profil_utilisateur').each(function(){
          principal = $(this);
          champs = principal.find('.profil_champ');
          for (y = 0; y < champs.length; y++) {
            champ = champs.eq(y);
            if (champ.find('span.label:first').text() == avatar2) {
              nouvellevaleur = champ.find('img:first').attr('src');
              if (principal.find('.profil_avatar').find('img:first').length > 0) {
                principal.find('.profil_avatar').find('img:first').attr('src', nouvellevaleur);
              }
              else {
                pseudomachin = principal.find('.profil_pseudo a:first').attr('href');
                principal.find('.profil_avatar').append('<a href="' + pseudomachin + '"><img src="' + nouvellevaleur + '" /></a>');
              }
            }
            else if (champ.find('span.label:first').text() == pseudo2) {
              nouvellevaleur = champ.find('span.label:first').next().text();
              if ($(this).find('.profil_pseudo:first').find('a strong:first').length > 0) {
                $(this).find('.profil_pseudo:first').find('a strong:first').text(nouvellevaleur);
              }
              else {
                $(this).find('.profil_pseudo:first').find('a:first').text(nouvellevaleur);
              }
            }
            else if (champ.find('span.label:first').text() == rang2) {
              nouvellevaleur = champ.find('span.label:first').next().text();
              $(this).find('.profil_rang:first').text(nouvellevaleur);
            }
            else {
              for (z = 0; z < champnamespecial.length; z++) {
                champspecial = champnamespecial[z];
                if (champ.find('span.label:first').text() == champspecial) {
                  champ.css('display', 'block');
                  champtext = champnamespecialvrai[z];
                  champ.find('span.label:first').text(champtext);
                }
              }
            }
          }
        });
      }
   
      /*Code à ne pas toucher qui affiche les bonnes données dans le profil NORMAL*/
      else {
        $('.profil_utilisateur').each(function(){
          champs = $(this).find('.profil_champ');
          for (y = 0; y < champs.length; y++) {
            champ = champs.eq(y);
            for (z = 1; z < champnamenormal.length; z++) {
              champnormal = champnamenormal[z];
              if (champ.find('span.label:first').text() == champnormal) {
                champ.css('display', 'block');
              }
            }
          }
        });
      }
    });


Il y a 4 choses à modifier dans ce javascript.

La première section correspond aux champs du profil normal qui apparaît dans presque toutes les catégories. Il s'agit de cette section :
Code:
      /*Noms des champs du profil NORMAL*/
      var champnamenormal = [
        "Je suis né(e) le : ",
        "Age du personnage : ",
        "Coté coeur : ",
        "Nombre de messages : ",
        "Je suis arrivé(e) le : ",
        "Dans l'animus je suis : ",
        "Métier : ",
        "Avatar : ",
        "Crédit kit : ",
        "Multi-compte : ",
        "Pseudo : ",
        "Mon âge : ",
        "Localisation : ",
        "Emploi : ",
        "Humeur : ",
        "Let's rock : "
      ];



Même chose pour la section /*Nom des champs du profil SPÉCIAL tels qu'ils sont créés*/ qui contient les champs du profil spécial tels que vous les avez créés dans le profil.


La section /*Nom des champs du profil SPÉCIAL tels qu'ils doivent apparaîtrent*/ contient les noms des champs du profil spécial tels que vous voulez qu'ils apparaîssent dans le profil. Les champs doivent être dans le même ordre que la section précédente.


Enfin, vous devez remplacer le URL DE LA CATÉGORIE SPÉCIALE de ce bout de code par l'url de votre propre catégorie.
Code:
      /*Catégorie où le profil spécial doit être affiché*/
      var catespecial = "URL DE LA CATÉGORIE SPÉCIALE";


Pour cela, allez sur la catégorie où le profil spécial doit s'afficher et regarder l'url de la page. Cela vous donnera quelque chose comme "http://www.never-utopia.com/c31-les-ateliers". Vous gardez seulement le / et ce qu'il y après, comme "/c31-les-ateliers" et c'est ce que vous utilisez pour remplacer le URL DE LA CATÉGORIE SPÉCIALE.




Si jamais vous voulez que le profil spécial s'affiche dans plus qu'une catégorie spécifique, vous ajoutez ce bout de code pour chaque forum/catégorie supplémentaire juste avant le "/*Code à ne pas toucher qui affiche les bonnes données dans le profil NORMAL*/" :
Code:
/*Code à ne pas toucher qui affiche les bonnes données dans le profil SPÉCIAL*/
      else if (cate == "URL DE CATÉGORIE") {
        $('.profil_utilisateur').each(function(){
          principal = $(this);
          champs = principal.find('.profil_champ');
          for (y = 0; y < champs.length; y++) {
            champ = champs.eq(y);
            if (champ.find('span.label:first').text() == avatar2) {
              nouvellevaleur = champ.find('img:first').attr('src');
              if (principal.find('.profil_avatar').find('img:first').length > 0) {
                principal.find('.profil_avatar').find('img:first').attr('src', nouvellevaleur);
              }
              else {
                pseudomachin = principal.find('.profil_pseudo a:first').attr('href');
                principal.find('.profil_avatar').append('<a href="' + pseudomachin + '"><img src="' + nouvellevaleur + '" /></a>');
              }
            }
            else if (champ.find('span.label:first').text() == pseudo2) {
              nouvellevaleur = champ.find('span.label:first').next().text();
              if ($(this).find('.profil_pseudo:first').find('a strong:first').length > 0) {
                $(this).find('.profil_pseudo:first').find('a strong:first').text(nouvellevaleur);
              }
              else {
                $(this).find('.profil_pseudo:first').find('a:first').text(nouvellevaleur);
              }
            }
            else if (champ.find('span.label:first').text() == rang2) {
              nouvellevaleur = champ.find('span.label:first').next().text();
              $(this).find('.profil_rang:first').text(nouvellevaleur);
            }
            else {
              for (z = 0; z < champnamespecial.length; z++) {
                champspecial = champnamespecial[z];
                if (champ.find('span.label:first').text() == champspecial) {
                  champ.css('display', 'block');
                  champtext = champnamespecialvrai[z];
                  champ.find('span.label:first').text(champtext);
                }
              }
            }
          }
        });
      }


Il vous suffira de modifier le "URL DE CATÉGORIE" par l'url de la catégorie où vous voulez que le profil spécial s'affiche.




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 personnaliser le LS et que vous avez besoin d'aide.

À plus !

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é !

Lazulijune

Fiche de réponse rp rouge et rose - Sam 10 Déc 2016 - 18:51



Bonsoir ! Je poste encore un codage en libre-service ici. Je suis ouverte à toute question/critique ! En espérant que cela vous plaira. :yay:



« Titre du rp »
Avec nom des participants

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. Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur. His cognitis Gallus ut serpens adpetitus telo vel saxo iamque spes extremas opperiens et succurrens saluti suae quavis ratione colligi omnes iussit armatos et cum starent attoniti, districta dentium acie stridens adeste inquit viri fortes mihi periclitanti vobiscum.

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. Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur. His cognitis Gallus ut serpens adpetitus telo vel saxo iamque spes extremas opperiens et succurrens saluti suae quavis ratione colligi omnes iussit armatos et cum starent attoniti, districta dentium acie stridens adeste inquit viri fortes mihi periclitanti vobiscum.



Code:
<link href="https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz|Satisfy" rel="stylesheet" /> <div style="width:500px; margin:auto; border-right: 6px solid #D04545; border-left: 1px solid #D04545; border-top: 1px solid #D04545; border-bottom: 1px solid #D04545; background-color:#F39999"><img src="http://zupimages.net/up/16/49/6plf.gif" style="width: 500px; border-bottom: 2px solid #D04545;" /><br />
<div style="font-family: Satisfy; font-size: 35px; color: #A60000; text-align: center;">« Titre du rp »</div><div style="width:auto; margin: auto; margin-top:0px; font-family: Yanone Kaffeesatz; font-size:13px; color: #DB1C1C; text-align:center;">Avec nom des participants</div>
<div style="width:470px; height:400px; overflow:auto; background-color: #FEBDBD; margin:auto; border-left: 2px dashed #D04545; border-right: 2px dashed #D04545; padding: 3px; color: darkred; font-size:12px; text-align: justify;">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. Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur. His cognitis Gallus ut serpens adpetitus telo vel saxo iamque spes extremas opperiens et succurrens saluti suae quavis ratione colligi omnes iussit armatos et cum starent attoniti, districta dentium acie stridens adeste inquit viri fortes mihi periclitanti vobiscum. 

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. Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur. His cognitis Gallus ut serpens adpetitus telo vel saxo iamque spes extremas opperiens et succurrens saluti suae quavis ratione colligi omnes iussit armatos et cum starent attoniti, districta dentium acie stridens adeste inquit viri fortes mihi periclitanti vobiscum. </div>
<div style="font-size:9px; font-style: italic; text-align: right; padding: 5px"><a href="http://www.never-utopia.com/" style="color:black;">© Lazulijune</a></div></div>

Lazulijune

Fiche de réponse rp violette - Mar 6 Déc 2016 - 18:59



Bonjour !
Je poste mon deuxième codage, qui est à nouveau une réponse de rp, cette fois-ci de couleur violette. Évidemment, vous êtes libre de modifier les couleurs selon votre bon vouloir. L'important est que le crédit ne soit pas enlevé.




« Titre du rp »
Nom des participants

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. Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur. His cognitis Gallus ut serpens adpetitus telo vel saxo iamque spes extremas opperiens et succurrens saluti suae quavis ratione colligi omnes iussit armatos et cum starent attoniti, districta dentium acie stridens adeste inquit viri fortes mihi periclitanti vobiscum.

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. Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur. His cognitis Gallus ut serpens adpetitus telo vel saxo iamque spes extremas opperiens et succurrens saluti suae quavis ratione colligi omnes iussit armatos et cum starent attoniti, districta dentium acie stridens adeste inquit viri fortes mihi periclitanti vobiscum.



Code:
<link href="https://fonts.googleapis.com/css?family=Dancing+Script|Dosis" rel="stylesheet" />
<div style="width:500px; margin:auto; background-color: #D5C7DC; border: 2px solid #A485B3; border-bottom: 2px dashed #A485B3;">
<div style="margin-top: 5px; margin: auto; border: 3px double #8B6C9B; width:450px;"><img src="http://zupimages.net/up/16/49/bhgr.gif" style="width:450px;" /></div>
<div style="font-family:Dancing Script; font-size:40px; text-align: center; color:#7B329F; padding-top:5px; font-weight: bold;">« Titre du rp »</div><div style="font-family:Dosis; font-size: 11px; color: #9973AC; text-align: center;">Nom des participants</div>
<div style="width: 450px; height: 400px; overflow:auto; background-color: #DED4E3; margin: auto; border-left: 2px solid #AC92B9; border-right: 2px solid #AC92B9; padding: 3px; font-size: 12px;  text-align: justify; font-family:Dosis; color: black;">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. Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur. His cognitis Gallus ut serpens adpetitus telo vel saxo iamque spes extremas opperiens et succurrens saluti suae quavis ratione colligi omnes iussit armatos et cum starent attoniti, districta dentium acie stridens adeste inquit viri fortes mihi periclitanti vobiscum. 

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. Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur. His cognitis Gallus ut serpens adpetitus telo vel saxo iamque spes extremas opperiens et succurrens saluti suae quavis ratione colligi omnes iussit armatos et cum starent attoniti, districta dentium acie stridens adeste inquit viri fortes mihi periclitanti vobiscum. </div>
<div style="font-size:9px; font-style: italic; text-align: right; padding: 5px"><a href="http://www.never-utopia.com/" style="color:black;">© Lazulijune</a></div></div>


En espérant que cela vous plaise :yay:

Edit : Étant donné que je ne peux pas répondre, je tiens quand même à remercier Shoki pour sa correction, ses conseils m'ont été très utile et je les ai appliqué à ce code.

Lazulijune

Fiche de réponse rp bleue-verte - Mar 6 Déc 2016 - 18:52



Bonjour à tous. Ceci est mon premier codage en libre-service ; c'est une réponse de rp aux couleurs bleues et vertes, qui n'est rien qu'en html. Les couleurs sont bien entendu modifiables !



Titre du rp
Nom des participants


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. Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur. His cognitis Gallus ut serpens adpetitus telo vel saxo iamque spes extremas opperiens et succurrens saluti suae quavis ratione colligi omnes iussit armatos et cum starent attoniti, districta dentium acie stridens adeste inquit viri fortes mihi periclitanti vobiscum.

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. Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur. His cognitis Gallus ut serpens adpetitus telo vel saxo iamque spes extremas opperiens et succurrens saluti suae quavis ratione colligi omnes iussit armatos et cum starent attoniti, districta dentium acie stridens adeste inquit viri fortes mihi periclitanti vobiscum.



Code:
<link href="https://fonts.googleapis.com/css?family=Advent+Pro|Yesteryear" rel="stylesheet" />
<div style="width:500px; margin:auto; background-color:#C0D9D6; border-left: 2px solid #017162; border-right: 2px solid #017162;"><br /><div style="font-family:Yesteryear; font-size:35px; color:#017162; text-align:center;">Titre du rp</div><div style="font-family:Advent Pro; font-size: 12px; color:steelgrey; text-align: center; letter-spacing: 2px;">Nom des participants</div><div style="width:450px; margin: auto; border: 2px dashed #4B8E85;"></div>

<div style="width: 450px; height: 400px; margin: auto; padding: 5px; background-color: #A6C8C4; overflow:auto; font-size:12px; text-align: justify; color: black; border: 1px solid #4B8E85;">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. Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur. His cognitis Gallus ut serpens adpetitus telo vel saxo iamque spes extremas opperiens et succurrens saluti suae quavis ratione colligi omnes iussit armatos et cum starent attoniti, districta dentium acie stridens adeste inquit viri fortes mihi periclitanti vobiscum. 

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. Saraceni tamen nec amici nobis umquam nec hostes optandi, ultro citroque discursantes quicquid inveniri poterat momento temporis parvi vastabant milvorum rapacium similes, qui si praedam dispexerint celsius, volatu rapiunt celeri, aut nisi impetraverint, non inmorantur. His cognitis Gallus ut serpens adpetitus telo vel saxo iamque spes extremas opperiens et succurrens saluti suae quavis ratione colligi omnes iussit armatos et cum starent attoniti, districta dentium acie stridens adeste inquit viri fortes mihi periclitanti vobiscum. </div>
<div style="text-align: right; font-size: 9px; color: black; font-style: italic; padding: 5px;"><a href="http://www.never-utopia.com/" style="color:black;">© Lazulijune</a>
</div></div>


Le crédit est bien entendu ineffaçable ! En espérant que cela vous plaise.

Edit : Encore une fois, j'ai appliqué les conseils de Shoki ! Et pour répondre à ceci :
Shoki a écrit:Si tu le souhaites, tu peux les réunir en une seule. Dans ce cas, tu copie-colle les valeurs de la seconde balise (en gros, ce qu'il y a dans style=""), tu les met dans la première en veillant à transformer le border en border-bottom, et tu joue ensuite avec les marges intérieures (padding-bottom ici) pour éloigner ou rapprocher le trait o/

A vrai dire je savais déjà cela, et j'aurai sans doute pu le faire avant (ça ne m'avait pas trop traversé l'esprit sur le coup) mais je préfère le rendu tel qu'il est, la bordure ayant un effet meilleur avec le "border" qu'avec le "border-bottom". Merci de tes conseils en tout cas, c'est très gentil de ta part de pointer mes erreurs !

Offrande

RPG - 3 Cadres avec Overflow Brow - Lun 21 Nov 2016 - 1:10



:heart: Re Bonsoir tout le monde :heart:

Cette petite fiche peut servir à beaucoup, beaucoup de chose et je me permet de la poster pour enrichir un peut ce forum qui m'as beaucoup aider! Cette petite fiche vas avec celle-ci : WWW (ne pas oublier de changer le lien quand le LS sera disponible) merci :heart: Si vous souhaitez installer les polices qui sont sur cette fiches pour avoir les même un tutoriel est conter en bas de page.

Image via une imprime écran de mon forum :

En ce qui concerne l'image : Vous pouvez la changer contre n'importe qu'elle image faisant une taille de : 260px de largeur sur 400px de hauteur.

Voila le code de la fiche placer sous HIDE contre un petit message de remerciement :heart:

Code:
<link href='http://fonts.googleapis.com/css?family=Pacifico|UnifrakturMaguntia' rel='stylesheet' type='text/css' /><!--DATE ARTICLE--><div style="text-align: center; font-size: 20px;text-shadow: 3px 3px 3px #000; font-family: Pacifico; color: #ffffff;"> Date : .. / .. / .. </div><br/><br/><!--INTRO ARTICLE--><div style="font-size: 30px; color: #000; text-shadow: 3px 3px 3px #fff; font-family: UnifrakturMaguntia;margin-bottom: -10px; text-align: center; margin-left: -250px;"> Introduction</div><!--FICHE ARTICLE--> <table style="margin: auto;"><tr><td><div style="width: 220px; height: 357px; overflow: auto; background-color: #89725B; border: 1 px solid #000; padding: 20px; text-align: justify;"><!--CONTENU ARTICLE--><span style="color: white;">
REMPLACER LA TOTALITÉ DE CE TEXTE PAR VOTRE INTRODUCTION Non ergo erunt homines deliciis diffluentes audiendi, si quando de amicitia, quam nec usu nec ratione habent cognitam, disputabunt. Nam quis est, pro deorum fidem atque hominum! qui velit, ut neque diligat quemquam nec ipse ab ullo diligatur, circumfluere omnibus copiis atque in omnium rerum abundantia vivere? Haec enim est tyrannorum vita nimirum, in qua nulla fides, nulla caritas, nulla stabilis benevolentiae potest esse fiducia, omnia semper suspecta atque sollicita, nullus locus amicitiae.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.
</span></div></td><td><!--IMAGE 260 LARGEUR SUR 400 HAUTEUR--><img src="https://i37.servimg.com/u/f37/19/54/37/96/articl10.png" /></td></tr></table><!--CADRE ARTICLE--><div style="margin: auto; width: 527px; height: 400px; overflow: auto; border: 1px solid #000; background-color:#89725B;"><br/><br/><!--TITRE ARTICLE--><div style="font-size: 30px; color: #000; text-shadow: 3px 3px 3px #fff; font-family: UnifrakturMaguntia;margin-bottom: -10px; text-align: center;"> Titre Article </div>
<!--CONTENU ARTICLE--> <div style="text-align: justify; padding: 20px; color: white;">
REMPLACER LA TOTALITÉ DE CE TEXTE PAR VOTRE ARTICLE Non ergo erunt homines deliciis diffluentes audiendi, si quando de amicitia, quam nec usu nec ratione habent cognitam, disputabunt. Nam quis est, pro deorum fidem atque hominum! qui velit, ut neque diligat quemquam nec ipse ab ullo diligatur, circumfluere omnibus copiis atque in omnium rerum abundantia vivere? Haec enim est tyrannorum vita nimirum, in qua nulla fides, nulla caritas, nulla stabilis benevolentiae potest esse fiducia, omnia semper suspecta atque sollicita, nullus locus amicitiae.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.Quae dum ita struuntur, indicatum est apud Tyrum indumentum regale textum occulte, incertum quo locante vel cuius usibus apparatum. ideoque rector provinciae tunc pater Apollinaris eiusdem nominis ut conscius ductus est aliique congregati sunt ex diversis civitatibus multi, qui atrocium criminum ponderibus urgebantur.Non ergo erunt homines deliciis diffluentes audiendi, si quando de amicitia, quam nec usu nec ratione habent cognitam, disputabunt. Nam quis est, pro deorum fidem atque hominum! qui velit, ut neque diligat quemquam nec ipse ab ullo diligatur, circumfluere omnibus copiis atque in omnium rerum abundantia vivere? Haec enim est tyrannorum vita nimirum, in qua nulla fides, nulla caritas, nulla stabilis benevolentiae potest esse fiducia, omnia semper suspecta atque sollicita, nullus locus amicitiae.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.Quae dum ita struuntur, indicatum est apud Tyrum indumentum regale textum occulte, incertum quo locante vel cuius usibus apparatum. ideoque rector provinciae tunc pater Apollinaris eiusdem nominis ut conscius ductus est aliique congregati sunt ex diversis civitatibus multi, qui atrocium criminum ponderibus urgebantur.</div>
</div>



Pour ce qui concerne les Polices utiliser ce sont les Police :
- UnifrakturMaguntia (en noir)
- Pacifico (en blanc)

Offrande

RPG - 5 Cadre avec Overflow Brown - Lun 21 Nov 2016 - 1:03



Bonjour tout le monde :heart:

Cela fait un certain temps que je me suis inscrite sur ce forum et comme je me suis amélioré en CSS je vous propose l'une de mes créations qui, je pense pourrait servir a pas mal de chose :heart: Cette petite créations peut servir surtout pour les RPG mais vous pouvez bien sur l'utiliser pour autre chose. Cette fiche comporte une grande CSS mais n'est pas a ajouter dans la feuille de style, tout ce trouve dans le sujet lui-même. Pour ce qui est des polices, si vous souhaitez utiliser les même que celle présenter sur la fiche, une explications est conter en bas du sujet pour installer celle-ci.

Aperçus Normal :

En ce qui concerne l'image : Vous pouvez la remplacer par n'importe qu'elle image de 500px de largeur sur 200px de hauteur.

Le Code de la Fiche :heart:
Code:
<link href='http://fonts.googleapis.com/css?family=Pacifico|UnifrakturMaguntia' rel='stylesheet' type='text/css' /><!--------------------------------------CADRE GENERALE--------------------------->
<div style="margin: auto; min-height: 1300px; max-height: 1300px; width: 500px; background-color: #89725B; box-shadow: 10px 10px 10px #000; border-radius: 0px 0px 40px 0px;"><!--IMAGE--><div style="width: 500px"><!--IMAGE 500 PX DE LARGEUR SUR 200 PX DE HAUTEUR--><img src="https://i37.servimg.com/u/f37/19/54/37/96/blog_h10.png" /> </div><!--NOM--><span style="color: #000; font-size: 35px; margin-left: 150px; font-family: Pacifico; text-shadow: 3px 3px 3px #ffffff;"> Le Nom du Blog </span><!--CITATION-->
<span style="color: #ffffff; font-size: 11px; text-transform; uppercase; margin-left: 180px;"> Je suis une petite Citation ... </span><br/><br/><!--TITRE STATISTIQUE--><div style="font-size: 20px; margin-bottom: -5px; margin-left: 50px; text-shadow: 3px 3px 3px #000; font-family: Pacifico; color: #ffffff;">Statistique</div><!--STATISTIQUE CADRE--><div style="height: 100px; overflow: auto; border: 1px solid #ffffff; width: 400px; padding: 10px; margin-left: 50px; border-radius: 20px 0px 20px 0px;box-shadow: 5px 5px 5px #000;background-color: #89725B;"><!--CONTENU DES STATISTIQUE--><span style="color: #000!important;">✽ Blog de :
✽ Date de Création :
✽ Tags :
✽ Mes Trophées:
</span></div><!--FIN CADRE STATISTIQUE--><br/><br/><!--TITRE DESCRIPTION--><div style="font-size: 20px; margin-bottom: -25px; margin-left: 50px; text-shadow: 3px 3px 3px #000; font-family: Pacifico; color: #ffffff;">Description</div>
<!--CADRE DESCRIPTION--><div style="height: 200px; width: 400px; overflow: auto; margin-left: 50px; border: 1px solid #ffffff; padding: 10px; border-radius: 20px 0px 20px 0px; box-shadow: 5px 5px 5px #000;background-color: #89725B;"><!--CONTENU DESCRIPTION--><span style="color: #000;">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</span></div><!--FIN CADRE DESCRIPTION--><br/><br/><!--TITRE ARTICLE ET AMI--><div style="font-size: 20px; margin-bottom: -25px; margin-left: 50px; text-shadow: 3px 3px 3px #000; font-family: Pacifico; color: #ffffff;">Mes Ami(e)s .... & Mes Articles :</div><br/><br/><!--DEBUT CADRE AMI et ARTICLE--><div style="margin-left: 50px;"><table><tr><td width="200px" valign="top"><!--DEBUT DIV A GAUCHE--><div style="height: 200px; overflow: auto; margin-left:5px; border: 1px solid #ffffff; padding: 0px 2px 2px 5px; border-radius: 20px 0px 20px 0px; box-shadow: 5px 5px 5px #000;background-color: #89725B;"><span style="color: #000;">[img]https://i39.servimg.com/u/f39/18/94/29/67/homme10.png[/img] ♥ Pseudo ♥ Blog
[img]https://i39.servimg.com/u/f39/18/94/29/67/femme10.png[/img] ♥ Pseudo ♥ Blog
[img]https://i39.servimg.com/u/f39/18/94/29/67/femme10.png[/img] ♥ Pseudo ♥ Blog
[img]https://i39.servimg.com/u/f39/18/94/29/67/femme10.png[/img] ♥ Pseudo ♥ Blog
[img]https://i39.servimg.com/u/f39/18/94/29/67/homme10.png[/img] ♥ Pseudo ♥ Blog
[img]https://i39.servimg.com/u/f39/18/94/29/67/homme10.png[/img] ♥ Pseudo ♥ Blog
[img]https://i39.servimg.com/u/f39/18/94/29/67/homme10.png[/img] ♥ Pseudo ♥ Blog
</span><br /></div><!--FIN DIV A GAUCHE--></td><td width="200px" valign="top"><!--DEBUT DIV A DROITE--><div style="height: 200px;overflow: auto;border: 1px solid #ffffff;padding: 0px 2px 2px 5px;border-radius: 20px 0px 20px 0px;box-shadow: 5px 5px 5px #000;background-color: #89725B; "><span style="color: #000;">[x] Nom de l'Article ─ Poster le :
[x] Nom de l'Article ─ Poster le :
[x] Nom de l'Article ─ Poster le :
[x] Nom de l'Article ─ Poster le :
[x] Nom de l'Article ─ Poster le :
[x] Nom de l'Article ─ Poster le : </span><br />
</div><!--FIN DIV A DROITE--></td></tr></table></div><!--FIN CADRE AMIS ET ARTICLE--><br /><br/><!--TITRE COMMENTAIRE--><div style="font-size: 20px; margin-bottom: -25px; margin-left: 50px; text-shadow: 3px 3px 3px #000; font-family: Pacifico; color: #ffffff;">Commentaires</div><br/><!--CADRE COMMENTAIRE--><div style="height: 200px; width: 400px; overflow: auto; margin-left: 50px; border: 1px solid #ffffff; padding: 10px; border-radius: 20px 0px 20px 0px; box-shadow: 5px 5px 5px #000;background-color: #89725B;"><!--CONTENU COMMENTAIRE--><span style="color: #000;">Contenus du Cadre ici. Contenus du Cadre ici</span></div>

</div>
<!------------------------------------FIN CADRE GENERALE------------------------->


Pour ce qui concerne les Polices utiliser ce sont les Police :
- UnifrakturMaguntia (en noir)
- Pacifico (en blanc)

Nemalus

Catégorie "Winds of Winter" - Lun 14 Nov 2016 - 10:22




Catégories réalisées suite à la demande de Ailes.
Les couleurs sont modifiables, merci de ne pas retirer le crédit.

Voici un aperçu :

lien direct : www

Version forum : testé sur phpbb2

Dimensions des images :
Les images de description doivent être si possible au format 250px x 100px;
Les images "Pas de nouveaux messages ; Nouveaux messages ; etc" doivent être en 35px X 35px

Pour ajouter des images de description : www
Pour activer les avatars : www


Remplacer l'intégralité du template index-box par :

Code:
<table width="900px" border="0" cellspacing="1" cellpadding="0" align="center">
        <tr>
        <td valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
        <span class="gensmall">{LAST_VISIT_DATE}<br />
        {CURRENT_TIME}<br />
        </span>
        <!-- END switch_user_logged_in -->
        <div class="nav"><a class="nav" href="{U_INDEX}">{L_INDEX}</a>{NAV_CAT_DESC}</div>
        </td>
        <td class="gensmall" align="right" valign="bottom">
        <!-- BEGIN switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_NEW}">{L_SEARCH_NEW}</a><br />
        <a class="gensmall" href="{U_SEARCH_SELF}">{L_SEARCH_SELF}</a><br />
        <!-- END switch_user_logged_in -->
        <a class="gensmall" href="{U_SEARCH_UNANSWERED}">{L_SEARCH_UNANSWERED}</a>
        </td>
        </tr>
     
        </table><!-- BEGIN catrow --><!-- BEGIN tablehead -->
<div class="TitreCategorie"><h2>{catrow.tablehead.L_FORUM}</h2></div>
        <div class="BlocCategorie"><!-- END tablehead -->

        <!-- BEGIN cathead -->
        <!-- END cathead -->
     
        <!-- BEGIN forumrow -->
        <div class="BlocForum"><div class="TitreForum"><img src="{catrow.forumrow.FORUM_FOLDER_IMG}" class="ImageForum" /><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div><div class="Forum"><div class="DescriptionForum">{catrow.forumrow.FORUM_DESC}</div><div class="BlocImageDescription"><div class="SousForums">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}</div></div><div class="DernierMessage"><div class="NombreSetM">{catrow.forumrow.TOPICS} sujets | {catrow.forumrow.POSTS} messages</div><hr /><table><tr><td><div class="AvatarForum"><!-- BEGIN avatar -->{catrow.forumrow.avatar.LAST_POST_AVATAR}<!-- END avatar --></div></td><td>{catrow.forumrow.LAST_POST}</td></tr></table></div></div></div>
        <!-- END forumrow -->
     
        <!-- BEGIN catfoot -->
        <!-- END catfoot -->
        <!-- BEGIN tablefoot -->
        </div>
        <div class="BasCategorie"></div>
        <!-- END tablefoot --><!-- END catrow -->



Dans la feuille de style (CSS) ajouter le code :

Code:
/* BLOC TITRE CATEGORIE */
.TitreCategorie {
margin:5px auto 0; width:900px; padding:15px 0;
background:#D07F7F; /* MODIFIABLE */
}
/* TITRE CATEGORIE */
.TitreCategorie h2{
margin:0; font-size:32px; text-align:center;
color:white; font-family:Arial; /* MODIFIABLE */
}
/* BLOC CATEGORIE */
.BlocCategorie {
margin:auto; width:900px; padding:25px 0 15px;
background:#D7D5D5; /* MODIFIABLE */
}
/* BAS CATEGORIE */
.BasCategorie {
margin:auto; margin-bottom:10px; width:900px; height:35px;
background:#D07F7F; /* MODIFIABLE */
}
/* BLOC FORUM */
.BlocForum{
width:850px; margin:auto; text-align:center;
}
/* BLOC TITRE FORUM */
.TitreForum {
margin:0 auto 5px;
font-size:25px;
width:805px; padding:5px 25px 5px 0;
text-align:left; /* MODIFIABLE */
}
/* TITRE FORUM */
.TitreForum a{
color:black !important; /* MODIFIABLE */
}
/* BLOC FORUM */
.Forum {
margin:auto; margin-bottom:10px;
width:830px; height:100px; overflow:hidden;
}
/* ICÔNES FORUM */
.ImageForum{
display:inline-block; vertical-align:top;
width:35px; height:35px;
margin-top:-18px; margin-left:-20px;
}
/* DESCRIPTION FORUM */
.DescriptionForum {
display:inline-block; vertical-align:top;
width:300px; height:90px; padding:5px; overflow:auto;
font-size:10px; text-align:justify;
background:#C6B5CA; color:black; /* MODIFIABLE */
}
/* IMAGE DESCRIPTIVE FORUM */
.DescriptionForum img{
position:absolute; margin-top:-5px; margin-left:310px;
width:250px; height:100px;
}
/* BLOC IMAGE DESCRIPTIVE FORUM */
.BlocImageDescription {
display:inline-block; vertical-align:top;
width:250px; height:100px;
border-left:5px solid; border-right:5px solid;
background:white; border-color:#D7D5D5 !important; /* MODIFIABLE */
}
/* BLOC SOUS-FORUMS */
.SousForums {
position:relative; z-index:2;
width:250px; height:90px; padding:5px 0; overflow:auto;
background:#42A8AE; /* MODIFIABLE */
color:rgba(0,0,0,0); line-height:6px;
opacity:0; transition:opacity 0.55s ease-in-out; -webkit-transition:opacity 0.55s ease-in-out;
}
.SousForums:hover {
opacity:1;
}
/* LIEN SOUS-FORUM */
.SousForums a{
display:block; margin:auto;
width:95%; line-height:16px;
background:white; color:#D07F7F !important; text-transform:uppercase; /* MODIFIABLE */
}
/* DERNIER MESSAGE FORUM */
.DernierMessage {
display:inline-block; vertical-align:top;
width:250px; height:90px; padding:5px;
text-align:center; font-size:10px; text-transform:uppercase;
background:#C6B5CA; color:black; /* MODIFIABLE */
margin-bottom:-50px;
}
/* NOMBRE SUJETS & MESSAGES FORUM */
.NombreSetM {
text-transform:none;
}
/* BLOC AVATAR DERNIER POSTEUR FORUM */
.AvatarForum {
display:inline-block; vertical-align:top;
width:50px; height:50px; overflow:hidden;
background:#ccc; /* MODIFIABLE */
}
.AvatarForum img {
width:50px; filter:grayscale(1); -webkit-filter:grayscale(1);
}




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 liens simple mais efficace - Jeu 10 Nov 2016 - 22:37



Bonjour à tous, aujourd'hui je vous propose une fiche de lien tout simple. En effet elle est de couleur blanche et écriture noire avec ombre. Si les couleurs ne vous plaise pas, il est toute à fait possible de les changer

Pour un aperçu en image clique ici
Si tu veux l'a voir en grandeur nature clique à cet endroit

L'image dans la fiche de lien fait 200*400px. Et comme je l'ai dis précédemment, les couleurs sont modifiables.


Code:
<link href='http://fonts.googleapis.com/css?family=Megrim|Tangerine' rel='stylesheet' type='text/css' /><div style="border: 1px solid #000000; width: 500px; height: 1100px; background: white; margin: auto;">
<div style="color:black; text-align:center; text-shadow: 0px 0px 3px black; letter-spacing: 3px; font-size: 45px; font-family: 'Megrim'; padding:60px">Nom du Perso</div>
<table><tbody><tr><td><span style="padding:20px"><img src="http://www.zupimages.net/up/16/45/uug2.png"; /></span></td><td><span style="color:black; text-align:center; text-shadow: 0px 0px 3px black; letter-spacing: 3px; font-size: 35px; font-family: 'Tangerine'; padding:60px">Informations </span><br />
<div style="text-shadow: 0px 0px 3px black; color:black; letter-spacing: 1px; text-align: justify; width: 250px; background-color:#E9E4DA"><div style="margin:5px;">
Clan : <i>D'où viens tu ?</i><br />
Rang : <i>A quoi sers - tu ?</i><br />
Age : <i>Quel est ton âge ?</i><br />
Sexe : <i>Fille ou garçon ?</i><br />
Qualités / Défauts : <i> J'ai telle, telle et telle qualités.</i><br /><br /><i> En revanche j'ai tel, tel ou tel défauts.</i></div></div></td></tr></tbody></table>
<div style="color:black; text-align:center; text-shadow: 0px 0px 3px black; letter-spacing: 3px; font-size: 35px; font-family: 'Tangerine'; padding:60px">Les Liens</div><table><tbody><tr><td><span style="color:black; text-align:left; text-shadow: 0px 0px 3px black; letter-spacing: 3px; font-size: 15px; font-family: 'arial'; padding:30px">Positifs</span></td><td><span style="color:black; text-align:right; text-shadow: 0px 0px 3px black; letter-spacing: 3px; font-size: 15px; font-family: 'arial'; padding:240px">Négatifs</span></td></tr></tbody></table>


<table style="margin: auto;"><tbody><tr><td><div style="width: 220px; height: 200px; overflow:auto; background-color:#E9E4DA;text-align:justify; font-family: font-size:12px; line-height:12px; color:black; border: 1px solid #000000; margin-left:8px;"><div style="margin:5px; ">  [b]Un "ami" :[/b] Quelqu'un qu'il pourrait considérer comme un ami même si le mot "ami" est légèrement trop fort pour cette relation. - Libre

[b]Un souffre - douleur :[/b] Une personne sur lequel il pourrait passer ses nerfs ou alors pour satisfaire son envie d'énerver les autres et de les manipuler. - Libre

[b]Un protégé :[/b] De préférence une jeune personne sur lequel il passerait son temps à lui enseigner comment être comme lui, comment manipuler, énerver, ou martyriser quelqu'un - Libre
[b]Autre :[/b] si vous avez d'autres idée d'éventuels liens.
</div></div></td><td><div style="width: 220px; height: 200px; overflow:auto;background-color:#E9E4DA;text-align:justify; font-family: arial; font-size:12px; line-height:12px; color:black; border: 1px solid #000000; margin-left:8px;"><div style="margin:5px; "> [b]Un meilleur ennemi :[/b] Une personne qu'il ne pourrait pas supporter et qu'il préfère éviter pour ne pas s'énerver avec. - Libre

[b]Des ennemis :[/b] Une ou des personne(s) qu'il n'apprécierait pas. Ou plutôt des félins qui en voudrait à mon perso pour son comportement ou ses agissements. - Libre

[b]Autre :[/b] si vous avez d'autres idée d'éventuels liens.
</div></div></td></tr></tbody></table><div style="text-align:center; font-family: arial; font-size:10px; color:black">fiche by Aily</div></div>


Vous vous doutez bien que j'y ai passé du temps, alors merci de bien vouloir laisser le crédit, j'insiste sur ce point.
J'accepte toutes critiques du moment qu'elle est constructive et permette de m'améliorer.

Un petit remerciement serait apprécié ^^

Namida

Be Simple - Contenu de RP - Jeu 10 Nov 2016 - 2:57


Be simple - Contenu de RP


/!\ Cette section est présente pour vous aider avec vos problèmes de code. Je ne répondrais pas aux MPs que l'on m'enverra à ce sujet.

Bonjour à tous,

Voici mon dernier CSS pour mon micro-projet "Be Simple" utilisé pour ce forum RPG. Néanmoins, l'image nécessite une légère connaissance en graphisme. Dans mon cas, j'aime bien faire un sorte que le début de l'image soit en transparence pour ajouter un peu de "formes" au CSS.

Note. L'image, en exemple, provient de l'artiste WLOP.

Un petit "merci" est toujours apprécié. Je rappel aussi qu'enlever le crédit est interdit.

Voici un aperçu du code CSS





Voilà! C'est tout pour ce code CSS

Kanae

Prédéfinis Simples, Gris et Epurés - Ven 4 Nov 2016 - 7:47



Prédéfinis Simples, Gris et Epurés



Bonjour !

Je continue sur ma lancée des LS de message avec cette fois-ci une fiche de personnage prédéfini. Au final c'est tout mon ancien thème qui va finir par y passer, mais si ça peut faire des heureux, pourquoi s'en priver x)...


Petit aperçu :
Cliquez ici


Parce qu'il s'agit d'un travail regroupant plusieurs éléments, vous pouvez aller voir la Fiche de Présentation, le Journal de Bord, ainsi que la Fiche de Liens que j'ai codées dans le même genre.

N'hésitez pas non plus à jeter un oeil à l'excellent travail d'Halloween qui a répondu à l'une de mes demandes et a confectionné un superbe QEEL qui s'inscrit dans le même design.


J'ai choisi de ne pas mettre le code sous hide, mais un petit mot gentil, des encouragements ou des critiques constructives seront très appréciées ! N'hésitez surtout pas à me donner votre avis !
Cela m'aidera à m'améliorer, alors un grand merci à ceux qui prendront le temps de le faire Very Happy !


Par respect pour les nombreuses nuits passées à coder ceci et à sauvegarder la cohérence des autres codes, merci de ne pas retirer les crédits.




Version Brute



Code brut à insérer directement dans un message :



Code:
<div style="background-color: #E4E4E4; width: 530px ; margin: auto; padding-bottom: 10px; box-shadow: 3px 3px 5px #000000; color: #353535; font-family: 'Verdana'; font-size: 11px;"><img src="http://media.tumblr.com/08591baec96e41fb9ee99106037ea6b4/tumblr_inline_n5f0omBL5E1qhyycq.gif" style="width: 100%; heigh: 280px;"/><div style="background-color: #F0F0F0; border-top: 4px solid #B0C3AB; border-bottom: 2px solid #BEBEBE; height: 40px; width: 100%;"><div style="text-align: center; margin-top: 10px; font-family: georgia; font-size: 36px; text-shadow: 1px 1px 2px #1A1A1A; color: #353535;"><b>“</b><span style="color: #1C3734; font-variant: small-caps; margin-top: -2px; letter-spacing: 2px">Prénom Nom</span></div></div><div style="margin: -3px 0 0 10px; color: #BEBEBE; font-size: 10px; font-family: arial narrow;">feat Personnalité choisie</div><div style="text-align: right; margin: -10px 10px 0 250px; font-family: georgia; font-variant: small-caps; font-size: 11px; font-style: italic; letter-spacing : 2px; color: #879E9B;">"Citation classe de la mort qui tue tout à travers le monde"</div>



<div style="margin: 0 0 -24px 80px; font-family: georgia; font-size: 24px; color: #B0C3AB;">Rôle</div>
<div style="background-color: #DFDFDF; margin: 0 10px 0 10px; padding-bottom: 20px; border-top-left-radius: 30px; border-bottom-right-radius: 30px;">
<div style="background-color: #8D838D; height: 1px; margin: -7px 30px 0 30px;"></div><div style="background-color: #B0C3AB; height: 2px; margin: 0 30px 0 30px;"></div>
<table><tr><td><img src="http://nsa34.casimages.com/img/2014/08/11/140811104541235878.png" style="border: 2px solid #BEBEBE; float: right; border-bottom-right-radius: 15px; width: 100px; border-top-left-radius: 15px; margin: 12px 30px 0 0;"></td></tr><tr><td><div style="background-color: #F0F0F0; border: 2px solid #BEBEBE; width: 300px; height: 120px; margin-left: 30px; border-top-left-radius: 15px; border-bottom-right-radius: 15px; padding: 10px; overflow: auto;"><b>Nom :</b> <i>Renseigner</i>
<b>Prénom :</b> <i>Renseigner</i>
<b>Age :</b> <i>Renseigner</i>
<b>Groupe :</b> <i>Groupe du personnage</i>
<b>Métier :</b> <i>Faut bien gagner sa vie</i>
<b>Ambition :</b> <i>Renseigner</i></div></td></tr></table>

<div style="background-color: #ffffff; margin: 5px 30px 0 30px; padding: 5px 10px 10px 10px; text-align: justify;">Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat. Nec huic publico, ut opinantur, malo turba tantum et imprudens uulgus ingemuit; clarorum quoque uirorum hic affectus querellas euocauit. Inde illa maximi medicorum exclamatio est: "uitam breuem esse, longam artem". Inde Aristotelis cum rerum natura exigentis minime conueniens sapienti uiro lis: "aetatis illam animalibus tantum indulsisse, ut quina aut dena saecula educerent, homini in tam multa ac magna genito tanto citeriorem terminum stare." Non exiguum temporis habemus, sed multum perdidimus. Satis longa uita et in maximarum rerum consummationem large data est, si tota bene collocaretur; sed ubi per luxum ac neglegentiam diffluit, ubi nulli bonae rei impenditur, ultima demum necessitate cogente, quam ire non intelleximus transisse sentimus.</div></div>

<div style="margin: 0 0 -22px 80px; font-family: georgia; font-size: 24px; color: #B0C3AB;">Relations</div>
<div style="background-color: #DFDFDF; margin: 0 10px 0 10px; padding-bottom: 20px; border-top-left-radius: 30px; border-bottom-right-radius: 30px;">
<div style="background-color: #8D838D; height: 1px; margin: -7px 30px 0 30px;"></div><div style="background-color: #B0C3AB; height: 2px; margin: 0 30px 0 30px;"></div>
<table><tr><td>
<img src="http://nsa34.casimages.com/img/2014/08/11/140811104541235878.png" style="border: 2px solid #BEBEBE; border-bottom-right-radius: 15px; width: 100px; border-top-left-radius: 15px; margin-left: 30px;" /></td><td><div style="text-align: right; margin-right: 40px; font-family: georgia; font-variant: small-caps; font-size: 14px; font-style: italic; letter-spacing : 2px; color: #879E9B;">Prénom Nom</div><div style="background-color: #ffffff; height: 120px; margin: 0 30px 0 18px; padding: 10px; text-align: justify; overflow: auto;">Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat. Nec huic publico, ut opinantur, malo turba tantum et imprudens uulgus ingemuit; clarorum quoque uirorum hic affectus querellas euocauit. Inde illa maximi medicorum exclamatio est: "uitam breuem esse, longam artem". Inde Aristotelis cum rerum natura exigentis minime conueniens sapienti uiro lis: "aetatis illam animalibus tantum indulsisse, ut quina aut dena saecula educerent, homini in tam multa ac magna genito tanto citeriorem terminum stare." Non exiguum temporis habemus, sed multum perdidimus. Satis longa uita et in maximarum rerum consummationem large data est, si tota bene collocaretur; sed ubi per luxum ac neglegentiam diffluit, ubi nulli bonae rei impenditur, ultima demum necessitate cogente, quam ire non intelleximus transisse sentimus. Ita est: non accipimus breuem uitam sed fecimus, nec inopes eius sed prodigi sumus. Sicut amplae et regiae opes, ubi ad malum dominum peruenerunt, momento dissipantur, at quamuis modicae, si bono custodi traditae sunt, usu crescunt: ita aetas nostra bene disponenti multum patet. Quid de rerum natura querimur? Illa se benigne gessit: uita, si uti scias, longa est.</div></td></tr><tr><td>

<img src="http://nsa34.casimages.com/img/2014/08/11/140811104541235878.png" style="border: 2px solid #BEBEBE; border-bottom-right-radius: 15px; width: 100px; border-top-left-radius: 15px; margin-left: 30px;" /></td><td><br /><div style="text-align: right; margin-right: 40px; font-family: georgia; font-variant: small-caps; font-size: 14px; font-style: italic; letter-spacing : 2px; color: #879E9B;">Prénom Nom</div><div style="background-color: #ffffff; height: 120px; margin: 0 30px 0 18px; padding: 10px; text-align: justify; overflow: auto;">Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat. Nec huic publico, ut opinantur, malo turba tantum et imprudens uulgus ingemuit; clarorum quoque uirorum hic affectus querellas euocauit. Inde illa maximi medicorum exclamatio est: "uitam breuem esse, longam artem". Inde Aristotelis cum rerum natura exigentis minime conueniens sapienti uiro lis: "aetatis illam animalibus tantum indulsisse, ut quina aut dena saecula educerent, homini in tam multa ac magna genito tanto citeriorem terminum stare." Non exiguum temporis habemus, sed multum perdidimus. Satis longa uita et in maximarum rerum consummationem large data est, si tota bene collocaretur; sed ubi per luxum ac neglegentiam diffluit, ubi nulli bonae rei impenditur, ultima demum necessitate cogente, quam ire non intelleximus transisse sentimus. Ita est: non accipimus breuem uitam sed fecimus, nec inopes eius sed prodigi sumus. Sicut amplae et regiae opes, ubi ad malum dominum peruenerunt, momento dissipantur, at quamuis modicae, si bono custodi traditae sunt, usu crescunt: ita aetas nostra bene disponenti multum patet. Quid de rerum natura querimur? Illa se benigne gessit: uita, si uti scias, longa est.</div></td></tr></table></div>

<div style="margin: 0 0 -24px 80px; font-family: georgia; font-size: 24px; color: #B0C3AB;">Indications</div>
<div style="background-color: #DFDFDF; margin: 0 10px 0 10px; padding-bottom: 20px; border-top-left-radius: 30px; border-bottom-right-radius: 30px;">
<div style="background-color: #8D838D; height: 1px; margin: -7px 30px 0 30px;"></div><div style="background-color: #B0C3AB; height: 2px; margin: 0 30px 0 30px;"></div>
<div style="background-color: #ffffff; margin: 0 30px 0 30px; padding: 10px; text-align: justify;">Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat. Nec huic publico, ut opinantur, malo turba tantum et imprudens uulgus ingemuit; clarorum quoque uirorum hic affectus querellas euocauit. Inde illa maximi medicorum exclamatio est: "uitam breuem esse, longam artem". Inde Aristotelis cum rerum natura exigentis minime conueniens sapienti uiro lis: "aetatis illam animalibus tantum indulsisse, ut quina aut dena saecula educerent, homini in tam multa ac magna genito tanto citeriorem terminum stare." Non exiguum temporis habemus, sed multum perdidimus.</div></div><a style="display: block; margin-top: -3px; text-align: center; color: #BEBEBE; font-size: 10px; font-family: arial narrow;" href="http://www.never-utopia.com">© Kanae de Never-Utopia</a></div>





Et pour ceux qui rechercheraient une version un peu plus évidente à installer sur un forum (moins à modifier, attention !) :



Version Simplifiée



Code simplifié à insérer directement dans un message :



Code:
<div class="fond_1"><img src="http://nsa34.casimages.com/img/2014/10/01/141001090448446613.png" style="width: 100%; heigh: 280px;"/><div class="fond_entete"><div class="bloc_guillemet"><b>“</b><span style="color: #1C3734; font-variant: small-caps; margin-top: -2px; letter-spacing: 2px">Prénom Nom</span></div></div><div class="bloc_credit">feat Personnalité choisie</div><div class="bloc_citation">"Citation classe de la mort qui tue tout à travers le monde"</div>



<div style="margin: 0 0 -24px 80px; font-family: georgia; font-size: 24px; color: #B0C3AB;">Rôle</div>
<div style="background-color: #DFDFDF; margin: 0 10px 0 10px; padding-bottom: 20px; border-top-left-radius: 30px; border-bottom-right-radius: 30px;">
<div style="background-color: #8D838D; height: 1px; margin: -7px 30px 0 30px;"></div><div style="background-color: #B0C3AB; height: 2px; margin: 0 30px 0 30px;"></div>
<table><tr><td><img src="http://nsa34.casimages.com/img/2014/08/11/140811104541235878.png" style="border: 2px solid #BEBEBE; float: right; border-bottom-right-radius: 15px; width: 100px; border-top-left-radius: 15px; margin: 12px 30px 0 0;" /></td></tr><tr><td><div style="background-color: #F0F0F0; border: 2px solid #BEBEBE; width: 300px; height: 120px; margin-left: 30px; border-top-left-radius: 15px; border-bottom-right-radius: 15px; padding: 10px; overflow: auto;"><b>Nom :</b> <i>Renseigner</i>
<b>Prénom :</b> <i>Renseigner</i>
<b>Age :</b> <i>Renseigner</i>
<b>Groupe :</b> <i>Groupe du personnage</i>
<b>Métier :</b> <i>Faut bien gagner sa vie</i>
<b>Ambition :</b> <i>Renseigner</i></div></td></tr></table>

<div class="fond_3" style="margin: 5px 30px 0 30px; padding: 5px 10px 10px 10px; height: auto;">Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat. Nec huic publico, ut opinantur, malo turba tantum et imprudens uulgus ingemuit; clarorum quoque uirorum hic affectus querellas euocauit. Inde illa maximi medicorum exclamatio est: "uitam breuem esse, longam artem". Inde Aristotelis cum rerum natura exigentis minime conueniens sapienti uiro lis: "aetatis illam animalibus tantum indulsisse, ut quina aut dena saecula educerent, homini in tam multa ac magna genito tanto citeriorem terminum stare." Non exiguum temporis habemus, sed multum perdidimus. Satis longa uita et in maximarum rerum consummationem large data est, si tota bene collocaretur; sed ubi per luxum ac neglegentiam diffluit, ubi nulli bonae rei impenditur, ultima demum necessitate cogente, quam ire non intelleximus transisse sentimus.</div></div>

<div class="titre_1">Relations</div>
<div class="fond_2">
<div class="style_1"></div><div class="style_2"></div>
<table><tr><td>
<img src="http://nsa33.casimages.com/img/2014/10/01/14100109044833549.png" class="img_100" /></td><td><div class="bloc_nom">Prénom Nom</div><div class="fond_3" style="height: 120px; margin: 0 30px 0 18px;">Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat. Nec huic publico, ut opinantur, malo turba tantum et imprudens uulgus ingemuit; clarorum quoque uirorum hic affectus querellas euocauit. Inde illa maximi medicorum exclamatio est: "uitam breuem esse, longam artem". Inde Aristotelis cum rerum natura exigentis minime conueniens sapienti uiro lis: "aetatis illam animalibus tantum indulsisse, ut quina aut dena saecula educerent, homini in tam multa ac magna genito tanto citeriorem terminum stare." Non exiguum temporis habemus, sed multum perdidimus. Satis longa uita et in maximarum rerum consummationem large data est, si tota bene collocaretur; sed ubi per luxum ac neglegentiam diffluit, ubi nulli bonae rei impenditur, ultima demum necessitate cogente, quam ire non intelleximus transisse sentimus. Ita est: non accipimus breuem uitam sed fecimus, nec inopes eius sed prodigi sumus. Sicut amplae et regiae opes, ubi ad malum dominum peruenerunt, momento dissipantur, at quamuis modicae, si bono custodi traditae sunt, usu crescunt: ita aetas nostra bene disponenti multum patet. Quid de rerum natura querimur? Illa se benigne gessit: uita, si uti scias, longa est.</div></td></tr><tr><td>

<img src="http://nsa33.casimages.com/img/2014/10/01/14100109044833549.png" class="img_100" /></td><td>
<div class="bloc_nom">Prénom Nom</div><div class="fond_3" style="height: 120px; margin: 0 30px 0 18px;">Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat. Nec huic publico, ut opinantur, malo turba tantum et imprudens uulgus ingemuit; clarorum quoque uirorum hic affectus querellas euocauit. Inde illa maximi medicorum exclamatio est: "uitam breuem esse, longam artem". Inde Aristotelis cum rerum natura exigentis minime conueniens sapienti uiro lis: "aetatis illam animalibus tantum indulsisse, ut quina aut dena saecula educerent, homini in tam multa ac magna genito tanto citeriorem terminum stare." Non exiguum temporis habemus, sed multum perdidimus. Satis longa uita et in maximarum rerum consummationem large data est, si tota bene collocaretur; sed ubi per luxum ac neglegentiam diffluit, ubi nulli bonae rei impenditur, ultima demum necessitate cogente, quam ire non intelleximus transisse sentimus. Ita est: non accipimus breuem uitam sed fecimus, nec inopes eius sed prodigi sumus. Sicut amplae et regiae opes, ubi ad malum dominum peruenerunt, momento dissipantur, at quamuis modicae, si bono custodi traditae sunt, usu crescunt: ita aetas nostra bene disponenti multum patet. Quid de rerum natura querimur? Illa se benigne gessit: uita, si uti scias, longa est.</div></td></tr></table></div>

<div class="titre_1">Indications</div>
<div class="fond_2">
<div class="style_1"></div><div class="style_2"></div>
<div class="fond_3" style="margin: 5px 30px 0 30px; padding: 5px 10px 10px 10px; height: auto;">Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat. Nec huic publico, ut opinantur, malo turba tantum et imprudens uulgus ingemuit; clarorum quoque uirorum hic affectus querellas euocauit. Inde illa maximi medicorum exclamatio est: "uitam breuem esse, longam artem". Inde Aristotelis cum rerum natura exigentis minime conueniens sapienti uiro lis: "aetatis illam animalibus tantum indulsisse, ut quina aut dena saecula educerent, homini in tam multa ac magna genito tanto citeriorem terminum stare." Non exiguum temporis habemus, sed multum perdidimus.</div></div><a class="bloc_credit" style="margin-left: 220px;" href="http://www.never-utopia.com">© Kanae de Never-Utopia</a></div>




Code à insérer dans le CSS de votre forum :



Si vous avez déjà installé dans le CSS de votre forum les éléments proposés dans la fiche de présentation ou dans la fiche de lien, certains éléments sont susceptibles de se répéter ! Veillez donc bien à repérer uniquement les éléments que vous n'avez pas déjà installés afin de vous épargner du temps et de garder une fiche de CSS claire et lisible.



Code:
/* ---------------------------------Fiche Prédéfinis--------------------------------- */
.fond_1
{
background-color: #E4E4E4;
margin: 20px;
padding-bottom: 10px;
box-shadow: 3px 3px 5px #000000;
color: #353535;
font-family: 'Verdana';
font-size: 11px;
}
.fond_2
{
background-color: #DFDFDF;
margin-left: 10px;
padding-bottom: 20px;
margin-right: 10px;
border-top-left-radius: 30px;
border-bottom-right-radius: 30px;
}
.fond_3
{
background-color: #F0F0F0;
border: 2px solid #BEBEBE;
width: 196px;
height: 152px;
margin-left : 28px;
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
padding: 10px;
overflow: auto;
}
.style_1
{
background-color: #B0C3AB;
width: 100%
height: 4px;
}
.style_2
{
background-color: #8D838D;
height: 1px;
margin-left: 30px;
margin-right: 30px;
margin-top: -7px;
}
.fond_entete
{
  background-color: #F0F0F0;
  border-top: 4px solid #B0C3AB;
  border-bottom: 2px solid #BEBEBE;
  height: 40px;
  width: 100%;
}
.bloc_guillemet
{
text-align: right;
margin-right: 10px;
margin-top: -24px;
font-family: georgia;
font-size: 36px;
text-shadow: 1px 1px 2px #1A1A1A;
color: #353535;
}
.bloc_citation
{
  text-align: right;
  margin: -10px 10px 0 250px;
  font-family: georgia;
  font-variant: small-caps;
  font-size: 11px;
  font-style: italic;
  letter-spacing : 2px;
  color: #879E9B;
}
.bloc_nom
{
  text-align : right;
  margin-right: 40px;
  font-family: georgia;
  font-variant: small-caps;
  font-size: 14px;
  font-style: italic;
  letter-spacing: 2px;
  color: #879E9B;
}
.titre_1
{
font-family: georgia;
margin-left: 80px;
margin-bottom: -24px;
font-size: 24px;
color: #B0C3AB;
}
.credits
{
margin-top: -3px;
margin-left: 10px;
color: #BEBEBE;
font-size: 10px;
font-family: arial narrow;
}
.img_100
{
  border: 2px solid #BEBEBE;
  width: 100px;
  border-top-left-radius: 15px;
  border-bottom-right-radius: 15px;
  margin-left: 30px;
}
/* --------------------------------- FIN Fiche Préfédinis --------------------------------- */

Kanae

Journal de Bord Simple, Gris et Epuré - Jeu 3 Nov 2016 - 15:08




Journal de Bord Simple, Gris et Epuré



Bonjour =) !

Je m'en viens compléter le travail entamé il y a deux ans en vous proposant le codage d'un journal de bord (comme on dit, mieux vaut tard que jamais...).

Petit aperçu :
Cliquez ici


Parce qu'il s'agit d'un travail regroupant plusieurs éléments, vous pouvez aller voir la Fiche de Présentation, ainsi que la Fiche de Liens que j'ai codées dans le même genre.

N'hésitez pas non plus à jeter un oeil à l'excellent travail d'Halloween qui a répondu à l'une de mes demandes et à confectionner un superbe QEEL qui s'inscrit dans le même design.


J'ai choisi de ne pas mettre le code sous hide, mais un petit mot gentil, des encouragements ou des critiques constructives seront très appréciées ! N'hésitez surtout pas à me donner votre avis !
Cela m'aidera à m'améliorer, alors un grand merci à ceux qui prendront le temps de le faire Very Happy !


Par respect pour les nombreuses nuits passées à coder ceci et à sauvegarder la cohérence des autres codes, merci de ne pas retirer les crédits.




Version Brute



Code brut à insérer directement dans un message :



Code:
<div style="background-color: #E4E4E4; width: 530px ; margin: auto; padding-bottom: 10px; box-shadow: 3px 3px 5px #000000; color: #353535; font-family: 'Verdana'; font-size: 11px;"><img src="http://38.media.tumblr.com/d15262c282e8d796a79a144abc05eb59/tumblr_mfzf98zvh51r6zkm3o1_500.gif" style="width: 100%; heigh: 280px;"/><div style="background-color: #F0F0F0; border-top: 4px solid #B0C3AB; border-bottom: 2px solid #BEBEBE; height: 40px; width: 100%;"><div style="text-align: center; margin-top: 10px; font-family: georgia; font-size: 36px; text-shadow: 1px 1px 2px #1A1A1A; color: #353535;"><b>“</b><span style="color: #1C3734; font-variant: small-caps; margin-top: -2px; letter-spacing: 2px">Prénom Nom</span></div></div><div style="margin: -3px 0 0 10px; color: #BEBEBE; font-size: 10px; font-family: arial narrow;">feat Personnalité choisie</div><div style="text-align: right; margin: -10px 10px 0 250px; font-family: georgia; font-variant: small-caps; font-size: 11px; font-style: italic; letter-spacing : 2px; color: #879E9B;">"Citation classe de la mort qui tue tout à travers le monde"</div>



<div style="font-family: georgia; margin: 0 0 -18px 375px; font-size: 24px; color: #B0C3AB;">Mes sujets</div><div style="font-family: georgia; margin: 0 0 -22px 80px; font-size: 24px; color: #B0C3AB;">En résumé</div>
<div style="background-color: #DFDFDF; margin: 0 10px 0 10px; padding-bottom: 20px; border-top-left-radius: 30px; border-bottom-right-radius: 30px;"><table><td>
<div style="background-color: #8D838D; height: 1px; margin: -7px 0 0 30px;"></div><div style="background-color: #B0C3AB; height: 2px; margin-left: 30px;"></div></div>
<div style="background-color: #ffffff; width: 250px; height: 300px; margin-left : 30px; padding: 10px; text-align: justify; overflow: auto;"><span style="font-size: 12px; font-family: georgia; color: #879E9B; font-variant: small-caps; font-weight: bold;">- caractère -</span> Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat. Nec huic publico, ut opinantur, malo turba tantum et imprudens uulgus ingemuit; clarorum quoque uirorum hic affectus querellas euocauit. Inde illa maximi medicorum exclamatio est: "uitam breuem esse, longam artem". Inde Aristotelis cum rerum natura exigentis minime conueniens sapienti uiro lis: "aetatis illam animalibus tantum indulsisse, ut quina aut dena saecula educerent, homini in tam multa ac magna genito tanto citeriorem terminum stare." Non exiguum temporis habemus, sed multum perdidimus.

<span style="font-size: 12px; font-family: georgia; color: #879E9B; font-variant: small-caps; font-weight: bold;">- histoire -</span> Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat. Nec huic publico, ut opinantur, malo turba tantum et imprudens uulgus ingemuit; clarorum quoque uirorum hic affectus querellas euocauit. Inde illa maximi medicorum exclamatio est: "uitam breuem esse, longam artem". Inde Aristotelis cum rerum natura exigentis minime conueniens sapienti uiro lis: "aetatis illam animalibus tantum indulsisse, ut quina aut dena saecula educerent, homini in tam multa ac magna genito tanto citeriorem terminum stare." Non exiguum temporis habemus, sed multum perdidimus.</div></td><td>
<div style="background-color: #8D838D; height: 1px; margin: -7px 30px 0 18px;"></div><div style="background-color: #B0C3AB; height: 2px; margin: 0 30px 0 18px;"></div></div>
<div style="background-color: #F0F0F0; border: 2px solid #BEBEBE; height: 296px; width: 130px; border-top-left-radius: 15px; border-bottom-right-radius: 15px; margin: 0 30px 0 18px; text-align: center; padding: 10px; overflow: auto;">
<span style="font-size: 12px; font-family: georgia; color: #879E9B; font-variant: small-caps; font-weight: bold;">Présentation</span><br /><a style="font-size: 16px; font-style: italic; font-family: arial narrow; color: #95879E;" href="lien vers le sujet">www</a>

<span style="font-size: 12px; font-family: georgia; color: #879E9B; font-variant: small-caps; font-weight: bold;">Relations</span><br /><a style="font-size: 16px; font-style: italic; font-family: arial narrow; color: #95879E;" href="lien vers le sujet">www</a>

<span style="font-size: 12px; font-family: georgia; color: #879E9B; font-variant: small-caps; font-weight: bold;">Dernier RP</span><br /><a style="font-size: 16px; font-style: italic; font-family: arial narrow; color: #95879E;" href="lien vers le sujet">www</a>

<span style="font-size: 12px; font-family: georgia; color: #879E9B; font-variant: small-caps; font-weight: bold;">Créations</span><br /><a style="font-size: 16px; font-style: italic; font-family: arial narrow; color: #95879E;" href="lien vers le sujet">www</a>

<span style="font-size: 12px; font-family: georgia; color: #879E9B; font-variant: small-caps; font-weight: bold;">Trombi</span><br /><a style="font-size: 16px; font-style: italic; font-family: arial narrow; color: #95879E;" href="lien vers le sujet">www</a></div></td></table></div>

<div style="margin: 0 0 -24px 80px; font-family: georgia; font-size: 24px; color: #B0C3AB;">Sujets en cours</div>
<div style="background-color: #DFDFDF; margin: 0 10px 0 10px; padding-bottom: 20px; border-top-left-radius: 30px; border-bottom-right-radius: 30px;">
<div style="background-color: #8D838D; height: 1px; margin: -7px 30px 0 30px;"></div><div style="background-color: #B0C3AB; height: 2px; margin: 0 30px 0 30px;"></div>
<div style="text-align: right; margin-right: 40px; font-family: georgia; font-variant: small-caps; font-size: 14px; font-style: italic; letter-spacing : 2px; color: #879E9B;">Prénom Nom</div><div style="background-color: #ffffff; height: 120px; margin: 0 30px 0 30px; padding: 10px; text-align: justify; overflow: auto;"><span style="font-size: 12px; font-family: georgia; color: #879E9B; font-variant: small-caps; font-weight: bold;">- titre du sujet -</span> <a style="font-size: 16px; font-style: italic; font-family: arial narrow; color: #95879E;" href="lien vers le sujet">www</a> |Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat. Nec huic publico, ut opinantur, malo turba tantum et imprudens uulgus ingemuit; clarorum quoque uirorum hic affectus querellas euocauit. Inde illa maximi medicorum exclamatio est: "uitam breuem esse, longam artem". Inde Aristotelis cum rerum natura exigentis minime conueniens sapienti uiro lis: "aetatis illam animalibus tantum indulsisse, ut quina aut dena saecula educerent, homini in tam multa ac magna genito tanto citeriorem terminum stare." Non exiguum temporis habemus, sed multum perdidimus. Satis longa uita et in maximarum rerum consummationem large data est, si tota bene collocaretur; sed ubi per luxum ac neglegentiam diffluit, ubi nulli bonae rei impenditur, ultima demum necessitate cogente, quam ire non intelleximus transisse sentimus. Ita est: non accipimus breuem uitam sed fecimus, nec inopes eius sed prodigi sumus. Sicut amplae et regiae opes, ubi ad malum dominum peruenerunt, momento dissipantur, at quamuis modicae, si bono custodi traditae sunt, usu crescunt: ita aetas nostra bene disponenti multum patet. Quid de rerum natura querimur? Illa se benigne gessit: uita, si uti scias, longa est.</div></div>

<div style="margin: 0 0 -24px 80px; font-family: georgia; font-size: 24px; color: #B0C3AB;">Sujets réservés</div>
<div style="background-color: #DFDFDF; margin: 0 10px 0 10px; padding-bottom: 20px; border-top-left-radius: 30px; border-bottom-right-radius: 30px;">
<div style="background-color: #8D838D; height: 1px; margin: -7px 30px 0 30px;"></div><div style="background-color: #B0C3AB; height: 2px; margin: 0 30px 0 30px;"></div>
<div style="text-align: right; margin-right: 40px; font-family: georgia; font-variant: small-caps; font-size: 14px; font-style: italic; letter-spacing : 2px; color: #879E9B;">Prénom Nom</div><div style="background-color: #ffffff; height: 120px; margin: 0 30px 0 30px; padding: 10px; text-align: justify; overflow: auto;"><span style="font-size: 12px; font-family: georgia; color: #879E9B; font-variant: small-caps; font-weight: bold;">- titre du sujet -</span> <a style="font-size: 16px; font-style: italic; font-family: arial narrow; color: #95879E;" href="lien vers le sujet">www</a> | Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat. Nec huic publico, ut opinantur, malo turba tantum et imprudens uulgus ingemuit; clarorum quoque uirorum hic affectus querellas euocauit. Inde illa maximi medicorum exclamatio est: "uitam breuem esse, longam artem". Inde Aristotelis cum rerum natura exigentis minime conueniens sapienti uiro lis: "aetatis illam animalibus tantum indulsisse, ut quina aut dena saecula educerent, homini in tam multa ac magna genito tanto citeriorem terminum stare." Non exiguum temporis habemus, sed multum perdidimus. Satis longa uita et in maximarum rerum consummationem large data est, si tota bene collocaretur; sed ubi per luxum ac neglegentiam diffluit, ubi nulli bonae rei impenditur, ultima demum necessitate cogente, quam ire non intelleximus transisse sentimus. Ita est: non accipimus breuem uitam sed fecimus, nec inopes eius sed prodigi sumus. Sicut amplae et regiae opes, ubi ad malum dominum peruenerunt, momento dissipantur, at quamuis modicae, si bono custodi traditae sunt, usu crescunt: ita aetas nostra bene disponenti multum patet. Quid de rerum natura querimur? Illa se benigne gessit: uita, si uti scias, longa est.</div>

<div style="text-align: right; margin-right: 40px; font-family: georgia; font-variant: small-caps; font-size: 14px; font-style: italic; letter-spacing : 2px; color: #879E9B;">Prénom Nom</div><div style="background-color: #ffffff; height: 120px; margin: 0 30px 0 30px; padding: 10px; text-align: justify; overflow: auto;"><span style="font-size: 12px; font-family: georgia; color: #879E9B; font-variant: small-caps; font-weight: bold;">- titre du sujet -</span> <a style="font-size: 16px; font-style: italic; font-family: arial narrow; color: #95879E;" href="lien vers le sujet">www</a> | Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat. Nec huic publico, ut opinantur, malo turba tantum et imprudens uulgus ingemuit; clarorum quoque uirorum hic affectus querellas euocauit. Inde illa maximi medicorum exclamatio est: "uitam breuem esse, longam artem". Inde Aristotelis cum rerum natura exigentis minime conueniens sapienti uiro lis: "aetatis illam animalibus tantum indulsisse, ut quina aut dena saecula educerent, homini in tam multa ac magna genito tanto citeriorem terminum stare." Non exiguum temporis habemus, sed multum perdidimus. Satis longa uita et in maximarum rerum consummationem large data est, si tota bene collocaretur; sed ubi per luxum ac neglegentiam diffluit, ubi nulli bonae rei impenditur, ultima demum necessitate cogente, quam ire non intelleximus transisse sentimus. Ita est: non accipimus breuem uitam sed fecimus, nec inopes eius sed prodigi sumus. Sicut amplae et regiae opes, ubi ad malum dominum peruenerunt, momento dissipantur, at quamuis modicae, si bono custodi traditae sunt, usu crescunt: ita aetas nostra bene disponenti multum patet. Quid de rerum natura querimur? Illa se benigne gessit: uita, si uti scias, longa est.</div></div>

<div style="margin: 0 0 -24px 80px; font-family: georgia; font-size: 24px; color: #B0C3AB;">Sujets terminés</div>
<div style="background-color: #DFDFDF; margin: 0 10px 0 10px; padding-bottom: 20px; border-top-left-radius: 30px; border-bottom-right-radius: 30px;">
<div style="background-color: #8D838D; height: 1px; margin: -7px 30px 0 30px;"></div><div style="background-color: #B0C3AB; height: 2px; margin: 0 30px 0 30px;"></div>
<div style="text-align: right; margin-right: 40px; font-family: georgia; font-variant: small-caps; font-size: 14px; font-style: italic; letter-spacing : 2px; color: #879E9B;">Prénom Nom</div><div style="background-color: #ffffff; height: 120px; margin: 0 30px 0 30px; padding: 10px; text-align: justify; overflow: auto;"><span style="font-size: 12px; font-family: georgia; color: #879E9B; font-variant: small-caps; font-weight: bold;">- titre du sujet -</span> <a style="font-size: 16px; font-style: italic; font-family: arial narrow; color: #95879E;" href="lien vers le sujet">www</a> |Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat. Nec huic publico, ut opinantur, malo turba tantum et imprudens uulgus ingemuit; clarorum quoque uirorum hic affectus querellas euocauit. Inde illa maximi medicorum exclamatio est: "uitam breuem esse, longam artem". Inde Aristotelis cum rerum natura exigentis minime conueniens sapienti uiro lis: "aetatis illam animalibus tantum indulsisse, ut quina aut dena saecula educerent, homini in tam multa ac magna genito tanto citeriorem terminum stare." Non exiguum temporis habemus, sed multum perdidimus. Satis longa uita et in maximarum rerum consummationem large data est, si tota bene collocaretur; sed ubi per luxum ac neglegentiam diffluit, ubi nulli bonae rei impenditur, ultima demum necessitate cogente, quam ire non intelleximus transisse sentimus. Ita est: non accipimus breuem uitam sed fecimus, nec inopes eius sed prodigi sumus. Sicut amplae et regiae opes, ubi ad malum dominum peruenerunt, momento dissipantur, at quamuis modicae, si bono custodi traditae sunt, usu crescunt: ita aetas nostra bene disponenti multum patet. Quid de rerum natura querimur? Illa se benigne gessit: uita, si uti scias, longa est.</div>

<div style="text-align: right; margin-right: 40px; font-family: georgia; font-variant: small-caps; font-size: 14px; font-style: italic; letter-spacing : 2px; color: #879E9B;">Prénom Nom</div><div style="background-color: #ffffff; height: 120px; margin: 0 30px 0 30px; padding: 10px; text-align: justify; overflow: auto;"><span style="font-size: 12px; font-family: georgia; color: #879E9B; font-variant: small-caps; font-weight: bold;">- titre du sujet -</span> <a style="font-size: 16px; font-style: italic; font-family: arial narrow; color: #95879E;" href="lien vers le sujet">www</a> | Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat. Nec huic publico, ut opinantur, malo turba tantum et imprudens uulgus ingemuit; clarorum quoque uirorum hic affectus querellas euocauit. Inde illa maximi medicorum exclamatio est: "uitam breuem esse, longam artem". Inde Aristotelis cum rerum natura exigentis minime conueniens sapienti uiro lis: "aetatis illam animalibus tantum indulsisse, ut quina aut dena saecula educerent, homini in tam multa ac magna genito tanto citeriorem terminum stare." Non exiguum temporis habemus, sed multum perdidimus. Satis longa uita et in maximarum rerum consummationem large data est, si tota bene collocaretur; sed ubi per luxum ac neglegentiam diffluit, ubi nulli bonae rei impenditur, ultima demum necessitate cogente, quam ire non intelleximus transisse sentimus. Ita est: non accipimus breuem uitam sed fecimus, nec inopes eius sed prodigi sumus. Sicut amplae et regiae opes, ubi ad malum dominum peruenerunt, momento dissipantur, at quamuis modicae, si bono custodi traditae sunt, usu crescunt: ita aetas nostra bene disponenti multum patet. Quid de rerum natura querimur? Illa se benigne gessit: uita, si uti scias, longa est.</div></div><a style="display: block; margin-top: -3px; text-align: center; color: #BEBEBE; font-size: 10px; font-family: arial narrow;" href="http://www.never-utopia.com">© Kanae de Never-Utopia</a></div>


Pour rajouter un RP :



Code:
<div style="text-align: right; margin-right: 40px; font-family: georgia; font-variant: small-caps; font-size: 14px; font-style: italic; letter-spacing : 2px; color: #879E9B;">Prénom Nom</div><div style="background-color: #ffffff; height: 120px; margin: 0 30px 0 18px; padding: 10px; text-align: justify; overflow: auto;"><span style="font-size: 12px; font-family: georgia; color: #879E9B; font-variant: small-caps; font-weight: bold;">- titre du sujet -</span> <a style="font-size: 16px; font-style: italic; font-family: arial narrow; color: #95879E;" href="lien vers le sujet">www</a> | Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat. Nec huic publico, ut opinantur, malo turba tantum et imprudens uulgus ingemuit; clarorum quoque uirorum hic affectus querellas euocauit. Inde illa maximi medicorum exclamatio est: "uitam breuem esse, longam artem". Inde Aristotelis cum rerum natura exigentis minime conueniens sapienti uiro lis: "aetatis illam animalibus tantum indulsisse, ut quina aut dena saecula educerent, homini in tam multa ac magna genito tanto citeriorem terminum stare." Non exiguum temporis habemus, sed multum perdidimus. Satis longa uita et in maximarum rerum consummationem large data est, si tota bene collocaretur; sed ubi per luxum ac neglegentiam diffluit, ubi nulli bonae rei impenditur, ultima demum necessitate cogente, quam ire non intelleximus transisse sentimus. Ita est: non accipimus breuem uitam sed fecimus, nec inopes eius sed prodigi sumus. Sicut amplae et regiae opes, ubi ad malum dominum peruenerunt, momento dissipantur, at quamuis modicae, si bono custodi traditae sunt, usu crescunt: ita aetas nostra bene disponenti multum patet. Quid de rerum natura querimur? Illa se benigne gessit: uita, si uti scias, longa est.</div>





Et pour ceux qui rechercheraient une version un peu plus évidente à installer sur un forum (moins à modifier, attention !) :



Version Simplifiée



Code simplifié à insérer directement dans un message :



Code:
<div class="fond_1"><img src="http://nsa34.casimages.com/img/2014/10/01/141001090448263652.png" style="width: 100%; heigh: 280px;"/><div class="fond_entete"><div class="bloc_guillemet"><b>“</b><span style="color: #1C3734; font-variant: small-caps; margin-top: -2px; letter-spacing: 2px">Prénom Nom</span></div></div><div class="bloc_credit">feat Personnalité choisie</div><div class="bloc_citation">"Citation classe de la mort qui tue tout à travers le monde"</div>



<div class="titre_1" style="margin: 0 0 -18px 375px;">Mes sujets</div><div class="titre_1" style="margin: 0 0 -22px 80px;">En résumé</div>
<div class="fond_2"><table><td>
<div class="style_1" style="margin: -7px 0 0 30px"></div><div class="style_2" style="margin: 0 0 0 30px;"></div></div>
<div class="fond_3" style="width: 250px; height: 300px; margin: 0 0 0 30px;"><span style="font-size: 12px; font-family: georgia; color: #879E9B; font-variant: small-caps; font-weight: bold;">- caractère -</span> Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat. Nec huic publico, ut opinantur, malo turba tantum et imprudens uulgus ingemuit; clarorum quoque uirorum hic affectus querellas euocauit. Inde illa maximi medicorum exclamatio est: "uitam breuem esse, longam artem". Inde Aristotelis cum rerum natura exigentis minime conueniens sapienti uiro lis: "aetatis illam animalibus tantum indulsisse, ut quina aut dena saecula educerent, homini in tam multa ac magna genito tanto citeriorem terminum stare." Non exiguum temporis habemus, sed multum perdidimus.

<span style="font-size: 12px; font-family: georgia; color: #879E9B; font-variant: small-caps; font-weight: bold;">- histoire -</span> Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat. Nec huic publico, ut opinantur, malo turba tantum et imprudens uulgus ingemuit; clarorum quoque uirorum hic affectus querellas euocauit. Inde illa maximi medicorum exclamatio est: "uitam breuem esse, longam artem". Inde Aristotelis cum rerum natura exigentis minime conueniens sapienti uiro lis: "aetatis illam animalibus tantum indulsisse, ut quina aut dena saecula educerent, homini in tam multa ac magna genito tanto citeriorem terminum stare." Non exiguum temporis habemus, sed multum perdidimus.</div></td><td>
<div class="style_1" style="margin: -7px 30px 0 18px;"></div><div class="style_2" style="margin: 0 30px 0 18px;"></div></div>
<div class="fond_4" style="height: 296px; width: 130px; margin: 0 30px 0 18px; text-align: center;">
<span style="font-size: 12px; font-family: georgia; color: #879E9B; font-variant: small-caps; font-weight: bold;">Présentation</span><br /><a style="font-size: 16px; font-style: italic; font-family: arial narrow; color: #95879E;" href="lien vers le sujet">www</a>

<span style="font-size: 12px; font-family: georgia; color: #879E9B; font-variant: small-caps; font-weight: bold;">Relations</span><br /><a style="font-size: 16px; font-style: italic; font-family: arial narrow; color: #95879E;" href="lien vers le sujet">www</a>

<span style="font-size: 12px; font-family: georgia; color: #879E9B; font-variant: small-caps; font-weight: bold;">Dernier RP</span><br /><a style="font-size: 16px; font-style: italic; font-family: arial narrow; color: #95879E;" href="lien vers le sujet">www</a>

<span style="font-size: 12px; font-family: georgia; color: #879E9B; font-variant: small-caps; font-weight: bold;">Créations</span><br /><a style="font-size: 16px; font-style: italic; font-family: arial narrow; color: #95879E;" href="lien vers le sujet">www</a>

<span style="font-size: 12px; font-family: georgia; color: #879E9B; font-variant: small-caps; font-weight: bold;">Trombi</span><br /><a style="font-size: 16px; font-style: italic; font-family: arial narrow; color: #95879E;" href="lien vers le sujet">www</a></div></td></table></div>

<div class="titre_1">Sujets en cours</div>
<div class="fond_2">
<div class="style_1"></div><div class="style_2"></div>
<div class="bloc_nom">Prénom Nom</div><div class="fond_3" style="height: 120px;"><span style="font-size: 12px; font-family: georgia; color: #879E9B; font-variant: small-caps; font-weight: bold;">- titre du sujet -</span> <a style="font-size: 16px; font-style: italic; font-family: arial narrow; color: #95879E;" href="lien vers le sujet">www</a> |Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat. Nec huic publico, ut opinantur, malo turba tantum et imprudens uulgus ingemuit; clarorum quoque uirorum hic affectus querellas euocauit. Inde illa maximi medicorum exclamatio est: "uitam breuem esse, longam artem". Inde Aristotelis cum rerum natura exigentis minime conueniens sapienti uiro lis: "aetatis illam animalibus tantum indulsisse, ut quina aut dena saecula educerent, homini in tam multa ac magna genito tanto citeriorem terminum stare." Non exiguum temporis habemus, sed multum perdidimus. Satis longa uita et in maximarum rerum consummationem large data est, si tota bene collocaretur; sed ubi per luxum ac neglegentiam diffluit, ubi nulli bonae rei impenditur, ultima demum necessitate cogente, quam ire non intelleximus transisse sentimus. Ita est: non accipimus breuem uitam sed fecimus, nec inopes eius sed prodigi sumus. Sicut amplae et regiae opes, ubi ad malum dominum peruenerunt, momento dissipantur, at quamuis modicae, si bono custodi traditae sunt, usu crescunt: ita aetas nostra bene disponenti multum patet. Quid de rerum natura querimur? Illa se benigne gessit: uita, si uti scias, longa est.</div></div>

<div class="titre_1">Sujets réservés</div>
<div class="fond_2">
<div class="style_1"></div><div class="style_2"></div>
<div class="bloc_nom">Prénom Nom</div><div class="fond_3" style="height: 120px;"><span style="font-size: 12px; font-family: georgia; color: #879E9B; font-variant: small-caps; font-weight: bold;">- titre du sujet -</span> <a style="font-size: 16px; font-style: italic; font-family: arial narrow; color: #95879E;" href="lien vers le sujet">www</a> | Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat. Nec huic publico, ut opinantur, malo turba tantum et imprudens uulgus ingemuit; clarorum quoque uirorum hic affectus querellas euocauit. Inde illa maximi medicorum exclamatio est: "uitam breuem esse, longam artem". Inde Aristotelis cum rerum natura exigentis minime conueniens sapienti uiro lis: "aetatis illam animalibus tantum indulsisse, ut quina aut dena saecula educerent, homini in tam multa ac magna genito tanto citeriorem terminum stare." Non exiguum temporis habemus, sed multum perdidimus. Satis longa uita et in maximarum rerum consummationem large data est, si tota bene collocaretur; sed ubi per luxum ac neglegentiam diffluit, ubi nulli bonae rei impenditur, ultima demum necessitate cogente, quam ire non intelleximus transisse sentimus. Ita est: non accipimus breuem uitam sed fecimus, nec inopes eius sed prodigi sumus. Sicut amplae et regiae opes, ubi ad malum dominum peruenerunt, momento dissipantur, at quamuis modicae, si bono custodi traditae sunt, usu crescunt: ita aetas nostra bene disponenti multum patet. Quid de rerum natura querimur? Illa se benigne gessit: uita, si uti scias, longa est.</div>

<div class="bloc_nom">Prénom Nom</div><div class="fond_3" style="height: 120px;"><span style="font-size: 12px; font-family: georgia; color: #879E9B; font-variant: small-caps; font-weight: bold;">- titre du sujet -</span> <a style="font-size: 16px; font-style: italic; font-family: arial narrow; color: #95879E;" href="lien vers le sujet">www</a> | Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat. Nec huic publico, ut opinantur, malo turba tantum et imprudens uulgus ingemuit; clarorum quoque uirorum hic affectus querellas euocauit. Inde illa maximi medicorum exclamatio est: "uitam breuem esse, longam artem". Inde Aristotelis cum rerum natura exigentis minime conueniens sapienti uiro lis: "aetatis illam animalibus tantum indulsisse, ut quina aut dena saecula educerent, homini in tam multa ac magna genito tanto citeriorem terminum stare." Non exiguum temporis habemus, sed multum perdidimus. Satis longa uita et in maximarum rerum consummationem large data est, si tota bene collocaretur; sed ubi per luxum ac neglegentiam diffluit, ubi nulli bonae rei impenditur, ultima demum necessitate cogente, quam ire non intelleximus transisse sentimus. Ita est: non accipimus breuem uitam sed fecimus, nec inopes eius sed prodigi sumus. Sicut amplae et regiae opes, ubi ad malum dominum peruenerunt, momento dissipantur, at quamuis modicae, si bono custodi traditae sunt, usu crescunt: ita aetas nostra bene disponenti multum patet. Quid de rerum natura querimur? Illa se benigne gessit: uita, si uti scias, longa est.</div></div>

<div class="titre_1">Sujets terminés</div>
<div class="fond_2">
<div class="style_1"></div><div class="style_2"></div>
<div class="bloc_nom">Prénom Nom</div><div class="fond_3" style="height: 120px;"><span style="font-size: 12px; font-family: georgia; color: #879E9B; font-variant: small-caps; font-weight: bold;">- titre du sujet -</span> <a style="font-size: 16px; font-style: italic; font-family: arial narrow; color: #95879E;" href="lien vers le sujet">www</a> |Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat. Nec huic publico, ut opinantur, malo turba tantum et imprudens uulgus ingemuit; clarorum quoque uirorum hic affectus querellas euocauit. Inde illa maximi medicorum exclamatio est: "uitam breuem esse, longam artem". Inde Aristotelis cum rerum natura exigentis minime conueniens sapienti uiro lis: "aetatis illam animalibus tantum indulsisse, ut quina aut dena saecula educerent, homini in tam multa ac magna genito tanto citeriorem terminum stare." Non exiguum temporis habemus, sed multum perdidimus. Satis longa uita et in maximarum rerum consummationem large data est, si tota bene collocaretur; sed ubi per luxum ac neglegentiam diffluit, ubi nulli bonae rei impenditur, ultima demum necessitate cogente, quam ire non intelleximus transisse sentimus. Ita est: non accipimus breuem uitam sed fecimus, nec inopes eius sed prodigi sumus. Sicut amplae et regiae opes, ubi ad malum dominum peruenerunt, momento dissipantur, at quamuis modicae, si bono custodi traditae sunt, usu crescunt: ita aetas nostra bene disponenti multum patet. Quid de rerum natura querimur? Illa se benigne gessit: uita, si uti scias, longa est.</div>

<div class="bloc_nom">Prénom Nom</div><div class="fond_3" style="height: 120px;"><span style="font-size: 12px; font-family: georgia; color: #879E9B; font-variant: small-caps; font-weight: bold;">- titre du sujet -</span> <a style="font-size: 16px; font-style: italic; font-family: arial narrow; color: #95879E;" href="lien vers le sujet">www</a> | Maior pars mortalium, Pauline, de naturae malignitate conqueritur, quod in exiguum aeui gignimur, quod haec tam uelociter, tam rapide dati nobis temporis spatia decurrant, adeo ut exceptis admodum paucis ceteros in ipso uitae apparatu uita destituat. Nec huic publico, ut opinantur, malo turba tantum et imprudens uulgus ingemuit; clarorum quoque uirorum hic affectus querellas euocauit. Inde illa maximi medicorum exclamatio est: "uitam breuem esse, longam artem". Inde Aristotelis cum rerum natura exigentis minime conueniens sapienti uiro lis: "aetatis illam animalibus tantum indulsisse, ut quina aut dena saecula educerent, homini in tam multa ac magna genito tanto citeriorem terminum stare." Non exiguum temporis habemus, sed multum perdidimus. Satis longa uita et in maximarum rerum consummationem large data est, si tota bene collocaretur; sed ubi per luxum ac neglegentiam diffluit, ubi nulli bonae rei impenditur, ultima demum necessitate cogente, quam ire non intelleximus transisse sentimus. Ita est: non accipimus breuem uitam sed fecimus, nec inopes eius sed prodigi sumus. Sicut amplae et regiae opes, ubi ad malum dominum peruenerunt, momento dissipantur, at quamuis modicae, si bono custodi traditae sunt, usu crescunt: ita aetas nostra bene disponenti multum patet. Quid de rerum natura querimur? Illa se benigne gessit: uita, si uti scias, longa est.</div></div><a class="bloc_credit" style="margin-left: 220px;" href="http://www.never-utopia.com">© Kanae de Never-Utopia</a></div>




Code à insérer dans le CSS de votre forum :



Si vous avez déjà installé dans le CSS de votre forum les éléments proposés dans la fiche de présentation ou dans la fiche de lien, certains éléments sont susceptibles de se répéter ! Veillez donc bien à repérer uniquement les éléments que vous n'avez pas déjà installés afin de vous épargner du temps et de garder une fiche de CSS claire et lisible.



Code:
/* --------------------------------- Journal--------------------------------- */
.fond_1
{
background-color: #E4E4E4;
margin: 20px;
padding-bottom: 10px;
box-shadow: 3px 3px 5px #000000;
color: #353535;
font-family: 'Verdana';
font-size: 11px;
}
.fond_2
{
background-color: #DFDFDF;
margin-left: 10px;
padding-bottom: 20px;
margin-right: 10px;
border-top-left-radius: 30px;
border-bottom-right-radius: 30px;
}
.fond_3
{
background-color: #F0F0F0;
border: 2px solid #BEBEBE;
width: 196px;
height: 152px;
margin-left : 28px;
border-top-left-radius: 15px;
border-bottom-right-radius: 15px;
padding: 10px;
overflow: auto;
}
.fond_4
{
background-color: #ffffff;
height: 300px;
margin-left: 30px;
margin-right: 30px;
padding: 10px;
text-align: justify;
overflow: auto;
}
.style_1
{
background-color: #B0C3AB;
width: 100%
height: 4px;
}
.style_2
{
background-color: #8D838D;
height: 1px;
margin-left: 30px;
margin-right: 30px;
margin-top: -7px;
}
.fond_entete
{
  background-color: #F0F0F0;
  border-top: 4px solid #B0C3AB;
  border-bottom: 2px solid #BEBEBE;
  height: 40px;
  width: 100%;
}
.bloc_guillemet
{
text-align: right;
margin-right: 10px;
margin-top: -24px;
font-family: georgia;
font-size: 36px;
text-shadow: 1px 1px 2px #1A1A1A;
color: #353535;
}
.bloc_citation
{
  text-align: right;
  margin: -10px 10px 0 250px;
  font-family: georgia;
  font-variant: small-caps;
  font-size: 11px;
  font-style: italic;
  letter-spacing : 2px;
  color: #879E9B;
}
.bloc_nom
{
  text-align : right;
  margin-right: 40px;
  font-family: georgia;
  font-variant: small-caps;
  font-size: 14px;
  font-style: italic;
  letter-spacing: 2px;
  color: #879E9B;
}
.titre_1
{
font-family: georgia;
margin-left: 80px;
margin-bottom: -24px;
font-size: 24px;
color: #B0C3AB;
}
.credits
{
margin-top: -3px;
margin-left: 10px;
color: #BEBEBE;
font-size: 10px;
font-family: arial narrow;
}
/* --------------------------------- FIN Journal --------------------------------- */

Namida

Be simple - Fiche de liens - Jeu 27 Oct 2016 - 3:35


Be simple - Fiche de liens


/!\ Cette section est présente pour vous aider avec vos problèmes de code. Je ne répondrais pas aux MPs que l'on m'enverra à ce sujet.

Bonjour à tous,

Voici le premier code d'une série de trois (3) comprenant une fiche de liens, une fiche technique et un contenu de RP pour vos forums. Je fais le tout sur une base volontaire (comme tout le monde). Il y est donc possible, que les deux autres éléments arrivent beaucoup plus tard.

Un petit "merci" est toujours apprécié. Je rappel aussi qu'enlever le crédit est interdit.

P.S. J'espère que je ne me suis pas trompée d'endroit pour poster.

Voici un aperçu de la fiche de lien




Voilà! C'est tout pour cette fiche de liens


Revenir en haut

La date/heure actuelle est Jeu 19 Oct 2017 - 13:05