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.



151 résultats trouvés pour css

[TUTO] Comment utiliser n'importe quelle police d'écriture facilement? - Ven 30 Juin 2017 - 20:11



Comment utiliser n'importe quelle police d'écriture facilement ?


Le résultat n'est pas aussi lisse et peut avoir quelques déformations en comparaison de la police d'origine.
Ce format consomme plus de ressources, privilégier l'hébergement pour les grands volumes textes et les utilisations répéter.



Alors le tutoriel va être rapide et court, car c'est particulièrement simple, mais il fallait le savoir.

Étape 1: La Base

Tout d'abord, il vous faut une police d'écriture, nous nous prendrons ANXIETY. Une police simple et géométrique au format .ttf, mais les autres formats fonctionne tout autant.

Étape 2: Paramétrage


On va se rendre sur un site qui va convertir notre fichier en un format BASE64 que l'on ajoutera dans le CSS dans votre forum qui sera lisible par votre navigateur. J'utilise personnellement Transfonter, mais vous pouvez aussi utiliser FontSquirrel Generator. Mais par soucie de facilité on usera de :Transfonter.

Vous allez d'abord paramétrer les options ainsi: (les autres options n'ont pour nous aucune utilité pour nos objectifs.

La disquette
vous servira a sauvegarder vos paramètres pour une utilisation future.


Étape 3: Convertisage



On va maintenant cliquer sur et aller sélectionner notre petit fichier de police
(Je ne vais pas vous faire l'offense de vous expliquer comment aller chercher un fichier)

La police apparaît alors ici:

Et vous n'aver plus qu'a cliquer sur puis télécharger votre kit en cliquant sur.

Étape 4: Application dans le css


Vous avez téléchargé un Zip a l'étape précédente, dedans vous trouverez un fichier comme ceci:

Ouvrez-le avec un éditeur texte (notepad++ personnellement)
Vous y trouverez cela:


Vous n'avez plus qu'à le copier dans votre CSS, trouvable dans : Affichage > Couleurs > Feuille de style CSS.

Étape 5: Exemple


Avec cela vous pourrez ainsi faire de joli titre de sujet ou même dans l'aspect du graphique MAIS toujours avec modération.




Comment personnaliser l'apparence de la chatbox - Mar 11 Avr 2017 - 22:06



Comment personnaliser l'apparence de la chatbox



Bonjour !

Nous avions précédemment une tonne de petits tutoriels qui donnaient des trucs sur la chatbox et qui, très souvent, se répétaient. Du coup, ce tutoriel a été fait pour but d'être plus complet et de rassembler en un endroit la majorité astuces.

Je vous réfère quand même à plusieurs astuces intéressantes :
- Styliser les messages de connexion / déconnexion (CSS)
- Empêcher les soucis des messages dans la Chatbox ForumActif

Tout les codes donnés ci-bas se mettent dans la feuille de style CSS.




Le bloc de la chatbox


Voilà le bloc qui contient toute la chatbox :
Code:
/*Contient toute la CB*/
body.chatbox {
}



En-tête de la chatbox


Voilà l'en-tête de la chat-box :
Code:
/*Barre de titre*/
#chatbox_header .catBottom {
  border: none; /*Enlève la bordure*/
  background-image: none; /*Enlève image de fond*/
  background-color: transparent; /*Enlève couleur de fond*/
  height: 30px;
}

/*Titre normal */
#chatbox_header .catBottom .cattitle {
}
/*Titre normal au survol*/
#chatbox_header .catBottom .cattitle:hover {
}

/*Liens de droite de la barre de titre*/
#chatbox_header .catBottom .chatbox-options a {
}
/*Liens de droite de la barre de titre au survol*/
#chatbox_header .catBottom .chatbox-options a:hover {
}



Pour remplacer le texte dans l'en-tête de la chatbox :
Code:
/*Pour cacher le titre normal*/
#chatbox_header .cattitle strong {
  font-size: 0px;
}
/*Titre Personnalisé*/
#chatbox_header .cattitle:before {
  content: "NOM"; /* Modifiez NOM par le titre que vous désirez */
  font-size: 12px;
}

/*Pour cacher le lien pour accéder aux archives normal*/
#chatbox_option_with_archives a {
  font-size: 0;
}
/*Lien pour accéder aux archives Personnalisé*/
#chatbox_option_with_archives a:before {
  content: "HISTORIQUE"; /* Modifiez HISTORIQUE par ce que vous désirez */
  font-size: 12px;
}

/*Pour cacher le lien pour sortir des archives normal*/
#chatbox_option_without_archives a {
  font-size: 0px;
}
/*Lien pour sortir des archives Personnalisé*/
#chatbox_option_without_archives a:before {
  content: "QUITTER HISTORIQUE"; /* Modifiez QUITTER HISTORIQUE par ce que vous désirez */
  font-size: 12px;
}

/*Pour cacher le lien de la connexion*/
#chatbox_option_co strong {
  font-size: 0px;
}
/*Lien de la connexion Personnalisé*/
#chatbox_option_co strong:before {
  content: "ENTRER SUR LA CB"; /* Modifiez ENTRER SUR LA CB par ce que vous désirez */
  font-size: 12px;
}

/*Pour cacher le lien de la déconnexion*/
#chatbox_option_disco {
  font-size: 0px;
}
/*Lien de la déconnexion Personnalisé*/
#chatbox_option_disco:before {
  content: "QUITTER LA CB"; /* Modifiez QUITTER LA CB par ce que vous désirez */
  font-size: 12px;
}





La liste des membres de la chatbox


Voilà la liste des membres de la chat-box :
Code:
/*Bloc de la liste des membres*/
#chatbox_members {
  background-color: transparent; /*Enlève couleur de fond*/
  border-right: 1px solid #000; /*Bordure entre la liste des membres et les messages*/
}

/*Ligne de titre des membres en ligne*/
#chatbox_members .online {
}
/*Liste qui contient les membres en ligne*/
#chatbox_members .online-users {
}
/*Ligne du nom du membre en ligne*/
#chatbox_members .online-users li {
}

/*Ligne de titre des membres absents*/
#chatbox_members .away {
}
/*Liste qui contient les membres absents*/
#chatbox_members .away-users {
}
/*Ligne du nom du membre absent*/
#chatbox_members .away-users li {
}
/* Menu au clic droit des pseudos */
#chatbox_contextmenu {
}



Pour remplacer le texte de "En ligne" et de "Absents" dans la liste des membres
Code:
/*Pour cacher le titre des membres en ligne*/
#chatbox_members .online {
  font-size: 0px;
}
/*Titre des membres en ligne personnalisé*/
#chatbox_members .online:before {
  content: "MEMBRES ACTIFS"; /* Modifiez MEMBRES ACTIFS par ce que vous désirez */
  font-size: 12px;
  color: green; /*Couleur de la police*/
}

/*Pour cacher le titre des membres absents*/
#chatbox_members .away {
  font-size: 0px;
}
/*Titre des membres absents personnalisé*/
#chatbox_members .away:before {
  content: "PROIES DE TIMMY"; /* Modifiez PROIES DE TIMMY par ce que vous désirez */
  font-size: 12px;
  color: darkred; /*Couleur de la police*/
}





L'intérieur de la chatbox où il y a les messages


Voilà l'intérieur où il y a les messages :
Code:
/*Partie centrale de la chatbox où il y a les messages*/
#chatbox {
}

/*Lignes des message impairs*/
#chatbox .chatbox_row_1 {
  margin: 0px;
}
/*Lignes de messages pairs*/
#chatbox .chatbox_row_2 {
  margin: 0px;
}

/*Empêcher le bug des textes trop longs*/
#chatbox .msg{word-wrap: break-word;}
#chatbox .user, #chatbox .date-and-time{white-space: nowrap;}

/* Mise en forme de la date */
#chatbox .date-and-time {
}

/*Bloc du pseudo du membre incluant le @ des modos et admins*/
#chatbox .user {
}
/*Pseudo du membre*/
#chatbox .chatbox-message-username {
}

/*Le message du membre*/
#chatbox .msg {
}



Les avatars de la chatbox :
Code:
/*Bloc avatar du membre*/
#chatbox .cb-avatar {
  padding: 1px!important; /*Padding*/
  border: 1px solid #d5d5d5!important; /*Bordure*/
  width:30px!important; /*Largeur*/
  height:30px!important; /*Hauteur*/
  overflow:hidden; /*Cache ce qui dépasse*/
  box-shadow: 0 2px 2px rgba(0,0,0,0.1)!important; /*Ombre du bloc*/
  transform: translateZ(0); /* empeche bug Chrome */
}
/*Avatar du membre*/
#chatbox .cb-avatar > img {
  width:30px!important;
  height:30px!important;
}





Barre de bas du forum


Voilà la barre du bas du forum :
Code:
/*Pour arranger la hauteur de la barre du bas*/
#chatbox_footer {
  height: 29px!important;
}
/*Barre du bas*/
#chatbox_footer .catBottom {
  border: none; /*Enlève la bordure*/
  background-image: none; /*Enlève image de fond*/
  background-color: transparent; /*Enlève couleur de fond*/
  height: 29px;
}

/*Bouton Aide tout à gauche*/
#chatbox_footer #help-button {
}

/*Bouton Gras*/
#chatbox_footer .text-styles label[title="Gras"] {
  background-color: pink;
}
/*Bouton Italique*/
#chatbox_footer .text-styles label[title="Ital."] {
}
/*Bouton Surligné*/
#chatbox_footer .text-styles label[title="Soulig."] {
}
/*Bouton Barré*/
#chatbox_footer .text-styles label[title="Barré"] {
}
/*Bouton Couleur de police*/
#chatbox_footer #divcolor {
}
/*Bouton Smiley*/
#chatbox_footer #divsmilies {
}

/*Texte avant le message*/
#chatbox_footer label[for="message"] {
}
/*Champ texte pour le message*/
#chatbox_footer #message {
}
/*Bouton pour envoyer le message*/
#chatbox_footer #submit_button {
}





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

À plus !

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 !

Shaneliae

Chatbox personnalisée kaki - Mer 1 Mar 2017 - 23:32


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


Chatbox personnalisée kaki



Suite à une commande de Lone wanderer, j'ai réalisé cette personnalisation de CB. Elle a été réalisé pour un forum avec une ambiance de guerre (Fallout).



J'ai réalisé cette CB en ayant enlevé toutes les couleurs et images de base se trouvant dans le panneau d'administration dans l'onglet Affichage > Images & couleurs


Pour ce LS vous n'aurez besoin de modifier que du CSS, pour cela il vous faut des droits d'administration. Allez dans votre Panneau de configuration puis Affichage > Images & Couleurs > Couleurs > Feuille de style CSS

Ensuite il vous suffit de coller le code ci-dessous :

Code:
/***** CB KAKI *****/

/* Intégration de la font Six Caps via font-face */
@font-face {
  font-family: 'Six Caps';
  font-style: normal;
  font-weight: 400;
  src: local('SixCaps'), url(https://fonts.gstatic.com/s/sixcaps/v7/kHNZYYf63qmp8C-aw9f9pvesZW2xOQ-xsNqO47m55DA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
}

/* Conteneur de la CB */
#frame_chatbox {
  width: 858px !important;
  border: solid 3px #3d3a24 !important;
}

/* Pour masquer le fond blanc quand on est déconnecté */
body.chatbox {
  background: #767352 !important;
}

/* Code liant plusieurs blocs de la CB */
#chatbox_header, #chatbox_footer {
  background: #767352;
}

/* Titre de la CB */
#chatbox_header {
  height: 71px !important;
}
#chatbox_header .cattitle {
  text-align: center;
  font-size: 50px;
  font-family: "Six Caps", sans-serif !important;
  text-shadow:  1px 1px 2px #554c32;
  color: #000;
  text-decoration: none !important;
}

#chatbox_header .cattitle:hover {
  text-decoration: none !important;
}
#chatbox_header .catBottom {
  border: none !important;
}
#chatbox_header .catBottom table {
  border-bottom: 1px solid #3d3a24;
}

#chatbox_header .catBottom table tbody tr td:first-child {
  height: 50px;
  width: 100%;
  text-align: center;
  padding-left: 160px;
}

/* Lien Connexion/Déconnexion */
#chatbox_main_options a, #chatbox_main_options a:visited {
  color: black !important;
  text-decoration: none;
}

/* Contenu de la chatbox */
#chatbox_members, #chatbox {
  top: 71px !important;
  bottom: 55px;
  background: #a8a287;
  border-top: solid 15px #767352;
}

/* Liste des membres */
#chatbox_members {
  border-left: solid 15px #767352;
  border-right: solid 1px #3d3a24;
}

/* Zone des messages postés */
#chatbox {
  border-right: solid 15px #767352;
  margin-left: 15px;
}

/* Bas de la chatbox */
#chatbox_footer {
  height: 40px !important;
  border: none;
  background: #a8a287;
  border-left: solid 15px #767352;
  border-right: solid 15px #767352;
  border-bottom: solid 15px #767352;
}

#chatbox_messenger {
  margin-top: 10px;
}
#chatbox_footer .catBottom {
  border: none !important;
}

/* Champ texte */
#message {
  border-radius 3px;
  border: none;
  background: #767352;
}

/* Boutons */
#help-button, #divcolor, #divsmilies, #submit_button, .format-message + label {
  background: #767352 !important;
  border: 1px solid #3d3a24 !important;
}

#submit_button {
  padding: 0;
}

/* Forcer la couleur du texte de la CB */
div#chatbox, div#chatbox p span.user-msg span.msg span {
    color: black !important;
}


Validez le CSS et vous avez une nouvelle CB !

Merci pour avoir lu ce LS, j'espère qu'il vous servira ♥

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.

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

Message spécial au dessus du formulaire MP en fonction du destinataire - Mer 8 Fév 2017 - 23:31


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


Hello <3

Parfois un (ou plusieurs) membres de votre staff sont absents, mais les membres leur envoient quand même des MP plein de détresse.
Les mises en garde en gras et rouge "Je suis absente, je vous conseille de vous adresser à un autre membre du staff" dans la signature ne suffisent pas toujours pour stopper les membres. (:face:)

Pour rajouter encore une petite couche, voici un système ajoutant un petit message au-dessus du formulaire, si l'un des destinataire est dans une liste d'absents que vous avez défini.

Exemple avec un petit message en bleu en haut

(on notera le message d'avertissement bien pourri. S'il vous plait, écrivez un joli message pour vos membres)

Le code est fait pour fonctionner quand le pseudo du destinataire est déjà écrit, pas quand le membre l'écrit lui-même. Cela peut se modifier, mais il s'agit là d'une version plus légère.


Vous pouvez bien entendu adapter ce code pour écrire un autre message que pour les absents, à vous de voir :)
De même, le code n'est pas figé. Il pourrait être personnalisé et aller chercher la liste des absents dans un sujet par exemple (ainsi plus de gens pourraient éditer la liste des absents)


Le code à rajouter



Pour apprendre comment gérer les codes Javascript sur forumactif : Gestion des codes Javascript

Panneau d'administration > Modules > HTML & Javascript > Gestion des codes javascript
Ajoutez un nouveau JS en cochant "Sur toutes les pages"
Code:
/*
 * Message prévenant de l'absence d'un membre lors de l'envoie d'un MP
 * version 1 (fevrier 2017)
 * Never Utopia
 */
$(function(){
    if (document.location.pathname !== "/privmsg") return;

    // phrase à modifier
    var message = "Membre du staff absent, n'hésitez pas à contacter un autre membre du staff";

    // Pseudos des absents, séparés par un point virgule, exemple "Pseudo;Pseuuudo"
    var pseudos = "Pseudo";

    /* NE PAS MODIFIER EN DESSOUS */
    var arrPseudo = pseudos.toLowerCase().split(";");
    // On regarde s'il y a l'un des pseudos des absents dans les destinaires
    if ($('input[name="username[]"]').filter(function() { return arrPseudo.indexOf(this.value.toLowerCase()) > -1 }).length) {
        /* On ajoute le message*/
        $('form[action="/privmsg"]').before('<div class="avertissement-mp">' + message +'</div>');
    }
});


Pour styliser le bloc, il faudra rajouter du CSS.
Voici celui que j'utilise pour ma boite bleue :

Panneau d'administration > Affichage > Couleurs > Onglet "Feuille de Style CSS"
Code:
/* Message prévenant absence si MP */
.avertissement-mp {
  padding: 10px 15px;
  font-size: 14px;
  margin-bottom: 10px;
  background-color: #1b7cad;
  color: white;
  border-radius: 3px;
}


Personnaliser



Pour changer la phrase, il vous faudra modifier cette ligne là :
Code:
var message = "Membre du staff absent, n'hésitez pas à contacter un autre membre du staff";


Et le plus important, la liste des membres absents, se modifie ici :
Code:
var pseudos = "Pseudo";


S'il y a plusieurs pseudos, il faut les séparer avec un point virgule, exemple :
Code:
var pseudos = "Pseudo 1;Pseudo 2";

Note : attention à ne pas mettre des espaces en trop :)

Probablement personne ne va utiliser ça, mais j'avais envie de le sortir :siffle:

Vous pouvez demandez de l'aide dans "Personnalisation" pour faire une adaptation de ce code ou bien mettre un message dans "Problème avec mon code" pour recevoir de l'aide

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

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>

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

Fiche règlement avec transition (CSS + HTML) - Ven 7 Oct 2016 - 22:05



Bonjour à tous mes amis ! Voici ma première fiche, en espérant que cela vous plaise !



Tout d'abord, vous devez savoir que cette fiche se décompose en deux parties. Une partie CSS qui sera à ajouter dans la feuille de style CSS de votre forum et une seconde partie HTML qui devra être mise dans votre sujet à poster.

CSS


Le code CSS est à ajouter dans le Panneau d'Administration > Affichage > Couleurs > Feuille de style CSS

Code:
/* FICHE DE REGLEMENT
  par Yukimura Esuki sur Never Utopia
*/
.fond_premier {
    margin: auto;
    width: 600px; /* largeur image */
    height: 300px; /* hauteur image */
    overflow: hidden;
    background-color: #ffffff;
    box-sizing: border-box;
}

.image_fond {
    width: 600px; /* largeur image */
    height: 300px; /* hauteur image */
    position: relative;
    z-index: 2;
    transition: 1s;
}

.sous_image {
    width: 600px; /* largeur image */
    height: 300px; /* hauteur image */
    margin-top: -300px; /* hauteur image */
    position: relative;
    z-index: 1;
}

.fond_premier:hover .image_fond {
    transform: translateX(100%);
    transition: 1s;
}


.fond_secondaire {
    margin: auto;
    width: 600px;
    border: solid 1px black;
    box-sizing: border-box;
    background-color: #545454;
}

.sous_titre {
    margin: auto;
    padding-top: 5px;
    padding-bottom: 15px;
    border-top: dotted 1px black;
    border-bottom: dotted 1px black;
    background-color: #A5A5A5;
    font-size: 20px;
    text-align: center;
    box-shadow: 0px 3px 3px black;
}

.texte_cadre_reglement {
    padding: 5px;
    margin: auto;
    width: 75%;
    height: 110px;
    border: dotted 1px black;
    background-color: #A5A5A5;
    box-shadow: 3px 3px 3px black;
    text-align: justify;
    font-size: 13px;
    color: white;
    overflow: auto;
}

/* FIN fiche de reglement */



HTML


Code:
<div class="fond_premier"><div class="image_fond"><img src="http://img4.hostingpics.net/pics/928018imagedessus.png" /></div><div class="sous_image"><img src="http://img4.hostingpics.net/pics/961039Imagedesousrglement.png" /></div></div><div class="fond_secondaire">

<div class="sous_titre">1° / Premier sous-titre</div>

<div class="texte_cadre_reglement">Fuerit toto in consulatu sine provincia, cui fuerit, antequam designatus est, decreta provincia. Sortietur an non? Nam et non sortiri absurdum est, et, quod sortitus sis, non habere. Proficiscetur paludatus? Quo? Quo pervenire ante certam diem non licebit. ianuario, Februario, provinciam non habebit; Kalendis ei denique Martiis nascetur repente provincia.

Fuerit toto in consulatu sine provincia, cui fuerit, antequam designatus est, decreta provincia. Sortietur an non? Nam et non sortiri absurdum est, et, quod sortitus sis, non habere. Proficiscetur paludatus? Quo? Quo pervenire ante certam diem non licebit. ianuario, Februario, provinciam non habebit; Kalendis ei denique Martiis nascetur repente provincia.
</div>


<div class="sous_titre">2° / Second sous-titre</div>

<div class="texte_cadre_reglement">Fuerit toto in consulatu sine provincia, cui fuerit, antequam designatus est, decreta provincia. Sortietur an non? Nam et non sortiri absurdum est, et, quod sortitus sis, non habere. Proficiscetur paludatus? Quo? Quo pervenire ante certam diem non licebit. ianuario, Februario, provinciam non habebit; Kalendis ei denique Martiis nascetur repente provincia.

Fuerit toto in consulatu sine provincia, cui fuerit, antequam designatus est, decreta provincia. Sortietur an non? Nam et non sortiri absurdum est, et, quod sortitus sis, non habere. Proficiscetur paludatus? Quo? Quo pervenire ante certam diem non licebit. ianuario, Februario, provinciam non habebit; Kalendis ei denique Martiis nascetur repente provincia.
</div>

</div>


Vous devez savoir que l'image mesure 600 pixels * 300 pixels

Onyx

Qeel Carrousel (4 blocs) - css & html - Ven 30 Sep 2016 - 1:16




Qeel Carrousel


Salut !

Voici un petit LS de Qeel que j'ai fait pour la demande de P'tit loup. Le code vient de cette cette PA (page d'accueil) de Okhmhaka qui a été adaptée pour un qeel.

Pour voir l'aperçu du bloc de devant (bloc 1): cliquez ici.
Pour voir l'aperçu du bloc de droite (bloc 2) : cliquez ici.
Pour voir l'aperçu du bloc de droite (bloc 2) au survol d'une image de groupe : cliquez ici.
Pour voir l'aperçu du bloc de gauche (bloc 3) : cliquez ici.
Pour voir l'aperçu du bloc de gauche (3) au survol de l'image : cliquez ici.
Pour voir l'aperçu du bloc de derrière (4) : cliquez ici.

Ce LS est en deux parties.
  • Tout d'abord, nous allons installer le qeel dans le template et regarder comment ajouter/supprimer/modifier des groupes.
  • Puis, nous allons le mettre en forme à l'aide du CSS.


La largeur du Qeel est de 850 pixels et la hauteur 450px.
- 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. Corps du qeel (Template Index_Body)


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

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

Puis, il va nous falloir trouver le "BEGIN disable_viewonline" et le "END disable_viewonline". Normalement, ils sont respectivement aux lignes 173 et 220 du template.

Nous allons remplacer tout ce qu'il y a entre ces deux lignes par :
Code:
<script type="text/javascript">
        //<!--
                function change_qeelonglet(name)
                {
                        document.getElementById('qeelonglet_'+anc_qeelonglet).className = 'qeelonglet_0 qeelonglet';
                        document.getElementById('qeelonglet_'+name).className = 'qeelonglet_1 qeelonglet';
                        document.getElementById('contenu_qeelonglet_'+anc_qeelonglet).style.display = 'none';
                        document.getElementById('contenu_qeelonglet_'+name).style.display = 'block';
                        anc_qeelonglet = name;
                }
        //-->
</script>
<link href="https://fonts.googleapis.com/css?family=Covered+By+Your+Grace" rel="stylesheet" />
<div id="qeeltarget1">
  <div id="qeeltarget2">
    <div id="qeeltarget3">
      <div id="qeeltarget4">
        <div id="qeelespace_top">
          <a href="{U_VIEWONLINE}" rel="nofollow">Qui se cache dans l'ombre ?</a>
        </div>
        <div id="qeelespace_carousel">
         
          <!-- ZONE 1 - DEFAUT -->
          <div id="qeelcarousel_1">
            <a href="#qeeltarget1" class="qeellien1"></a>
            <div class="qeelcarousel_1_content">
              <div class="qeel_subtitle">Statistiques</div>
              <div class="qeel_bloc">
                Bienvenue à<span id="newuser">{NEWEST_USER}</span> !
                <div id="loggedlist">{LOGGED_IN_USER_LIST}</div>
                <table id="connlist" cellspacing="0">{L_CONNECTED_MEMBERS}</table>
              </div>
            </div>
          </div>
         
          <!-- ZONE 2 -->
          <div id="qeelcarousel_2">
            <a href="#qeeltarget2" class="qeellien2"></a>
            <div class="qeelcarousel_2_content">
              <div class="qeel_subtitle">Groupes</div>
              <div class="qeel_bloc">
                <span class="qeelonglet_1 qeelonglet" id="qeelonglet_Groupe1" onmouseover="javascript:change_qeelonglet('Groupe1');">
                  <a href="#">NOM DU GROUPE 1</a>
                </span>
                <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe2" onmouseover="javascript:change_qeelonglet('Groupe2');">
                  <a href="#">NOM DU GROUPE 2</a>
                </span>
                <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe3" onmouseover="javascript:change_qeelonglet('Groupe3');">
                  <a href="#">NOM DU GROUPE 3</a>
                </span>
                <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe4" onmouseover="javascript:change_qeelonglet('Groupe4');">
                  <a href="#">NOM DU GROUPE 4</a>
                </span>
                <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe5" onmouseover="javascript:change_qeelonglet('Groupe5');">
                  <a href="#">NOM DU GROUPE 5</a>
                </span>
              </div>
              <div class="qeel_bloc">
                <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe1">
                  <img class="qeel_img_group" src="URL IMAGE GROUPE 1" alt="Image du groupe 1" />
                  <div class="qeel_desc">
                    DESCRIPTION DU GROUPE 1
                  </div>
                </div>
                <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe2">
                  <img class="qeel_img_group" src="URL IMAGE GROUPE 2" alt="Image du groupe 2" />
                  <div class="qeel_desc">
                    DESCRIPTION DU GROUPE 2
                  </div>
                </div>
                <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe3">
                  <img class="qeel_img_group" src="URL IMAGE GROUPE 3" alt="Image du groupe 3" />
                  <div class="qeel_desc">
                    DESCRIPTION DU GROUPE 3
                  </div>
                </div>
                <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe4">
                  <img class="qeel_img_group" src="URL IMAGE GROUPE 4" alt="Image du groupe 4" />
                  <div class="qeel_desc">
                    DESCRIPTION DU GROUPE 4
                  </div>
                </div>
                <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe5">
                  <img class="qeel_img_group" src="URL IMAGE GROUPE 5" alt="Image du groupe 5" />
                  <div class="qeel_desc">
                    DESCRIPTION DU GROUPE 5
                  </div>
                </div>
              </div>
              <div class="clear"></div>
            </div>
          </div>
         
          <!-- ZONE 3 -->
          <div id="qeelcarousel_3">
            <a href="#qeeltarget3" class="qeellien3"></a>
            <div class="qeelcarousel_3_content">
              <div class="qeel_subtitle">Anniversaires</div>
              <div class="qeel_bloc">
                <table id="qeelbirthday" cellspacing="0">
                  {L_WHOSBIRTHDAY_TODAY}
                  {L_WHOSBIRTHDAY_WEEK}
                </table>
              </div>
              <div class="qeel_anniv_bas">
                <img class="qeel_img_anniv" src="URL IMAGE SOUS LES ANNIVERSAIRES" alt="machin" />
                <div class="qeel_anniv_texte">
                  Codage du Qeel par Okhmhaka et Onyx de <a href="http://www.never-utopia.com/" target="_blank">Never-Utopia</a>.
                </div>
              </div>
            </div>
          </div>
         
          <!-- ZONE 4 -->
          <div id="qeelcarousel_4">
            <a href="#qeeltarget4" class="qeellien4"></a>
            <div class="qeelcarousel_4_content">
              <div class="qeel_subtitle">Partenaires</div>
              <div class="qeel_bloc">
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 1" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 2" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 3" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 4" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 5" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 6" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 7" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 8" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 9" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 10" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 11" /></a>
                <a href="#" target="_blank"><img src="URL IMAGE PARTENAIRE" alt="Partenaire 12" /></a>
              </div>
            </div>
          </div>
         
        </div>
      </div>
    </div>
  </div>
</div>
<script type="text/javascript">
  document.getElementById('newuser').innerHTML=document.getElementById('newuser').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"");
</script>
    <script type="text/javascript">
        //<!--
                var anc_qeelonglet = 'Groupe1';
                change_qeelonglet(anc_qeelonglet);
        //-->
    </script>


Pour ce qui est rajouter, d'enlever ou de modifier un groupe, cela se fait par trois manipulations. Premièrement, on ajoute/enlève/modifie le nom du groupe. Puis, on enlève/ajoute/modifie la description du groupe. Enfin, on modifie la hauteur des groupes.

Les noms des groupes ressemblent à ceci :
Code:
                <span class="qeelonglet_0 qeelonglet" id="qeelonglet_Groupe5" onmouseover="javascript:change_qeelonglet('Groupe5');">
                  <a href="#">NOM DU GROUPE 5</a>
                </span>


Quant aux descriptions des groupes, elles correspondent à ceci :
Code:
                <div class="contenu_qeelonglet" id="contenu_qeelonglet_Groupe5">
                  <img class="qeel_img_group" src="URL IMAGE GROUPE 5" alt="Image du groupe 5" />
                  <div class="qeel_desc">
                    DESCRIPTION DU GROUPE 5
                  </div>
                </div>


Il suffit de changer le 5 à tous les endroits où il y en a un par un nouveau chiffre.

Pour la hauteur des groupes, il faut se rendre à cet endroit dans le CSS (que nous allons ajouter à la prochaine étape) :
Code:
/*Nom des groupes*/
.qeelonglet {
  display: block;
  font-size: 18px;
  height: 38px;
  padding: 15px 3px 0px 3px;
  margin-bottom: 1px;
  text-align: center;
  background: #E9E8E8;
  font-weight: bold;
  text-transform: uppercase;
}


Et vous devez modifier le "height" et le "padding" pour arriver à une hauteur des onglets qui vous convient.



2. Mise en forme (CSS)


Si vous regardez votre qeel, vous voyez sans doute que ce n'est pas très esthétique pour le moment. Du coup, nous allons mettre en forme notre qeel à 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:
/************************************************************ DÉBUT QEEL ************************************************************/

/*Fond du qeel*/
#qeel {
  position: relative;
  width: 800px;
  height: 680px;
  margin: auto;
  margin-top: 50px;
  margin-bottom: 50px;
  background: #141313 url('http://img15.hostingpics.net/pics/570241qeel2.png') no-repeat top center;
  border-radius: 20px;
  box-shadow: 0px 0px 10px #000000;
}


/*Titre du qeel*/
#qeel_title {
  color: goldenrod;
  font-size: 44px;
  font-family: 'Great Vibes', cursive;
  text-shadow: 1px 1px 2px #000000;
  padding-left: 15px;
}


/*Carré des informations sur les membres*/
#qeel_info_members {
  position: absolute;
  top: 25px;
  left: 25px;
  width: 320px;
  height: 290px;
  background-color: rgba(20, 19, 19, 0.6);
  border-radius: 10px;
  box-shadow: 0px 0px 3px #141313;
  padding: 10px;
  color: #c9c7be;
  font-size: 13px;
  font-family: arial;
  letter-spacing: 1px;
  text-align: left;
}


/*Mise en forme des listes des membres connectés*/
#userlists {
  margin-top: 5px;
  height: 205px;
  overflow: auto;
}
#totalconn {
  margin-top: 5px;
}
#totalconn .row1{
  background: transparent;
  vertical-align: top;
}
#totalconn .gensmall {
  color: #c9c7be;
  font-size: 13px;
  font-family: arial;
  letter-spacing: 1px;
  text-align: left;
}


/*Section des groupes*/
#qeel_bottom {
  position: absolute;
  top: 418px;
  left: 0px;
  width: 800px;
  text-align: center; 
}


/*Nom des groupes*/
.qeelonglet {
  display: inline-block;
  margin-left: 20px;
  margin-right: 20px;
  margin-top: 2px;
  height: 40px;
  font-size: 38px;
  font-family: 'Great Vibes', cursive;
  letter-spacing: 1px;
  text-shadow: 0px 0px 3px #000000;
  opacity: 0.6;
}
/*Groupe au survol*/
.qeelonglet_0:hover {
  cursor: pointer;
  opacity: 0.8;
}
/*Groupe actif*/
.qeelonglet_1 {
  opacity: 1;
}


/*Description des groupes*/
.contenu_qeelonglet {
  position: relative;
  width: 800px;
  height: 200px;
  margin-top: 20px;
  display: none;
}
/*Images des groupes*/
.contenu_qeelonglet img {
  width: 800px;
  height: 200px;
  border-radius: 0px 0px 20px 20px;
}
/*Descriptions des groupes*/
.qeel_desc {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 780px;
  height: 180px;
  background-color: rgba(20, 19, 19, 0.6);
  border-radius: 0px 0px 20px 20px;
  padding: 10px;
  color: #c9c7be;
  font-size: 13px;
  font-family: arial;
  letter-spacing: 1px;
  text-align: justify;
  overflow: auto;
  transition: 0.5s;
  opacity: 0;
}
/*Descriptions des groupes au survol*/
.contenu_qeelonglet:hover .qeel_desc {
  opacity: 1;
}

/************************************************************ FIN QEEL ************************************************************/





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 !


Revenir en haut

La date/heure actuelle est Dim 19 Nov 2017 - 7:53