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
    Chanel.♥
    FémininAge : 18Messages : 42

    le Dim 21 Déc 2014 - 17:10

    J'adore, comme d'habitude ! ♥
    avatar
    Nevr0z
    FémininAge : 29Messages : 74

    le Lun 22 Déc 2014 - 0:04

    Merci :3
    avatar
    reshiram44
    MasculinAge : 19Messages : 380

    le Ven 26 Déc 2014 - 17:05

    merci



    avatar
    P'tit loup
    MasculinAge : 35Messages : 437

    le Lun 12 Jan 2015 - 17:03

    toujours du beau travail, Hallow



    avatar
    Sapphire
    FémininAge : 21Messages : 48

    le Sam 31 Jan 2015 - 4:06

    Merci bien !
    avatar
    Hayate747
    MasculinAge : 28Messages : 196

    le Dim 1 Fév 2015 - 10:46

    Merci !!
    avatar
    24nono38
    FémininAge : 28Messages : 68

    le Mar 3 Fév 2015 - 11:45

    Très jolie Very Happy



    avatar
    Ondée
    FémininAge : 19Messages : 659

    le Mar 10 Fév 2015 - 12:46

    Merci o/



    EN VACANCES JUSQU'À DÉBUT AOÛT - TOTALEMENT ABSENTE
    avatar
    cosmos-chann
    FémininAge : 20Messages : 115

    le Sam 14 Fév 2015 - 15:15

    merci ^^
    avatar
    Kira Hatsuki
    FémininAge : 16Messages : 142

    le Mer 18 Fév 2015 - 12:57

    C'est super ! Merci ! Very Happy
    avatar
    Pokahontas
    FémininAge : 21Messages : 28

    le Jeu 19 Fév 2015 - 22:32

    merci !
    avatar
    Murania
    FémininAge : 21Messages : 85

    le Sam 21 Fév 2015 - 13:45

    Merci il est vraiment beau <3



    avatar
    Bunny Lune
    FémininAge : 28Messages : 142

    le Ven 27 Fév 2015 - 20:04

    Merci pour ce partage.
    avatar
    AyaseNeko
    FémininAge : 21Messages : 55

    le Dim 8 Mar 2015 - 16:09

    C'est juste ... magniiiifique affraid je pique mercii
    avatar
    Fondaboxpub
    MasculinAge : 52Messages : 38

    le Sam 28 Mar 2015 - 15:13

    merci c'est tres beau



    avatar
    Ryukaï
    MasculinAge : 20Messages : 614

    le Dim 5 Avr 2015 - 16:51

    Merci :)



    avatar
    Feather
    FémininAge : 21Messages : 17

    le Lun 13 Avr 2015 - 0:26

    Merci ♥
    Drogba JR
    MasculinAge : 25Messages : 88

    le Lun 13 Avr 2015 - 20:34

    merci
    avatar
    fraumali
    FémininAge : 38Messages : 121

    le Mar 14 Avr 2015 - 11:39

    Merci de ce partage, c'est superbe
    avatar
    Celuna
    FémininAge : 27Messages : 130

    le Jeu 16 Avr 2015 - 16:49

    Merci pour ce magnifique partage
    avatar
    Nox
    FémininAge : 18Messages : 8

    le Jeu 23 Avr 2015 - 20:51

    Magnifique ! Merci !



    avatar
    g93
    MasculinAge : 31Messages : 67

    le Sam 25 Avr 2015 - 14:32

    merci
    avatar
    Nezzoon
    FémininAge : 19Messages : 66

    le Dim 3 Mai 2015 - 13:00

    Merci
    avatar
    BlueGhost
    MasculinAge : 16Messages : 125

    le Mar 5 Mai 2015 - 14:43

    Oh il est très beau, et surtout le bleu ciel derrière *-* (j'aime aussi la fonction d'infobulle !) ^^
    Merci :)





    ~ Upupupu... je ne suis pas une peluche, je suis Monokuma ! ~
    Danganronpaaa ♥
    avatar
    Yuuki Emna
    FémininAge : 22Messages : 38

    le Sam 9 Mai 2015 - 15:55

    Merci pour ce qeel^^
    Contenu sponsorisé


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