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 de la nuit en divers blocs et hover

    Partagez
    avatar
    Halloween
    FémininAge : 24Messages : 9752

    le Sam 1 Nov 2014 - 18:38



    Plop,

    Un QEEL assez simpliste mais sympa tout de même (j'espère xD) basé sur la demande de RainbowPanda. Les crédits apparaissent au survol de l'illustration de Newt (de taille 330*134px, et des info-bulles apparaissent au survol des groupes Wink


    /!\ Je rappelle que cette section existe en cas de problème, je ne réponds pas aux MP (et encore moins quand ils sont rageux !).



    Qui est en ligne ?


    Versions HTML ▬ Iframe

    Aperçu classique ▬ www | Aperçu au survol ▬ www



    Dans le CSS
    Code:
        /* ------------------------------- QEEL -------------------------------*/

        /* FOND DU QEEL */
        .fond_qeel {
          background-image: url('http://i59.tinypic.com/2i8it93.png');
          width: 900px;
          height: 416px;
          position: relative;
          margin: auto;
          font-family: 'Fjalla One', sans-serif;
        }

        /* MISE EN FORME DES LIENS DU QEEL */
        .fond_qeel a {
          text-decoration: none;
          font-weight: none;
        }

        /* BLOC DERNIER INSCRIT */
        .bloc1 {
          background-color: #393F57;
          width: 300px;
          color: #1F2133;
          font-size: 25px;
          font-family: 'Fjalla One', sans-serif;
          top: 0.55em;
          left: 3.4em;
          position: absolute;
          padding: 15px;
        }

        /* MISE EN FORME DERNIER INSCRIT */
        #yosh {
          float: right;
          font-size: 18px;
          color: #4C8E68;
        }

        /* MISE EN FORME NOMBRE DE MEMBRES */
        #matt {
          float: right;
          font-size: 18px;
          color: #4C8E68;
        }

        /* MISE EN FORME BLOC STATISTIQUES */
        .bloc2 {
          background-color: #393F57;
          width: 530px;
          color: #1F2133;
          font-size: 16px;
          font-family: 'Fjalla One', sans-serif;
          bottom: 1em;
          left: 5em;
          position: absolute;
          padding: 15px;
        }

        /* MISE EN FORME DERNIERS CONNECTES */
        #kaboum .row1 {
          background-color : transparent;
        }

        #kaboum span.gensmall {
          font-size: 18px;
          color: #1F2133;
          font-family: 'Fjalla One', sans-serif;
        }

        /* MISE EN FORME BLOC DERNIERS CONNECTES */
        .bloc4 {
          width: 180px;
          height: 270px;
          overflow: auto;
          text-align: justify;
          padding: 15px;
          background-color: #393F57;
          color: #1F2133;
          position: absolute;
          top: 0.85em;
          left: 26.9em;
        }

        /* POSITIONNEMENT DES GROUPES */
        .bloc3 {
          position: absolute;
          width: 184px;
          height: 416px;
          right: 0em;
          text-align: center;
        }

        /* INFOBULLES DES GROUPES */
        .Infobulle {
          position: relative;
          font-size: 30px;
        }
         
        .Infobulle .Infobulle_contenu {
          position : absolute;
          z-index: 1;
          right: -0.05em;
          width : 170px;
          height: 80px;
          overflow: auto;
          font-family: arial;
          font-size: 12px;
          background-color: #393F57;
          padding: 5px;
          color: #CCCCCC;
          text-align: justify;
          display : none;
        }

        .Infobulle:hover .Infobulle_contenu {
          display : block; /*Fait apparaître l'infobulle*/
        }

        /* MISE EN FORME DEFILEMENT IMAGE → CREDITS */
        .qeel {
          width: 330px;
          height: 134px;
          overflow: hidden;
          position: absolute;
          left: 5.3em;
          background-color: #393F57;
          top: 11.2em;
        }

        .qeel_img {
          position: relative;
          z-index: 2;
          width: 330px;
          height: 134px;
          margin-left: 0px;
          transform: all;
          -moz-transform: all;
          -o-transform: all;
          -htm-transform: all;
          -webkit-transform: all;
          transition: 1s;
          -moz-transition: 1s;
          -o-transition: 1s;
          -htm-transition: 1s;
          -webkit-transition: 1s;
        }

        .qeel:hover .qeel_img {
          margin-left: 400px;
          transform: all;
          -o-transform: all;
          -moz-transform: all;
          -htm-transform: all;
          -webkit-transform: all;
          transition: 1s;
          -moz-transition: 1s;
          -o-transition: 1s;
          -htm-transition: 1s;
          -webkit-transition: 1s;
        }

        .qeel_description {
          position: relative;
          z-index: 1;
          width: 300px;
          height: 134px;
          margin-top: -130px;
          text-align: justify;
          font-size: 15px;
          color: #292C40;
          padding: 15px;
          overflow: auto;
          font-family: 'Fjalla One', sans-serif;
        }

        /* ------------------------------- FIN QEEL -------------------------------*/

    Dans le template Index_Body, remplacez
    Code:
        <!-- BEGIN disable_viewonline -->
        <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
          <tr>
              <td class="catHead" colspan="2" height="28">
              <!-- BEGIN switch_viewonline_link -->
              <span class="cattitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></span>
              <!-- END switch_viewonline_link -->

              <!-- BEGIN switch_viewonline_nolink -->
              <span class="cattitle">{L_WHO_IS_ONLINE}</span>
              <!-- END switch_viewonline_nolink -->
              </td>
          </tr>
          <tr>
              <td class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>
              <td class="row1" width="100%"><span class="gensmall">{TOTAL_POSTS}<br />
              {TOTAL_USERS}<br />
              {NEWEST_USER}</span></td>
          </tr>
          <tr>
              <td class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
              {RECORD_USERS}<br />
              <br />
              {LOGGED_IN_USER_LIST}</span></td>
          </tr>
          {L_CONNECTED_MEMBERS}
          {L_WHOSBIRTHDAY_TODAY}
          {L_WHOSBIRTHDAY_WEEK}
          <tr>
              <td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
          </tr>
          <!-- BEGIN switch_chatbox_activate -->
          <tr>
              <td class="row1">
                <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :&nbsp; {CHATTERS_LIST}<br />
                    <!-- BEGIN switch_chatbox_popup -->
                    <div id="chatbox_popup"></div>
                    <script type="text/javascript">
                    //<![CDATA[
                    insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
                    //]]>
                    </script>
                    <!-- END switch_chatbox_popup -->
                </span>
              </td>
          </tr>
          <!-- END switch_chatbox_activate -->
        </table>
        <!-- END disable_viewonline -->

    Par ceci
    Code:
        <!-- BEGIN disable_viewonline -->
        <div class="fond_qeel"><div class="bloc1">Bienvenue à ...<span id="yosh">{NEWEST_USER}</span>
          <script type="text/javascript">document.getElementById('yosh').innerHTML=document.getElementById('yosh').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"");
          </script><br /> <br />
          Parmis nos ...<br /><span id="matt">{TOTAL_USERS}</span>
          <script type="text/javascript">document.getElementById('matt').innerHTML=document.getElementById('matt').innerHTML.replace(/Nous avons/,"").replace(/membres enregistrés/,"membres");
          </script> </div>

          <div class="bloc2"><span id="celine" style="color: #4C8E68;">{TOTAL_USERS_ONLINE}</span>
            <script type="text/javascript">document.getElementById('celine').innerHTML=document.getElementById('celine').innerHTML.replace(/Il y a en tout/,"<font color=#1F2133>Pendulum compte actuellement</font>").replace(/utilisateur(s?) en ligne/,"<font color=#1F2133>membres en ligne</font>").replace(/::/,"").replace(/Enregistré(s?)/,"<font color=#1F2133>membres enregistrés</font>").replace(/Invisible(s?) et/,"<font color=#1F2133>en secret &</font>").replace(/Invité(s?)/,"<font color=#1F2133>invité</font>");
              </script></div>
         
            <div class="qeel"><div class="qeel_img"><img src="http://i62.tinypic.com/34owxet.png" /></div><div class="qeel_description">Codage du QEEL par Halloween avec l'aide d'Onyx sur <a href="http://www.never-utopia.com">Never Utopia</a>.<br /><br />Autre blabla</div></div>
        <div style="clear: both;"></div>
         
            <div class="bloc4"><table id="kaboum">{L_CONNECTED_MEMBERS}</table>
            <script type="text/javascript">
            jQuery('#kaboum span.gensmall').html(jQuery('#kaboum span.gensmall').html().replace('Membres connectés au cours des 16 dernières heures : ','Ces derniers temps on a vu passer ... '));
            </script> </div>
            <div class="bloc3"><br /><div class="Infobulle"><span style="color: #5CC677;">Groupe</span><div class="Infobulle_contenu">Clematii nec scelere Alexandrini inter nullo per contactus nobilis ad comitem impotentia permissus est scelere inter omnino sibi Clematii humilia letali inter ferebatur introducta cuius letali nobilis amore hiscere oblato amore fines ut nobilis misceri ferebatur iam letali misceri cum per supergressa amore ut Honoratum nobilis per pseudothyrum pretioso ut oblato generum ad inter Clematius loqui scelere mediocrium generum formula ut formula contactus fines occideretur Clematii reginae supergressa loqui nec generum impetraret loqui orientis Clematius ut permissus eius cuiusdam oblato humilia orientis nec comitem formula letali ad reginae nec inter sibi reginae letali Alexandrini Honoratum missa eius cuius scelere generum.</div></div><br />
              <div class="Infobulle"><span style="color: #5CC677;">Groupe</span><div class="Infobulle_contenu">Clematii nec scelere Alexandrini inter nullo per contactus nobilis ad comitem impotentia permissus est scelere inter omnino sibi Clematii humilia letali inter ferebatur introducta cuius letali nobilis amore hiscere oblato amore fines ut nobilis misceri ferebatur iam letali misceri cum per supergressa amore ut Honoratum nobilis per pseudothyrum pretioso ut oblato generum ad inter Clematius loqui scelere mediocrium generum formula ut formula contactus fines occideretur Clematii reginae supergressa loqui nec generum impetraret loqui orientis Clematius ut permissus eius cuiusdam oblato humilia orientis nec comitem formula letali ad reginae nec inter sibi reginae letali Alexandrini Honoratum missa eius cuius scelere generum.</div></div> <br />
              <div class="Infobulle"><span style="color: #5CC677;">Groupe</span><div class="Infobulle_contenu">Clematii nec scelere Alexandrini inter nullo per contactus nobilis ad comitem impotentia permissus est scelere inter omnino sibi Clematii humilia letali inter ferebatur introducta cuius letali nobilis amore hiscere oblato amore fines ut nobilis misceri ferebatur iam letali misceri cum per supergressa amore ut Honoratum nobilis per pseudothyrum pretioso ut oblato generum ad inter Clematius loqui scelere mediocrium generum formula ut formula contactus fines occideretur Clematii reginae supergressa loqui nec generum impetraret loqui orientis Clematius ut permissus eius cuiusdam oblato humilia orientis nec comitem formula letali ad reginae nec inter sibi reginae letali Alexandrini Honoratum missa eius cuius scelere generum.</div></div> <br />
              <div class="Infobulle"><span style="color: #5CC677;">Groupe</span><div class="Infobulle_contenu">Clematii nec scelere Alexandrini inter nullo per contactus nobilis ad comitem impotentia permissus est scelere inter omnino sibi Clematii humilia letali inter ferebatur introducta cuius letali nobilis amore hiscere oblato amore fines ut nobilis misceri ferebatur iam letali misceri cum per supergressa amore ut Honoratum nobilis per pseudothyrum pretioso ut oblato generum ad inter Clematius loqui scelere mediocrium generum formula ut formula contactus fines occideretur Clematii reginae supergressa loqui nec generum impetraret loqui orientis Clematius ut permissus eius cuiusdam oblato humilia orientis nec comitem formula letali ad reginae nec inter sibi reginae letali Alexandrini Honoratum missa eius cuius scelere generum.</div></div> <br />
              <div class="Infobulle"><span style="color: #5CC677;">Groupe</span><div class="Infobulle_contenu">Clematii nec scelere Alexandrini inter nullo per contactus nobilis ad comitem impotentia permissus est scelere inter omnino sibi Clematii humilia letali inter ferebatur introducta cuius letali nobilis amore hiscere oblato amore fines ut nobilis misceri ferebatur iam letali misceri cum per supergressa amore ut Honoratum nobilis per pseudothyrum pretioso ut oblato generum ad inter Clematius loqui scelere mediocrium generum formula ut formula contactus fines occideretur Clematii reginae supergressa loqui nec generum impetraret loqui orientis Clematius ut permissus eius cuiusdam oblato humilia orientis nec comitem formula letali ad reginae nec inter sibi reginae letali Alexandrini Honoratum missa eius cuius scelere generum.</div></div> <br />
            <div class="Infobulle"><span style="color: #5CC677;">Groupe</span><div class="Infobulle_contenu">Clematii nec scelere Alexandrini inter nullo per contactus nobilis ad comitem impotentia permissus est scelere inter omnino sibi Clematii humilia letali inter ferebatur introducta cuius letali nobilis amore hiscere oblato amore fines ut nobilis misceri ferebatur iam letali misceri cum per supergressa amore ut Honoratum nobilis per pseudothyrum pretioso ut oblato generum ad inter Clematius loqui scelere mediocrium generum formula ut formula contactus fines occideretur Clematii reginae supergressa loqui nec generum impetraret loqui orientis Clematius ut permissus eius cuiusdam oblato humilia orientis nec comitem formula letali ad reginae nec inter sibi reginae letali Alexandrini Honoratum missa eius cuius scelere generum.</div></div></div>
        </div>
          <link href='http://fonts.googleapis.com/css?family=Fjalla+One' rel='stylesheet' type='text/css'>
        <!-- END disable_viewonline -->


    Attention, dans la partie du code qui va suivre, vous devrez modifier le "16" par la durée que VOUS avez configuré dans le panneau d'administration (24h ou autre). Pensez également à cocher l'affichage "Afficher la liste des membres connectés au cours des ** dernières heures :" dans "Affichage", "Généralités"


    Valeur à modifier ici :
    Code:
        <script type="text/javascript">
            jQuery('#kaboum span.gensmall').html(jQuery('#kaboum span.gensmall').html().replace('Membres connectés au cours des 16 dernières heures : ','Ces derniers temps on a vu passer ... '));
            </script>





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


    Dernière édition par Halloween le Sam 13 Déc 2014 - 19:16, édité 3 fois




    < / Libre service codage >
    avatar
    Rozenbrez
    FémininAge : 26Messages : 1382

    le Mar 4 Nov 2014 - 15:32

    Merci à RainbowPanda pour l'idée de ce QEEL. Il est simple tout en étant complexe! J'adore! Merci à Hallow' et Onyx de l'avoir codé et de le proposer en LS <3

    Løve
    MasculinAge : 22Messages : 189

    le Mer 12 Nov 2014 - 17:24

    Merci o/
    avatar
    Alumine
    FémininAge : 20Messages : 488

    le Mer 12 Nov 2014 - 19:02

    Merci ! Moi qui me demandais justement comment enlever à un qeel le côté rébarbatif d'un gros bloc de texte, tu me donnes des idées !



    Alumine
    avatar
    Halloween
    FémininAge : 24Messages : 9752

    le Mer 12 Nov 2014 - 19:45

    Pour le coup, le mérite revient à RainbowPanda Razz
    Mais tu peux regarder dans l'index, y a plein de QEEL pas trop chargés et complets, ça peut te donner des idées :)




    < / Libre service codage >
    avatar
    CECILE362
    FémininAge : 29Messages : 195

    le Mer 26 Nov 2014 - 11:22

    Merci beaucoup Very Happy
    avatar
    Chocolakato
    FémininAge : 28Messages : 795

    le Mer 26 Nov 2014 - 13:56

    Il est super cool :)



    avatar
    Ouat
    FémininAge : 34Messages : 74

    le Ven 5 Déc 2014 - 9:09

    Sophistiqué, sobre, propre, bravo !
    avatar
    zbou
    FémininAge : 24Messages : 83

    le Lun 15 Déc 2014 - 11:14

    Merci ♥
    avatar
    SpicAsh
    FémininAge : 21Messages : 170

    le Lun 15 Déc 2014 - 16:00

    Merci !
    avatar
    AMIANTE
    FémininAge : 22Messages : 36

    le Mer 17 Déc 2014 - 19:40

    superbe, merci !



    uc
    avatar
    ~Nodoka~
    FémininAge : 21Messages : 182

    le Jeu 18 Déc 2014 - 11:55

    mercii sympas :)
    avatar
    Skyleen
    FémininAge : 25Messages : 476

    le Ven 19 Déc 2014 - 2:18

    Je vais le test tient =) merci



    2013 ▬
    Commandes en cours : 0    ▬ Commandes finis : 2
    avatar
    Féhéla
    FémininAge : 44Messages : 238

    le Mar 23 Déc 2014 - 21:46

    merci du partage
    avatar
    1charlotte
    FémininAge : 17Messages : 196

    le Mer 24 Déc 2014 - 3:56

    Superbe !
    avatar
    Tatia38
    FémininAge : 29Messages : 306

    le Mer 24 Déc 2014 - 16:12

    Merci
    avatar
    erika02
    FémininAge : 21Messages : 262

    le Dim 28 Déc 2014 - 10:40

    Merci je test :)



    avatar
    Nono-Chan
    FémininAge : 20Messages : 273

    le Dim 28 Déc 2014 - 20:55

    Merci !
    avatar
    Sumaki
    FémininAge : 20Messages : 31

    le Mer 31 Déc 2014 - 19:34

    Merci, elle es simple et magnifique. J'adore *w*
    avatar
    Nezumi-liet
    FémininAge : 29Messages : 11

    le Mar 6 Jan 2015 - 14:10

    Merci pour l'idée^^
    avatar
    Faucon
    FémininAge : 18Messages : 64

    le Mar 6 Jan 2015 - 18:25

    Merci, c'est vraiment très beau (:
    avatar
    Yasashi
    FémininAge : 22Messages : 65

    le Sam 10 Jan 2015 - 19:18

    Très joli, merci !
    avatar
    Nathaël
    MasculinAge : 29Messages : 92

    le Ven 16 Jan 2015 - 14:35

    ça peut être sympa, je vais l'essayer. Merci :)



    avatar
    Ysamar
    FémininAge : 38Messages : 37

    le Sam 17 Jan 2015 - 9:58

    merci
    avatar
    Kau
    FémininAge : 16Messages : 148

    le Sam 17 Jan 2015 - 22:02

    Super thanks ♥
    Contenu sponsorisé


      La date/heure actuelle est Mer 20 Juin 2018 - 11:48