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
    Aine Michiyo
    FémininAge : 23Messages : 27

    le Sam 9 Mai 2015 - 18:18

    Merci ^^
    avatar
    Nutop
    FémininAge : 15Messages : 254

    le Dim 10 Mai 2015 - 20:00

    Bravo et merci !






    avatar
    Dark Fairy
    FémininAge : 20Messages : 226

    le Lun 11 Mai 2015 - 20:19

    Merci! Il est génial ce QEEL!
    avatar
    Rara
    FémininAge : 21Messages : 87

    le Ven 15 Mai 2015 - 18:18

    Merci!
    avatar
    Aishitteru
    FémininAge : 22Messages : 66

    le Dim 17 Mai 2015 - 18:32

    Merci ! ^^
    avatar
    ATHENA.
    FémininAge : 21Messages : 31

    le Mer 20 Mai 2015 - 20:26

    Déesse ! Merci :)
    avatar
    Perlou
    FémininAge : 15Messages : 8

    le Mar 26 Mai 2015 - 19:12

    thanks
    avatar
    Sylfaen
    FémininAge : 20Messages : 69

    le Mar 2 Juin 2015 - 17:18

    Thank's ! =D
    avatar
    Senri
    FémininAge : 19Messages : 17

    le Sam 27 Juin 2015 - 21:09

    Merci =)



    avatar
    lΔω
    FémininAge : 20Messages : 105

    le Jeu 2 Juil 2015 - 9:31

    Merci pour le partage ^^
    avatar
    Ayame
    FémininAge : 22Messages : 53

    le Mer 15 Juil 2015 - 8:04

    Très mignon~
    avatar
    charlie.
    FémininAge : 38Messages : 62

    le Sam 18 Juil 2015 - 3:00

    Merci
    avatar
    Akina-chan
    FémininAge : 24Messages : 138

    le Mer 22 Juil 2015 - 19:52

    Merci <3
    avatar
    Chae Lee
    FémininAge : 21Messages : 116

    le Mer 22 Juil 2015 - 22:39

    Merci !
    avatar
    rosebleudu10
    FémininAge : 28Messages : 188

    le Lun 27 Juil 2015 - 15:47

    merci
    avatar
    Yuna Azalé
    FémininAge : 21Messages : 80

    le Ven 31 Juil 2015 - 14:04

    Merci
    avatar
    BlueBerry ♪
    FémininAge : 20Messages : 138

    le Mer 12 Aoû 2015 - 19:06

    merci !



    avatar
    Kelalin
    FémininAge : 25Messages : 1874

    le Mer 12 Aoû 2015 - 19:37

    Merci pour le partage ! \(*T▽T*)/
    avatar
    Krager
    MasculinAge : 23Messages : 40

    le Jeu 13 Aoû 2015 - 5:26

    Merci
    avatar
    Yukie
    FémininAge : 19Messages : 30

    le Jeu 13 Aoû 2015 - 16:29

    Merci beaucoup :)
    avatar
    NanoiHime
    FémininAge : 19Messages : 562

    le Jeu 13 Aoû 2015 - 21:01

    mercii



    avatar
    Spitfire
    FémininAge : 24Messages : 55

    le Sam 22 Aoû 2015 - 18:01

    Merci ♥
    avatar
    Ookami Shiroi
    FémininAge : 26Messages : 72

    le Dim 30 Aoû 2015 - 11:25

    Merci pour ce QEEL
    avatar
    Kitty Kat.
    FémininAge : 24Messages : 86

    le Lun 31 Aoû 2015 - 2:24

    J'aime beaucoup !
    avatar
    Esperanga
    FémininAge : 29Messages : 101

    le Jeu 17 Sep 2015 - 17:58

    C'est tout bonnement magnifique.
    Merci du partage, c'est un super travail



    Contenu sponsorisé


      La date/heure actuelle est Dim 27 Mai 2018 - 17:34