AccueilFAQRechercherMembresGroupesS'enregistrerConnexion

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


    QEEL trois parties avec image de fond

    NyoTheNeko
    NyoTheNeko
    FémininAge : 25Messages : 5018

    le Mar 22 Déc 2015 - 13:50

    Rappel du premier message :

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



    ptite_perle
    ptite_perle
    FémininAge : 55Messages : 125

    le Mar 9 Mai 2017 - 17:33

    Merci pour le partage



    QEEL trois parties avec image de fond - Page 3 Signature
    Kiryuu02
    Kiryuu02
    FémininAge : 30Messages : 32

    le Ven 12 Mai 2017 - 7:21

    merci pour le partage
    Amecia
    Amecia
    FémininAge : 22Messages : 106

    le Sam 13 Mai 2017 - 21:51

    Merci :)
    John:
    John:
    MasculinAge : 26Messages : 56

    le Mar 30 Mai 2017 - 8:53

    merci c'est beau Wink
    Momiji-chan
    Momiji-chan
    FémininAge : 21Messages : 38

    le Jeu 22 Juin 2017 - 23:01

    Merci :)
    YoshinoYuki
    YoshinoYuki
    FémininAge : 17Messages : 10

    le Ven 23 Juin 2017 - 20:41

    Merci Wink
    Jak SZ
    Jak SZ
    FémininAge : 29Messages : 217

    le Mar 11 Juil 2017 - 18:10

    Merci :love:
    Thanos
    Thanos
    MasculinAge : 23Messages : 84

    le Ven 18 Aoû 2017 - 16:00

    Merci
    joypolis
    joypolis
    MasculinAge : 30Messages : 387

    le Jeu 24 Aoû 2017 - 22:58

    Merci Very Happy



    QEEL trois parties avec image de fond - Page 3 653140Sanstitre003
    Deed01
    Deed01
    MasculinAge : 41Messages : 340

    le Dim 10 Sep 2017 - 19:07

    merci Very Happy
    Cassisse
    Cassisse
    FémininAge : 27Messages : 123

    le Jeu 14 Sep 2017 - 13:52

    Super jolie merci Very Happy
    nuanciel
    nuanciel
    FémininAge : 27Messages : 139

    le Ven 29 Déc 2017 - 14:24

    merci pour le partage !
    Dark Fairy
    Dark Fairy
    FémininAge : 21Messages : 239

    le Mer 28 Fév 2018 - 19:43

    Merci!
    Draly
    Draly
    FémininAge : 26Messages : 111

    le Dim 1 Avr 2018 - 16:39

    Cool <3
    Ookami Shiroi
    Ookami Shiroi
    FémininAge : 27Messages : 81

    le Sam 5 Mai 2018 - 16:18

    Merci beaucoup pour ce code.
    wofhellboys
    wofhellboys
    MasculinAge : 52Messages : 13

    le Lun 5 Aoû 2019 - 19:34

    Super !! Merci du partage !
    Contenu sponsorisé


      La date/heure actuelle est Sam 17 Aoû 2019 - 12:28