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 :
SSD interne Crucial BX500 2,5″ SATA – 500 Go à 29,99€
29.99 €
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
    Fleur-de-pluie
    Fleur-de-pluie
    FémininAge : 26Messages : 8

    Sam 10 Mai 2014 - 21:27

    Merci! :)
    Fluff'
    Fluff'
    FémininAge : 37Messages : 55

    Dim 11 Mai 2014 - 21:59

    Merci :)
    Izy
    Izy
    FémininAge : 26Messages : 15

    Lun 12 Mai 2014 - 20:09

    Super code :heart:
    Choubakawa
    Choubakawa
    MasculinAge : 31Messages : 87

    Lun 12 Mai 2014 - 22:21

    Merci :)



    QEEL en 3 colonnes avec effet zoom (CSS) - Page 3 Witche13
    PANDA™
    PANDA™
    FémininAge : 27Messages : 25

    Mar 13 Mai 2014 - 14:28

    Merci bien pour le partage  :hug: 
    Eshon
    Eshon
    FémininAge : 43Messages : 197

    Mar 13 Mai 2014 - 15:07

    Merci pour ce super tuto ! ^^
    Jimmy
    Jimmy
    MasculinAge : 29Messages : 166

    Mar 13 Mai 2014 - 21:48

    prout
    liliboom
    liliboom
    FémininAge : 32Messages : 17

    Mar 13 Mai 2014 - 21:51

    Super beau et original ! merci pour le partage :)
    Haruna
    Haruna
    FémininAge : 27Messages : 12

    Mer 14 Mai 2014 - 13:57

    Merci ! ^O^
    Patapou
    Patapou
    FémininAge : 25Messages : 15

    Mer 14 Mai 2014 - 19:55

    Merci
    Luna_Rakuen
    Luna_Rakuen
    FémininAge : 32Messages : 79

    Ven 16 Mai 2014 - 2:58

    Merci
    Ryosaki
    Ryosaki
    MasculinAge : 32Messages : 109

    Ven 16 Mai 2014 - 17:22

    Merci du partage



    QEEL en 3 colonnes avec effet zoom (CSS) - Page 3 Tutog
    Belle Morte
    Belle Morte
    FémininAge : 28Messages : 42

    Ven 16 Mai 2014 - 21:08

    Merci!
    Tatia38
    Tatia38
    FémininAge : 35Messages : 318

    Sam 17 Mai 2014 - 21:51

    Merci beaucoup
    Clarisse
    Clarisse
    FémininAge : 24Messages : 3960

    Dim 18 Mai 2014 - 13:36

    Merci. *o*
    Kovu
    Kovu
    FémininAge : 23Messages : 257

    Dim 18 Mai 2014 - 15:44

    Merci beaucoup !
    Alenn
    Alenn
    FémininAge : 32Messages : 192

    Mar 20 Mai 2014 - 19:00

    Merci !



    Rien de nouveau.
    EmYasmina
    EmYasmina
    FémininAge : 24Messages : 85

    Mar 20 Mai 2014 - 19:26

    Merci du partage, ce QEEL est super sympa! ^^
    Chatchoum
    Chatchoum
    FémininAge : 32Messages : 43

    Mer 21 Mai 2014 - 0:24

    marciiii !
    Yser
    Yser
    FémininAge : 26Messages : 46

    Mer 21 Mai 2014 - 1:14

    C'est très jouli ! Michi !
    Katuro
    Katuro
    FémininAge : 26Messages : 39

    Mer 21 Mai 2014 - 19:33

    Merci beaucoup, c'est parfait <3
    Hayate747
    Hayate747
    MasculinAge : 35Messages : 196

    Jeu 22 Mai 2014 - 14:04

    Merci !!!
    avatar
    Puunch
    FémininAge : 32Messages : 18

    Ven 23 Mai 2014 - 12:26

    très jolie
    Golden`Lies
    Golden`Lies
    FémininAge : 32Messages : 44

    Ven 23 Mai 2014 - 14:38

    Merci !
    soraya
    soraya
    FémininAge : 33Messages : 38

    Ven 23 Mai 2014 - 23:16

    c'est vraiment joli *-* je vais tester ça merci :heart:




       
    Cory Monteith  1982 - 2013 Oh, why you look so sad? Tears are in your eyes come on and come to me now. Don't be ashamed to cry, let me see you through 'cause I've seen the dark side too. ©️ by anaëlle.
    Contenu sponsorisé


      La date/heure actuelle est Jeu 21 Nov 2024 - 13:12