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

    Partagez
    avatar
    NyoTheNeko
    FémininAge : 24Messages : 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 ^^



    avatar
    Naoto Hiyaru
    MasculinAge : 22Messages : 15

    le Dim 18 Sep 2016 - 15:04

    Arigatooo \O/
    avatar
    Aladiah
    FémininAge : 21Messages : 58

    le Dim 18 Sep 2016 - 15:19

    J'adore merci du partage
    avatar
    missp
    FémininAge : 27Messages : 26

    le Lun 19 Sep 2016 - 2:26

    merci
    avatar
    Piratress
    FémininAge : 20Messages : 215

    le Mar 20 Sep 2016 - 13:55

    Merci **
    avatar
    Tchii
    FémininAge : 32Messages : 251

    le Dim 16 Oct 2016 - 17:24

    Coucou!
    Merci pour ce travail.
    A trés vite!
    Tchii.
    avatar
    Angy38
    FémininAge : 48Messages : 212

    le Ven 28 Oct 2016 - 9:47

    Merci



    avatar
    Tink ♥
    FémininAge : 25Messages : 48

    le Jeu 3 Nov 2016 - 17:25

    thanks boy ! Wink
    avatar
    Domori
    MasculinAge : 26Messages : 32

    le Mer 9 Nov 2016 - 11:27

    Merci Wink
    avatar
    Mozart
    FémininAge : 23Messages : 52

    le Ven 11 Nov 2016 - 21:12

    Vraiment joli ! merci du partage :)



    avatar
    Kanae
    FémininAge : 26Messages : 350

    le Lun 14 Nov 2016 - 11:08

    Merci beaucoup pour ce Ls !
    Dommage que le code implique de copier/coller le template entier. Il aurait mieux valu cibler les éléments à modifier car cela rend le LS vraiment difficile d'utilisation pour ceux qui auraient déjà modifier leur template et ne veulent pas perdre le bénéfice de leurs modifications précédentes.

    avatar
    Viou
    FémininAge : 29Messages : 178

    le Jeu 15 Déc 2016 - 15:33

    Merci du partage c'est exactement ce que je cherchais **
    avatar
    warning.sign
    FémininAge : 27Messages : 58

    le Jeu 15 Déc 2016 - 15:42

    merci beaucoup **
    avatar
    missphan
    FémininAge : 35Messages : 156

    le Mar 10 Jan 2017 - 15:12

    merci =)



    + my personal brand of heroin
    You’re none of them because you’re all of them. Now that we found each other, you’ve given my past and future meaning. You are the sixth. You are the last. ©endlesslove.
    avatar
    Likilou
    MasculinAge : 24Messages : 301

    le Lun 6 Fév 2017 - 18:45

    Merci



    avatar
    Maxine Evans
    FémininAge : 23Messages : 94

    le Lun 13 Fév 2017 - 10:31

    merci (:
    avatar
    Hybris
    MasculinAge : 31Messages : 308

    le Lun 27 Fév 2017 - 1:12

    Merci, c'est super !
    avatar
    mijako
    FémininAge : 25Messages : 83

    le Lun 27 Fév 2017 - 7:47

    merci
    avatar
    Solitude
    FémininAge : 43Messages : 285

    le Sam 4 Mar 2017 - 14:41

    merci



    ~ Je suis capable du meilleur comme du pire, mais dans le pire c'est moi la meilleure. ~
    avatar
    ArgelTown
    MasculinAge : 18Messages : 23

    le Mar 4 Avr 2017 - 22:14

    Mercciii
    avatar
    Moonday Girl
    FémininAge : 30Messages : 8

    le Mer 5 Avr 2017 - 13:56

    Merci du partage ♥
    avatar
    Lisou
    FémininAge : 17Messages : 303

    le Jeu 6 Avr 2017 - 17:48

    Merci *^*
    avatar
    Lilandrile
    FémininAge : 32Messages : 58

    le Lun 10 Avr 2017 - 18:42

    merci pour le partage :)
    avatar
    Eshon
    FémininAge : 37Messages : 194

    le Ven 14 Avr 2017 - 0:08

    Merci !
    avatar
    Sakura Sinister
    FémininAge : 31Messages : 35

    le Ven 21 Avr 2017 - 8:28

    Merci Very Happy
    avatar
    Egyfu
    FémininAge : 24Messages : 46

    le Sam 22 Avr 2017 - 14:43

    Merci :)
    Contenu sponsorisé


      La date/heure actuelle est Sam 26 Mai 2018 - 11:39