AccueilDernières imagesRechercherS'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.


55 résultats trouvés pour effet_hover

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

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



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


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

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


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

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

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

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


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

Littleelda

LS Fondu avatar avec infos derrière - Dim 18 Mar 2018 - 11:36

Fondu Avatar dans la Liste de Membres




Ce LS est pour forum en PHPBB2.


Bonjour,

Alors je propose un LS pour l'affichage de la liste des membres. Il s'agit d'une refonte du LS déposée par Marie(Allhyka) juste , qui m'a servi de base pour faire cette LS. J'ai changé pas mal d'éléments afin de l'adapter au codage dans ma section "affichage d'un sujet" donc je me suis ajoutée sur le copyright. A vous de voir si c'est mérité ou non.


Alors voici une mise en page pour l'affichage de la liste des membres. On y affiche les avatars qui, au passage de la souris font un fondu pour afficher les éléments du profil.

Aperçus : Normal et Ouvert

Alors tout d'abord, rendez vous sur le panneau d'administration -> Affichage ->Templates (section Général) -> memberlist_body (liste des membres)

et changer le tout pour celui-ci :

Code:
<!-- BEGIN switch_user_logged_in -->
<p class="right rightside">{LAST_VISIT_DATE}</p>
<!-- END switch_user_logged_in -->

<p>{CURRENT_TIME}</p>
<div class="titrePA row2">{PAGE_TITLE}

    <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 row2" 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="facebase">
               <div class="flip">
                  <div class="face1"><div class="avatar_member_list"><a href="{memberrow.U_VIEWPROFILE}">{memberrow.AVATAR_IMG}</a></div></div>
               </div>
               <div class="face2">
                            <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"> Arrivé(e) le : {memberrow.JOINED}. <br/><br/>Dernière errance : {memberrow.LASTVISIT}{memberrow.POSTS}. <br/><br/>Le joindre : {memberrow.PM_IMG}</div></div></div></div>
                    </div>
          <!-- END memberrow -->
          <!-- BEGIN switch_no_user -->
       
          <!-- END switch_no_user -->
     
            <br/><div class="copyright_memberlist">Codé par Allhyka et modifié par Littleelda 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 -->
</div>





Enregistrez puis allez dans le CSS (Affichage ->Images et Couleurs (Couleur) -> Feuilles de style CSS) et ajoutez ce code-ci

Code:
 
    /**** CODE PAR MARIE, MODIFIE PAR LITTLEELDA POUR NEVER-UTOPIA. MERCI DE LAISSER LE COPYRIGHT***/

    /**** AFFICHAGE MEMBRER LISTE****/

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

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


    /*** L'ANIMATION FLIP CARD ***/
   
   .facebase, .face1, .face2 {
        width: 150px;/*largeur de l'avatar*/
          height: 300px;/*hauteur de l'avatar*/

        }

   .facebase{
      margin: 0;
      position: relative;
      box-shadow : 1px 2px 9px 5px rgba(66,101,90,0.8);
      background-color: #9AB8AF;
}
      
    .flip {
      -moz-transition: all 1.5s ease-in-out;
      -ms-transition: all 1.5s ease-in-out;
      -o-transition: all 1.5s ease-in-out;
      -webkit-transition: all 1.5s ease-in-out;
      height: 100%;
      left: 0;
      position: absolute;
      top: 0;
      transition: all 1.5s ease-in-out;
      width: 100%;
      z-index: 2;
    }

    .face1 {
      background-color: #9AB8AF;
      left: 0;
      position: absolute;
      top: 0;
      z-index: 3;
      transition: all 1.5s ease-in-out;
    }

    .face2 {
      border-bottom: 2px solid #39210c;
      border-top: 2px solid #39210c;
      box-sizing: border-box;
      font-size: 13px;
      left: 0;
      overflow: auto;
      padding: 15px;
      position: absolute;
      top: 0;
      z-index: 0;
}

      .facebase:hover > .face2 {
         display: block;
         z-index:5;
      }

    .facebase:hover .face1 {
          opacity: 0.2;
          filter: alpha(opacity=20);
        -moz-opacity:0.5;
          z-index:1;
    }

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

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

    .stat_member {
      font-size: 10px;
      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;
    }


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


Et enfin enregistrez et normalement tout est bon. Si vous avez des questions, n'hésitez pas à les poser. =)

Onyx

Boîte de messagerie originale - Mar 17 Oct 2017 - 17:24




Boîte de réception originale



Salut !

Voici un LS de boîte de réception qui a été fait pour la demande de R.Falsworth.

Voilà l'aperçu de la boîte de réception : cliquez ici pour voir.
Voilà l'aperçu des MPs : cliquez ici pour voir.


Ce LS est en quatre parties.
  • Tout d'abord, nous allons installer la boîte de réception dans le template.
  • Ensuite, nous allons installer la revue de MPs dans le template.
  • Puis, nous allons installer l'affichage des MPS dans le template.
  • Enfin, nous allons mettre en forme les catégories à l'aide du CSS.


Mettre un crédit vers Never-Utopia est obligatoire si vous utilisez ce LS.





1. La boîte de réception (Template Privmsgs_Body)



Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > TEMPLATES
> > > > POSTER & MESSAGES PRIVÉS
> > > > > PRIVMSGS_BODY

On met le code suivant et on enregistre :
Code:
<link href="https://fonts.googleapis.com/css?family=Bangers" rel="stylesheet" />
<div class="main_mp">
  <div class="mp_new_post">{POST_PM_IMG}</div>
  <div class="mp_types">
    <div class="mp_type">{INBOX}</div>
    <div class="mp_type">{SENTBOX}</div>
    <div class="mp_type">{OUTBOX}</div>
    <div class="mp_type">{SAVEBOX}</div>
  </div>
  <form action="{S_PRIVMSGS_ACTION}" method="post" name="privmsg_list" class="mp_list_form">
    <div class="mp_list">
      <div class="mp_list_top">
        <!-- BEGIN switch_box_size_notice -->
        <div class="mp_list_100">{BOX_SIZE_STATUS}</div>
        <!-- END switch_box_size_notice -->
        <div class="mp_list_select">
          {L_DISPLAY_MESSAGES}: 
          <select name="msgdays">
            {S_SELECT_MSG_DAYS}
          </select> 
          <input class="liteoption" type="submit" name="submit_msgdays" value="{L_GO}" />
        </div>
        <div style="clear: both;"></div>
      </div>
      <!-- BEGIN listrow -->
      <div class="mp_list_one">
        <span class="mp_list_img">
          <img title="{listrow.L_PRIVMSG_FOLDER_ALT}" src="{listrow.PRIVMSG_FOLDER_IMG}" alt="{listrow.L_PRIVMSG_FOLDER_ALT}" />
        </span>
        <span class="mp_list_title">
          <a class="topictitle" href="{listrow.U_READ}">{listrow.SUBJECT}</a> par {listrow.FROM} le {listrow.DATE}
        </span>
        <span class="mp_list_one_select">
          <input type="checkbox" name="mark[]2" value="{listrow.S_MARK_ID}" />
        </span>
        <div style="clear: both;"></div>
      </div>
      <!-- END listrow -->
      <!-- BEGIN switch_no_messages -->
      <div class="mp_nothing">{L_NO_MESSAGES}</div>
      <!-- END switch_no_messages -->
      <div class="mp_pagination">
        <span class="nav">{PAGE_NUMBER} {PAGINATION}</span>
      </div>
    </div>
    <div class="mp_list_bottom">
      {S_HIDDEN_FIELDS}
      <!-- BEGIN switch_save -->
      <input class="mainoption" type="submit" name="save" value="{L_SAVE_MARKED}" />  
      <!-- END switch_save -->
      <!-- BEGIN switch_move_profile -->
      <input class="mainoption" type="submit" name="moveprofile" value="{L_MOVE_PROFILE_MARKED}" />  
      <!-- END switch_move_profile -->
      <input class="liteoption" type="submit" name="delete" value="{L_DELETE_MARKED}" />  
      <input class="liteoption" type="submit" name="deleteall" value="{L_DELETE_ALL}" />  
      <div class="mp_bottom_right">
        <a class="gensmall" href="javascript:select_switch_privmsg(true);">{L_MARK_ALL}</a> :: 
        <a class="gensmall" href="javascript:select_switch_privmsg(false);">{L_UNMARK_ALL}</a>
      </div>
      <div style="clear: both;"></div>
    </div>
  </form>
  <div style="clear: both;"></div>
</div>

<table width="100%" border="0">
    <tr>
        <td align="right" valign="top">{JUMPBOX}</td>
    </tr>
</table>





2. Revue des messages privés (Template Privmsg_Topic_Review)



Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > TEMPLATES
> > > > POSTER & MESSAGES PRIVÉS
> > > > > PRIVMSGS_TOPIC_REVIEW

On met le code suivant et on enregistre :
Code:
<div class="me_review_bloc">
  <div class="mp_sent_boite">Revue des messages</div>
  <!-- BEGIN postrow -->
  <div class="mp_revue_space"></div>
  <div class="mp_sent_pseudo_title">
    <div class="mp_sent_pseudo">{postrow.POSTER_NAME}</div>
    <div class="mp_sent_title">{postrow.POST_SUBJECT} / {postrow.POST_DATE}</div>
    <div style="clear: both;"></div>
  </div>
  <div class="mp_sent_ava_mess">
    <div class="mp_sent_ava">
      {postrow.POSTER_AVATAR}
    </div>
    <div class="mp_sent_mess">
      {postrow.MESSAGE}
    </div>
    <div style="clear: both;"></div>
  </div>
  <!-- END postrow -->
</div>





3. Affichage du message privé (Template Privmsgs_Read_Body)



Pour cela, nous allons aller dans :
> PANNEAU D'ADMINISTRATION
> > AFFICHAGE
> > > TEMPLATES
> > > > POSTER & MESSAGES PRIVÉS
> > > > > PRIVMSGS_READ_BODY

On met le code suivant et on enregistre :
Code:
<link href="https://fonts.googleapis.com/css?family=Bangers" rel="stylesheet" />
<div class="mp_sent_topbloc">
  <div class="mp_sent_types">
    <div class="mp_sent_type">{INBOX}</div>
    <div class="mp_sent_type">{SENTBOX}</div>
    <div class="mp_sent_type">{OUTBOX}</div>
    <div class="mp_sent_type">{SAVEBOX}</div>
    <div class="clear: both;"></div>
  </div>
  <!-- BEGIN switch_post_reply -->
  <div class="mp_sent_reply">{REPLY_PM_IMG}</div>
  <!-- END switch_post_reply -->
  <div style="clear: both;"></div>
</div>

<form action="{S_PRIVMSGS_ACTION}" method="post" class="mp_sent_bloc">
  <div class="mp_sent_boite">{BOX_NAME}</div>
  <div class="mp_sent_pseudo_title">
    <div class="mp_sent_pseudo">{MESSAGE_FROM}</div>
    <div class="mp_sent_title">{POST_SUBJECT} / {POST_DATE}</div>
    <div class="mp_sent_quote_edit">
    <!-- BEGIN switch_quote -->{QUOTE_PM_IMG} <!-- END switch_quote -->{EDIT_PM_IMG}
    </div>
    <div style="clear: both;"></div>
  </div>
  <div class="mp_sent_ava_mess">
    <div class="mp_sent_ava">
      {AVATAR_FROM}
    </div>
    <div class="mp_sent_mess">
      <div class="mp__sent_message">
        {MESSAGE}
      </div>
      <!-- BEGIN switch_user_contact -->
      <div class="mp__sent_contact">
        {PROFILE_IMG} {PM_IMG} {EMAIL_IMG} {WWW_IMG} {AIM_IMG} {YIM_IMG} {MSN_IMG} {SKYPE_IMG}
      </div>
      <!-- END switch_user_contact -->
    </div>
    <div style="clear: both;"></div>
  </div>
  <div class="mp_sent_bottom">
    {S_HIDDEN_FIELDS}
    <!-- BEGIN switch_save -->
    <input class="liteoption" type="submit" name="save" value="{L_SAVE_MSG}" />  
    <!-- END switch_save -->
    <!-- BEGIN switch_move_profile -->
    <input class="liteoption" type="submit" name="moveprofile" value="{L_MOVE_PROFILE}" />  
    <!-- END switch_move_profile -->
    <input class="liteoption" type="submit" name="delete" value="{L_DELETE_MSG}" />
  </div>
  <br />
  <br />
  <!-- BEGIN switch_review_box -->
  <div class="mp_sent_review">
    {TOPIC_REVIEW_BOX}
  </div>
  <!-- END switch_review_box -->
</form>
<table width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
   <tr>
      <td align="right" valign="top"><span class="gensmall">{JUMPBOX}</span></td>
   </tr>
</table>

<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->





4. Mise en forme (CSS)



Si vous regardez votre boîte de messagerie, vous voyez sans doute que ce n'est pas très esthétique pour le moment. Du coup, nous allons mettre le totu 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 :
Pour cela, vous devez vous rendre là où vous voulez que le lecteur soit soit et y mettre le code suivant :
Code:
/*** Bloc de tous les mps ***/
.main_mp {
  width: 95%;
  margin: auto;
  margin-bottom: 10px;
  font-size: 12px;
  font-family: verdana;
  color: white;
}
.mp_new_post {
  text-align: right;
  padding-bottom: 5px;
}

/** Bloc des types de boite **/
.mp_types {
  background: #56739a;
  float: left;
  width: 20%;
  box-sizing: border-box;
  margin-right: 1%;
}
/*Type de boite*/
.mp_type {
  margin: 5px;
  display: block;
  background: #24445c;
  color: #e67e30;
  text-align: center;
  padding: 2px;
  font-family: 'Bangers', cursive;
  font-size: 16px;
  padding-top: 5px;
}
/*Type de boite pas choisi*/
.mp_type a {
  display: block;
  margin: -5px -2px -2px -2px;
  padding: 2px;
  color: white;
  text-align: center;
  text-decoration: none!important;
  font-family: 'Bangers', cursive;
  font-size: 16px;
  padding-top: 5px;
}
/*Type de boite pas choisi au survol*/
.mp_type a:hover {
  color: #e67e30;
  font-family: 'Bangers', cursive;
  font-size: 16px;
  padding-top: 5px;
}

/**Section de droite**/
.mp_list_form {
  float: left;
  width: 79%;
  box-sizing: border-box;
}

/*Bloc de droite avec la liste*/
.mp_list {
  background: #56739a;
}
/*Top de la liste*/
.mp_list_top {
  padding: 5px;
  text-align: left;
  font-size: 11px;
  margin-bottom: 5px;
}
/*Pourcentage de la boite*/
.mp_list_100 {
  float: left;
  padding-top: 2px;
  width: 235px;
}
/*Selectionner date message*/
.mp_list_select {
  float: right;
  text-align: right;
}

/** Un message prive **/
.mp_list_one {
  margin: 5px;
  background: #24445c;
  padding: 2px;
  text-align: left;
  height: 20px;
  line-height: 20px;
  vertical_align: middle;
  font-size: 12px;
  font-family: verdana;
}
/*Bloc image*/
.mp_list_img {
  display: inline-block;
  height: 20px;
  line-height: 20px;
  vertical_align: middle;
  float: left;
  padding-right: 5px;
  width: 20px;
}
/*Image*/
.mp_list_img img {
  width: 20px;
  height: 20px;
}
/*Bloc info*/
.mp_list_title {
  display: inline-block;
  height: 20px;
  line-height: 20px;
  vertical_align: middle;
  float: left;
  padding-right: 5px;
}
/*Titre à la bonne taille*/
.mp_list_title .topictitle {
  font-size: 12px;
}
/*Select droite*/
.mp_list_one_select {
  float: right;
}
/*Pagination*/
.mp_pagination {
  padding: 0px 2px 2px 2px;
  text-align: left;
}
.mp_pagination .nav {
  color: white;
}

/*En bas de la liste des mp*/
.mp_list_bottom {
  margin-top: 5px;
}
/*Mettre les selectionner a droite*/
.mp_bottom_right {
  float: right;
}



/*Top message envoye*/
.mp_sent_topbloc {
  width: 95%;
  margin: auto;
  margin-bottom: 10px;
  font-size: 12px;
  font-family: verdana;
}
/*Bloc type de boite*/
.mp_sent_types {
  float: left;
  text-align: left;
}
/*Type de boite*/
.mp_sent_type {
  float: left;
  margin-right: 5px;
  width: 150px;
  background: #56739a;
  color: #e67e30;
  font-family: 'Bangers', cursive;
  font-size: 16px;
  text-align: center;
}
/*Lien Type de boite*/
.mp_sent_type a {
  display: block;
  padding: 2px;
  padding-top: 5px;
  color: white;
  background: #56739a;
  text-align: center;
  text-decoration: none!important;
}
/*Lien Type de boite pas choisi au survol*/
.mp_sent_type a:hover {
  background: #24445c;
  color: #e67e30;
}
/*Bouton repondre*/
.mp_sent_reply {
  float: right;
}

/*Bloc message envoye*/
.mp_sent_bloc {
  width: 95%;
  margin: auto;
  margin-bottom: 10px;
  font-size: 12px;
  font-family: verdana;
  color: white;
}
/*Boite message envoye*/
.mp_sent_boite {
  box-sizing: border-box;
  background: #24445c;
  color: #e67e30;
  font-family: 'Bangers', cursive;
  font-size: 22px;
  width: 100%;
  margin: 5px 0px;
  padding: 5px;
  padding-top: 10px;
  text-align: center;
}
/*Bloc pseudo et titre*/
.mp_sent_pseudo_title {
  box-sizing: border-box;
  background: #56739a;
  width: 100%;
  margin: 5px 0px;
  color: #ffffff;
  padding: 5px;
  font-size: 13px;
  text-left: center;
}
/*Bloc pseudo*/
.mp_sent_pseudo {
  float: left;
  width: 200px;
  padding: 0px 5px;
  text-align: center;
}
/*Bloc titre*/
.mp_sent_title {
  float: left;
  padding-left: 5px;
  text-align: left;
}
/*Bloc citer et éditer*/
.mp_sent_quote_edit {
  width: 150px;
  float: right;
  padding-right: 5px;
  text-align: right;
}

/*Bloc avatar et message*/
.mp_sent_ava_mess {
  width: 100%;
  margin: 5px 0px;
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
}
/*Avatar message envoye*/
.mp_sent_ava {
  order: 1;
  flex-grow: 1;
  flex-shrink: 1;
  background: #56739a;
  width: 200px;
  margin-right: 5px;
  color: #ffffff;
  padding: 5px;
  font-size: 12px;
  text-align: center;
}
/*Bloc message*/
.mp_sent_mess {
  order: 2;
  flex-grow: 10;
  flex-shrink: 10;
  flex-basis: 100%;
  box-sizing: border-box;
  background: #56739a;
  color: #ffffff;
  padding: 5px;
  font-size: 12px;
  text-align: left;
}
/*Bloc contacts*/
.mp__sent_contact {
  margin-top: 10px;
}
/*mp_sent_bottom*/
.mp_sent_bottom {
  box-sizing: border-box;
  background: #56739a;
  width: 100%;
  margin: 5px 0px;
  color: #ffffff;
  padding: 5px;
  font-size: 11px;
  text-align: center;
}

/*Bloc espace entre posts*/
.mp_revue_space {
  box-sizing: border-box;
  background: #56739a;
  width: 100%;
  margin: 5px 0px;
  color: #ffffff;
  padding: 5px;
  font-size: 11px;
  text-align: center;
}




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 avez besoin d'aide pour personnaliser le code.

À plus !


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

Faire apparaître un texte au survol d'une image. - Mer 3 Mai 2017 - 14:59

Faire apparaître un texte au survol d'une image




Bonjour à tous !

Alors je vous propose aujourd’hui un code personnalisable qui vous permet de faire apparaître un texte sur une image au survol de la souris. Vous allez voir, ce n’est pas très difficile, mais soyez quand même attentif et lisez bien tout pour ne pas louper une étape. A noter que je ne vous donne pas le code tout prêt. Ce sera à vous de le constituer !
Si vous avez des problèmes, n’hésitez à la poser dans le forum Problème avec mon code ou des questions par mp, comme ça je pourrais les ajouter à ce post et ça pourra surement aider d’autres personnes. N’oubliez pas, aucune question n’est stupide !

Alors en premier lieu, il vous faut une image. Pour mon cas, je vais utiliser celle-ci
Spoiler:

Peu importe la taille, nous la définirons dans le code ! Elle peut être plus grande ou plus petite. La première chose que nous allons faire, c’est noter dans un coin sa taille justement. Pour mon image ce sera donc : 500px de largeur et 500px de hauteur.

Nous allons donc créer une div, qui va nous permette de faire l’effet que nous recherchons. A noter que c’est dans cette div que vous mettrez tous les codes. Il vous faut lui donner un nom. Moi je vais l’appeler Cache_Texte. Donc dans mon css je vais avoir

Code:
.Cache_Texte{

}


On oublie pas le point du début ! Et c’est entre les accolades que nous allons mettre le contenu de notre code.

Nous allons commencer par mettre la taille de notre division, cette division qui contiendra notre texte. Pour ça on utilise le code de la larguer et de la hauteur (dans cet ordre là !)
Code:
.Cache_Texte{
width : LARGEURpx;
height : HAUTEURpx;
}

On fait attention à garder les points virgules qui terminent la ligne de code !

Ensuite, je vais déterminer si mon texte sera plus haut ou moins haut que mon image, afin de savoir si je dois insérer un code pour faire apparaître une scrollbarr. Ce code sera le suivant, en langage css. Si vous n’êtes pas administrateur sur le forum, faites appel à du css via les balises appropriées (voir plus bas, je vous les donne Wink )
Code:
 overflow: auto;


Donc si je résume pour l’instant : mon texte sera dans une div faisant 500 de largeur et 500 de hauteur. Si mon texte est plus grand un scrollbarr apparaîtra de manière automatique.


Maintenant nous allons ajouter le code pour faire une transition, histoire que cela soit plus jolie. On va utiliser pour cela transition-duration. Pour ma part, je vais mettre 0.8 secondes. Si vous voulez que ce soit plus long, augmentez le timing. Si vous voulez que ce soit plus rapide, et bien, vous diminuez tout simplement. Le code est
Code:
 transition-duration:.Zs;

(remplacez Z par la valeur que vous désirez)
Ce code n'étant pas toujours pris en compte par les anciens navigateurs, on va rajouter un préfixe pour qu’il le soit. Je vous renvoie au tutoriel Savoir quand utiliser des préfixes CSS fait par Manumanu.

Enfin, et bien il nous reste qu’à rendre notre texte invisible au premier abord. Pour cela on va utiliser le code opacity.
Code:
 opacity : 0;


0, car on ne veut pas que le texte se voit au début. Et, comme précédemment, on rajoute des préfixes pour être sûr que tous les navigateurs le prennent en charge. Attention, pour internet explorer, il faut utiliser la propriété suivante
Code:
filter : alpha(opacity=0); 


Donc au final, si je résume : mon texte sera dans une div faisant 500 de largeur et 500 de hauteur. Si mon texte est plus grand un scrollbarr apparaîtra de manière automatique. J’ai mis une transition pour que cela soit plus jolie, et enfin j’ai caché mon texte comme ça, il ne se verra pas.


Ensuite, et bien, cela dépend de vous. Si vous voulez qu’il y ait un fond de couleur, vous ajoutez le code nécessaire. Si vous voulez une couleur de texte spécifique, c’est pareil. C’est un code css, il est donc personnalisable :)

Nous avons donc fini la première partie du code. Maintenant, on va coder notre div pour, qu’au passage de la souris, notre div (texte) apparaisse. Nous allons nous servir pour cela du « hover » ce qui signifie en code le survol. On reprend le nom de notre div et on rajoute un deux-points suivi de hover. Donc pour ma part :
Code:
.Cache_Texte :hover{

}


ATTENTION on garde le précédent code fait ! Celui-ci est un nouveau ! Donc nous avons


Code:
 .Cache_Texte{

}

.Cache_Texte :hover{

}


Le premier est rempli par les atrtibuts vu plus haut. Et le second, nous allons le remplir avec un seul attribut, donné ci-dessous.

Ce qu’on va ajouter au hover, c’est pour permettre de changer l’opacité. On reprend le code donné plus haut mais à la place de mettre 0, on mets un 1. Si vous voulez que l’image reste un peu en fond, vous pouvez, à la place de mettre 1, mettre 0.8 par exemple. Pour le filter, on est 100 pour 1 et 80 par exemple pour 0.8. Il est calculé en pourcentage.


Et voilà, la partie css est terminée. Maintenant nous allons voir le code html. C’est assez simple. On va d’abord mettre l’image en fond via le code background-image auquel on va attribuer la taille de l’image qu’on a noté plus haut.

Code:
 <div style="background-image:url(URL DE L IMAGE ICI);    width:LARGEURpx; height:HAUTEURpx;">

</div>

On prend l’habitude de fermer un code html dès qu’on l’a ouvert. J’ai ouvert la div, je la ferme dans mon code.

Pour ma part, avec mon image, cela donne du coup
Code:
 <div style="background-image:url(http://img15.hostingpics.net/pics/798434AlexPe.png);    width:500px; height:500px;">

</div>


Et maintenant on rajoute la div que nous avons créé en css, que l’on vient incorporer dans celle que nous venons de coder. Pour ma part, cela donne du coup
Code:
 <div style="background-image:url(URL DE L’IMAGE ICI);    width:LARGEURpx; height:HAUTEURpx;"> <div class="NOM DE LA DIV QUE VOUS AVEZ CREE">  texte ici blablabla
</div></div>


Et comme promis, le code pour exporter un css quand nous n’avons pas assez au panneau d’admin c’est
Code:
 <style>

</style>


A noter que les lignes de codes doivent être sur une même ligne. On enlève les sauts de lignes en gros.



Et voilà vous savez tout. Et pour ma part, en personnalisant les balises css, cela me donne :



Ezeÿel Sköell

Loup de la meute

Petit-fils de l’ancien ulfric

Autre texte ici blablabla



A noter que le background color ne fonctionne pas si on l'ajoute dans les balises < style >. Si vous voulez en ajouter un, il suffit de l'ajouter en style sur la div.


Par exemple, pour moi cela donne :
Code:
<div class="Cache_Texte" style="background-color:#000000;">  </div>



Et voilà, vous savez tout. A vous de tenter et d'essayer

PS : pensez à changer le nom de la div si vous voulez le faire à la suite, sinon cela court-circuitera mon propre code Wink

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

Capture d'écran / Capture au survol


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


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

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


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

}

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


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

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

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

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

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

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

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



Le html

Code:
<div class="proposition_avatar">   

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

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


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


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

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


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

}

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


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

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

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


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




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

Cheshire Cat

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



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

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

Aperçu en image:


Optimisé pour tous les navigateurs - Version PHPBB2

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

Installer votre nouveau profil:
Pour commencer l'installation de notre nouveau profil, nous allons devoir aller dans Panneau d'administration > Accueil > Affichage > Templates > Généralités > viewtopic_body et chercher cette partie, si votre template n'est pas encore modifiée
Code:
<!-- BEGIN displayed -->
   <tr class="post post--{postrow.displayed.U_POST_ID}" id="p{postrow.displayed.U_POST_ID}" style="{postrow.displayed.DISPLAYABLE_STATE}">
      <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
         <span class="name"><a name="{postrow.displayed.U_POST_ID}" style="position: relative; top: -30px; width: 1px;" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></span><br />
            <span class="postdetails poster-profile">
            {postrow.displayed.POSTER_RANK}<br />
            {postrow.displayed.RANK_IMAGE}{postrow.displayed.POSTER_AVATAR}<br /><br />
            <!-- BEGIN profile_field -->
            {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}
            <!-- END profile_field -->
            {postrow.displayed.POSTER_RPG}
         </span><br />
         <img src="http://2img.net/i/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
Tag effet_hover sur Never Utopia - graphisme, codage et game design Bac408486e

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 :hudada:

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://2img.net/i/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

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

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:

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:


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>

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 !

Nemalus

Catégories vertes - Dim 28 Aoû 2016 - 17:58




Catégories réalisées suite à la demande de Moro-PM.
Les couleurs sont modifiables, merci de me créditer si utilisation du code. Le code a été fait pour phpCC2

Voici un aperçu :

lien direct : www

Remplacer l'intégralité du template index-box par :
Code:
<link href='https://fonts.googleapis.com/css?family=Pacifico' rel='stylesheet' type='text/css' />
<table width="100%" 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 align="center"><div class="titreCAT">{catrow.tablehead.L_FORUM}</div></div>
    <br clear="all" /><!-- END tablehead -->

    <!-- BEGIN cathead -->
    <!-- END cathead -->
    
    <!-- BEGIN forumrow -->
    
<div class="glop"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a> {catrow.forumrow.TOPICS} Topics et {catrow.forumrow.POSTS} Messages<br/><br/>
  <img src="{catrow.forumrow.FORUM_FOLDER_IMG}" /><div class="sousforum"><div align="center">{catrow.forumrow.LAST_POST}<br/><br/><div class="lastpost-avatar"><!-- BEGIN avatar -->{catrow.forumrow.avatar.LAST_POST_AVATAR}<!-- END avatar --></div></div></div><div class="description">{catrow.forumrow.FORUM_DESC}<br/><br/><center>{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}♠ </center></div></div>
    
    
    <!-- END forumrow -->
    
    <!-- BEGIN catfoot -->
    <!-- END catfoot -->
    
    <!-- BEGIN tablefoot -->
    <br clear="all" />
    <!-- END tablefoot --><!-- END catrow -->


Dans la feuille de style (CSS) ajouter le code :
Code:
/* TITRES CATEGORIES */
.titreCAT{
width:450px; height:15px; text-align:center; margin:0 5px; display:inline-block;
background-image:url('http://25.media.tumblr.com/tumblr_m33qwzyv7F1r6uwfxo8_r1_250.png'); /* MODIFIABLE */
}
.titreCAT h2{
font-size:30px; text-transform:uppercase; letter-spacing:3px;margin-top: -20px;
font-family:Pacifico; color:#BF6161; text-shadow:1px 1px 0px black; /* MODIFIABLE */
}
/* BLOC DESCRIPTION + SOUS-FORUMS */
.glop{
width:600px; margin:10px auto; padding:10px;
background-image:url('http://25.media.tumblr.com/tumblr_m33qwzyv7F1r6uwfxo9_r3_250.png'); box-shadow:0 0 3px rgba(0,0,0,0.2); /* MODIFIABLE */
}
/* DESCRIPTIONS BLOC FORUMS */
.description {
margin-left: 5px;
width:350px; height:159px; padding:0px 5px; overflow:auto;
display:inline-block;
background-image:url('http://25.media.tumblr.com/tumblr_m33qwzyv7F1r6uwfxo8_r1_250.png'); 
font-size:11px; text-align:justify;
color:black; /* MODIFIABLE */
}
/* IMAGES DESCRIPTIVES BLOC FORUMS */
.description img {
position:absolute; z-index:3; margin-left:-169px;
width:159px; height:159px;
transition:all 0.45s ease; -webkit-transition:all 0.45s ease;
}
/* SOUS-FORUMS */
.sousforum{
position:relative; z-index:5; display:inline-block;
padding:5px; width:149px; height:149px; overflow:auto; text-align:left;
background:#dfdfdf; /* MODIFIABLE */
opacity:0;
transition:all .65s linear; -webkit-transition:all .65s linear;
}
.sousforum a{
color:white !important; /* MODIFIABLE */
}
.sousforum:hover {
opacity:1;
}




Un petit merci ou commentaire est toujours le bienvenu ^^
- Mettre/laisser un crédit vers Never-Utopia est obligatoire.
- Si vous avez des problèmes avec ce LS ou des questions, venez poster ici.

Nemalus

Qui est en ligne | Noir et blanc - Dim 28 Aoû 2016 - 0:53




Qui est en ligne réalisé suite à la demande de Cecile362.
Les couleurs sont modifiables, merci de ne pas retirer le crédit. Le code a été fait avec la version de forum phpBB2

Voici un aperçu :

lien direct : www

Dans le template index-body, remplacer les lignes 173 à 221 par :
Code:
<!-- BEGIN disable_viewonline -->
<table width="100%" border="0" cellspacing="1" cellpadding="0">
  <tr>
    <td>
<!-- TITRE -->
      <div class="titreQEEL">
        <a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a>
      </div>
      <div class="QEEL">
<!-- 24H -->
        <div class="dernierQEEL"><table>{L_CONNECTED_MEMBERS}</table>
        </div>
        <div class="GroupeQEEL">
          <div id="groupe">
            <div class="h3">Les Groupes</div>
            <div class="ha">
              <div class="square d1"><span>INTJ</span></div>
              <div class="square d2"><span>INTP</span></div>
              <div class="square d3"><span>ENTJ</span></div>
              <div class="square d4" ><span>ENTP</span></div>
              <div class="square d5 "><span>INFJ</span></div>
              <div class="square d6"><span>INFP</span></div>
              <div class="square d7 "><span>ENFJ</span></div>
              <div class="square d8 "><span>ENFP</span></div>
              <div class="square d9"><span>ISTJ</span></div>
              <div class="square d10"><span>ISFJ</span></div>
              <div class="square d11"><span>ESTJ</span></div>
              <div class="square d12"><span>ESFJ</span></div>
              <div class="square d13"><span>ISTP</span></div>
              <div class="square d14"><span>ISFP</span></div>
              <div class="square d15"><span>ESTP</span></div>
              <div class="square d16 "><span>ESFP</span></div>
            </div>
          </div>
        </div>
<!-- MESSAGES / MEMBRES / CONNECTES / DERNIER INSCRIT -->
        <div class="boxQEEL">
  <!-- TOTAL UTILISATEURS CONNECTES -->
          <span id="UsersOnline">{TOTAL_USERS_ONLINE}</span>
          <script type="text/javascript">document.getElementById('UsersOnline').innerHTML=document.getElementById('UsersOnline').innerHTML.replace(/Il y a en tout/,"");</script>
          <div class="boxQEEL">
<!-- TOTAL MESSAGES -->
            <div class="TotalPosts">
              <span id="tPOSTS"><b>{TOTAL_POSTS}</b></span>
              <script type="text/javascript">document.getElementById('tPOSTS').innerHTML=document.getElementById('tPOSTS').innerHTML.replace(/Nos membres ont posté un total de /," "); document.getElementById('tPOSTS').innerHTML=document.getElementById('tPOSTS').innerHTML.replace(/messages/," ");</script> messages
            </div>
<!-- TOTAL MEMBRES -->
            <div class="TotalUsers">
              <span id="tUSERS"><b>{TOTAL_USERS}</b></span>
              <script type="text/javascript">document.getElementById('tUSERS').innerHTML=document.getElementById('tUSERS').innerHTML.replace(/Nous avons /," "); document.getElementById('tUSERS').innerHTML=document.getElementById('tUSERS').innerHTML.replace(/membres enregistrés/," "); document.getElementById('tUSERS').innerHTML=document.getElementById('tUSERS').innerHTML.replace(/membre enregistré/," ");</script> membres
            </div>
          </div>
<!-- MEMBRES CONNECTES -->
          <div class="online" id="onLINE">
            <table>{LOGGED_IN_USERS_LIST}</table>
          </div>
<!-- DERNIER UTILISATEUR ENREGISTRE -->
          <div class="lstQEEL">New Player :
            <span id="nUSER">{NEWEST_USER}</span>
            <script type="text/javascript">document.getElementById('nUSER').innerHTML=document.getElementById('nUSER').innerHTML.replace(/L'utilisateur enregistré le plus récent est /," ")</script>
          </div>
          <div class="creditQEEL">CREDITS : QEEL réalisé par Nemalus</div>
        </div>
      </div>
      <div class="FinQEEL"></div>
    </td>
  </tr>
</table>
<!-- END disable_viewonline -->



Dans la feuille de style (CSS) ajouter le code :
Code:
/****************************************
   QEEL par Nemalus sur Never-Utopia
   (Amphibole sur Exquisite
    Nemalus sur Cap-RPG
    Andramas sur Somewhere)
*****************************************/
/* BLOC TITRE QEEL */
.titreQEEL {
margin:auto;
width:900px; height:55px; padding-top:40px;
background:#000;  /* MODIFIABLE */
font-family:Oswald; letter-spacing:2px; text-transform:uppercase; text-align:right; color:#fff;
}
/* TITRE QEEL */
.titreQEEL a{
font-size:40px; padding-right:35px;
color:white; text-shadow:1px 1px 0 #cad78e; /* MODIFIABLE */
}
/* QEEL */
.QEEL {
margin:auto; width:900px; text-align:center; background:#fff; padding:12px 0;
}
/* 24H QEEL */
.dernierQEEL {
display:inline-block; vertical-align:top; margin:0 10px;
width:200px; height:300px; padding:5px; overflow:auto;
font-size:12px; text-align:justify;
background:#dedede;; /* MODIFIABLE */
}
.dernierQEEL .row1 {
background:none; padding:0 !important;
}
/* COULEUR TEXTE 24H QEEL */
.dernierQEEL .gensmall {
font-size:12px; color:black; /* MODIFIABLE */
}
/* Groupe QEEL */
.GroupeQEEL {
display:inline-block; vertical-align:top; margin:0 10px;
width:250px; padding:5px;
font-size:12px; text-align:justify;
}
#groupe .h3{
  margin:-5px -5px 5px;
  color:black;
  font:20px oswald;
  text-transform:uppercase;
  padding:10px 0;
  border-bottom:3px solid #333;
}
#groupe .square span{
  font:8px arial narrow;
  text-transform:uppercase;
  letter-spacing:1px;
  background:#333;
  text-shadow:1px 1px 0px black;
  color:#efefef;
  display:block;
  width:50px;
  padding:4px 0;
  -webkit-transition:ease-in-out 0.5s;
  transition:ease-in-out 0.5s;
  position:relative;
  left:50px;
}
#groupe a{color:transparent;text-decoration:none;}
#groupe{text-align:center;width:250px;margin: 0 auto;background:rgba(0,0,0,0.05);padding:5px 5px 0;}
#groupe .square{
  width:50px;
  height:50px;
  box-sizing:border-box;
  padding-top:17px;
  text-align:center;
  display:inline-block;
  vertical-align:top;
  overflow:hidden;
  margin-bottom:5px;
}
#groupe .square:nth-child(odd){
  margin-right:5px;
}
#groupe .square:hover span{
  left:0px;
}
/* COULEURS DES GROUPES */
#groupe .d1{background:#B891C4;}
#groupe .d2{background:#B36A8E;}
#groupe .d3{background:#80405C;}
#groupe .d4{background:#917277;}
#groupe .d5{background:#9AC59A;}
#groupe .d6{background:#ADC56B;}
#groupe .d7{background:#7F9D58;}
#groupe .d8{background:#698D4D;}
#groupe .d9{background:#90E7E5;}
#groupe .d10{background:#A7BCC7;}
#groupe .d11{background:#5CC7C8;}
#groupe .d12{background:#5DAFE6;}
#groupe .d13{background:#CB4C3B;}
#groupe .d14{background:#A20812;}
#groupe .d15{background:#E17257;}
#groupe .d16{background:#DD2B45;}

/* BLOC POSITIONNEMENT */
.boxQEEL {
display:inline-block; vertical-align:top;
}
/* TOTAL MESSAGES QEEL */
.TotalPosts {
margin-bottom:10px;
width:120px; height:50px; padding-top:13px;
text-align:center; font-size:16px; line-height:normal;
background:#dedede; color:black; /* MODIFIABLE */
}
/* TOTAL MEMBRES QEEL */
.TotalUsers {
width:120px; height:50px; padding-top:13px;
text-align:center; font-size:16px; line-height:normal;
background:#dedede; color:black; /* MODIFIABLE */
}
/* MEMBRES CONNECTES */
.online {
display:inline-block; vertical-align:top; margin-left:10px;
width:235px; height:120px; padding:10px; overflow:auto;
font-size:12px; text-align:justify;
background:#dedede;; color:black; /* MODIFIABLE */
}
/* DERNIER UTILISATEUR ENREGISTRE QEEL */
.lstQEEL {
margin-top:10px;
width:385px; height:40px; padding-top:20px;
background:#dedede;; color:white; /* MODIFIABLE */
text-align:center; font-size:18px;
}
/* NOMBRE UTILISATEURS EN LIGNE */
#UsersOnline {
display:block; margin-top:10px;
width:385px; height:15px; padding:5px 0;
font-size:11px; text-align:center;
background:white; color:black; /* MODIFIABLE */
}
/* CREDITS */
.creditQEEL {
margin-top:10px;
width:385px; height:40px; padding-top:20px;
color:black;font-family:Oswald;text-transform:Uppercase; text-align:left; /* MODIFIABLE */
text-align:center; font-size:18px; font-style:italic;text-shadow:1px 1px 0 #dedede;
}
/* BLOC FIN QEEL */
.FinQEEL {
margin:auto;
width:900px; height:35px; padding-top:40px;
background:#000;  /* MODIFIABLE */
}




Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
Si vous avez des problèmes avec ce LS, venez poster ici.
Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

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



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


Pseudo

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


Caractère

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

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

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

Histoire

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

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

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

Merwyn sur NU


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

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

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

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

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

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

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

Merwyn Arehdel

Fiche de RP Sombre, transitions [HTML] - Jeu 18 Aoû 2016 - 16:07



Hellow. Very Happy Je viens vous présenter cet ouvrage :



Titre du rp

ft. pseudo & pseudo



Ego vero sic intellego, Patres conscripti, nos hoc tempore in provinciis decernendis perpetuae pacis habere oportere rationem. Nam quis hoc non sentit omnia alia esse nobis vacua ab omni periculo atque etiam suspicione belli?

Et eodem impetu Domitianum praecipitem per scalas itidem funibus constrinxerunt, eosque coniunctos per ampla spatia civitatis acri raptavere discursu. iamque artuum et membrorum divulsa conpage superscandentes corpora mortuorum ad ultimam truncata deformitatem velut exsaturati mox abiecerunt in flumen.

Ideoque fertur neminem aliquando ob haec vel similia poenae addictum oblato de more elogio revocari iussisse, quod inexorabiles quoque principes factitarunt. et exitiale hoc vitium, quod in aliis non numquam intepescit, in illo aetatis progressu effervescebat, obstinatum eius propositum accendente adulatorum cohorte.

Ego vero sic intellego, Patres conscripti, nos hoc tempore in provinciis decernendis perpetuae pacis habere oportere rationem. Nam quis hoc non sentit omnia alia esse nobis vacua ab omni periculo atque etiam suspicione belli?
Et eodem impetu Domitianum praecipitem per scalas itidem funibus constrinxerunt, eosque coniunctos per ampla spatia civitatis acri raptavere discursu. iamque artuum et membrorum divulsa conpage superscandentes corpora mortuorum ad ultimam truncata deformitatem velut exsaturati mox abiecerunt in flumen.
Ideoque fertur neminem aliquando ob haec vel similia poenae addictum oblato de more elogio revocari iussisse, quod inexorabiles quoque principes factitarunt. et exitiale hoc vitium, quod in aliis non numquam intepescit, in illo aetatis progressu effervescebat, obstinatum eius propositum accendente adulatorum cohorte.
By Merwyn Arehdel sur Nu


L'image est en 100x100 non modifiable ! Elle sera redimensionnée automatiquement si vous tentez une taille plus grande. :) Merci de ne pas retirer le crédit !
Comme toujours, un merci rendra les codes visibles ~

Code:
<style> .rp { background-image: url(http://image.noelshack.com/fichiers/2016/33/1471526799-103005-dark-background-texture-of-beech-hd-p.jpg); width:400px; height:600px; box-shadow: 1px 2px lightgrey; border-radius: 05px; margin:auto; } .titre { -webkit-transition: 0.5s; transition: 0.5s; font-family: 'Lucida Handwriting'; color: white; text-shadow: 1px 1px lightgrey; font-size: 25px; margin:auto; text-align:center; } .titre:hover { color: #869296; -webkit-transform:scale(0.9); transform:scale(0.9);} .soustitre { -webkit-transition: 0.5s; transition: 0.5s; color:lightgrey; text-align:left; padding-left:05px; font-size: 13px; } .soustitre:hover { -webkit-transform:rotate(02deg); transform:rotate(02deg);} .image { width: 100px; height:100px; border-radius: 100px; opacity:0.8; position:relative; margin-top:-120px; margin-left:300px; -webkit-transition: 0.5s; transition: 0.5s;} .image:hover { opacity:1;} .texte { margin:auto; width:350px; height:480px; padding:05px; text-align:justify; color:#585959; overflow:auto; letter-spacing: -0.05em;}</style>

<div class="rp"><div class="titre">Titre du rp</div>
<div class="soustitre">ft. pseudo & pseudo</div><img src="http://www.animated-gifs.eu/category_nature/avatars-100x100-fire/0025.gif" class="image" />

<div class="texte">
Ego vero sic intellego, Patres conscripti, nos hoc tempore in provinciis decernendis perpetuae pacis habere oportere rationem. Nam quis hoc non sentit omnia alia esse nobis vacua ab omni periculo atque etiam suspicione belli?

Et eodem impetu Domitianum praecipitem per scalas itidem funibus constrinxerunt, eosque coniunctos per ampla spatia civitatis acri raptavere discursu. iamque artuum et membrorum divulsa conpage superscandentes corpora mortuorum ad ultimam truncata deformitatem velut exsaturati mox abiecerunt in flumen.

Ideoque fertur neminem aliquando ob haec vel similia poenae addictum oblato de more elogio revocari iussisse, quod inexorabiles quoque principes factitarunt. et exitiale hoc vitium, quod in aliis non numquam intepescit, in illo aetatis progressu effervescebat, obstinatum eius propositum accendente adulatorum cohorte.

Ego vero sic intellego, Patres conscripti, nos hoc tempore in provinciis decernendis perpetuae pacis habere oportere rationem. Nam quis hoc non sentit omnia alia esse nobis vacua ab omni periculo atque etiam suspicione belli?
Et eodem impetu Domitianum praecipitem per scalas itidem funibus constrinxerunt, eosque coniunctos per ampla spatia civitatis acri raptavere discursu. iamque artuum et membrorum divulsa conpage superscandentes corpora mortuorum ad ultimam truncata deformitatem velut exsaturati mox abiecerunt in flumen.
Ideoque fertur neminem aliquando ob haec vel similia poenae addictum oblato de more elogio revocari iussisse, quod inexorabiles quoque principes factitarunt. et exitiale hoc vitium, quod in aliis non numquam intepescit, in illo aetatis progressu effervescebat, obstinatum eius propositum accendente adulatorum cohorte.</div><div style="font-size: 09px; text-align:center; color: lightgrey;">By Merwyn Arehdel sur <a Href="http://www.never-utopia.com">Nu</a></div></div>

Fiche de RP Moderne avec transitions [HTML] - Lun 15 Aoû 2016 - 16:41



Bonjour Very Happy Je viens vous proposer cette p'tite fiche de RP. Un simple merci rendra les codes visibles. Merci de ne pas retirer le crédit !


Titre du Rp


Novitates autem si spem adferunt, ut tamquam in herbis non fallacibus fructus appareat, non sunt illae quidem repudiandae, vetustas tamen suo loco conservanda; maxima est enim vis vetustatis et consuetudinis. Quin in ipso equo, cuius modo feci mentionem, si nulla res impediat, nemo est, quin eo, quo consuevit, libentius utatur quam intractato et novo. Nec vero in hoc quod est animal, sed in iis etiam quae sunt inanima, consuetudo valet, cum locis ipsis delectemur, montuosis etiam et silvestribus, in quibus diutius commorati sumus.

Utque proeliorum periti rectores primo catervas densas opponunt et fortes, deinde leves armaturas, post iaculatores ultimasque subsidiales acies, si fors adegerit, iuvaturas, ita praepositis urbanae familiae suspensae digerentibus sollicite, quos insignes faciunt virgae dexteris aptatae velut tessera data castrensi iuxta vehiculi frontem omne textrinum incedit: huic atratum coquinae iungitur ministerium, dein totum promiscue servitium cum otiosis plebeiis de vicinitate coniunctis: postrema multitudo spadonum a senibus in pueros desinens, obluridi distortaque lineamentorum conpage deformes, ut quaqua incesserit quisquam cernens mutilorum hominum agmina detestetur memoriam Samiramidis reginae illius veteris, quae teneros mares castravit omnium prima velut vim iniectans naturae, eandemque ab instituto cursu retorquens, quae inter ipsa oriundi crepundia per primigenios seminis fontes tacita quodam modo lege vias propagandae posteritatis ostendit.

Quo cognito Constantius ultra mortalem modum exarsit ac nequo casu idem Gallus de futuris incertus agitare quaedam conducentia saluti suae per itinera conaretur, remoti sunt omnes de industria milites agentes in civitatibus perviis.

©️ Alony sur NU


Code:
<link href='http://fonts.googleapis.com/css?family=Covered+By+Your+Grace' rel='stylesheet' type='text/css' /><style> .fiche {margin:auto; background: #DBDBDB; -webkit-transition:0.5s; transition:0.5s; border-radius: 15px; box-shadow: 3px 0px 3px 3px rgba(0,0,0,0.5); width:400px; height:500px; padding: 10px;} .fiche:hover {-webkit-transform:rotate(-05deg); transform:rotate(-05deg);} .titrerp {font-family: 'Covered By Your Grace'; font-size: 35px; color: #383A3B; margin:auto; margin-top:-20px; text-align:center; -webkit-transition:0.5s; transition: 0.5s;} .titrerp:hover { color: #0D485C;} .gif { width:400px; opacity:0.7; border-radius: 05px; -webkit-transition:0.5s; transition: 0.5s;} .gif:hover {opacity:1; padding-left:10px;} .contenu {width:350px; overflow:auto; height: 200px; margin:auto; background-color: #414445; opacity:0.8; color: white; padding: 05px; -webkit-transition:0.5s; transition: 0.5s;} .contenu:hover {background:transparent; color: black;} .credits { text-align:center; color: #919191; font-size: 10px;}</style>
<div class="fiche"><div class="titrerp">Titre du Rp</div>
<img src="http://i.skyrock.net/6064/90806064/pics/3264052974_1_3_1NkjzRWs.gif" class="gif" />
<div class="contenu">Novitates autem si spem adferunt, ut tamquam in herbis non fallacibus fructus appareat, non sunt illae quidem repudiandae, vetustas tamen suo loco conservanda; maxima est enim vis vetustatis et consuetudinis. Quin in ipso equo, cuius modo feci mentionem, si nulla res impediat, nemo est, quin eo, quo consuevit, libentius utatur quam intractato et novo. Nec vero in hoc quod est animal, sed in iis etiam quae sunt inanima, consuetudo valet, cum locis ipsis delectemur, montuosis etiam et silvestribus, in quibus diutius commorati sumus.

Utque proeliorum periti rectores primo catervas densas opponunt et fortes, deinde leves armaturas, post iaculatores ultimasque subsidiales acies, si fors adegerit, iuvaturas, ita praepositis urbanae familiae suspensae digerentibus sollicite, quos insignes faciunt virgae dexteris aptatae velut tessera data castrensi iuxta vehiculi frontem omne textrinum incedit: huic atratum coquinae iungitur ministerium, dein totum promiscue servitium cum otiosis plebeiis de vicinitate coniunctis: postrema multitudo spadonum a senibus in pueros desinens, obluridi distortaque lineamentorum conpage deformes, ut quaqua incesserit quisquam cernens mutilorum hominum agmina detestetur memoriam Samiramidis reginae illius veteris, quae teneros mares castravit omnium prima velut vim iniectans naturae, eandemque ab instituto cursu retorquens, quae inter ipsa oriundi crepundia per primigenios seminis fontes tacita quodam modo lege vias propagandae posteritatis ostendit.

Quo cognito Constantius ultra mortalem modum exarsit ac nequo casu idem Gallus de futuris incertus agitare quaedam conducentia saluti suae per itinera conaretur, remoti sunt omnes de industria milites agentes in civitatibus perviis.
</div></div>
<div class="credits">©️ Alony sur <a Href="http://www.never-utopia.com">NU</a></div>

Profil simple avec hover et feuille de rpg cachée - Mer 10 Aoû 2016 - 16:44



Bonjour, je viens vous proposer un profil à la bordure dorée, avec les informations qui apparaissent à la survol de l'avatar, comme ceci :

► Simple
► Au survol

De plus, la feuille de rpg est cachée et s'affiche/se referme quand vous cliquez sur "Ouvrir".

L'arrière plan sombre est celui de mon forum. L'avatar est en 200x400. Cela a été créé pour phpBB2.

Il suffit de se rendre dans le template viewtopic_body et de remplacer ceci :
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://2img.net/i/fa/empty.gif" alt="" style="width:150px;height:1px" />
      </td>


Par ceci :
Code:
 <td class="{postrow.displayed.ROW_CLASS}"{postrow.displayed.THANK_BGCOLOR} valign="top" width="150">
   <div class="namePOST"><a name="{postrow.displayed.U_POST_ID}" id="{postrow.displayed.U_POST_ID}"></a><strong>{postrow.displayed.POSTER_NAME}</strong></div><div class="imgrankPOST">{postrow.displayed.RANK_IMAGE}</div><div class="avaPOST"><div>{postrow.displayed.POSTER_RANK}<br/><br/><!-- BEGIN profile_field --><font style="color:white;">{postrow.displayed.profile_field.LABEL}</font> {postrow.displayed.profile_field.CONTENT}{postrow.displayed.profile_field.SEPARATOR}<!-- END profile_field --></div><p>{postrow.displayed.POSTER_AVATAR}</p></div><div onClick="a=this.nextSibling.style;a.display=(a.display==''?'none':'')" class="openPOST">Ouvrir</div><div class="rpgPOST" style="display:none;">{postrow.displayed.POSTER_RPG}</div>
 </td>


Et le CSS :
Code:
/*****************PROFIL*****************/
/* PSEUDONYME SUJET */
.namePOST {
  font-family: 'Eagle Lake'; /**modifiable**/
  text-decoration:none;
  text-shadow: 0px 1px lightgrey;
text-transform:uppercase; text-align:center;
}
.namePOST a {
  text-decoration:none;}
/* AVATAR SUJET */
.avaPOST {
position:relative; z-index:5; width:200px; height:400px; overflow:hidden; border-radius:10px;
  border:2px groove DarkGoldenRod; /* MODIFIABLE */
}
.avaPOST p {
position:relative; z-index:3; margin:0;
}
.avaPOST:hover p{
z-index:-1; opacity:0;
}
/* INFORMATIONS JOUEUR SUJET */
.avaPOST div{
position:absolute;
width:190px; height:390px; padding:5px; overflow:auto;
background:rgba(0,0,0,0.5); color:white; /* MODIFIABLE */
font-size:11px; text-align:center;
}
/* IMAGE RANG SUJET */
.imgrankPOST {margin-top:-5px;
}
.imgrankPOST img{
max-height:400px;
}
/* OUVRIR FEUILLE DE PERSONNAGE SUJET */
.openPOST {
position:relative; z-index:10; margin:auto; margin-top:-15px;
cursor:pointer; width:175px; height:25px; color:rgba(0,0,0,0);
background:url(http://image.noelshack.com/fichiers/2016/31/1470580990-sans-titre-2.png);  /* IMAGE 175*25 */
}
/* FEUILLE DE PERSONNAGE SUJET */
.rpgPOST {
margin-top:-10px;
padding:08px 10px 10px; border-radius:0 0 15px 15px;
background:#191919; /* MODIFIABLE */
font-size:11px;
}


Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
Si vous avez des problèmes avec ce LS, venez poster ici.
Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

Llunn

Fiche colorée - Mer 20 Juil 2016 - 14:38



Fiche colorée



Je vous propose une petite fiche de ma création !
Cette fiche peut servir pour des utilisation différentes donc, à vous de voir ce que vous en faites !

Aperçu en direct
Aperçu en image


Le codage est a mettre dans une page html et ensuite, pour l'utiliser, vous devrez utiliser une belle iframe !

Soyez gentils, laissez moi le petit crédit lorsque vous utiliser le code Wink



Le code HTML



Il s'agit du code complet que vous devez mettre dans une page html. (Module > Gestion des pages HTML).
Sélectionnez bien les "non" avant de poster.

C'est dans cette page que vous ajouterez votre contenu et les couleurs si vous le souhaitez.

Code:
<!DOCTYPE html><html>
<head>
<link href='https://fonts.googleapis.com/css?family=Oswald:400,300,700' rel='stylesheet' type='text/css' />
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" /><title>Fiche colorée</title>
<style type="text/css">
body {
margin: 0px;
}
.banana {color: #2DB38F; font-family: Oswald;font-size: 11px;font-weight: bold;}
.peach {color: #B51F8C; font-family: Oswald;font-size: 11px;font-weight: bold;}
.b0 { font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: bold; color: #d0d3d4;} 
.b1 { font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: bold; color: #e07059;}
.b2 { font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: bold; color: #99d5e4;}
 
 /*Tableau du mag */

.tab {width:504px !important;
 height: 600px :important!;
 box-shadow: 0px 0px 2px rgba(0,0,0,0.2);
 background-color: #fff;
 border: 5px solid #fff;}

.tab0 {width:500px !important;
 margin:auto;}


 /*Colonnes colorées en haut du tableau*/

.tab1 {width: 25%, display:block;
  background-color: #ffc22c;}

.tab2 {width: 25%, display:block;
  background-color: #f79037;}

.tab3 {width: 25%, display:block;
  background-color: #13ada6;}

.tab4 {width: 25%, display:block;
  background-color: #b6d552;}

.tab5 {width: 25%, display:block;
  background-color: #ffc22c;
 height:25px;}

.tab6 {width: 25%, display:block;
  background-color: #f79037;}

.tab7 {width: 25%, display:block;
  background-color: #13ada6;}

.tab8 {width: 25%, display:block;
  background-color: #b6d552;}

 /*Titres*/

.headlight { width: 100%;
  background-color: #fff;
 height:100px;
 font-family: oswald;
 color: #414142 !important;
  text-align: center;
  text-transform: uppercase;
 font-size: 50px;
  font-weight: 700;}

.bottomlight { width: 100%;
  background-color: #fff;
 height:60px;
 font-family: oswald;
 color: #414142 !important;
  text-align: justify;
  text-transform: italic;
 font-size: 14px;
  font-weight: 500;
 line-height: 12px;
 font-style:italic;
 padding: 10px;}

.sub {color:#b6d552;
 display:block;
 font-family: 'Roboto', sans-serif;
 font-size:10px;
 margin-left: auto;
 margin-right: auto;
 text-align:center;
 width:90%;
 text-transform: uppercase;
 padding-top:-150px;
border-bottom:1px solid #13ada6;}

.cimg{
 opacity: 0.7;
 transition-duration: 0.7s;}

.cimg:hover{
 opacity: 1;
 transition-duration: 0.7s;}

 /*Tableau à onglets*/
 .linknav {
  display:block;
  background-color: #c9d852;
  margin:5px;
  padding:5px;
  color: #eeeeec !important;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
 font-family: 'Questrial', sans-serif;
  font-size: 14px;
  font-weight: bold;
}

.linknav:hover {
  display:block;
  background-color: #ededea;
  border-bottom: #e1755d 2px solid;
  margin:5px;
  padding:5px;
  color: #e1755d !important;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
 font-family: 'Questrial', sans-serif;
  font-size: 14px;
  font-weight: bold;
}


/* par défaut on masque le conenu de l.onglet */
.contenu-onglet, .radio-onglet {
  display: none;
}

/* on affiche l.onglet sélectionné */
.radio-onglet:checked + .contenu-onglet {
  display: block;
}
 
 .credit {color:#b6d552;
 display:block;
 font-family: 'Roboto', sans-serif;
 font-size:10px;
 margin-left: auto;
 margin-right: auto;
 text-align:center;
 width:90%;
 padding-top:-150px;
}
</style>
</head>
<body>



<center>
  <div class="tab">
    <table class="tab0" style="border-spacing : 0px; border-collapse : collapse;">
      <tr>
        <td>
          <table class="tab0" style="border-spacing : 0px; border-collapse : collapse;">
            <tr>
              <td class="tab5"></td>
              <td class="tab6"></td>
              <td class="tab7"></td>
              <td class="tab8"></td>
            </tr>
          </table>
        </td>
      </tr>
      <tr>
        <td>
          <table style="border-spacing : 0px; border-collapse : collapse;" >
            <tr>
              <td class="headlight">Gros titre <br /> <span class="sub">petit slogan bien sympa  </span></td>
            </tr>
            <tr>
              <td>
                <table class="tab0" style="border-spacing : 0px; border-collapse : collapse;">
                  <tr>
                    <td class="tab1"></td>
                    <td class="tab2"></td>
                    <td class="tab3"></td>
                    <td class="tab4"></td>
                  </tr>
                </table>
                <img src="http://img15.hostingpics.net/pics/750110melbournecityscape.png" class="cimg" width="500px"/>
                <table class="tab0" style="border-spacing : 0px; border-collapse : collapse;">
                  <tr>
                    <td class="tab1"></td>
                    <td class="tab2"></td>
                    <td class="tab3"></td>
                    <td class="tab4"></td>
                  </tr>
                </table>
              </td>
            </tr>
            <tr>
              <td>
                <center>
                  <div style="vertical-align:top;background-color: #edefec; border-bottom: 2px solid #ee9507;width:500px">
                    <div style="display:block;padding:5px;color: #eeeeec;text-align:center;font-family: 'oswald', sans-serif;font-size: 16px;font-weight: bold;background-color:#13ada6;border-top: 2px solid #c0ea56;">
                      Edito
                    </div>
                    <div align="justify" style="display:block;height:175px;overflow:auto;background-color: #edefec;padding:2px;margin:2px;font-family: 'Questrial', sans-serif;font-size: 12px;color: #787878;text-align: justify;">
                      <table>
                        <tr>
                          <td>
                            <table>
                              <tr>
                                <td>
                                  <br />
                                  <img src="http://i21.servimg.com/u/f21/19/32/80/36/mytyo10.png" />
                                </td>
                              </tr>
                              <tr>
                                <td>
                                  <center>
                                    <span class="b0">AM</span> <span class="b1">∆ 12° </span><span class="b2"> ∇ 9°</span><br /><span class="b0">PM</span> <span class="b1">∆ 28°</span>  <span class="b2">∇ 21° </span>
                                  </center>
                                </td>
                              </tr>
                            </table>
                          </td>
                          <td style="font-size: 12px;color: #787878;">
                            <div style="text-align: justify;">
                              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget urna condimentum, accumsan augue in, semper augue. Nam hendrerit ligula et posuere commodo. Sed sagittis odio justo, rutrum malesuada lectus convallis et. Fusce felis metus, hendrerit a facilisis ut, laoreet vel mi. Nulla luctus elit dictum, mollis est sed, pretium tortor. Aenean sit amet tincidunt libero. Curabitur tellus leo, fermentum eleifend mattis et, aliquam eget leo. Nullam urna velit, egestas molestie mollis at, efficitur in lorem. Vivamus placerat fringilla odio vel volutpat. Aenean vitae dapibus tellus, eget finibus libero. Sed ipsum quam, tincidunt ac mollis et, lacinia in augue. Mauris nec lacinia odio. Aliquam in aliquet tellus, vitae semper orci.
                            </div>
                          </td>
                        </tr>
                      </table>
                    </div>
                  </div>
                </center>
                <table>
                  <tbody>
                    <tr>
                      <td align="justify" style="background-color: #fe8c21;border-bottom: 2px solid #50c6b6; width: 150px; height: 110px;overflow:auto;font-size: 12px;color: #787878;">
                        <label for="contenu1" class="linknav">Titre 1</label><label for="contenu2" class="linknav">Titre2</label><label for="contenu3" class="linknav">Titre 3</label><label for="contenu4" class="linknav">Titre 4</label><label for="contenu5" class="linknav">Titre 5</label>
                      </td>
                      <td align="justify" style="border-bottom: 2px solid #50c6b6; width: 300px; height: 150px;overflow:auto;font-size: 12px;color: #787878;">
                        <div style="display:block;padding:5px;color: #eeeeec;text-align:center;font-family: 'oswald', sans-serif;font-size: 16px;font-weight: bold;background-color:#13ada6;border-top: 2px solid #c0ea56;">
                          Infos
                        </div>
                        <div align="justify" style="display:block;height:150px;width: 350px;overflow:auto;background-color: #edefec;font-family: 'Questrial', sans-serif;font-size: 12px;color: #787878;">
                          <input type="radio" id="contenu1" checked class="radio-onglet" name="contenu-fiche" /><div class="contenu-onglet">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget urna condimentum, accumsan augue in, semper augue. Nam hendrerit ligula et posuere commodo. Sed sagittis odio justo, rutrum malesuada lectus convallis et. Fusce felis metus, hendrerit a facilisis ut, laoreet vel mi. Nulla luctus elit dictum, mollis est sed, pretium tortor. Aenean sit amet tincidunt libero. Curabitur tellus leo, fermentum eleifend mattis et, aliquam eget leo. Nullam urna velit, egestas molestie mollis at, efficitur in lorem. Vivamus placerat fringilla odio vel volutpat. Aenean vitae dapibus tellus, eget finibus libero. Sed ipsum quam, tincidunt ac mollis et, lacinia in augue. Mauris nec lacinia odio. Aliquam in aliquet tellus, vitae semper orci.</div>
                          <input type="radio" id="contenu2" class="radio-onglet" name="contenu-fiche" /><div class="contenu-onglet">Contenu 2 -  Etiam tempus mattis tincidunt. Nulla non scelerisque mi. Cras ultrices est id nibh pellentesque, egestas fringilla magna mollis. Ut et sem volutpat, congue turpis ut, gravida neque. Sed aliquet, massa eu commodo eleifend, ante ligula tempus tortor, a molestie velit velit ac odio. Nunc dictum congue commodo. Quisque luctus sollicitudin maximus. Curabitur fermentum justo vel quam tincidunt, sit amet tristique lectus ultrices. Mauris fringilla est et turpis fermentum, et lobortis massa bibendum. Quisque consectetur, lorem vel elementum ultricies, sem est lobortis mi, ut faucibus nisi est a mauris. Proin ornare lorem sed nisi sollicitudin, nec tincidunt justo laoreet. Aenean facilisis sem in justo ultrices aliquam.</div>
                          <input type="radio" id="contenu3" class="radio-onglet" name="contenu-fiche" /><div class="contenu-onglet">Contenu 3 -  Etiam tempus mattis tincidunt. Nulla non scelerisque mi. Cras ultrices est id nibh pellentesque, egestas fringilla magna mollis. Ut et sem volutpat, congue turpis ut, gravida neque. Sed aliquet, massa eu commodo eleifend, ante ligula tempus tortor, a molestie velit velit ac odio. Nunc dictum congue commodo. Quisque luctus sollicitudin maximus. Curabitur fermentum justo vel quam tincidunt, sit amet tristique lectus ultrices. Mauris fringilla est et turpis fermentum, et lobortis massa bibendum. Quisque consectetur, lorem vel elementum ultricies, sem est lobortis mi, ut faucibus nisi est a mauris. Proin ornare lorem sed nisi sollicitudin, nec tincidunt justo laoreet. Aenean facilisis sem in justo ultrices aliquam.</div>
                          <input type="radio" id="contenu4" class="radio-onglet" name="contenu-fiche" /><div class="contenu-onglet">Contenu 4 -  Etiam tempus mattis tincidunt. Nulla non scelerisque mi. Cras ultrices est id nibh pellentesque, egestas fringilla magna mollis. Ut et sem volutpat, congue turpis ut, gravida neque. Sed aliquet, massa eu commodo eleifend, ante ligula tempus tortor, a molestie velit velit ac odio. Nunc dictum congue commodo. Quisque luctus sollicitudin maximus. Curabitur fermentum justo vel quam tincidunt, sit amet tristique lectus ultrices. Mauris fringilla est et turpis fermentum, et lobortis massa bibendum. Quisque consectetur, lorem vel elementum ultricies, sem est lobortis mi, ut faucibus nisi est a mauris. Proin ornare lorem sed nisi sollicitudin, nec tincidunt justo laoreet. Aenean facilisis sem in justo ultrices aliquam.</div>
                          <input type="radio" id="contenu5" class="radio-onglet" name="contenu-fiche" /><div class="contenu-onglet">Contenu 5 -  Etiam tempus mattis tincidunt. Nulla non scelerisque mi. Cras ultrices est id nibh pellentesque, egestas fringilla magna mollis. Ut et sem volutpat, congue turpis ut, gravida neque. Sed aliquet, massa eu commodo eleifend, ante ligula tempus tortor, a molestie velit velit ac odio. Nunc dictum congue commodo. Quisque luctus sollicitudin maximus. Curabitur fermentum justo vel quam tincidunt, sit amet tristique lectus ultrices. Mauris fringilla est et turpis fermentum, et lobortis massa bibendum. Quisque consectetur, lorem vel elementum ultricies, sem est lobortis mi, ut faucibus nisi est a mauris. Proin ornare lorem sed nisi sollicitudin, nec tincidunt justo laoreet. Aenean facilisis sem in justo ultrices aliquam.</div>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </td>
            </tr>
            <tr>
              <td>
                <table style="cborder-spacing : 0px; border-collapse : collapse;" >
                  <tr>
                    <td class="bottomlight">Maecenas vel libero quis arcu eleifend molestie accumsan eu neque. Suspendisse metus metus, imperdiet vitae turpis vel, semper efficitur velit </td>
                  </tr>
                </table>
                <table class="tab0" style="border-spacing : 0px; border-collapse : collapse;">
                  <tr>
                    <td class="tab5"></td>
                    <td class="tab6"></td>
                    <td class="tab7"></td>
                    <td class="tab8"></td>
                  </tr>
                </table>
                <div class="credit" style="text-align: center;">©️Llunn</div>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
  </div>
</center>
</body>
</html>


L'iframe



Vous devez placer cette iframe dans un message ou ailleurs selon l'utilisation que vous en faites.

Pensez bien à ajuster la largeur et/ou la hauteur si vous avez fait ces modifications dans le le css qui se trouve dans votre page HTML.


Code:
<iframe frameborder="0" scrolling="no" src="LIEN DE LA PAGE" name="fiche colorée" style="width: 550px; height: 970px; margin: auto; display: block;"></iframe>

Frosty Blue

Fiche de lien - The Colour for Us - Dim 26 Juin 2016 - 17:27



Bonjour,

Me revoici avec un nouveau LS de fiche de lien, qui est cette fois-ci un peu expérimentale.



Les couleurs du dégradé sont modifiables (si vous arrivez à vous  y retrouver dans ce capharnaüm) tout comme le reste. Le crédit quant à lui est indélébile.

Code:
<div class="color-topbox">
<div class="center-box"><div class="color-code"><div class="cube1"></div><div class="desc"><b>Lover</b> - Love is when the other person's happiness is more important than your own. <i>H. Jackson Brown, Jr.</i></div></div><div class="color-code"><div class="cube2"></div><div class="desc"><b>Good Friend</b> - A real friend is one who walks in when the rest of the world walks out. <i>Walter Winchell</i></div></div><div class="color-code"><div class="cube3"></div><div class="desc"><b>Friend</b> - One loyal friend is worth ten thousand relatives. <i>Euripide</i></div></div><div class="color-code"><div class="cube4"></div><div class="desc"><b>Acquaintance</b> - The beginning of an acquaintance whether with persons or things is to get a definite outline of our ignorance. <i>George Eliot</i></div></div><div class="color-code"><div class="cube5"></div><div class="desc"><b>Indifferent</b> - At the bottom of enmity between strangers lies indifference. <i>Soren Kierkegaard</i></div></div><div class="color-code"><div class="cube6"></div><div class="desc"><b>Rival</b> - I embrace my rival, but only to strangle him. <i>Jean Racine</i></div></div><div class="color-code"><div class="cube7"></div><div class="desc"><b>Frenemy</b> - An enemy to whom you show kindness becomes your friend, excepting lust, the indulgence of which increases its enmity. <i>Saadi</i></div></div><div class="color-code"><div class="cube8"></div><div class="desc"><b>Enemy</b> - You have enemies? Good. That means you've stood up for something, sometime in your life. <i>Winston Churchill</i></div></div><div class="color-code"><div class="cube9"></div><div class="desc"><b>Mortal Enemy</b> -  Know thy self, know thy enemy. A thousand battles, a thousand victories. <i>Sun Tzu</i></div></div></div>
<div class="color-name">Nom Prénom</div></div>

<div class="color-body">
<div class="color-linkbox" style="background-color: #f93974;"><div class="color-linkname">Nom Prénom</div><div class="color-reminder">Rival</div></div>
<div class="color-descbox"><div class="linkdesc">description du lien</div><img src="..."/><img src="..."/><img src="..."/></div>

<div class="color-linkbox" style="background-color: #6b39f9"><div class="color-linkname">Nom Prénom</div><div class="color-reminder">Mortal Enemy</div></div>
<div class="color-descbox"><div class="linkdesc">description du lien</div><img src="..."/><img src="..."/><img src="..."/></div>

<div class="color-linkbox" style="background-color: #05f598"><div class="color-linkname">Nom Prénom</div><div class="color-reminder">Lover</div></div>
<div class="color-descbox"><div class="linkdesc">description du lien</div><img src="..."/><img src="..."/><img src="..."/></div>

<div class="frost">Code de <a href="http://www.never-utopia.com/">Frosty Blue</a></div></div><style type="text/css">.color-topbox {width: 500px; margin: auto; position: relative;} .color-code {height: 20px; width: 20px; display: inline-block; vertical-align: top; margin-right: 15px; opacity: 0.5; transition: 1s; -webkit-transition: 1s;} .desc {background: black; color: lightgrey; text-align: justify; position: absolute; z-index: 2; opacity: 0; transition: 1s; -webkit-transition: 1s; width: 0px; box-sizing:border-box; padding: 10px; height: 50px; overflow: auto; position: absolute; left: 0px; top: 45px;} .cube1:hover {-webkit-transition: 1s; transition: 1s; box-shadow: 0px 0px 3px lightgrey;} .color-code:hover {opacity: 1; transition: 1s; -webkit-transition: 1s;} .color-code:hover .desc {width: 500px; opacity: 1; -webkit-transition: 1s; transition: 1s;} .cube1 {height: 20px; width: 20px; background: #05f598; position: relative; -webkit-transition: 1s; transition: 1s;} .cube2 {height: 20px; width: 20px; background: #81f939; position: relative; transition: 1s; -webkit-transition: 1s;} .cube3 {height: 20px; width: 20px; background: #f9f639; position: relative; transition: 1s; -webkit-transition: 1s;} .cube4 {height: 20px; width: 20px; background: #f99c39; position: relative; transition: 1s; -webkit-transition: 1s;} .cube5 {height: 20px; width: 20px; background: #f93939; position: relative; -webkit-transition: 1s; transition: 1s;} .cube6 {height: 20px; width: 20px; background: #f93974; position: relative; transition: 1s; -webkit-transition: 1s;} .cube7 {height: 20px; width: 20px; background: #ed39f9; position: relative; transition: 1s; -webkit-transition: 1s;} .cube8 {height: 20px; width: 20px; background: #b63bf7; position: relative; transition: 1s; -webkit-transition: 1s;} .cube9 {height: 20px; width: 20px; background: #6b39f9; position: relative; transition: 1s; -webkit-transition: 1s;} .color-name {font-size: 30px; position: relative; z-index: 1; color: black; text-align: center; letter-spacing: 15px; text-transform: uppercase; font-family:'Cantarell'; font-weight: bold; line-height: 30px;} .color-body {width: 500px; margin: auto;} .color-linkbox {width: 500px; margin: auto; text-align: center; font-family: 'Cantarell'; text-transform: uppercase; letter-spacing: 5px; color: black; font-size: 18px; padding: 7px; box-sizing: border-box; height: 30px;} .color-linkname {position: relative; transition: 1s; -webkit-transition: 1s; -webkit-transition-delay: 0.5s; transition-delay: 0.5s;} .color-linkbox:hover .color-linkname {-webkit-filter: blur(25px); filter: blur(25px); opacity: 0; transition: 1s; -webkit-transition: 1s;} .color-reminder {opacity: 0; transition: 1s; -webkit-transition: 1s; position: relative; top: -18px; color: white;} .color-linkbox:hover .color-reminder {opacity: 1; transition-delay: 1s; -webkit-transition-delay: 1s; -webkit-transition: 1s; transition: 1s;} .color-descbox {width: 500px; height: 70px; margin: auto; box-sizing: border-box; padding: 10px; background: black;} .linkdesc {box-sizing: border-box; padding: 10px; height: 50px; width: 300px; float: left; overflow: auto; background: lightgrey; color: black; font-family: 'Cantarell'; text-align: justify; position: relative; z-index: 1;} .color-descbox img {height: 50px; width: 50px; background: white; overflow: hidden; margin-left: 8px;} .frost {opacity: 0.5; color: lightgrey; font-size: 10px; text-align: center;} .center-box {margin: auto; text-align: center;}

</style><link href='https://fonts.googleapis.com/css?family=Cantarell:400,700' rel='stylesheet' type='text/css' />

Frosty Blue

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



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

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

Aperçu - Hover 1 - Hover 2


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

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

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

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

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

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

Cheshire Cat

Affichage des messages sobre - Mar 29 Mar 2016 - 17:52



Bonjour à tous !  :bwaha:
Aujourd'hui, on est là pour dur lourd, car je vous propose un affichage complet de vos messages ! Si c'est pas beau tout ça ? :star:
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

Pour commencer à installer ce nouvel affichage pour vos sujets, nous allons faire cette manœuvre
Panneau d'administration > Affichage > Templates > Général > viewtopic_body
Maintenant on va remplacer le template de base par celui qui va suivre.
Code:
<script type="text/javascript">
//<![CDATA[
var multiquote_img_off = '{JS_MULTIQUOTE_IMG_OFF}', multiquote_img_on = '{JS_MULTIQUOTE_IMG_ON}', _atr = '{JS_DIR}addthis/', _ati = '{PATH_IMG_FA}addthis/'{ADDTHIS_LANG}, addthis_localize = { share_caption: "{L_SHARE_CAPTION}", email: "{L_EMAIL}", email_caption: "{L_EMAIL_CAPTION}", favorites: "{L_SHARE_BOOKMARKS}", print: "{L_PRINT}", more: "{L_MORE}" };
$(function(){

    if(typeof(_atc) == "undefined") {
        _atc = { };
    }
   
    _atc.cwait = 0;
    $('.addthis_button').mouseup(function(){
        if ($('#at15s').css('display') == 'block') {
            addthis_close();
        }
    });
});

var hiddenMsgLabel = { visible:'{JS_HIDE_HIDDEN_MESSAGE}', hidden:'{JS_SHOW_HIDDEN_MESSAGE}' };
showHiddenMessage = function(id)
{
    try
    {
        var regId = parseInt(id, 10);
        if( isNaN(regId) ) { regId = 0; }
       
        if( regId > 0)
        {
            $('.post--' + id).toggle(0, function()
         {
            if( $(this).is(":visible") )
            {
               $('#hidden-title--' + id).html(hiddenMsgLabel.visible);
            }
            else
            {
               $('#hidden-title--' + id).html(hiddenMsgLabel.hidden);
            }
         });
        }
    }
    catch(e) { }
   
   return false;
};

//]]>
</script>

<link href='https://fonts.googleapis.com/css?family=Amaranth|Titillium+Web|Yanone+Kaffeesatz|Roboto' rel='stylesheet' type='text/css' />
<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td align="left" valign="middle">
         <span class="nav">
         <!-- BEGIN switch_user_authpost -->
         <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>   
         <!-- END switch_user_authpost -->
         <!-- BEGIN switch_user_authreply -->
         <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
         <!-- END switch_user_authreply -->
         </span>
      </td>   
          </tr>
          <tr>
      <td class="nav" valign="middle" width="100%">
      </td>
   </tr>
</table>

<table class="affichagesujet" width="100%" border="0" cellspacing="0" cellpadding="0" >
   <tr>
             <td colspan="3">
                     <h1 class="sujettitre">
                          {TOPIC_TITLE}<br />
           <span class="nav" itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
                      <a class="nav" href="{U_INDEX}" itemprop="url"><span itemprop="title">{L_INDEX}</span></a>
                      <!--{NAV_SEP}<a class="nav" href="{U_ALBUM}" itemprop="url"><span itemprop="title">{L_ALBUM}</span></a>-->
                      {NAV_CAT_DESC_SECOND}
                    </span>
                     </h1>
      </td>
   </tr>
   <!-- BEGIN topicpagination -->
   <tr>
             <td colspan="2" align="right" valign="top">
                     <div class="paginationsujet">{PAGINATION}</div>
             </td>
   </tr>
   <!-- END topicpagination -->
   {POLL_DISPLAY}
   <!-- BEGIN postrow -->
   <!-- BEGIN hidden -->
   <tr>
      <td class="postdetails" colspan="3" align="center">{postrow.hidden.MESSAGE}</td>
   </tr>
   <!-- END hidden -->
   <!-- BEGIN displayed -->
   <tr class="post--{postrow.displayed.U_POST_ID}" id="{postrow.displayed.U_POST_ID}">
          <td valign="top">
            <div class="profilmodif">
              <h1 class="pseudo">{postrow.displayed.POSTER_NAME}</h1>
              <div class="profavatar">
                <div class="infos">
                    <!-- BEGIN profile_field -->
                    {postrow.displayed.profile_field.LABEL} {postrow.displayed.profile_field.CONTENT}
                    <!-- END profile_field -->
                    {postrow.displayed.POSTER_RPG}
                </div>
                <div class="profil_avatar">{postrow.displayed.POSTER_AVATAR}</div>
              </div>
              <div class="rang">
                {postrow.displayed.POSTER_RANK}<br />
                {postrow.displayed.PROFILE_IMG} {postrow.displayed.PM_IMG} {postrow.displayed.EMAIL_IMG}
                <!-- BEGIN contact_field -->{postrow.displayed.contact_field.CONTENT}<!-- END contact_field -->
              </div>
            </div>
            </td>
                <td valign="top" colspan="2">
         <table border="0" cellspacing="0" cellpadding="0">
            <tr class="heureedit">
                                     <td class="heureedit">
                                          <div class="on">{postrow.displayed.ONLINE_IMG}</div>
                                          <div class="heure">{postrow.displayed.POST_DATE}</div>
                                     </td>
            </tr>
            <tr>
               <td colspan="2">
                  <!-- BEGIN switch_vote_active -->
                  <div class="vote gensmall">
                     <!-- BEGIN switch_vote -->
                     <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_PLUS}">+</a></div>
                     <!-- END switch_vote -->

                     <!-- BEGIN switch_bar -->
                     <div class="vote-bar" title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}">
                        <!-- BEGIN switch_vote_plus -->
                        <div class="vote-bar-plus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_plus.HEIGHT_PLUS}px;"></div>
                        <!-- END switch_vote_plus -->

                        <!-- BEGIN switch_vote_minus -->
                        <div class="vote-bar-minus" style="height:{postrow.displayed.switch_vote_active.switch_bar.switch_vote_minus.HEIGHT_MINUS}px;"></div>
                        <!-- END switch_vote_minus -->
                     </div>
                     <!-- END switch_bar -->

                     <!-- BEGIN switch_no_bar -->
                     <div title="{postrow.displayed.switch_vote_active.L_VOTE_TITLE}" class="vote-no-bar">----</div>
                     <!-- END switch_no_bar -->

                     <!-- BEGIN switch_vote -->
                     <div class="vote-button"><a href="{postrow.displayed.switch_vote_active.switch_vote.U_VOTE_MINUS}">-</a></div>
                     <!-- END switch_vote -->
                  </div>
                  <!-- END switch_vote_active -->

                  <div class="affichmess">
                                                  <div class="imagesedit">{postrow.displayed.THANK_IMG} {postrow.displayed.MULTIQUOTE_IMG} {postrow.displayed.QUOTE_IMG} {postrow.displayed.EDIT_IMG} {postrow.displayed.DELETE_IMG} {postrow.displayed.IP_IMG} {postrow.displayed.REPORT_IMG}</div>
                    <div>{postrow.displayed.MESSAGE}</div>

                     <!-- BEGIN switch_attachments -->
                     <dl class="attachbox">
                        <dt>{postrow.displayed.switch_attachments.L_ATTACHMENTS}</dt>
                        <dd>
                           <!-- BEGIN switch_post_attachments -->
                           <dl class="file">
                              <dt>
                                 <img src="{postrow.displayed.switch_attachments.switch_post_attachments.U_IMG}" alt="" />

                                 <!-- BEGIN switch_dl_att -->
                                 <a class="postlink" href="{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.U_ATTACHMENT}">{postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT}</a> {postrow.displayed.switch_attachments.switch_post_attachments.switch_dl_att.ATTACHMENT_DEL}
                                 <!-- END switch_dl_att -->

                                 <!-- BEGIN switch_no_dl_att -->
                                 {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT} {postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.ATTACHMENT_DEL}
                                 <!-- END switch_no_dl_att -->
                              </dt>

                              <!-- BEGIN switch_no_comment -->
                              <dd>
                                 <em>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_comment.ATTACHMENT_COMMENT}</em>
                              </dd>
                              <!-- END switch_no_comment -->

                              <!-- BEGIN switch_no_dl_att -->
                              <dd>
                                 <em><strong>{postrow.displayed.switch_attachments.switch_post_attachments.switch_no_dl_att.TEXT_NO_DL}</strong></em>
                              </dd>
                              <!-- END switch_no_dl_att -->

                              <dd>({postrow.displayed.switch_attachments.switch_post_attachments.FILE_SIZE}) {postrow.displayed.switch_attachments.switch_post_attachments.NB_DL}</dd>
                           </dl>
                           <!-- END switch_post_attachments -->
                        </dd>
                     </dl>
                     <!-- END switch_attachments -->

                  </div>
                                  </td>
                          </tr>
                  </table>
          </td>
        </tr>
        <!-- BEGIN switch_signature -->
     <tr>
          <td colspan="3">
            <div class="signmss">
              {postrow.displayed.SIGNATURE}
            </div>
          </td>
     </tr>
        <!-- END switch_signature -->
   <!-- BEGIN first_post_br -->
</table>
<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
   <!-- END first_post_br -->
   <!-- END displayed -->
   <!-- END postrow -->
   <!-- BEGIN no_post -->
   <tr align="center">
      <td colspan="3" height="28">
         <span class="genmed">{no_post.L_NO_POST}</span>
      </td>
   </tr>
   <!-- END no_post -->
</table>
<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td class="paginationsujet" valign="top" {COLSPAN_PAGINATION}>{PAGE_NUMBER}</td>
      <!-- BEGIN topicpagination -->
      <td class="paginationsujet" align="right" valign="top" >{PAGINATION}</td>
      <!-- END topicpagination -->
   </tr>
   <!-- BEGIN switch_user_logged_in -->
   <!-- BEGIN watchtopic -->
   <tr>
      <td class="paginationsujet" colspan="2" align="right" valign="top">{S_WATCH_TOPIC}</td>
   </tr>
   <!-- END watchtopic -->
   <!-- END switch_user_logged_in -->
</table>

<table class="forumline" width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td colspan="2" align="center">
         <!-- BEGIN switch_user_logged_in -->
         <a name="quickreply"></a>
         {QUICK_REPLY_FORM}<br />
         <!-- END switch_user_logged_in -->
      </td>
   </tr>
   <tr>
      <td style="margin:0; padding: 0;" colspan="2">
         <table border="0" cellpadding="0" width="100%" cellspacing="0" id="info_open" style="display:''">
            <tbody>
      <!-- BEGIN show_permissions -->
      <tr>
         <td class="row2" valign="top" width="25%"><span class="gensmall">{L_TABS_PERMISSIONS}</span></td>
         <td class="row1" valign="top" width="75%"><span class="gensmall">{S_AUTH_LIST}</span></td>
      </tr>
      <!-- END show_permissions -->
   </tbody>
         </table>
      </td>
   </tr>
</table>

<form action="{S_JUMPBOX_ACTION}" method="get" name="jumpbox" onsubmit="if(document.jumpbox.f.value == -1){return false;}">
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
   <tr>
      <td align="left" valign="middle" nowrap="nowrap" {WIDTH_GALLERY}>
         <span class="nav">
            <!-- BEGIN switch_user_authpost -->
            <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}Newtopic" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>   
            <!-- END switch_user_authpost -->
            <!-- BEGIN switch_user_authreply -->
            <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
            <!-- END switch_user_authreply -->
         </span>
      </td>

      <td align="right" nowrap="nowrap"><span class="gensmall">{L_JUMP_TO}: {S_JUMPBOX_SELECT} <input class="liteoption" type="submit" value="{L_GO}" /></span></td>

      <!-- BEGIN moderation_panel -->
      <td align="center">
         <span class="gensmall">{moderation_panel.U_YOUR_PERSONAL_MODERATE}</span>
      </td>
      <!-- END moderation_panel -->
   </tr>
</table>
</form>

<!-- BEGIN viewtopic_bottom -->
<table class="noprint" width="100%" border="0" cellspacing="2" cellpadding="0" align="center">
   <tr>
      <td colspan="2" align="left" valign="top" nowrap="nowrap"><br />{S_TOPIC_ADMIN}<br />
         <form name="action" method="get" action="{S_FORM_MOD_ACTION}">
            <input type="hidden" name="t" value="{TOPIC_ID}" />

            <!-- <input type="hidden" name="sid" value="{S_SID}" /> -->
            <input type="hidden" name="{SECURE_ID_NAME}" value="{SECURE_ID_VALUE}" />

            <span class="gen">{L_MOD_TOOLS}<br />{S_SELECT_MOD} <input class="liteoption" type="submit" value="{L_GO}" /></span>
         </form>
      </td>
   </tr>
</table>
<!-- END viewtopic_bottom -->

<!-- BEGIN switch_image_resize -->
<script type="text/javascript">
//<![CDATA[
$(resize_images({ 'selector' : '.postbody', 'max_width' : {switch_image_resize.IMG_RESIZE_WIDTH}, 'max_height' : {switch_image_resize.IMG_RESIZE_HEIGHT} }));
//]]>
</script>
<!-- END switch_image_resize -->
<script src="{JS_DIR}addthis/addthis_widget.js" type="text/javascript"></script>


Ensuite, nous allons ajouter le CSS pour donner forme à notre code.
Code:
/*Affichage des sujets par Cheshire Cat*/
/*Message du posteur*/
.affichagesujet{
  margin:10px 0;
  background-color:#BAC49C;
}
.sujettitre{
  margin:0 0 10px;
  padding:5px;
  background-color:#E2DFED;
  color:#8665AB;
  font-family: 'Amaranth', sans-serif;
  font-size:24px;
  text-transform:uppercase;
  text-align:center;
  font-weight:normal;
  letter-spacing:2px;
}
.sujettitre .nav{
  font-size:0;
}
.sujettitre .nav a{
  color:#8665AB!important;
  font-size:12px;
  font-weight:normal;
}
.sujettitre .nav a:not(:last-of-type):after{
  content:"-";
  margin:0 2px;
}
.paginationsujet{
  font-size:12px;
  padding:0 10px;
  color:#504254;
}
.paginationsujet a{
  color:#504254!important;
}
.paginationsujet img{
  height:10px;
  opacity:0.8;
}
.heureedit{
  height:20px;
  padding:10px 10px 0 0;
}
.on{
  float:left;
}
.heure{
  float:right;
  font-family: 'Titillium Web', sans-serif;
  font-size:12px;
  font-weight:bold;
  color:#794F82;
  text-transform:uppercase;
}
.imagesedit{
  text-align:right;
}
.imagesedit img{
  height:20px;
  opacity:0.8;
  margin:0 3px;
}
.affichmess{
  width:480px;
  min-height:357px;
  margin:10px;
  padding:10px;
  background-color:#929a79;
  font-size:12px;
  color:#504254;
  text-align:justify;
  font-family:Roboto;
  line-height:18px;
}
.signmss{
  min-height:100px;
  max-height:200px;
  margin:0 10px 10px;
  padding:10px;
  color:#504254;
  background-color:#E2DFED;
  overflow:auto;
  font-size:12px;
  font-family: 'Roboto', sans-serif;
}
.signmss br:first-of-type,
.signmss br:nth-of-type(2){
  display:none;
}
/*Profil du posteur*/
.profilmodif{
  z-index:1;
  width:200px;
  background-color:#E2DFED;
  margin:0 0 10px 10px;
}
.pseudo{
  margin:0;
  padding:7px 0 5px;
  text-align:center;
  font-family:Yanone Kaffeesatz;
  font-size:23px;
}
.pseudo strong{
  font-weight:normal;
}
.pseudo a{
  text-decoration:none !important;
}
.pseudo a:hover{
  text-decoration:none !important;
}
.profavatar{
  position:relative;
  width:200px;
  height:320px;
  overflow:hidden;
}
.profil_avatar img{
  position:absolute;
  top:-15px;
  left:0px;
  height:320px;
  width:200px;
  margin-top:15px;
  transition: all 600ms;
}
.profavatar:hover .profil_avatar img {
  -webkit-transform:translatex(-200px);
  transform:translatex(-200px);
}
.infos{
  position:absolute;
  top:0px;
  left:0px;
  width:190px;
  height:310px;
  overflow:auto;
  padding:5px;
  text-align:left;
  letter-spacing:0px;
  color:#504254;
  font-size:12px;
  font-family: 'Roboto', sans-serif;
  background-color:#f4ecea;
}
.rang{
  overflow:hidden;
  color:#504254;
  text-align:center;
  font-size:20px;
  letter-spacing:-2px;
  font-family: 'Titillium Web', sans-serif;
}
.rang img{
  height:20px;
  opacity:0.8;
  margin:0 2px;
}

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


N'oubliez pas de bien valider vos templates et votre CSS, et tout est bon ! Very Happy

Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^

JodieCravery

Message RP en CSS - Dim 6 Mar 2016 - 10:27



Bonjour à tous ceux qui lisent ce message .o.

Je ne suis pas la personne la plus douée du monde mais, de temps en temps, je fais des codes pas trop hasardeux et qui donneront pas envie de s'arracher les yeux à des codeurs expérimentés (quoique). Du coup je me suis dit qu'en guise de première participation au forum, j'allais vous proposer un code que j'ai réalisé il y a quelques temps et dont je ne me sers plus vraiment. Il y a deux façon de faire cette fiche de réponse pour qu'elle soit entièrement personnalisable :
- Avec le CSS du forum (si vous êtes administrateur, donc)
- Avec une fiche CSS hébergée sur internet et liée à la fiche

Je propose aussi une version du code avec le CSS directement dans le html, mais certaines parties ne seront pas personnalisables (seulement l'ombre, la couleur de fond, les dimensions hauteur/largeur, la couleur de la bordure et du texte et le titre). Dans tous les cas, il ne faut pas supprimer le lien vers la fiche CSS pour garder l'aspect de la fiche.

Aperçu:


La grande image, en plus de devenir transparente et de "s'agrandir", passe aussi en noir et blanc. L'opacité finale est modifiable dans le css, sinon l'opacité par défaut est de 40%. Pour le texte, la barre de défilement est située à gauche.


Les Codes



HTML avec CSS :
Code:
<link href="http://www.aht.li/2840022/Fiche_Basique.css" rel="stylesheet" type="text/css" />
<link href='http://fonts.googleapis.com/css?family=Mr+Dafoe' rel='stylesheet' type='text/css' />
<div class="title" style="width:500px;"><div class="block-title-on" style="width: 500px;  height: 208px;"><a href="LIEN VERS LA PREMIÈRE PAGE DU RP"><img src="LIEN IMAGE EN 500*208" style="width:500px; height:208px;"/></a><div class="block-title-under" style="vertical-align:middle; text-align:center; font-variant:small-caps; padding-top:30px;"><span style="text-shadow: 2px 2px 2px #766344; font-family: 'Mr Dafoe', cursive; font-size: 40px;">TITRE DU RP</span><div class="img-rp" style="letter-spacing : 15px;">
<img src="LIEN IMAGE 100*100 GAUCHE" width="100px" height="100px"/> <img src="LIEN IMAGE 100*100 DROITE" width="100px" height="100px"/></div>Ft JOUEUR UN & JOUEUR DEUX</div></div></div>
<div class="rp" style="width:540px;margin-top:5px;"><div class="rp-txt" style="height:700px;  color:black;  border-bottom:8px solid black;  border-left:1px solid black; box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); background-color:#306B17; "><div class="rp-scroll">
--------------------------------> CONTENU DE VOTRE RP <-----------------------------
</div></div> <span style="font-size:10px; color:black;">@ Jodie Cravery sur <a href="http://www.never-utopia.com">Never Utopia</a></span></div>

Vous pouvez donc modifier :
- La taille du bloc contenant l'image-titre ("title" et "block-title-on")
- Les dimensions de la première image ("LIEN IMAGE EN 500*208" style="width:500px; height:208px;"), veillez cependant à ce que les dimensions soient les mêmes que celle du bloc.
- Le format de ce qui apparaît au survol de l'image-titre ("block-title-under")
- Le format du texte du titre (tout ce qui est dans le style du span)
- L'espace entre les deux images en 100*100 ("letter-spacing : 15px;")
- La taille de ces images (directement dans le width et le height des images)
- La largeur du bloc de texte ("rp")
- La hauteur, la couleur de fond, la couleur d'écriture, les bordures et les ombres du bloc de texte ("rp-txt")


HTML sans CSS :
Code:
<link href='http://fonts.googleapis.com/css?family=Mr+Dafoe' rel='stylesheet' type='text/css' />
<div class="title"><div class="block-title-on"><a href="LIEN VERS LA PREMI7RE PAGE DU RP"><img src="LIEN IMAGE EN 500*208"/></a><div class="block-title-under"><span style="text-shadow: 2px 2px 2px #766344; font-family: 'Mr Dafoe', cursive; font-size: 40px;">TITRE DU RP</span><div class="img-rp">
<img src="LIEN IMAGE 100*100 GAUCHE" width="100px" height="100px"/> <img src="LIEN IMAGE 100*100 DROITE" width="100px" height="100px"/></div>Ft JOUEUR UN & JOUEUR DEUX</div></div></div>
<div class="rp" style="margin-top:5px;"><div class="rp-txt" style="color:black; background-color:#306B17;"><div class="rp-scroll">
--------------------------------> CONTENU DE VOTRE RP <-----------------------------
</div></div> <span style="font-size:10px; color:black;">@ Jodie Cravery sur <a href="http://www.never-utopia.com">Never Utopia</a></span></div>


Code CSS :
Code:
.title {
  margin:auto; /*centrage du bloc titre et image*/
    width:500px; /*largeur du bloc titre et image*/
}

.block-title-on
{
   -webkit-transition: all 1.5s ease; /*vitesse de transition*/
   transition: all 1.5s ease; /*vitesse de transition*/
   display: block;
   width: 500px; /*largeur du bloc titre et image*/
   height: 208px; /*hauteur du bloc titre et image*/
   position: relative;
  opacity: 1.0; /*opacité de base de l'image */
  filter: alpha(opacity=100);  /*opacité de base de l'image */
  filter: grayscale(0); /*opacité de base de l'image */
        -webkit-filter: grayscale(0); /*image en couleurs*/
}

.block-title-on:hover a img {
     display: block;
   -webkit-transition: all 1.5s ease; /*vitesse de transition*/
   transition: all 1.5s ease; /*vitesse de transition*/
   opacity: 0.4; /*opacité de l'image au survol*/
    filter: alpha(opacity=40);   /*opacité de l'image au survol*/
  width:500px; /*largeur de l'image au survol */
  height:208px;  /*hauteur de l'image au survol */
   filter: grayscale(1); /*passage de l'image en noir et blanc*/
   -webkit-filter: grayscale(1); /*passage de l'image en noir et blanc*/
border-radius: 1px; /*diminution de l'arrondi au survol*/
}

.block-title-on a img {
     display: block;
     position: absolute;
    left: 0; right: 0;
  top: 0; bottom: 0;
  -webkit-transition: all 1.5s ease; /*vitesse de transition*/
  transition: all 1.5s ease;  /*vitesse de transition*/
   width:500px; /*largeur de base de l'image */
  height:208px; /*hauteur de base de l'image */
border-radius: 50px; /* arrondi de base de l'image*/
border-top-left-radius: 15px; /* arrondi de base de l'image haut gauche*/
border-bottom-right-radius: 15px; /* arrondi de base de l'image bas droite*/
}

.block-title-under {
    vertical-align:middle; /*centrage vertical du texte*/
text-align:center;  /*centrage du texte */
font-variant:small-caps; /*passage en petites majuscules */
  padding-top:30px; /*écart avec le haut du bloc titre*/
 }

.block-title-under img {
   width:100px; /*largeur des petites images */
  height:100p ; /* hauteur des petites imaages*/
border-radius: 50px; /*arrondi des petites images */
border-top-left-radius: 15px;/*arrondi des petites images haut gauche */
border-bottom-right-radius: 15px;x;/*arrondi des petites images bas droite*/
}

.img-rp {
  letter-spacing : 15px;} /*espace entre les deux images */

.rp {
  margin:auto; /*centrage du bloc rp*/
  width:540px; /*largeur du bloc rp*/
  padding-left:10px;
  margin-bottom:20px;
}

.rp-txt {
  height:700px; /*hauteur du bloc rp*/
  overflow:auto; /*barre de défilement automatique*/
border-top-left-radius: 2px; /*arrondi haut gauche */
border-top-right-radius: 20px; /*arrondi haut droite */
border-bottom-right-radius: 100px;/*arrondi bas droite */
border-bottom-left-radius: 2px; /*arrondi bas gauche */
  padding:10px 25px 15px 10px;
  border-bottom:8px solid black; /*bordure bas */
  border-left:1px solid black; /*bordure gauche*/
box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75); /*ombre du bloc texte*/
  direction:rtl; /*NE PAS MODIFIER*/
  text-align:justify; /*NE PAS MODIFIER*/
}

.rp-scroll {
  direction:ltr; /*NE PAS MODIFIER*/
    text-align:justify; /*NE PAS MODIFIER*/
}

.rp-txt::-webkit-scrollbar {
    width: 3px; /*largeur de la barre de défilement*/
}
 
.rp-txt::-webkit-scrollbar-track {
          box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
  background-color:black; /*couleur de la barre de défilement*/
}
 
.rp-txt::-webkit-scrollbar-thumb {
        box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
  background-color:#DDDDDD; /*couleur du rectangle dans la barre de défilement*/
}

J'ai fait le code CSS le plus clair possible pour rendre la personnalisation simple. La couleur de fond et la couleur du texte restent modifiables directement dans le html, tout comme le format du titre (police, taille, ombre, etc). Si vous ne voulez vraiment rien modifier d'autre, il vous suffit de coller ce code au début de votre fiche pour que la mise en page se fasse d'elle-même :
Code:
<link href="http://www.aht.li/2840035/Fiche_Complete.css" rel="stylesheet" type="text/css" />

Bon, et si vous n'avez pas d'image à la bonne taille pour le titre du rp et que vous avez la flemme de chercher ou d'en faire une, je vous offre des cactus :
Code:
http://i.imgur.com/J3kEMuF.png


C'est ma première contribution, j'espère donc que c'est assez clair. N'hésitez pas à poser des questions si j'ai mal explicité certains points.
Il faut poster à la suite pour voir les codes ~

Loukoum

PA avec Onglets - Ven 25 Sep 2015 - 12:13



Bonjour / Bonsoir chers amis de Never-Utopia!  :hug:  


Me voici ici pour vous laisser un petit code assez sympa de Page d'Accueil, codé par mes petites mains de A à Z!  :artiste:
Vous comprendrez donc que le crédit "PA de Loukoum sur Never-Utopia" est à laisser sous peine de mort...  :bandit:

A savoir que cette PA est une page HTLM, il faut donc être à l'aise avec ce genre de codes! A savoir aussi que votre page HTLM ne devra être modifiée qu'à l'aide de ce bouton Tag effet_hover sur Never Utopia - graphisme, codage et game design Editer-html et non de celui ci Tag effet_hover sur Never Utopia - graphisme, codage et game design Editer.
:nanere:   Donc si vous êtes déjà perdu, passez votre chemin.

Pour ceux qui sont trop fort  :cowboy:  nous allons passer au visuel =D
Et pour que tout soit parfait, voici la PA en pleine application ici =D

Donc pour ceux qui se sentent pousser des ailes, voilà les codes  :wesh:

Etape 1 - Notre PA
Voici donc le plus gros, la vrai PA!

Vous devez donc créer une nouvelle page HTLM (PA > Module > Gestion des Pages HTLM), mais faites bien attention à cliquer sur "Création en mode avancé (HTLM)" et non sur "Création en mode simple (WYSIWYG)"!!!

/!\ Les images pour les sabliers sont en 70x70. Si vous êtes à l'aise avec les codes, vous pouvez changer la taille. Mais si ce n'est pas le cas, comme il y a beaucoup de changement à faire, gardez cette taille (ou demandez de l'aide si vraiment vous voulez changer je vous mangerais pas)

Pour le contexte, il y a de quoi intégrer une vidéo. Pensez à mettre le lien mais aussi à changer la taille, qui est pour le moment réglé à 0x0!
Code:
<!DOCTYPE html>
<html>
<head>
  <base target="_blank" />
  <meta charset="UTF-8" />
  <title>Titre</title>
  <style>
/*Effet sur les mots soulignés*/
u {
  border-bottom: 2px dotted;
  border-color: #1d0e14;
  text-decoration: none;
}

/*Effet sur les mots en italique*/
i {
  border-bottom: none;
  color: #ad8c62;
  text-decoration: none;
  text-shadow: 1px 1px 1px #000;
}

/*Effets sur vos liens*/
a,a:link,a:visited,a:hover {
  text-decoration: none;
}

a {
  color: #C0A27B;
  font-family: Georgia;
  font-size: 10px;
  text-decoration: none;
}

a:hover {
  color: #00FFBF;
  font-size: 10px;
  font-family: Georgia;
  text-decoration: none;
}

a.lien,a.lien:link,a.lien:visited,a.lien:hover {
  text-decoration: none;
}

a.lien {
  font-size: 10px;
  font-family: Georgia;
  color: #C0A27B;
  text-shadow: 1px 1px 1px #000;
  text-decoration: none;
}

a.lien:hover {
  font-size: 10px;
  font-family: Georgia;
  color: #00FFBF;
  text-shadow: 1px 1px 1px #000;
  font-weight: bolder;
  text-decoration: none;
}

/*Affichage des Titres de votre PA*/
.titre {
  background: #E5D5BA;
  font-family: 'MV Boli';
  font-size: 15px;
  text-align: center;
  text-shadow: 1px 1px 0 #62584b;
  border: 2px solid #1d0e14;
  border-bottom: 2px dotted #1d0e14;
}

/*Les styles des différents cadres. Vous pouvez tout changer SAUF la taille, soit width et height*/
.staff {
  background: #E5D5BA;
  width: 310px;
  height: 140px;
  border: 2px solid #1d0e14;
  border-top: 0 dotted #1d0e14;
  padding: 10px;
}

/*Ces "info" sont les infobulles, vous pouvez donc changer la couleur et la taille. Normalement la position d'affichage ne doit pas être changée! L'info1 et info2 sont pour le Staff, et la 4 pour les Scénarios*/
.info1 {
  position: relative;
  z-index: 24;
  text-decoration: none;
  font-family: Georgia;
  font-size: 10px;
}

.info1:hover {
  z-index: 25;
}

.info1 span {
  display: none;
}

.info1:hover span {
  display: block;
  position: absolute;
  top: -41px;
  left: -3px;
  width: 105px;
  height: 50px;
  background-color: #ad8c62;
  color: #61574b;
  text-align: center;
  font-weight: none;
  font-family: Georgia;
  font-size: 10px;
  border-radius: 20%;
}

/*Ceci concerne l'image des infobulles*/
.imgwidget {
  border-radius: 20%;
  width: 100px;
  height: 50px;
  -moz-transition-duration: 1s;
  -moz-transition-timing-function: linear;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: linear;
  transition-duration: 1s;
  transition-timing-function: linear;
}

.info2 {
  position: relative;
  z-index: 24;
  text-decoration: none;
  font-family: Georgia;
  font-size: 10px;
}

.info2:hover {
  z-index: 25;
}

.info2 span {
  display: none;
}

.info2:hover span {
  display: block;
  position: absolute;
  top: -21px;
  left: 0;
  width: 100px;
  height: 30px;
  background-color: #ad8c62;
  color: #61574b;
  text-align: center;
  font-weight: none;
  font-family: Georgia;
  font-size: 10px;
}

.imgwidget1 {
  width: 100px;
  height: 30px;
  -moz-transition-duration: 1s;
  -moz-transition-timing-function: linear;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: linear;
  transition-duration: 1s;
  transition-timing-function: linear;
}

/*Ici on retrouve un code identique à notre complément de PA, alors touchez uniquement la même chose que tout à l'heure*/
.onglet {
  cursor: pointer;
  font-family: 'MV Boli';
  font-size: 15px;
  text-align: center;
  text-shadow: 1px 1px 0 #62584b;
  border: 2px solid #1d0e14;
  border-bottom: 2px dotted #1d0e14;
}

.onglet_0 {
  background: #E5D5BA;
  border-bottom: 2px solid #1d0e14;
}

.onglet_1 {
  background: #E5D5BA;
}

.contenu_onglet {
  background: #E5D5BA;
  display: none;
  width: 300px;
  height: 146px;
  padding: 8px;
  overflow: auto;
  border: 2px solid #1d0e14;
  color: #61574b;
  font-size: 12px;
  text-align: justify;
}

.wanted {
  background: #E5D5BA;
  width: 320px;
  height: 150px;
  padding: 5px;
  border: 2px solid #1d0e14;
  border-top: 0 dotted #1d0e14;
  text-align: center;
  font-family: Georgia;
  font-size: 10px;
  color: #61574b;
}

.info4 {
  position: relative;
  z-index: 24;
  text-decoration: none;
  font-family: Georgia;
  font-size: 10px;
}

.info4:hover {
  z-index: 25;
}

.info4 span {
  display: none;
}

.info4:hover span {
  display: block;
  position: absolute;
  top: -2em;
  left: -2em;
  width: 150px;
  background-color: #ad8c62;
  color: #61574b;
  text-align: center;
  font-weight: none;
  border: 2px solid #1d0e14;
  font-family: Georgia;
  font-size: 10px;
}

.imgwidget2 {
  border-radius: 50%;
  width: 65px;
  height: 65px;
  -moz-transition-duration: 1s;
  -moz-transition-timing-function: linear;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: linear;
  transition-duration: 1s;
  transition-timing-function: linear;
  -moz-transform: rotate(25deg);
  -webkit-transform: rotate(25deg);
  transform: rotate(25deg);
}

.imgwidget2:hover {
  border-radius: 50%;
  width: 65px;
  height: 65px;
  -moz-transform: rotate(-25deg);
  -webkit-transform: rotate(-25deg);
  transform: rotate(-25deg);
}

.tops {
  width: 141px;
  background: #E5D5BA;
  height: 150px;
  padding: 5px;
  border: 2px solid #1d0e14;
  border-top: 0 dotted #1d0e14;
  text-align: center;
  font-family: Georgia;
  font-size: 10px;
  color: #61574b;
  overflow: auto;
}

.news {
  background: #E5D5BA;
  width: 141px;
  height: 150px;
  padding: 5px;
  border: 2px solid #1d0e14;
  border-top: 0 dotted #1d0e14;
  text-align: justify;
  font-family: Georgia;
  font-size: 10px;
  color: #61574b;
  overflow: auto;
}

.meteo {
  background: #E5D5BA;
  width: 320px;
  height: 110px;
  padding: 5px;
  border: 2px solid #1d0e14;
  border-top: 0 dotted #1d0e14;
  text-align: justify;
  font-family: Georgia;
  font-size: 10px;
  color: #61574b;
  overflow: auto;
}

.imgwidget3 {
  border-radius: 50%;
  width: 100px;
  height: 100px;
  -moz-transition-duration: 1s;
  -moz-transition-timing-function: linear;
  -webkit-transition-duration: 1s;
  -webkit-transition-timing-function: linear;
  transition-duration: 1s;
  transition-timing-function: linear;
}

.systeme_paonglets {
  width: 300px;
  margin: auto;
  text-align: center;
}

.paonglets {
  text-align: center;
}

/*Le style d'affichage des paonglets*/
.paonglet {
  cursor: pointer;
  font-family: 'MV Boli';
  font-size: 15px;
  text-align: center;
  text-shadow: 1px 1px 0 #62584b;
  border: 2px solid #1d0e14;
  border-bottom: 2px dotted #1d0e14;
}

/*Ne pas toucher*/
.paonglet_0 {
  background: #E5D5BA;
  border-bottom: 2px solid #1d0e14;
}

/*Ne pas toucher*/
.paonglet_1 {
  background: #E5D5BA;
}

/*Le style d'affichage du contenu des paonglets*/
.contenu_paonglet {
  margin: auto;
  background: #E5D5BA;
  display: none;
  width: 300px;
/*Ne pas toucher*/
  height: 105px;
/*Ne pas toucher*/
  padding: 8px;
  overflow: auto;
  border: 2px solid #1d0e14;
  color: #61574b;
  font-size: 12px;
  text-align: justify;
}

/*Les codes qui suivent sont pour mon paonglet "Sablier", permettant de donner cet effet glissé sur les images et l'apparition du texte en dessous*/
.cate2 {
  width: 70px;
  height: 70px;
  overflow: hidden;
}

.cate2_img {
  position: relative;
  z-index: 2;
  width: 70px;
  height: 70px;
  margin-left: 0;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
  background-color: #ad8c62;
}

.cate2:hover .cate2_img {
  margin-left: 70px;
  transform: all;
  -moz-transform: all;
  -o-transform: all;
  -htm-transform: all;
  -webkit-transform: all;
  transition: 1s;
  -moz-transition: 1s;
  -o-transition: 1s;
  -htm-transition: 1s;
  -webkit-transition: 1s;
}

.cate2_description {
  position: relative;
  z-index: 1;
  width: 70px;
  height: 70x;
  margin-top: -70px;
  text-align: center;
  font-size: 11px;
  color: #FAF6F2;
  padding: 2px;
  overflow: auto;
}

/*modifier l'apparence des scrollbars de tout le forum*/
::-webkit-scrollbar {
  width: 5px;
/*largeur de la scrollbar verticale*/
  height: 5px;
/*hauteur de la scrollbar horizontale*/
  background-color: #ad8c62;
}

::-webkit-scrollbar-track {
  background-color: #ad8c62;
/*couleur du fond de la scrollbar*/
}

::-webkit-scrollbar-thumb {
/*la petite bande qui monte/descend*/
  background-color: /*couleur de l'ascenseur*/
#1d0e14;
}
  </style>
</head>
<body>
  <table align="center">
    <tr>
      <td>
        <div class="titre">
          Staff
        </div>
        <div class="staff">
          <span class="info1"><img class="imgwidget" src="IMAGE1" /> <span>TEXTE1 <a href="LIEN1" target="_blank">Profil</a> // <a href="LIEN1" target="_blank">MP</a></span></span>
          <span class="info1"><img class="imgwidget" src="IMAGE2" /> <span>TEXTE2 <a href="LIEN2" target="_blank">Profil</a> // <a href="LIEN2" target="_blank">MP</a></span></span>
          <span class="info1"><img class="imgwidget" src="IMAGE3" /> <span>TEXTE3 <a href="LIEN3" target="_blank">Profil</a> // <a href="LIEN3" target="_blank">MP</a></span></span><br />
          <span class="info1"><img class="imgwidget" src="IMAGE4" /> <span>TEXTE4 <a href="LIEN4" target="_blank">Profil</a> // <a href="LIEN4" target="_blank">MP</a></span></span>
          <span class="info1"><img class="imgwidget" src="IMAGE5" /> <span>TEXTE5 <a href="LIEN5" target="_blank">Profil</a> // <a href="LIEN5" target="_blank">MP</a></span></span>
          <span class="info1"><img class="imgwidget" src="IMAGE6" /> <span>TEXTE6 <a href="LIEN6" target="_blank">Profil</a> // <a href="LIEN6" target="_blank">MP</a></span></span><br />
          <div style="text-align: center;">
            <span class="info2"><img class="imgwidget1" src="IMAGE7" /> <span>TEXTE7 <a href="LIEN7" target="_blank">Profil</a> // <a href="LIEN7" target="_blank">MP</a></span></span>
            <span class="info2"><img class="imgwidget1" src="IMAGE8" /> <span>TEXTE8 <a href="LIEN8" target="_blank">Profil</a> // <a href="LIEN8" target="_blank">MP</a></span></span>
          </div>
        </div>
      </td>
      <td>
        <script type="text/javascript">
        //<!--
                function change_onglet(name)
                {
                        document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
                        document.getElementById('onglet_'+name).className = 'onglet_1 onglet';
                        document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
                        document.getElementById('contenu_onglet_'+name).style.display = 'block';
                        anc_onglet = name;
                }
        //-->
        </script>
        <div class="systeme_onglets">
          <div align="center" class="onglets">
            <span class="onglet_1 onglet" id="onglet_NomOnglet1" onclick="javascript:change_onglet('NomOnglet1');"> Contexte </span>  <span class="onglet_0 onglet" id="onglet_NomOnglet2" onclick="javascript:change_onglet('NomOnglet2');"> Chronologie </span>  <span class="onglet_0 onglet" id="onglet_NomOnglet3" onclick="javascript:change_onglet('NomOnglet3');"> Nos écoles </span> 
          </div>
          <div class="contenu_onglets">
            <div class="contenu_onglet" id="contenu_onglet_NomOnglet1">
              <!-- Debut 1er onglet -->
              <iframe allowfullscreen="" frameborder="0" src="LIEN%20VIDEO" style="width: 0px; height: 0px; float:left;"></iframe> ICI VOTRE CONTEXTE
            </div><!-- Fin 1er onglet -->
            <div class="contenu_onglet" id="contenu_onglet_NomOnglet2">
              <!-- Debut 2em onglet -->
              ICI VOTRE CHRONO SI VOUS EN AVEZ UNE
            </div><!-- Fin 2em onglet -->
            <div class="contenu_onglet" id="contenu_onglet_NomOnglet3">
              <!-- Debut 3em onglet -->
              SI COMME NOUS VOUS AVEZ D'AUTRES FORUMS OU ALORS TROUVEZ UNE UTILITE A CET ONGLET, OU SUPPRIMEZ LE TOUT SIMPLEMENT ^^
            </div><!-- Fin 3em onglet -->
            <script type="text/javascript">
            //<!--
                var anc_onglet = 'NomOnglet1';
                change_onglet(anc_onglet);
            //-->
            </script>
          </div>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="titre">
          On les veux
        </div>
        <div class="wanted">
         
          <span class="info4">
            <img class="imgwidget2" src="IMAGE1" /> <span>TEXTE1<br />
            <a class="postlink" href="LIEN1" rel="nofollow" target="_blank">ϟ En savoir plus ϟ</a></span>
          </span>
         
          <span class="info4">
            <img class="imgwidget2" src="IMAGE2" /> <span>TEXTE2<br />
            <a class="postlink" href="LIEN2" rel="nofollow" target="_blank">ϟ En savoir plus ϟ</a></span>
          </span>
         
          <span class="info4">
            <img class="imgwidget2" src="IMAGE3" /> <span>TEXTE3<br />
            <a class="postlink" href="LIEN3" rel="nofollow" target="_blank">ϟ En savoir plus ϟ</a></span>
          </span>
         
          <span class="info4">
            <img class="imgwidget2" src="IMAGE4" /> <span>TEXTE4<br />
            <a class="postlink" href="LIEN4" rel="nofollow" target="_blank">ϟ En savoir plus ϟ</a></span>
          </span><br />
         
          <span class="info4">
            <img class="imgwidget2" src="IMAGE5" /> <span>TEXTE5<br />
            <a class="postlink" href="LIEN5" rel="nofollow" target="_blank">ϟ En savoir plus ϟ</a></span>
          </span>
         
          <span class="info4">
            <img class="imgwidget2" src="IMAGE6" /> <span>TEXET6<br />
            <a class="postlink" href="LIEN6" rel="nofollow" target="_blank">ϟ En savoir plus ϟ</a></span>
          </span>
         
          <span class="info4">
            <img class="imgwidget2" src="IMAGE7" /> <span>IMAGE7<br />
            <a class="postlink" href="LIEN7" rel="nofollow" target="_blank">ϟ En savoir plus ϟ</a></span>
          </span>
         
          <span class="info4">
            <img class="imgwidget2" src="IMAGE8" /> <span>TEXTE8<br />
            <a class="postlink" href="LIEN8" rel="nofollow" target="_blank">ϟ En savoir plus ϟ</a></span>
          </span><br />
         
          <a class="postlink" href="LIEN" rel="nofollow" target="_blank">Découvrir plus de prédéfinis</a>
        </div>
      </td>
      <td>
        <table>
          <tr>
            <td>
              <div class="titre">
                Nos tops-sites
              </div>
              <div class="tops">
                VOS TOP SITES
              </div>
            </td>
            <td>
              <div class="titre">
                News
              </div>
              <div class="news">
                <span style="color: #E7D197;">¤ DATE -</span> VOTRE SUPER NOUVELLE
              </div>
            </td>
          </tr>
        </table>
      </td>
    </tr>
    <tr>
      <td>
        <div class="titre">
          Météo
        </div>
        <div class="meteo">
          <img class="imgwidget3" src="LIEN" style="float:left;" /> ICI SI VOUS VOULEZ METTRE LA METEO ET LA DATE A LAQUELLE SE DEROULE VOTRE RPG, VOUS POUVEZ =D
        </div>
      </td>
      <td>
        <script type="text/javascript">
        //<!--
                function change_paonglet(name)
                {
                        document.getElementById('paonglet_'+anc_paonglet).className = 'paonglet_0 paonglet';
                        document.getElementById('paonglet_'+name).className = 'paonglet_1 paonglet';
                        document.getElementById('contenu_paonglet_'+anc_paonglet).style.display = 'none';
                        document.getElementById('contenu_paonglet_'+name).style.display = 'block';
                        anc_paonglet = name;
                }
        //-->
        </script>
        <div class="systeme_paonglets">
          <span class="paonglet_1 paonglet" id="paonglet_NomPaonglet1" onclick="javascript:change_paonglet('NomPaonglet1');"> Partenaires </span>  <span class="paonglet_0 paonglet" id="paonglet_NomPaonglet2" onclick="javascript:change_paonglet('NomPaonglet2');"> Crédits </span>  <span class="paonglet_0 paonglet" id="paonglet_NomPaonglet3" onclick="javascript:change_paonglet('NomPaonglet3');"> Sabliers </span>
          <div class="contenu_paonglets">
            <!-- Debut 1er paonglet -->
            <div class="contenu_paonglet" id="contenu_paonglet_NomPaonglet1">
              Ici la liste de vos partenaires.
            </div><!-- Fin 1er paonglet -->
            <!-- Debut 2em paonglet -->
            <div class="contenu_paonglet" id="contenu_paonglet_NomPaonglet2">
              La PA a été réalisée par <a href="http://mondeandmagiev5.forumactif.org/" target="_blank">Loukoum</a> sur <a href="http://www.never-utopia.com/" target="_blank">Never-Utopia</a>.<br />
              Ici le reste de vos crédits
            </div><!-- Fin 2em paonglet -->
            <!-- Debut 3em paonglet -->
            <div class="contenu_paonglet" id="contenu_paonglet_NomPaonglet3">
              <table>
                <tr>
                  <td>
                    <div class="cate2">
                      <div class="cate2_img"><img src="IMAGE1" /></div>
                      <div class="cate2_description">
                        TEXTE 1
                      </div>
                    </div>
                  </td>
                  <td>
                    <div class="cate2">
                      <div class="cate2_img"><img src="IMAGE2" /></div>
                      <div class="cate2_description">
                        TEXTE 2
                      </div>
                    </div>
                  </td>
                  <td>
                    <div class="cate2">
                      <div class="cate2_img"><img src="IMAGE3" /></div>
                      <div class="cate2_description">
                        TEXTE 3
                      </div>
                    </div>
                  </td>
                  <td>
                    <div class="cate2">
                      <div class="cate2_img"><img src="IMAGE4" /></div>
                      <div class="cate2_description">
                        TEXTE 4
                      </div>
                    </div>
                  </td>
                </tr>
              </table>
              <div style="text-align: center;">
                ICI UN PETIT TEXTE SI VOUS LE VOULEZ
              </div>
            </div><!-- Fin 3em paonglet -->
          </div>
          <script type="text/javascript">
          //<!--
                var anc_paonglet = 'NomPaonglet1';
                change_paonglet(anc_paonglet);
          //-->
          </script>
        </div>
      </td>
    </tr>
  </table>
</body>
</html>



Etape 2 - Mettre la PA en place
Pour cela il vous suffit d'aller dans: PA > Affichage > Généralités, et de copier ce code =D
Code:
 
<div style="font-size: 40px; font-family: Mistral; text-align: center;">
                             Bienvenue sur TITRE DE VOTRE FORUM, {USERNAME} !                         
</div><br /><br /> 
<div style="font-size: 18px; font-family: 'Monotype Corsiva'; text-align: center;">
                             <a href="LIEN" class="postlink" target="_blank" rel="nofollow">~ Guide du débutant ~</a><br /><a rel="nofollow" target="_blank" class="postlink" href="LIEN">Le Règlement</a> ¤ <a rel="nofollow" target="_blank" class="postlink" href="LIEN">Le Contexte</a> ¤ <a rel="nofollow" target="_blank" class="postlink" href="LIEN">Le Bottin des Avatars</a> ¤ <a rel="nofollow" target="_blank" class="postlink" href="LIEN">Lien autre</a> ¤ <a rel="nofollow" target="_blank" class="postlink" href="LIEN">Lien autre</a> ¤ <a rel="nofollow" target="_blank" class="postlink" href="LIEN">Lien autre</a> 
</div>
  <iframe src="ICI LE LIEN DE LA PAGE HTLM DE VOTRE PA" frameborder="0" scrolling="no" style="margin: auto; width: 700px; height: 570px;"></iframe>


Et voilà =D
Félicitation pour avoir survécu   :friends:

Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
Vos commentaires et remerciements sont toujours bienvenus ^^
Si vous avez des problèmes avec ce LS, venez poster ici.

Invité

ChatBox en coin avec URL vers la grande CB - Lun 20 Juil 2015 - 15:23

{#}html{/#} {#}css{/#} {#}chatbox{/#} {#}effet_hover{/#} {#}auteur_Shaneliae{/#} {#}phpBB2{/#}

Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
Cette section est là pour vous, je ne répondrai à aucune question par MP ou posée à la suite du sujet.

[HTML5 & CSS3] - Boutons 'Nouveau' & 'Répondre' originaux - Ven 3 Juil 2015 - 16:23




Boutons 'Nouveau' & 'Répondre" originaux


Bonjour à tous ! Alors voici un petit ls concernant les boutons 'Nouveau' et 'Répondre' qui servent respectivement à créer un nouveau sujet et à répondre à un autre, mais ça, vous le saviez déjà.

C'est pourquoi j'ai choisi aujourd'hui de les placer un peu comme des widgets sur la page de visualisation des sujets et des messages.


Pour avoir un petit aperçu je vous invite à checker ce lien où les boutons sont en position fixe sur le côté du forum et où les boutons bougent pour se dévoiler à 100% quand on les survole.



Nous n'allons utiliser dans ce ls que les template 'viewforum_body' et 'viewtopic_body' ainsi que nos CSS.


Je vous rappelle que, vu que nous modifions les templates il sera necessaire que votre forum tourne sous PHPBB2.

Je tiens à rapeler aussi que les codeurs qui créent les ls et les tutoriels font ça bénévolement, il est donc normal que nous attention un crédit de Never Utopia sur vos forums. Merci  :toto:



Occupons-nous donc tout d'abord de nos deux templates. Dans le premier qui est 'viewforum_body' nous allons supprimer ce code qui apparaît deux fois:


Code:

<td align="left" valign="middle" width="50">
   <!-- BEGIN switch_user_logged_in -->
   <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}1" alt="{L_POST_NEW_TOPIC}" border="0" /></a>
   <!-- END switch_user_logged_in -->
</td>


Nous allons maintenant tout simplement intégrer ce code:


Code:

<span class="new_topic"><a href="{U_POST_NEW_TOPIC}"><img src="{POST_IMG}" alt="{L_POST_NEW_TOPIC}" class="new_topic_img"/></a></span>


Que vous pouvez placer n'importe ou dans votre template. Le mieux étant de le mettre à la première ou à la dernière ligne pour s'y retrouver.
Passons maintenant au second template, 'viewtopic_body'. Nous allons procéder de la même manière. Vous allez rechercher ce code qui apparaît deux fois également et que vous allez supprimer.


Code:

<td align="left" valign="middle" nowrap="nowrap">
   <span class="nav">
   <!-- BEGIN switch_user_authpost -->
   <a href="{U_POST_NEW_TOPIC}" rel="nofollow"><img src="{POST_IMG}" id="{POST_IMG_ID}one" alt="{L_POST_NEW_TOPIC}" align="middle" border="0" /></a>   
   <!-- END switch_user_authpost -->
   <!-- BEGIN switch_user_authreply -->
   <a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" id="i_reply" alt="{L_POST_REPLY_TOPIC}" align="middle" border="0" /></a>
   <!-- END switch_user_authreply -->
   </span>
</td>   


Et nous allons ensuite intégrer ce code que vous pouvez placer également n'importe où SAUF entre les balises et présentes dans ce template.


Code:

<span class="new_topic"><a href="{U_POST_NEW_TOPIC}"><img src="{POST_IMG}" alt="{L_POST_NEW_TOPIC}" class="new_topic_img"/></a></span>
<span class="reply"><a href="{U_POST_REPLY_TOPIC}"><img src="{REPLY_IMG}" alt="{L_POST_REPLY_TOPIC}" class="reply_img"/></a></span>


Vous pouvez maintenant enregistrer et publier vos templates, et nous allons s'occuper des CSS à présent. Un CSS ici qui n'est pas très compliqué et qui fait appel aux propriétés 'transform' et 'transition' de CSS3.


Code:
/* DEBUT MISE EN PAGE BOUTONS NEW ET REPLY - FANGS */

.new_topic {
  position: fixed;
  top: 15px;
  left: -20px;
  -webkit-transition: 1s;
  transition: 1s;
}

.new_topic:hover {
  left: 0px;
}

.reply {
  position: fixed;
  top: 75px;
  left: -20px;
  -webkit-transition: 1s;
  transition: 1s;
}

.reply:hover {
  left: 0px;
}

/* FIN MISE EN PAGE BOUTONS NEW ET REPLY - FANGS */


Une dernière chose avant de vous laisser personnaliser. Pour vos images 'Nouveau' et 'Répondre' que vous pouvez bien évidemment modifier dans les réglages de votre forum.
Et bien sur vous pouvez personnaliser ces codes à l'infini, mais je vous conseille d'avoir quelques notions en codage pour ne pas... tout casser ?



Si vous avez une question, je vous rappelle que cette section est disponible !



Revenir en haut

La date/heure actuelle est Jeu 28 Mar 2024 - 15:30