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

    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
    Kiki85
    MasculinAge : 23Messages : 389

    le Lun 15 Sep 2014 - 16:11

    Superbe ! merci
    avatar
    Milka
    FémininAge : 29Messages : 112

    le Lun 15 Sep 2014 - 17:49

    Merci pour le partage ♥
    avatar
    MiniBN13
    FémininAge : 25Messages : 5

    le Lun 15 Sep 2014 - 20:11

    Magnifique merci ! Very Happy
    avatar
    Shuna
    FémininAge : 23Messages : 117

    le Mer 17 Sep 2014 - 13:56

    merciiii
    avatar
    Hisha
    FémininAge : 18Messages : 41

    le Dim 21 Sep 2014 - 15:25

    Merci beaucoup, j'adore ! :3
    avatar
    Solitude
    FémininAge : 43Messages : 285

    le Lun 22 Sep 2014 - 8:25

    Merci



    ~ Je suis capable du meilleur comme du pire, mais dans le pire c'est moi la meilleure. ~
    avatar
    Invité

    le Dim 28 Sep 2014 - 16:04

    mercii :)
    avatar
    Myfanwi
    FémininAge : 21Messages : 82

    le Dim 28 Sep 2014 - 19:03

    J'adore Very Happy
    avatar
    zbou
    FémininAge : 24Messages : 83

    le Lun 29 Sep 2014 - 20:45

    Merci pour le partage, c'est super beau *^*
    avatar
    alex24d
    FémininAge : 30Messages : 95

    le Jeu 2 Oct 2014 - 19:43

    merci
    avatar
    Dearborn
    FémininAge : 24Messages : 109

    le Ven 3 Oct 2014 - 14:27

    Merci beaucoup!
    avatar
    Sekai
    FémininAge : 20Messages : 20

    le Sam 4 Oct 2014 - 10:04

    Superbe QEEL ** Merci du partage ♥
    avatar
    1charlotte
    FémininAge : 16Messages : 196

    le Lun 6 Oct 2014 - 0:41

    Merci beaucoup :)
    avatar
    Nemalus
    FémininAge : 20Messages : 358

    le Jeu 9 Oct 2014 - 21:22

    Marci bien ♥
    avatar
    Insane paper-plane
    FémininAge : 21Messages : 136

    le Dim 12 Oct 2014 - 23:51

    Joli ! ♥ Comme d'hab', merciii n_n
    avatar
    AlexeB
    FémininAge : 22Messages : 164

    le Sam 18 Oct 2014 - 10:48

    Merci pour le partage! :heart:
    avatar
    Merwyn Arehdel
    FémininAge : 18Messages : 298

    le Dim 26 Oct 2014 - 14:33

    Merci il est trop beau ! :$



    Just want to be yours.
    avatar
    SooJaeHee
    FémininAge : 23Messages : 50

    le Dim 26 Oct 2014 - 21:45

    Merci!^^
    avatar
    Lilynufare
    FémininAge : 27Messages : 341

    le Sam 1 Nov 2014 - 15:15

    J'aime beaucoup, merci
    avatar
    Dydy
    FémininAge : 27Messages : 490

    le Jeu 13 Nov 2014 - 16:35

    merci du partage!



    avatar
    Kinjiro
    MasculinAge : 19Messages : 80

    le Dim 16 Nov 2014 - 12:07

    Mercay Wink



    avatar
    Opaline
    FémininAge : 18Messages : 86

    le Dim 16 Nov 2014 - 13:52

    Merci !



    avatar
    Harleen Quinzel
    FémininAge : 22Messages : 65

    le Sam 22 Nov 2014 - 1:03

    Merciiiiiiiiiiiiiiiiiiiiiiiii ♥
    avatar
    Xperience
    FémininAge : 21Messages : 156

    le Lun 8 Déc 2014 - 21:05

    Merci !



    avatar
    Kirito
    MasculinAge : 22Messages : 200

    le Mar 9 Déc 2014 - 11:14

    joli
    Contenu sponsorisé


      La date/heure actuelle est Dim 27 Mai 2018 - 15:44