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.

-67%
Le deal à ne pas rater :
Carte Fnac+ à 4,99€ au lieu de 14,99€ (nouveaux clients / ...
4.99 € 14.99 €
Voir le deal

    QEEL trois parties avec image de fond

    NyoTheNeko
    NyoTheNeko
    FémininAge : 30Messages : 5683

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



    • Revenir en haut
    ptite_perle
    ptite_perle
    FémininAge : 61Messages : 128

    Mar 9 Mai 2017 - 17:33

    Merci pour le partage



    QEEL trois parties avec image de fond - Page 3 Signature
    • Revenir en haut
    Kiryuu02
    Kiryuu02
    FémininAge : 35Messages : 32

    Ven 12 Mai 2017 - 7:21

    merci pour le partage
    • Revenir en haut
    Amecia
    Amecia
    FémininAge : 28Messages : 107

    Sam 13 Mai 2017 - 21:51

    Merci :)
    • Revenir en haut
    John:
    John:
    MasculinAge : 31Messages : 56

    Mar 30 Mai 2017 - 8:53

    merci c'est beau Wink
    • Revenir en haut
    Momiji-chan
    Momiji-chan
    FémininAge : 26Messages : 38

    Jeu 22 Juin 2017 - 23:01

    Merci :)
    • Revenir en haut
    YoshinoYuki
    YoshinoYuki
    FémininAge : 22Messages : 10

    Ven 23 Juin 2017 - 20:41

    Merci Wink
    • Revenir en haut
    Jak SZ
    Jak SZ
    FémininAge : 34Messages : 217

    Mar 11 Juil 2017 - 18:10

    Merci :love:
    • Revenir en haut
    Thanos
    Thanos
    MasculinAge : 28Messages : 84

    Ven 18 Aoû 2017 - 16:00

    Merci
    • Revenir en haut
    joypolis
    joypolis
    MasculinAge : 35Messages : 387

    Jeu 24 Aoû 2017 - 22:58

    Merci Very Happy



    QEEL trois parties avec image de fond - Page 3 653140Sanstitre003
    • Revenir en haut
    Deed01
    Deed01
    MasculinAge : 47Messages : 343

    Dim 10 Sep 2017 - 19:07

    merci Very Happy
    • Revenir en haut
    Cassisse
    Cassisse
    FémininAge : 32Messages : 130

    Jeu 14 Sep 2017 - 13:52

    Super jolie merci Very Happy
    • Revenir en haut
    nuanciel
    nuanciel
    FémininAge : 33Messages : 139

    Ven 29 Déc 2017 - 14:24

    merci pour le partage !
    • Revenir en haut
    Dark Fairy
    Dark Fairy
    FémininAge : 26Messages : 244

    Mer 28 Fév 2018 - 19:43

    Merci!
    • Revenir en haut
    Draly
    Draly
    FémininAge : 32Messages : 120

    Dim 1 Avr 2018 - 16:39

    Cool <3
    • Revenir en haut
    Ookami Shiroi
    Ookami Shiroi
    FémininAge : 32Messages : 90

    Sam 5 Mai 2018 - 16:18

    Merci beaucoup pour ce code.
    • Revenir en haut
    wofhellboys
    wofhellboys
    MasculinAge : 57Messages : 24

    Lun 5 Aoû 2019 - 19:34

    Super !! Merci du partage !
    • Revenir en haut
    Gaeriel
    Gaeriel
    FémininAge : 33Messages : 45

    Dim 5 Avr 2020 - 14:37

    Merci ! ^^
    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Jeu 21 Nov 2024 - 10:11