AccueilDernières imagesRechercherS'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.

-23%
Le deal à ne pas rater :
EVGA SuperNOVA 650 G6 – Alimentation PC 100% modulaire 650W, 80+ ...
77.91 € 100.91 €
Voir le deal

    QEEL en 3 colonnes avec effet zoom (CSS)

    Sparrow-style
    Sparrow-style
    FémininAge : 39Messages : 32055

    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



    sign
    Plum
    Plum
    FémininAge : 57Messages : 21

    Lun 9 Jan 2017 - 23:09

    Merci pour ce partage
    Marec
    Marec
    MasculinAge : 28Messages : 21

    Dim 15 Jan 2017 - 19:08

    Merci :)
    wally the bully
    wally the bully
    MasculinAge : 25Messages : 58

    Mar 17 Jan 2017 - 13:27

    thx
    lounythithi
    lounythithi
    MasculinAge : 28Messages : 14

    Mer 18 Jan 2017 - 16:54

    Merchi
    Mordred Ghost
    Mordred Ghost
    FémininAge : 37Messages : 74

    Mer 18 Jan 2017 - 18:21

    Ca m'a l'air plutôt cool dites moi !
    Zula
    Zula
    FémininAge : 28Messages : 9

    Dim 22 Jan 2017 - 2:35

    Merciiii ♥
    Pull en Laine qui Gratte
    Pull en Laine qui Gratte
    FémininAge : 19Messages : 71

    Mar 31 Jan 2017 - 20:46

    merci!
    Giovale
    Giovale
    MasculinAge : 32Messages : 16

    Mar 31 Jan 2017 - 21:41

    Merci !
    Gieve
    Gieve
    FémininAge : 34Messages : 123

    Sam 4 Fév 2017 - 16:07

    Merci beaucoup c'est magnifique **
    Jagan
    Jagan
    MasculinAge : 39Messages : 25

    Dim 5 Fév 2017 - 14:01

    merci
    Doomdom
    Doomdom
    MasculinAge : 38Messages : 25

    Dim 5 Fév 2017 - 17:49

    Hate de voir le code, merci beaucoup :omg:
    Blanche Neige
    Blanche Neige
    FémininAge : 29Messages : 9

    Lun 6 Fév 2017 - 5:43

    Comme c'est parfait ça :han: MERCI!
    Nyptia
    Nyptia
    FémininAge : 32Messages : 38

    Jeu 9 Fév 2017 - 23:23

    Merci !
    Moonlight.
    Moonlight.
    FémininAge : 29Messages : 6

    Ven 10 Fév 2017 - 4:09

    C'est vraiment sympa tout ça :han:
    inouk
    inouk
    MasculinAge : 22Messages : 25

    Dim 19 Fév 2017 - 21:28

    merci
    Koschei
    Koschei
    FémininAge : 32Messages : 17

    Ven 24 Fév 2017 - 20:29

    Merci !
    Malice1329
    Malice1329
    FémininAge : 35Messages : 81

    Sam 25 Fév 2017 - 4:23

    Merci c'est super comme code



    ❝ Every Love Story is Beautiful ❞
    Baby, I'm dancing in the dark with you between my arms, Barefoot on the grass, listening to our favorite song,When you said you looked a mess, I whispered underneath my breath But you heard it, darling, you look perfect tonight× BY LIZZOU
    Mitsuomi73
    Mitsuomi73
    MasculinAge : 31Messages : 42

    Lun 27 Fév 2017 - 16:42

    Merci beaucoup pour le tuto' ♥
    Phenixis
    Phenixis
    FémininAge : 25Messages : 25

    Ven 3 Mar 2017 - 16:34

    Superbe, merci beaucoup pour le partage.



    QEEL en 3 colonnes avec effet zoom (CSS) - Page 28 832631nyxsisisign
    SiegfriedVH
    SiegfriedVH
    MasculinAge : 28Messages : 1

    Dim 5 Mar 2017 - 21:30

    Très beau boulot. Merci.
    myka63
    myka63
    MasculinAge : 36Messages : 5

    Lun 6 Mar 2017 - 23:11

    Je veux bien essayer merci.
    tipo12
    tipo12
    FémininAge : 27Messages : 28

    Sam 18 Mar 2017 - 18:00

    Merci Very Happy



    mes écrits: CLIC
    Likilou
    Likilou
    MasculinAge : 30Messages : 307

    Lun 20 Mar 2017 - 19:06

    Merci



    QEEL en 3 colonnes avec effet zoom (CSS) - Page 28 707828SignArthur2
    charlint
    charlint
    FémininAge : 24Messages : 30

    Lun 27 Mar 2017 - 3:11

    merci
    angelino
    angelino
    FémininAge : 24Messages : 6

    Lun 27 Mar 2017 - 10:35

    super!
    Contenu sponsorisé


      La date/heure actuelle est Mar 19 Mar 2024 - 8:22