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.

Le deal à ne pas rater :
(CDAV) Foire aux vins : -20% dès 99€ d’achat
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
    MissLoeva
    MissLoeva
    FémininAge : 31Messages : 54

    Mer 29 Mar 2017 - 3:51



    Joli et indémodable ! ham1
    Merci !
    Örmée
    Örmée
    MasculinAge : 37Messages : 139

    Mer 29 Mar 2017 - 15:41

    Merci =)
    allen walker
    allen walker
    FémininAge : 26Messages : 34

    Jeu 6 Avr 2017 - 17:53

    Merci !
    Lilandrile
    Lilandrile
    FémininAge : 38Messages : 60

    Lun 10 Avr 2017 - 18:10

    Merci pour le partage Very Happy
    Asa Ikeda
    Asa Ikeda
    FémininAge : 29Messages : 36

    Dim 16 Avr 2017 - 22:08

    Merci pour ce code Very Happy
    Mahogany
    Mahogany
    FémininAge : 30Messages : 54

    Lun 17 Avr 2017 - 19:21

    Merci bien!
    Alsan
    Alsan
    MasculinAge : 27Messages : 55

    Ven 21 Avr 2017 - 0:41

    Sympa, good job'
    Wildness
    Wildness
    MasculinAge : 31Messages : 16

    Sam 22 Avr 2017 - 22:10

    Merci
    alsayed
    alsayed
    MasculinAge : 50Messages : 75

    Sam 27 Mai 2017 - 9:48

    Merci
    John:
    John:
    MasculinAge : 30Messages : 56

    Mar 30 Mai 2017 - 8:38

    mrc bcp
    Toonsi
    Toonsi
    MasculinAge : 25Messages : 40

    Sam 1 Juil 2017 - 20:48

    MERCI
    Sniper Soroshiya
    Sniper Soroshiya
    FémininAge : 25Messages : 47

    Mar 4 Juil 2017 - 1:28

    Superbe, je te l'emprunte, merci !
    Colombe V
    Colombe V
    FémininAge : 26Messages : 15

    Jeu 6 Juil 2017 - 0:29

    C'est exactement ce que je cherchais pour décorer ce p'tit coin, merci c:
    beza
    beza
    FémininAge : 28Messages : 47

    Sam 15 Juil 2017 - 20:31

    Merci!
    sturdya
    sturdya
    FémininAge : 25Messages : 34

    Sam 15 Juil 2017 - 22:18

    Merci beaucoup !
    Foenor
    Foenor
    MasculinAge : 31Messages : 7

    Dim 23 Juil 2017 - 20:59

    Superbe Very Happy

    Merci beaucoup (décidément, je suis fan de ton boulot !)
    Pikabouh
    Pikabouh
    FémininAge : 22Messages : 123

    Ven 4 Aoû 2017 - 21:17

    Merci :)
    Shiro Amakusa
    Shiro Amakusa
    MasculinAge : 28Messages : 47

    Mar 8 Aoû 2017 - 11:53

    Merci Very Happy
    Otulissa
    Otulissa
    FémininAge : 27Messages : 24

    Ven 11 Aoû 2017 - 3:03

    Merci beaucoup pour le partage c'est très beau !
    Célestee
    Célestee
    FémininAge : 24Messages : 15

    Dim 20 Aoû 2017 - 15:30

    Un grand merci !
    Titou2302
    Titou2302
    MasculinAge : 21Messages : 95

    Lun 21 Aoû 2017 - 21:46

    Merci

    Shin Minate
    Shin Minate
    MasculinAge : 29Messages : 83

    Mar 22 Aoû 2017 - 15:22

    merci



    QEEL en 3 colonnes avec effet zoom (CSS) - Page 29 Mupp
    DarkWrestler.
    DarkWrestler.
    MasculinAge : 29Messages : 36

    Mar 22 Aoû 2017 - 23:43

    Merci
    Karlito
    Karlito
    MasculinAge : 26Messages : 4

    Sam 26 Aoû 2017 - 16:28

    Merci lol, je suis Karlito
    Silver Blast
    Silver Blast
    MasculinAge : 24Messages : 78

    Lun 28 Aoû 2017 - 17:16

    Magnifique **
    Contenu sponsorisé


      La date/heure actuelle est Mar 19 Mar 2024 - 10:13