AccueilRechercherS'enregistrerConnexion

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

Le deal à ne pas rater :
Coffret Pokémon Ultra Premium Dracaufeu 2022 en français : où le ...
Voir le deal

    QEEL trois parties avec image de fond

    NyoTheNeko
    NyoTheNeko
    FémininAge : 28Messages : 5686

    Mar 22 Déc 2015 - 13:50

    QEEL



    Ceci est un code de profil crée suite à la Demande de DaZeli, ici.

    Pour PHPBB2 ▬ CSS3 & HTML5 ▬ Ce que ça donne


    Les effets et images


    L'image de fond est redimensionnée pour un forum à 850px de large, cependant, vous pouvez modifier cette valeur.
    Au passage de la souris sur les Groupes et les deux blocs, le fond devient opaque.

    PHPBB2: Le code


    Code HTML à placer dans Affichage -> Page d'accueil -> Templates -> Général -> index_body /!\ Attention!: C'est le template en entier! /!\ :

    Code:
    {JAVASCRIPT}
    <!-- BEGIN message_admin_index -->
    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
       <!-- BEGIN message_admin_titre -->
       <tr>
          <td class="catHead" height="28"><span class="cattitle">{message_admin_index.message_admin_titre.MES_TITRE}</span></td>
       </tr>
       <!-- END message_admin_titre -->
       <!-- BEGIN message_admin_txt -->
       <tr>
          <td class="row1" rowspan="3" align="center" valign="middle">
          <div class="gensmall">{message_admin_index.message_admin_txt.MES_TXT}</div>
          </td>
       </tr>
       <!-- END message_admin_txt -->
    </table>
    <!-- END message_admin_index -->

    <!-- BEGIN switch_user_login_form_header -->
    <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
       <!-- BEGIN switch_fb_connect_no -->
       <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
          <tr>
             <td class="row1" align="center">
                <table border="0" cellspacing="0" cellpadding="0">
                   <tr>
                      <td><span class="genmed">{L_USERNAME}:</span> </td>
                      <td><input class="post" type="text" size="10" name="username"/> </td>
                      <td>
                         <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                         <span class="gensmall">{L_AUTO_LOGIN}</span> 
                      </td>
                   </tr>

                   <tr>
                      <td><span class="genmed">{L_PASSWORD}:</span> </td>
                      <td><input class="post" type="password" size="10" name="password"/> </td>
                      <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                   </tr>
                </table>
             </td>
          </tr>
       </table>
       <!-- END switch_fb_connect_no -->

       <!-- BEGIN switch_fb_connect -->
       <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
          <tr>
             <td valign="top" width="100%" class="row1" align="center">
                <table width="100%">
                   <tr>
                      <td width="55%" valign="middle" align="right">
                         <table class="right">
                            <tr>
                               <td><span class="genmed">{L_USERNAME}:</span> </td>
                               <td><input class="post" type="text" size="10" name="username"/> </td>
                               <td>
                                  <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                                  <span class="gensmall">{L_AUTO_LOGIN}</span> 
                               </td>
                            </tr>

                            <tr>
                               <td><span class="genmed">{L_PASSWORD}:</span> </td>
                               <td><input class="post" type="password" size="10" name="password"/> </td>
                               <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                            </tr>
                         </table>
                      </td>
                      <td width="10%" align="center" valign="middle">
                         <span class="genmed fb_or">{switch_user_login_form_header.switch_fb_connect.L_OR}</span>
                      </td>
                      <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
                   </tr>
                </table>
             </td>
          </tr>
       </table>
       <!-- END switch_fb_connect -->
    </form>
    <!-- END switch_user_login_form_header -->
    {CHATBOX_TOP}
    {BOARD_INDEX}
    <table width="100%" border="0" cellspacing="0" cellpadding="0">
       <tr>
          <td width="50%" valign="top">
             <!-- BEGIN switch_user_logged_in -->
             <span class="gensmall"><a href="{U_MARK_READ}" class="gensmall">{L_MARK_FORUMS_READ}</a></span>
             <!-- END switch_user_logged_in -->
             <!-- BEGIN switch_delete_cookies -->
             <br /><span class="gensmall"><a href="{switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_delete_cookies.L_DELETE_COOKIES}</a></span>
             <!-- END switch_delete_cookies -->
          </td>
          <td width="50%" align="right">
             <span class="gensmall">
                <a href="{U_TODAY_ACTIVE}" class="gensmall">{L_TODAY_ACTIVE}</a><br />
                <a href="{U_TODAY_POSTERS}" class="gensmall">{L_TODAY_POSTERS}</a><br />
                <a href="{U_OVERALL_POSTERS}" class="gensmall">{L_OVERALL_POSTERS}</a>
                <!-- BEGIN switch_on_index -->
                   <!-- BEGIN switch_delete_cookies -->
                   <br /><a href="{switch_on_index.switch_delete_cookies.U_DELETE_COOKIES}" class="gensmall" rel="nofollow">{switch_on_index.switch_delete_cookies.L_DELETE_COOKIES}</a>
                   <!-- END switch_delete_cookies -->
                <!-- END switch_on_index -->
             </span>
          </td>
       </tr>
    </table>

    <!-- BEGIN switch_user_login_form_footer -->
    <form action="{S_LOGIN_ACTION}" method="post" name="form_login">
       <!-- BEGIN switch_fb_connect_no -->
       <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
          <tr>
             <td class="row1" align="center">
                <table border="0" cellspacing="0" cellpadding="0">
                   <tr>
                      <td><span class="genmed">{L_USERNAME}:</span> </td>
                      <td><input class="post" type="text" size="10" name="username"/> </td>
                      <td>
                         <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                         <span class="gensmall">{L_AUTO_LOGIN}</span> 
                      </td>
                   </tr>

                   <tr>
                      <td><span class="genmed">{L_PASSWORD}:</span> </td>
                      <td><input class="post" type="password" size="10" name="password"/> </td>
                      <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                   </tr>
                </table>
             </td>
          </tr>
       </table>
       <!-- END switch_fb_connect_no -->

       <!-- BEGIN switch_fb_connect -->
       <table width="100%" border="0" cellspacing="0" cellpadding="0" class="user_login_form forumline">
          <tr>
             <td valign="top" width="100%" class="row1" align="center">
                <table width="100%">
                   <tr>
                      <td width="55%" valign="middle">
                         <table class="right">
                            <tr>
                               <td><span class="genmed">{L_USERNAME}:</span> </td>
                               <td><input class="post" type="text" size="10" name="username"/> </td>
                               <td>
                                  <input class="radio" type="checkbox" name="autologin" {AUTOLOGIN_CHECKED} />
                                  <span class="gensmall">{L_AUTO_LOGIN}</span> 
                               </td>
                            </tr>

                            <tr>
                               <td><span class="genmed">{L_PASSWORD}:</span> </td>
                               <td><input class="post" type="password" size="10" name="password"/> </td>
                               <td>{S_HIDDEN_FIELDS}<input class="mainoption" type="submit" name="login" value="{L_LOGIN}" /></td>
                            </tr>
                         </table>
                      </td>
                      <td width="10%" align="center" valign="middle">
                         <span class="genmed fb_or">{switch_user_login_form_footer.switch_fb_connect.L_OR}</span>
                      </td>
                      <td width="35%" class="align_gauche"><fb:login-button size="large" onlogin="window.location='/facebook_connect.forum'" scope="{switch_user_login_form_footer.switch_fb_connect.L_FB_PERMISSIONS}">{switch_user_login_form_footer.switch_fb_connect.L_FB_LOGIN_BUTTON}</fb:login-button></td>
                   </tr>
                </table>
             </td>
          </tr>
       </table>
       <!-- END switch_fb_connect -->
    </form>
    <!-- END switch_user_login_form_footer -->

    <!-- BEGIN disable_viewonline -->
    <div id="qeel">
      <div id="titre_principal">Who's Online?</div>
      <div class="carre_principal">
        <span class="gensmall dernier_user">{NEWEST_USER}</span>
        <span class="gensmall users_now">
          {TOTAL_USERS_ONLINE}. {RECORD_USERS}
        </span>
        <span class="gensmall users_now">{LOGGED_IN_USER_LIST}</span>
        <table id="users_before">{L_CONNECTED_MEMBERS}</table>
      </div>
      <div id="carre_groupes">{GROUP_LEGEND}</div>
      <div class="carre_principal">
        <span class="gensmall">{TOTAL_POSTS}. {TOTAL_USERS}</span>
      </div>
    </div>
    <!-- END disable_viewonline -->
    {CHATBOX_BOTTOM}
    <br clear="all" />
    <!-- BEGIN switch_legend -->
    <table border="0" cellspacing="3" cellpadding="0" align="center">
       <tr>
          <td align="center" width="20"><img src="{FORUM_NEW_IMG}" alt="{L_NEW_POSTS}" /></td>
          <td><span class="gensmall">{L_NEW_POSTS}</span></td>
          <td></td>
          <td align="center" width="20"><img src="{FORUM_IMG}" alt="{L_NO_NEW_POSTS}" /></td>
          <td><span class="gensmall">{L_NO_NEW_POSTS}</span></td>
          <td> &nbsp;</td>
          <td align="center" width="20"><img src="{FORUM_LOCKED_IMG}" alt="{L_FORUM_LOCKED}" /></td>
          <td><span class="gensmall">{L_FORUM_LOCKED}</span></td>
       </tr>
    </table>
    <!-- END switch_legend -->

    {AUTO_DST}

    <!-- BEGIN switch_fb_index_login -->
    <div id="fb-root"></div>
    <script>
        FB.init({
          appId      : {switch_fb_index_login.FACEBOOK_APP_ID},
          cookie    : true,
          xfbml      : true,
          oauth      : true,
          version    : 'v2.3'
        });

      (function(d, s, id){
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) {return;}
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/sdk.js";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));
    </script>
    <!-- END switch_fb_index_login -->


    Le CSS:

    Code:
    /************************************************ QEEL ************************************************/
    /* Permet que les bords du QEEL touchent les bords du forum */
    .bodyline { padding: 0px; }

    /* Fait en sorte que les catégories, la Pa et toutle reste ne touchent pas les bords du forum. À retirer si c'est un effet voulu. */
    .forumline { max-width: 90%; margin: auto; }

    #qeel * { box-sizing: border-box; }

    /* Mise en place du QEEL */
    #qeel {
      background: url('http://static.zerochan.net/Canada.full.805469.jpg');
      /* Donne la taille de l'image de fond. À modifier sleon la largeur du forum. */
      background-size: 850px;
      height: 400px;
      margin-top: 30px;
      text-align: center;
    }

    /* Mise en palce et forme du titre du QEEL */
    #qeel #titre_principal {
      background: black;
      color: white;
      font-size: 50px;
      line-height: 150%;
      text-align: center;
      margin-bottom: 10px;
    }

    /* Mise en forme et palce des deux carrés, à gauche et à droite, contenant les infos. */
    #qeel .carre_principal {
      display: inline-block;
      vertical-align: middle;
      margin: 10px;
      border: 2px solid black;
      width: 280px;
      height: 295px;
      padding: 20px;
      text-align: justify;
      background: rgba(255, 255, 255, 0.6);
      transition: all ease 0.5s;
    }

    /* Au passage de la sourics, ces carrés deviennent opaques. */
    #qeel .carre_principal:hover {
      background: rgba(255, 255, 255, 1);
      transition: all ease 0.5s;
    }

    /* Met en frome les denriers connectés pour qu'il ne dépasse pas une certaine hauteur et ait un overflow auto. */
    #qeel .carre_principal #users_before td.row1 {
      background: none !important;
      height: 180px;
      margin: 0;
      overflow: auto;
      padding: 0;
      vertical-align: top;
    }

    /* Fait en sorte qu'il y ait de retours à la ligne pour chaque info  */
    #qeel .carre_principal .gensmall { display: block; }

    /* Mise en palce des groupes au centre */
    #qeel #carre_groupes {
      display: inline-block;
      vertical-align: middle;
      margin: 10px;
      width: 190px;
      max-height: 295px;
      font-size: 0px;
    }

    /* Mise en forme de chaque carré de groupe. */
    #qeel #carre_groupes a {
      display: block;
      border: 2px solid black;
      margin-bottom: 5px;
      padding: 5px;
      background: rgba(255, 255, 255, 0.6);
      text-decoration: none !important;
      transition: all ease 0.5s;
    }

    /* Rend le fond opaque au passage de la souris sur un groupe. */
    #qeel #carre_groupes a:hover {
      background: rgba(255, 255, 255, 1);
      text-decoration: none !important;
      transition: all ease 0.5s;
    }

    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 ^^



    Kelalin
    Kelalin
    FémininAge : 29Messages : 2575

    Mar 22 Déc 2015 - 14:29

    Merci pour le partage ! ∩( ・ω・)∩
    Angie Harkness
    Angie Harkness
    FémininAge : 38Messages : 725

    Mar 19 Jan 2016 - 14:34

    merci Nyo elle est superbe^^
    patriciadpt30
    patriciadpt30
    FémininAge : 59Messages : 240

    Dim 24 Jan 2016 - 16:27

    Ho merci beaucoup :)



    Patricia :)
    Mme Layton
    Mme Layton
    FémininAge : 25Messages : 93

    Sam 26 Mar 2016 - 15:28

    Merci ! :)
    Fuyuka
    Fuyuka
    FémininAge : 27Messages : 63

    Mer 6 Avr 2016 - 22:50

    Merciiiii
    marie-noelle
    marie-noelle
    FémininAge : 64Messages : 112

    Jeu 7 Avr 2016 - 0:44

    merci pour ce modèle
    Hancok
    Hancok
    FémininAge : 38Messages : 1374

    Sam 9 Avr 2016 - 15:20

    Coucou, merci du partage, très sympa.




    QEEL trois parties avec image de fond A67g
    Inwë
    Inwë
    FémininAge : 23Messages : 36

    Ven 15 Avr 2016 - 14:51

    j'aime *^* merci !
    Tatia38
    Tatia38
    FémininAge : 33Messages : 310

    Mer 27 Avr 2016 - 22:46

    sublime code merci
    Pyramids.
    Pyramids.
    FémininAge : 29Messages : 8

    Jeu 28 Avr 2016 - 0:12

    cheers merci
    Depp
    Depp
    FémininAge : 31Messages : 301

    Mar 3 Mai 2016 - 18:43

    merci :)



    QEEL trois parties avec image de fond Tumblr_nenygwIlcz1s4u464o1_500
    -Resis
    -Resis
    MasculinAge : 26Messages : 25

    Mer 11 Mai 2016 - 20:34

    mci
    avatar
    Nal Souclade
    MasculinAge : 23Messages : 167

    Dim 22 Mai 2016 - 22:11

    Simple et efficace ! Merci !
    pépito1989
    pépito1989
    FémininAge : 32Messages : 9

    Jeu 9 Juin 2016 - 15:14

    Merci
    Wanda Maximoff
    Wanda Maximoff
    FémininAge : 28Messages : 80

    Jeu 16 Juin 2016 - 21:25

    Merci ! ♥
    Madras
    Madras
    FémininAge : 37Messages : 284

    Mer 29 Juin 2016 - 17:10

    Merci
    Doku
    Doku
    FémininAge : 27Messages : 70

    Mer 13 Juil 2016 - 23:01

    Merci du partage ♥
    Leelo
    Leelo
    FémininAge : 31Messages : 157

    Jeu 14 Juil 2016 - 17:57

    merci c'est jolie
    Aubenaissante
    Aubenaissante
    MasculinAge : 36Messages : 15

    Lun 8 Aoû 2016 - 9:55

    uppp enfin un queel qui me plait merci !
    Sparryx
    Sparryx
    MasculinAge : 20Messages : 71

    Lun 8 Aoû 2016 - 12:25

    Merciiiiiiiii
    Cythère
    Cythère
    FémininAge : 33Messages : 39

    Mer 17 Aoû 2016 - 18:17

    merci :)
    mymywilliamss
    mymywilliamss
    FémininAge : 29Messages : 11

    Mer 17 Aoû 2016 - 23:06

    merci beaucoup Wink
    Emanon
    Emanon
    MasculinAge : 27Messages : 26

    Lun 29 Aoû 2016 - 18:00

    Merci. =)
    Lilynufare
    Lilynufare
    FémininAge : 31Messages : 341

    Sam 17 Sep 2016 - 19:08

    merci
    Contenu sponsorisé


      La date/heure actuelle est Ven 19 Aoû 2022 - 13:28