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
    -Hikaru-
    MasculinAge : 21Messages : 51

    le Mar 10 Mai 2016 - 18:02

    merci ^^
    avatar
    Stronger
    MasculinAge : 23Messages : 277

    le Jeu 12 Mai 2016 - 1:16

    merci !@



    avatar
    Ahina
    FémininAge : 36Messages : 52

    le Mer 18 Mai 2016 - 14:44

    super, merci pour le code :)
    avatar
    Camomille
    FémininAge : 18Messages : 57

    le Ven 20 Mai 2016 - 12:43

    Magnifique Wink !
    avatar
    Argimpasa
    FémininAge : 26Messages : 93

    le Lun 23 Mai 2016 - 17:01

    Merci Very Happy
    avatar
    Artémis Walker
    FémininAge : 22Messages : 54

    le Jeu 26 Mai 2016 - 13:21

    Merci



    avatar
    SectumSempra
    FémininAge : 20Messages : 81

    le Ven 27 Mai 2016 - 1:29

    Ce Queel est génial, merci ! :coeur:
    avatar
    Sighild
    FémininAge : 31Messages : 167

    le Lun 30 Mai 2016 - 18:11

    Merci!!
    avatar
    bibi0712
    FémininAge : 40Messages : 66

    le Jeu 9 Juin 2016 - 19:55

    Hello
    Je suis bien curieuse de voir pirat
    Merci ☺
    avatar
    *-Atlas-*
    MasculinAge : 29Messages : 135

    le Jeu 23 Juin 2016 - 6:24

    Je suis curieux de voir



    avatar
    Redoxina
    FémininAge : 23Messages : 4

    le Sam 25 Juin 2016 - 12:14

    C'est très intéressant. Mais comment peut on enlever la fonction zoom ?
    avatar
    Jujudu44
    FémininAge : 30Messages : 61

    le Dim 26 Juin 2016 - 23:28

    Magnifique, merci !!! :)
    avatar
    Karinila
    FémininAge : 21Messages : 10

    le Jeu 30 Juin 2016 - 19:53

    Un QEEL très sympa, merci beaucoup ! *-*
    avatar
    Kira Hatsuki
    FémininAge : 16Messages : 142

    le Ven 8 Juil 2016 - 14:24

    Merci beaucoup !
    avatar
    Liintu
    FémininAge : 28Messages : 51

    le Lun 11 Juil 2016 - 17:32

    Pile ce que je cherchais, un grand merci !
    avatar
    rajani
    MasculinAge : 19Messages : 15

    le Mer 13 Juil 2016 - 11:06

    merci
    avatar
    Ifreann
    FémininAge : 24Messages : 48

    le Ven 15 Juil 2016 - 0:07

    Je teste ça, merci !
    avatar
    dean winchester
    MasculinAge : 23Messages : 85

    le Dim 17 Juil 2016 - 14:19

    Super sympa le résultat. Je testerai avec joie. Merci !!
    avatar
    Eryu
    FémininAge : 25Messages : 46

    le Mar 19 Juil 2016 - 11:40

    J'aime beaucoup ce SEEL, je l'ai déjà vu utilisé sur quelques forums et c'est vrai qu'il rend pas mal =)
    Merci pour le code !
    avatar
    tamedmind
    FémininAge : 17Messages : 19

    le Jeu 28 Juil 2016 - 1:16

    merci!
    avatar
    The A.
    FémininAge : 20Messages : 38

    le Jeu 28 Juil 2016 - 16:04

    Merci !




    Jamais contente.
    avatar
    .Lucifer.
    MasculinAge : 45Messages : 176

    le Mar 2 Aoû 2016 - 12:13

    Merci beaucoup! Wink



    avatar
    Crazy-Sweet
    FémininAge : 26Messages : 128

    le Lun 8 Aoû 2016 - 14:43

    J'adore <3 Merci à toi !



    What if I need you baby?
    I PROMISE THAT ONE DAY I’LL BE AROUND, I’LL KEEP YOU SAFE ! IT'S SUCH A CRUEL WORLD BUT I FOUND SOMETHING GOOD.. ‘CAUSE IN ALL THIS BITTERNESS YOU STAY SO SWEET ...
    avatar
    Chant
    FémininAge : 17Messages : 68

    le Mar 16 Aoû 2016 - 13:34

    Merci beaucoup :p
    avatar
    Hadès.
    MasculinAge : 19Messages : 37

    le Jeu 18 Aoû 2016 - 21:56

    merci !
    Contenu sponsorisé


      La date/heure actuelle est Jeu 24 Mai 2018 - 19:23