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

    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
    A-Lice
    FémininAge : 24Messages : 4939

    le Sam 23 Aoû 2014 - 23:07

    Merci pour ce LS (:

    avatar
    Saphire
    FémininAge : 20Messages : 146

    le Dim 24 Aoû 2014 - 0:04

    Merci pour le codage :3
    avatar
    Luxuria
    FémininAge : 20Messages : 83

    le Dim 24 Aoû 2014 - 11:56

    Merci <3
    avatar
    Stitch56
    FémininAge : 24Messages : 200

    le Dim 24 Aoû 2014 - 14:19

    Marchi ♥
    avatar
    Caine Lornan
    MasculinAge : 37Messages : 78

    le Lun 25 Aoû 2014 - 16:08

    Thanks ^^
    avatar
    Raween
    FémininAge : 26Messages : 110

    le Lun 25 Aoû 2014 - 16:52

    Merci beaucoup **
    Shinju.dot
    FémininAge : 28Messages : 88

    le Mar 26 Aoû 2014 - 10:51

    merci
    avatar
    Arpège
    FémininAge : 19Messages : 111

    le Jeu 28 Aoû 2014 - 14:39

    Zenkyou ♥




    Writers World commence à ouvrir !
    avatar
    demdre
    FémininAge : 23Messages : 24

    le Jeu 28 Aoû 2014 - 18:42

    j'adore :)
    avatar
    Poké_Eievui
    MasculinAge : 17Messages : 34

    le Ven 29 Aoû 2014 - 11:22

    Merci :)
    avatar
    Tatia38
    FémininAge : 29Messages : 306

    le Ven 29 Aoû 2014 - 13:01

    Merci pour ce LS,il tue
    avatar
    Little Melody
    FémininAge : 17Messages : 64

    le Sam 30 Aoû 2014 - 1:00

    Merci *-*
    avatar
    Madness of Wonderland
    FémininAge : 18Messages : 59

    le Sam 30 Aoû 2014 - 14:55

    Arigatô ! ^^
    avatar
    Eshon
    FémininAge : 37Messages : 194

    le Mar 2 Sep 2014 - 16:22

    Merci !
    avatar
    plushmasters
    FémininAge : 25Messages : 70

    le Mer 3 Sep 2014 - 14:01

    j'adore
    avatar
    petit lu
    FémininAge : 25Messages : 172

    le Mer 3 Sep 2014 - 22:52

    c'est magnifique
    merci du partage ♥
    avatar
    SpicAsh
    FémininAge : 21Messages : 170

    le Jeu 4 Sep 2014 - 14:16

    Merci !
    avatar
    Miss Houpette
    FémininAge : 21Messages : 75

    le Jeu 4 Sep 2014 - 22:41

    Parce que c'est trop beau (et vert & bleu).. MERCI !! *^*
    avatar
    Haniwa
    FémininAge : 23Messages : 206

    le Jeu 11 Sep 2014 - 11:05

    Merci
    avatar
    Asuka
    FémininAge : 24Messages : 105

    le Jeu 11 Sep 2014 - 14:38

    Merci ♥



    avatar
    Sadistic Syndrome
    FémininAge : 25Messages : 84

    le Ven 12 Sep 2014 - 10:57

    Merci pour le partage de ce codage =)
    avatar
    Kyandi
    FémininAge : 19Messages : 157

    le Sam 13 Sep 2014 - 12:32

    Ouaaa super merci ! Very Happy






    avatar
    Hwan-Leo Flores
    FémininAge : 24Messages : 275

    le Sam 13 Sep 2014 - 12:37

    Merci très beau code !!



    avatar
    Airore
    FémininAge : 19Messages : 132

    le Dim 14 Sep 2014 - 8:18

    Merci !
    Contenu sponsorisé


      La date/heure actuelle est Mar 22 Mai 2018 - 18:00