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 en 3 colonnes avec effet zoom (CSS)

    Partagez
    avatar
    Okhmhaka
    FémininAge : 33Messages : 31851

    le Sam 24 Nov 2012 - 0:55

    Rappel du premier message :

    Bonjour, bonsoir !

    Voici donc un code qui vous permettra de réaliser un QEEL (Qui est en ligne) un peu plus léger (et avec un aspect plus ludique^^) que le QEEL de base, un peu figé. Celui-ci est sous la forme de trois colonnes en opacité réduite et au survol de la souris elles s'élargissent en devenant plus opaque et faciliter la lecture.
    Comme il est préférable d'avoir un exemple pour visualiser, le voici en image (le thème était Percy Jackson, il va de soit qu'il vous suffira de mettre vos propres images).

    > Aperçu du QEEL sans survol
    > Aperçu avec survol de la colonne centrale

    Je suppose que vous comprenez le principe. Passons à l'installation x).


    Installation HTML

    Allez dans le template "Page d'accueil" (="index_body"). Repérez le code du QEEL qui se trouve entre :

    Code:
    <!-- BEGIN disable_viewonline -->
    et
    Code:
    <!-- END disable_viewonline -->

    (ligne 175 à 223)

    Remplacez la totalité du code contenu entre ces deux repères par celui-ci :

    Code:
    <!-- BEGIN disable_viewonline -->

    <div class="qeel_titre"></div>

    <div class="qeel">
      <table class="qeel_table"><tr>
        <td><div class="colonne"><span class="qeel_contenu">{TOTAL_POSTS}<br />
          {TOTAL_USERS}<br />
          {NEWEST_USER}<br /><br />
          {TOTAL_USERS_ONLINE}<br />
          {RECORD_USERS}<br />
          <br />
          {LOGGED_IN_USER_LIST}
          </span></div></td>
        <td><div class="colonne"><span class="qeel_contenu"><table>{L_CONNECTED_MEMBERS}</table><br /><br />{LEGEND} :&nbsp;{GROUP_LEGEND}</span></div></td>
        <td><div class="colonne"><span class="qeel_contenu"><table>{L_WHOSBIRTHDAY_TODAY}
          {L_WHOSBIRTHDAY_WEEK}</table></span></div></td>
        </tr></table>
    </div>
    <center><a href="http://www.never-utopia.com/" style="font-size: 10px;">QEEL - (c) Never-Utopia</a></center>
    <!-- END disable_viewonline -->

    (J'ai laissé les marqueurs de début et de fin du QEEL)

    N'oubliez pas d'enregistrer et de valider votre template modifié !


    Installation CSS

    Allez ensuite dans votre css et mettez le code ci-dessous :

    Code:
    .qeel_titre
    {
      width: 890px;
      height: 100px;
      background: url(#);
    }
    .qeel
    {
      width: 890px;
      height: 400px;
      background: url(#);
    }
    .qeel_table
    {
      width: 612px;
      margin: auto;
    }
    .colonne
    {
      position: absolute;
      z-index: 1;
      width: 200px;
      height: 300px;
      overflow: auto;
      margin-top: 0px;
      margin-left: 0px;
      background: #36444c;
      border: 1px solid #3f4d55;
      box-shadow: 0px 0px 0px #0d1418;
      -moz-box-shadow: 0px 0px 0px #0d1418;
      -o-box-shadow: 0px 0px 0px #0d1418;
      -htm-box-shadow: 0px 0px 0px #0d1418;
      -webkit-box-shadow: 0px 0px 0px #0d1418;
      font-size: 9px;
      opacity: 0.5;
      -moz-opacity: 0.5;
      -khtml-opacity: 0.5;
      filter: alpha(opacity=50);
      transition: 1s;
      -moz-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -o-transition: 1s;
    }
    .colonne:hover
    {
      position: absolute;
      z-index: 99;
      width: 300px;
      height: 400px;
      margin-top: -50px;
      margin-left: -50px;
      background: #36444c;
      border: 1px solid #3f4d55;
      box-shadow: 0px 0px 5px #0d1418;
      -moz-box-shadow: 0px 0px 5px #0d1418;
      -o-box-shadow: 0px 0px 5px #0d1418;
      -htm-box-shadow: 0px 0px 5px #0d1418;
      -webkit-box-shadow: 0px 0px 5px #0d1418;
      font-size: 11px;
      opacity: 0.8;
      -moz-opacity: 0.8;
      -khtml-opacity: 0.8;
      filter: alpha(opacity=80);
      transition: 1s;
      -moz-transition: 1s;
      -htm-transition: 1s;
      -webkit-transition: 1s;
      -o-transition: 1s;
    }
    .qeel_contenu
    {
      display: block;
      text-align: justify;
      padding: 10px;
    }

    Information : afin que les images de fond apparaissent vous devez remplacer les # contenus dans le code css par les adresses de vos images, l'une pour le titre, l'autre pour le fond de l'ensemble. Les images présentes dans l'exemple étant utilisées dans un thème actuellement je ne les laisse pas dans le css.


    Personnalisation

    Pour personnaliser ce code c'est très simple : réalisez une image de fond, une image de titre et incluez-les toutes deux dans le css en temps que fonds (.qeel_titre & .qeel). Le reste n'est que couleurs à changer. Les largeurs ou hauteurs des colonnes peuvent être modifiées également et ne devraient pas poser trop de problème. Gardez les mêmes pour les trois pour une meilleure esthétique.

    En cas d'utilisation de ces codes merci de mettre un crédit à Never-Utopia sur votre forum, même si vous personnalisez le code. Un petit crédit, ce n'est pas grand chose, et nous ne demandons que ça pour le partage de notre petit savoir x)
    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 ^^


    Dernière édition par Sparrow-style le Jeu 28 Mar 2013 - 16:09, édité 1 fois



    avatar
    Pastiche
    FémininAge : 23Messages : 78

    le Dim 2 Déc 2012 - 11:54

    Merci beaucoup ! :friends:
    avatar
    Dastan
    MasculinAge : 34Messages : 111

    le Dim 2 Déc 2012 - 13:23

    Merci pour ce tuto!! très intéressent!
    avatar
    Calliste
    FémininAge : 25Messages : 30

    le Dim 2 Déc 2012 - 16:46

    Merci pour le code il est vraiment magnifique, je mettrais les credit sur ma PA
    avatar
    Depp
    FémininAge : 27Messages : 298

    le Dim 2 Déc 2012 - 18:00

    Merci beaucoup Very Happy cela m'a l'air super Very Happy



    avatar
    Suika
    FémininAge : 23Messages : 30

    le Dim 2 Déc 2012 - 18:41

    waaaw *-* merci!
    avatar
    ♕ William
    MasculinAge : 21Messages : 72

    le Dim 2 Déc 2012 - 20:46

    Encore merci !




    William
    avatar
    Mwouah
    FémininAge : 29Messages : 11

    le Dim 2 Déc 2012 - 20:52

    Merci ça rend trop bien *-*
    avatar
    Mondo Gecko
    MasculinAge : 33Messages : 51

    le Lun 3 Déc 2012 - 2:27

    Merci Capitaine





    avatar
    Matris
    MasculinAge : 18Messages : 58

    le Lun 3 Déc 2012 - 2:44

    Merci :)



    avatar
    SpicAsh
    FémininAge : 21Messages : 170

    le Mar 6 Mai 2014 - 0:03

    Merci !
    avatar
    Layla4
    FémininAge : 18Messages : 149

    le Mar 6 Mai 2014 - 14:21

    Merci ^^
    avatar
    Damouny
    FémininAge : 21Messages : 37

    le Mar 6 Mai 2014 - 15:55

    C'est sympa comme concept! j'adopte :3





    Love is danger, Blood is pleasure, Devil is pure, the only treasure
    Damouny
    The power of Devil, A force from above, Cleaning my soul, Flame on burn desire...


    (c) Damouny
    avatar
    Mephitis.
    FémininAge : 20Messages : 46

    le Mar 6 Mai 2014 - 20:52

    Super original et très sympa u3u.
    avatar
    Cruelly
    FémininAge : 25Messages : 2563

    le Mar 6 Mai 2014 - 22:11

    merci



    MON PROJET :heart: j'ai besoin d'avis ^^


    avatar
    Zorume
    FémininAge : 21Messages : 84

    le Mer 7 Mai 2014 - 11:25

    KYAAAAAAAAH ♥ C'est CE code que je cherche depuis des semaines ♥ Il est trop génial je l'adore =D
    Je vais le prendre pour mon forum tout neuf : http://steampunk-evolution.nextgenforum.com/

    MERCIIIII
    avatar
    ClipClap
    FémininAge : 17Messages : 60

    le Mer 7 Mai 2014 - 14:04

    Merci ! C'est exactement ce QEEL que je cherchais depuis des mois ! ♥



    avatar
    Etoile Du Phenix
    FémininAge : 15Messages : 14

    le Mer 7 Mai 2014 - 14:33

    ces super sympa ♥
    avatar
    Thalia Grace
    FémininAge : 21Messages : 65

    le Mer 7 Mai 2014 - 15:30

    Merci Wink
    avatar
    Namco
    FémininAge : 25Messages : 112

    le Mer 7 Mai 2014 - 22:06

    J'aime beaucoup *__*
    Merci Sparow !
    avatar
    Freya Lazare
    FémininAge : 30Messages : 112

    le Mer 7 Mai 2014 - 23:48

    Merci!
    avatar
    Aoi Kiseki
    FémininAge : 26Messages : 105

    le Jeu 8 Mai 2014 - 0:12

    Merci
    avatar
    Hana Evali
    FémininAge : 27Messages : 167

    le Jeu 8 Mai 2014 - 2:32

    Très beau !



    Luinette
    FémininAge : 17Messages : 34

    le Jeu 8 Mai 2014 - 19:06

    Merci beaucoup :3
    avatar
    Rubis-Hope
    FémininAge : 25Messages : 46

    le Sam 10 Mai 2014 - 14:12

    Ce qeel est super.
    Simple mais perfectionné en même temps, j'aime beaucoup l'effet.
    Merci du partage
    avatar
    Aleksei
    MasculinAge : 22Messages : 20

    le Sam 10 Mai 2014 - 21:06

    Merci.
    Contenu sponsorisé


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