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.

Le Deal du moment : -25%
PC Portable Gamer 16,1” HP Victus 16 – 16 ...
Voir le deal
749.99 €

    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
    Naoto Hiyaru
    Naoto Hiyaru
    MasculinAge : 28Messages : 15

    Dim 18 Sep 2016 - 15:04

    Arigatooo \O/
    • Revenir en haut
    Aladiah
    Aladiah
    FémininAge : 27Messages : 58

    Dim 18 Sep 2016 - 15:19

    J'adore merci du partage
    • Revenir en haut
    missp
    missp
    FémininAge : 34Messages : 26

    Lun 19 Sep 2016 - 2:26

    merci
    • Revenir en haut
    PrincesseÔ
    PrincesseÔ
    FémininAge : 27Messages : 220

    Mar 20 Sep 2016 - 13:55

    Merci **
    • Revenir en haut
    Tchii
    Tchii
    FémininAge : 38Messages : 285

    Dim 16 Oct 2016 - 17:24

    Coucou!
    Merci pour ce travail.
    A trés vite!
    Tchii.
    • Revenir en haut
    Angy38
    Angy38
    FémininAge : 54Messages : 233

    Ven 28 Oct 2016 - 9:47

    Merci



    QEEL trois parties avec image de fond - Page 2 Jvie
    • Revenir en haut
    Tink ♥
    Tink ♥
    FémininAge : 32Messages : 66

    Jeu 3 Nov 2016 - 17:25

    thanks boy ! Wink
    • Revenir en haut
    Domori
    Domori
    MasculinAge : 32Messages : 32

    Mer 9 Nov 2016 - 11:27

    Merci Wink
    • Revenir en haut
    Mozart
    Mozart
    FémininAge : 30Messages : 54

    Ven 11 Nov 2016 - 21:12

    Vraiment joli ! merci du partage :)



    QEEL trois parties avec image de fond - Page 2 Tumblr_mjdkx9iT191r24z09o1_500
    • Revenir en haut
    Kanae
    Kanae
    FémininAge : 32Messages : 354

    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.

    • Revenir en haut
    Viou
    Viou
    FémininAge : 35Messages : 181

    Jeu 15 Déc 2016 - 15:33

    Merci du partage c'est exactement ce que je cherchais **
    • Revenir en haut
    warning.sign
    warning.sign
    FémininAge : 34Messages : 58

    Jeu 15 Déc 2016 - 15:42

    merci beaucoup **
    • Revenir en haut
    missphan
    missphan
    FémininAge : 41Messages : 156

    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.
    • Revenir en haut
    Likilou
    Likilou
    MasculinAge : 31Messages : 309

    Lun 6 Fév 2017 - 18:45

    Merci



    QEEL trois parties avec image de fond - Page 2 707828SignArthur2
    • Revenir en haut
    Maxine Evans
    Maxine Evans
    FémininAge : 30Messages : 94

    Lun 13 Fév 2017 - 10:31

    merci (:
    • Revenir en haut
    Hybris
    Hybris
    MasculinAge : 37Messages : 308

    Lun 27 Fév 2017 - 1:12

    Merci, c'est super !
    • Revenir en haut
    mijako
    mijako
    FémininAge : 32Messages : 83

    Lun 27 Fév 2017 - 7:47

    merci
    • Revenir en haut
    Solitude
    Solitude
    FémininAge : 49Messages : 294

    Sam 4 Mar 2017 - 14:41

    merci



    ~ Je suis capable du meilleur comme du pire, mais dans le pire c'est moi la meilleure. ~
    QEEL trois parties avec image de fond - Page 2 Sign510
    • Revenir en haut
    ArgelTown
    ArgelTown
    MasculinAge : 25Messages : 23

    Mar 4 Avr 2017 - 22:14

    Mercciii
    • Revenir en haut
    Moonday Girl
    Moonday Girl
    FémininAge : 37Messages : 9

    Mer 5 Avr 2017 - 13:56

    Merci du partage ♥
    • Revenir en haut
    Lisou
    Lisou
    FémininAge : 24Messages : 351

    Jeu 6 Avr 2017 - 17:48

    Merci *^*
    • Revenir en haut
    Lilandrile
    Lilandrile
    FémininAge : 38Messages : 60

    Lun 10 Avr 2017 - 18:42

    merci pour le partage :)
    • Revenir en haut
    Eshon
    Eshon
    FémininAge : 43Messages : 197

    Ven 14 Avr 2017 - 0:08

    Merci !
    • Revenir en haut
    Sakura Sinister
    Sakura Sinister
    FémininAge : 38Messages : 35

    Ven 21 Avr 2017 - 8:28

    Merci Very Happy
    • Revenir en haut
    Egyfu
    Egyfu
    FémininAge : 31Messages : 56

    Sam 22 Avr 2017 - 14:43

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