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 bleu et vert (info-bulles)

    Partagez
    avatar
    Halloween
    FémininAge : 24Messages : 9752

    le Sam 23 Aoû 2014 - 19:40

    Rappel du premier message :

    Plop,

    A la demande de guinevere, un QEEL bleu et vert. Une info-bulle apparait au survol des groupes, et les membres du mois laissent apparaitre les liens vers les MP et profil du membre au survol.


    QEEL bleu et vert


    Version phpBB2 ▬ Template Index_body ▬ CSS

    Aperçu ▬ www


    CSS :
    Code:
        /* --------------------------------- QEEL --------------------------------- */

        /* Fond du QEEL */
        .fond_QEEL {
          background-color: #97CEFB;
          width: 700px;
          border-radius: 70px;
          padding: 20px;
        }

        /* Info-bulles des groupes */
        .bulles_groupes {
          text-decoration: none;
          position: relative;
          font-family: 'Lobster', cursive;
          font-size: 25px;
          padding: 10px;
        }
       
        .bulles_groupes span {
          display: none;
          color: #054856;
          background: #71C9EA;
        }
       
        .bulles_groupes span img {
          float: left;
          margin: 0px 8px 8px 0;
        }
       
        .bulles_groupes:hover span {
          display: block;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 999;
          width: auto;
          height: 260px;
          width: 260px;
          margin-top: 12px;
          margin-left: 32px;
          overflow: auto;
          padding: 8px;
          font-family: arial;
          font-size: 10px;
          text-align: justify;
        }

        /* Transparence 24 dernières heures */
          #kaboum .row1 {
          background-color: transparent;
          width: 300px;
          max-height: 150px;
          overflow: auto;
        }

        /* Bloc des statistiques */
        .bloc_stats {
          background-color: #ABD8FC;
          width: 300px;
          padding: 10px;
          font-size: 11px;
          text-align: justify;
          color: #011729;
        }

        /* Mise en forme des titres "Statistiques" et "Membres du mois" */
        .titres_qeel {
          font-family: 'Lobster', cursive;
          font-size: 30px;
          text-align: center;
          color: #043A66;
        }

        /* Bulles des membres du mois */

        .mbre_mois {
          width: 100px;
          height: 100px;
          overflow: hidden;
          background-color: #ABD8FC;
        }

        .mbre_mois_img {
          position: relative;
          z-index: 2;
          height: 100px;
          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;
        }

        .mbre_mois:hover .mbre_mois_img {
          margin-top: -650px;
          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;
        }

        .mbre_mois_description {
          position: relative;
          top: 26em;
          z-index: 1;
          width: 100px;
          height: 100px;
          text-align: center;
          padding: 2px;
          font-family: 'Lobster', cursive;
          font-size: 20px;
        }

        /* Texte "Rejoignez" de la box */
        .rejoignez {
          text-align: center;
          font-family: 'Lobster', cursive;
          font-size: 30px;
          color: #46B12C;
        }

        /* Lien vers la chatbox */
        a.box_QEEL {
          font-family: 'Lobster', cursive;
          font-size: 30px;
          color: #0E8DF5;
        }
        /* --------------------------------- FIN QEEL --------------------------------- */

    Dans le template index_body, remplacer ça :
    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} :  {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 -->
    <center><div class="fond_QEEL" style="position: relative;"><center>
      <a class="bulles_groupes"><font color="#429B93">Groupe 1</font><span><img src="http://i39.servimg.com/u/f39/16/61/97/52/2610.png" /><b>La description du groupe avec un hover si nécessaire</b> • Obsequiorum quorundam sine coluntur caelibes coluntur praeter credi vile aestimant liberis credi coluntur vile homines vero inanes pomerium orbos homines Romae vero pomerium caelibes caelibes Romae quicquid aestimant aestimant vile qua vile urbis credi Romae homines orbos praeter et potest homines orbos urbis potest potest esse qua qua et quicquid caelibes orbos extra liberis inanes coluntur liberis urbis quicquid pomerium orbos Romae orbos coluntur nec orbos potest quorundam liberis quicquid diversitate coluntur qua flatus et nascitur extra extra quorundam coluntur orbos qua urbis obsequiorum credi nascitur nec caelibes qua coluntur liberis esse diversitate praeter vero aestimant liberis qua et sine.</span></a>
      <a class="bulles_groupes"><font color="#2C8F2E">Groupe 2</font><span><img src="http://i39.servimg.com/u/f39/16/61/97/52/2610.png" /><b>La description du groupe avec un hover si nécessaire</b> • Obsequiorum quorundam sine coluntur caelibes coluntur praeter credi vile aestimant liberis credi coluntur vile homines vero inanes pomerium orbos homines Romae vero pomerium caelibes caelibes Romae quicquid aestimant aestimant vile qua vile urbis credi Romae homines orbos praeter et potest homines orbos urbis potest potest esse qua qua et quicquid caelibes orbos extra liberis inanes coluntur liberis urbis quicquid pomerium orbos Romae orbos coluntur nec orbos potest quorundam liberis quicquid diversitate coluntur qua flatus et nascitur extra extra quorundam coluntur orbos qua urbis obsequiorum credi nascitur nec caelibes qua coluntur liberis esse diversitate praeter vero aestimant liberis qua et sine.</span></a>
      <a class="bulles_groupes"><font color="#7D703E">Groupe 3</font><span><img src="http://i39.servimg.com/u/f39/16/61/97/52/2610.png" /><b>La description du groupe avec un hover si nécessaire</b> • Obsequiorum quorundam sine coluntur caelibes coluntur praeter credi vile aestimant liberis credi coluntur vile homines vero inanes pomerium orbos homines Romae vero pomerium caelibes caelibes Romae quicquid aestimant aestimant vile qua vile urbis credi Romae homines orbos praeter et potest homines orbos urbis potest potest esse qua qua et quicquid caelibes orbos extra liberis inanes coluntur liberis urbis quicquid pomerium orbos Romae orbos coluntur nec orbos potest quorundam liberis quicquid diversitate coluntur qua flatus et nascitur extra extra quorundam coluntur orbos qua urbis obsequiorum credi nascitur nec caelibes qua coluntur liberis esse diversitate praeter vero aestimant liberis qua et sine.</span></a>
      <a class="bulles_groupes"><font color="#580C01">Groupe 4</font><span><img src="http://i39.servimg.com/u/f39/16/61/97/52/2610.png" /><b>La description du groupe avec un hover si nécessaire</b> • Obsequiorum quorundam sine coluntur caelibes coluntur praeter credi vile aestimant liberis credi coluntur vile homines vero inanes pomerium orbos homines Romae vero pomerium caelibes caelibes Romae quicquid aestimant aestimant vile qua vile urbis credi Romae homines orbos praeter et potest homines orbos urbis potest potest esse qua qua et quicquid caelibes orbos extra liberis inanes coluntur liberis urbis quicquid pomerium orbos Romae orbos coluntur nec orbos potest quorundam liberis quicquid diversitate coluntur qua flatus et nascitur extra extra quorundam coluntur orbos qua urbis obsequiorum credi nascitur nec caelibes qua coluntur liberis esse diversitate praeter vero aestimant liberis qua et sine.</span></a>
      <a class="bulles_groupes"><font color="#4E6842">Groupe 5</font><span><img src="http://i39.servimg.com/u/f39/16/61/97/52/2610.png" /><b>La description du groupe avec un hover si nécessaire</b> • Obsequiorum quorundam sine coluntur caelibes coluntur praeter credi vile aestimant liberis credi coluntur vile homines vero inanes pomerium orbos homines Romae vero pomerium caelibes caelibes Romae quicquid aestimant aestimant vile qua vile urbis credi Romae homines orbos praeter et potest homines orbos urbis potest potest esse qua qua et quicquid caelibes orbos extra liberis inanes coluntur liberis urbis quicquid pomerium orbos Romae orbos coluntur nec orbos potest quorundam liberis quicquid diversitate coluntur qua flatus et nascitur extra extra quorundam coluntur orbos qua urbis obsequiorum credi nascitur nec caelibes qua coluntur liberis esse diversitate praeter vero aestimant liberis qua et sine.</span></a>
      <br /><a class="bulles_groupes"><font color="#694456">Groupe 6</font><span><img src="http://i39.servimg.com/u/f39/16/61/97/52/2610.png" /><b>La description du groupe avec un hover si nécessaire</b> • Obsequiorum quorundam sine coluntur caelibes coluntur praeter credi vile aestimant liberis credi coluntur vile homines vero inanes pomerium orbos homines Romae vero pomerium caelibes caelibes Romae quicquid aestimant aestimant vile qua vile urbis credi Romae homines orbos praeter et potest homines orbos urbis potest potest esse qua qua et quicquid caelibes orbos extra liberis inanes coluntur liberis urbis quicquid pomerium orbos Romae orbos coluntur nec orbos potest quorundam liberis quicquid diversitate coluntur qua flatus et nascitur extra extra quorundam coluntur orbos qua urbis obsequiorum credi nascitur nec caelibes qua coluntur liberis esse diversitate praeter vero aestimant liberis qua et sine.</span></a>
      <a class="bulles_groupes"><font color="#46B12C">Groupe 7</font><span><img src="http://i39.servimg.com/u/f39/16/61/97/52/2610.png" /><b>La description du groupe avec un hover si nécessaire</b> • Obsequiorum quorundam sine coluntur caelibes coluntur praeter credi vile aestimant liberis credi coluntur vile homines vero inanes pomerium orbos homines Romae vero pomerium caelibes caelibes Romae quicquid aestimant aestimant vile qua vile urbis credi Romae homines orbos praeter et potest homines orbos urbis potest potest esse qua qua et quicquid caelibes orbos extra liberis inanes coluntur liberis urbis quicquid pomerium orbos Romae orbos coluntur nec orbos potest quorundam liberis quicquid diversitate coluntur qua flatus et nascitur extra extra quorundam coluntur orbos qua urbis obsequiorum credi nascitur nec caelibes qua coluntur liberis esse diversitate praeter vero aestimant liberis qua et sine.</span></a>
      <a class="bulles_groupes"><font color="#CF8B0E">Groupe 8</font><span><img src="http://i39.servimg.com/u/f39/16/61/97/52/2610.png" /><b>La description du groupe avec un hover si nécessaire</b> • Obsequiorum quorundam sine coluntur caelibes coluntur praeter credi vile aestimant liberis credi coluntur vile homines vero inanes pomerium orbos homines Romae vero pomerium caelibes caelibes Romae quicquid aestimant aestimant vile qua vile urbis credi Romae homines orbos praeter et potest homines orbos urbis potest potest esse qua qua et quicquid caelibes orbos extra liberis inanes coluntur liberis urbis quicquid pomerium orbos Romae orbos coluntur nec orbos potest quorundam liberis quicquid diversitate coluntur qua flatus et nascitur extra extra quorundam coluntur orbos qua urbis obsequiorum credi nascitur nec caelibes qua coluntur liberis esse diversitate praeter vero aestimant liberis qua et sine.</span></a>
      <a class="bulles_groupes"><font color="#39180F">Groupe 9</font><span><img src="http://i39.servimg.com/u/f39/16/61/97/52/2610.png" /><b>La description du groupe avec un hover si nécessaire</b> • Obsequiorum quorundam sine coluntur caelibes coluntur praeter credi vile aestimant liberis credi coluntur vile homines vero inanes pomerium orbos homines Romae vero pomerium caelibes caelibes Romae quicquid aestimant aestimant vile qua vile urbis credi Romae homines orbos praeter et potest homines orbos urbis potest potest esse qua qua et quicquid caelibes orbos extra liberis inanes coluntur liberis urbis quicquid pomerium orbos Romae orbos coluntur nec orbos potest quorundam liberis quicquid diversitate coluntur qua flatus et nascitur extra extra quorundam coluntur orbos qua urbis obsequiorum credi nascitur nec caelibes qua coluntur liberis esse diversitate praeter vero aestimant liberis qua et sine.</span></a>
      <a class="bulles_groupes"><font color="#0B3E29">Groupe 10</font><span><img src="http://i39.servimg.com/u/f39/16/61/97/52/2610.png" /><b>La description du groupe avec un hover si nécessaire</b> • Obsequiorum quorundam sine coluntur caelibes coluntur praeter credi vile aestimant liberis credi coluntur vile homines vero inanes pomerium orbos homines Romae vero pomerium caelibes caelibes Romae quicquid aestimant aestimant vile qua vile urbis credi Romae homines orbos praeter et potest homines orbos urbis potest potest esse qua qua et quicquid caelibes orbos extra liberis inanes coluntur liberis urbis quicquid pomerium orbos Romae orbos coluntur nec orbos potest quorundam liberis quicquid diversitate coluntur qua flatus et nascitur extra extra quorundam coluntur orbos qua urbis obsequiorum credi nascitur nec caelibes qua coluntur liberis esse diversitate praeter vero aestimant liberis qua et sine.</span></a>
      <br /><br />
      <table><tr><td><img src="http://i39.servimg.com/u/f39/16/61/97/52/3610.png" style="border-radius: 50px;" /></td>
        <td style="width: 20px;"></td>
        <td><div class="bloc_stats"><div class="titres_qeel">Statistiques</div><br /><br />
          {TOTAL_POSTS}. {NEWEST_USER}.<br />
          {TOTAL_USERS}.<br /><br />
          {TOTAL_USERS_ONLINE}<br />
          {LOGGED_IN_USER_LIST}<br /><br />
          <table id="kaboum">{L_CONNECTED_MEMBERS}</table><br /><br />
          {TOTAL_CHATTERS_ONLINE} :&nbsp; {CHATTERS_LIST}</div>
        </td></tr></table><br />
     
     <table><tr><td><div class="titres_qeel">Membres du mois</div><br />
    <table><tr><td>  <div class="mbre_mois">
    <div class="mbre_mois_img">
     <img src="http://static.tumblr.com/knlmwbw/2eom6nzlw/th_rabi_icon_by_victoriasty-d4bdpqu.png" />
    </div>
    <div class="mbre_mois_description">
      <br /><br /><a href="#" style="color: #0E8DF5 !important;">MP</a> <br /><a href="#" style="color: #46B12C !important;">Profil</a>
    </div></div></td>
      <td><div class="mbre_mois">
    <div class="mbre_mois_img">
     <img src="http://media.tumblr.com/tumblr_l8fn9u2kOA1qblmf6.jpg" />
    </div>
    <div class="mbre_mois_description">
     <br /><br /><a href="#" style="color: #0E8DF5 !important;">MP</a> <br /><a href="#" style="color: #46B12C !important;">Profil</a>
        </div></div></td></tr></table></td>
      <td style="width: 50px;"></td>
      <td style="width: 200px;"><div class="rejoignez">Rejoignez</div><center><a class="box_QEEL" href="http://halloween-test3.forumactif.org/chatbox/index.forum">La CHATBOX !</a></center></td></tr></table>
      <br /><br /><a href="http://www.never-utopia.com" style="color: #043A66 !important; font-size: 9px; text-decoration: none !important;">© Halloween</a></center></div></center>
    <link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
    <!-- END disable_viewonline -->



    Petites précisions → Il faut modifier le lien de la chatbox pour qu'il corresponde à VOTRE forum, donc procéder de la manière suivante : rechercher ceci dans le template :
    Code:
        <a class="box_QEEL" href="http://halloween-test3.forumactif.org/chatbox/index.forum">La CHATBOX !</a>

    Et compléter de cette manière :
    Code:
        <a class="box_QEEL" href="LIEN DE TON FORUM/chatbox/index.forum">La CHATBOX !</a>

    Quant aux groupes, un groupe correspond à ce code :
    Code:
        <a class="bulles_groupes"><font color="#429B93">Groupe 1</font><span><img src="http://i39.servimg.com/u/f39/16/61/97/52/2610.png" /><b>La description du groupe avec un hover si nécessaire</b> • Obsequiorum quorundam sine coluntur caelibes coluntur praeter credi vile aestimant liberis credi coluntur vile homines vero inanes pomerium orbos homines Romae vero pomerium caelibes caelibes Romae quicquid aestimant aestimant vile qua vile urbis credi Romae homines orbos praeter et potest homines orbos urbis potest potest esse qua qua et quicquid caelibes orbos extra liberis inanes coluntur liberis urbis quicquid pomerium orbos Romae orbos coluntur nec orbos potest quorundam liberis quicquid diversitate coluntur qua flatus et nascitur extra extra quorundam coluntur orbos qua urbis obsequiorum credi nascitur nec caelibes qua coluntur liberis esse diversitate praeter vero aestimant liberis qua et sine.</span></a>

    Qui se complète de cette manière :
    Code:
        <a class="bulles_groupes"><font color="#429B93">NOM GROUPE</font><span><img src="ADRESSE IMAGE" /><b>UN TEXTE D'INTRO</b> • DESCRIPTION DU GROUPE DANS LA BULLE</span></a>



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




    < / Libre service codage >
    avatar
    Ancolie
    FémininAge : 20Messages : 33

    le Mer 7 Oct 2015 - 20:47

    Merci !
    avatar
    Kingdom.
    FémininAge : 18Messages : 54

    le Dim 25 Oct 2015 - 15:39

    Merciiii !!
    avatar
    Luunalight
    FémininAge : 27Messages : 97

    le Jeu 29 Oct 2015 - 20:47

    merci beaucoup
    avatar
    Mystigri
    FémininAge : 15Messages : 97

    le Mar 3 Nov 2015 - 19:49

    Merci !



    avatar
    Whit
    FémininAge : 20Messages : 154

    le Mer 4 Nov 2015 - 8:08

    Merciii !
    avatar
    Eiffel01
    MasculinAge : 31Messages : 32

    le Ven 6 Nov 2015 - 19:11

    Merci, c'est juste du bon travail
    avatar
    Utauko
    FémininAge : 21Messages : 42

    le Jeu 19 Nov 2015 - 20:52

    SGROMPF ! C'est chouette o:
    avatar
    Elelia
    FémininAge : 22Messages : 45

    le Ven 20 Nov 2015 - 21:44

    Pratique de mettre le membre du mois sur le QEEL, ça évite de trop encombrer la PA, j'adhère. Merci beaucoup !
    avatar
    Invité

    le Sam 9 Jan 2016 - 0:08

    Je vais l'essayer sur mon forum, merci beaucoup :love:
    avatar
    Be Shup's
    FémininAge : 19Messages : 33

    le Mar 19 Jan 2016 - 19:15

    Thank you



    avatar
    Litonya
    FémininAge : 16Messages : 149

    le Jeu 17 Mar 2016 - 13:45

    michi
    avatar
    Susan Storm
    FémininAge : 38Messages : 77

    le Ven 18 Mar 2016 - 17:18

    Merci ♥ !
    avatar
    Tinkky
    FémininAge : 27Messages : 89

    le Sam 9 Avr 2016 - 14:13

    Merci du partage ^_^
    avatar
    Shaolan
    MasculinAge : 26Messages : 107

    le Jeu 5 Mai 2016 - 16:43

    Merci beaucoup
    avatar
    Faïryna
    FémininAge : 15Messages : 63

    le Dim 8 Mai 2016 - 16:33

    C'est sublime *^*
    avatar
    Sakura-chan
    FémininAge : 20Messages : 180

    le Dim 15 Mai 2016 - 17:39

    Merci du partage. c:
    avatar
    Piratress
    FémininAge : 20Messages : 215

    le Jeu 2 Juin 2016 - 9:11

    Merci *-*
    avatar
    Girly
    FémininAge : 20Messages : 116

    le Lun 13 Juin 2016 - 19:31

    merci
    avatar
    Chadot
    FémininAge : 29Messages : 176

    le Mer 15 Juin 2016 - 19:38

    Merci



    avatar
    Yukiho
    FémininAge : 78Messages : 14

    le Sam 2 Juil 2016 - 16:26

    Merci !
    avatar
    Sideris
    FémininAge : 23Messages : 112

    le Mer 13 Juil 2016 - 16:01

    Merci !









    avatar
    Neko Mimi
    FémininAge : 27Messages : 162

    le Mer 20 Juil 2016 - 11:41

    J'adore merci ♥♥



    avatar
    marie-noelle
    FémininAge : 60Messages : 109

    le Jeu 11 Aoû 2016 - 2:25

    merci
    avatar
    Invité

    le Dim 21 Aoû 2016 - 20:25

    Merci pour ce LS !
    avatar
    Naiyarth
    MasculinAge : 18Messages : 9

    le Mar 23 Aoû 2016 - 2:29

    Merci !
    Contenu sponsorisé


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