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
    Myfanwi
    Myfanwi
    FémininAge : 26Messages : 97

    Ven 13 Juin 2014 - 22:18

    J'aime beaucoup ^^
    John Parker
    John Parker
    MasculinAge : 41Messages : 58

    Sam 14 Juin 2014 - 13:23

    Merci pour ce tutoriel ! ^^



    QEEL en 3 colonnes avec effet zoom (CSS) - Page 6 Ange_s10
    Hancok
    Hancok
    FémininAge : 39Messages : 1466

    Sam 14 Juin 2014 - 14:58

    Hello merci de nous proposer ce joli Qeel :)




    QEEL en 3 colonnes avec effet zoom (CSS) - Page 6 A67g
    Anonymous
    Invité

    Sam 14 Juin 2014 - 19:30

    Merci !
    Kyandi
    Kyandi
    FémininAge : 25Messages : 157

    Sam 14 Juin 2014 - 21:06

    Merci bien ! o/



    QEEL en 3 colonnes avec effet zoom (CSS) - Page 6 1401912845-sans-titre-8


    Lisou
    Lisou
    FémininAge : 23Messages : 351

    Sam 14 Juin 2014 - 22:16

    Merci ♥
    Sparky59
    Sparky59
    FémininAge : 24Messages : 54

    Sam 14 Juin 2014 - 23:16

    merci :3
    Liberty Grim
    Liberty Grim
    FémininAge : 26Messages : 128

    Dim 15 Juin 2014 - 10:59

    Merci bien ! Wink
    Anonymous
    Invité

    Dim 15 Juin 2014 - 18:48

    Merci !
    Fricadella
    Fricadella
    FémininAge : 26Messages : 12

    Mar 17 Juin 2014 - 17:51

      Ca a l'air très beau, merci ^^
    alex24d
    alex24d
    FémininAge : 36Messages : 95

    Mar 17 Juin 2014 - 19:04

    merci
    avatar
    Aïda
    FémininAge : 29Messages : 35

    Mer 18 Juin 2014 - 0:36

    Merci
    Lestrange
    Lestrange
    FémininAge : 28Messages : 165

    Mer 18 Juin 2014 - 10:46

    Le plus beau Qeel selon oim °°
    Elodie potter
    Elodie potter
    FémininAge : 36Messages : 106

    Mer 18 Juin 2014 - 18:22

    Merci
    bubulle
    bubulle
    FémininAge : 36Messages : 76

    Mer 18 Juin 2014 - 21:12

    merci
    ClaryF
    ClaryF
    FémininAge : 33Messages : 138

    Ven 20 Juin 2014 - 14:18

    Merci!
    Ashem
    Ashem
    FémininAge : 38Messages : 255

    Ven 20 Juin 2014 - 15:08

    merci
    avatar
    Løve
    MasculinAge : 28Messages : 189

    Ven 20 Juin 2014 - 15:44

    mERCI \O
    Anonymous
    Invité

    Sam 21 Juin 2014 - 20:42

    Merci du partage Wink
    Aurifereis
    Aurifereis
    MasculinAge : 30Messages : 39

    Sam 21 Juin 2014 - 23:20

    Très beau
    avatar
    Phénix'
    FémininAge : 22Messages : 95

    Dim 22 Juin 2014 - 15:59

    très jolie ! M'ci !
    narakye
    narakye
    FémininAge : 30Messages : 503

    Dim 22 Juin 2014 - 16:50

    Merciii
    Angy Salvatore
    Angy Salvatore
    FémininAge : 28Messages : 28

    Mar 24 Juin 2014 - 14:49

    merci pour ses codes :)
    Zappy
    Zappy
    FémininAge : 24Messages : 56

    Mar 24 Juin 2014 - 15:44

    mercii
    Whitemoon
    Whitemoon
    FémininAge : 23Messages : 695

    Mar 24 Juin 2014 - 17:03

    Merchiii



    QEEL en 3 colonnes avec effet zoom (CSS) - Page 6 Kit_si10
    Contenu sponsorisé


      La date/heure actuelle est Jeu 28 Mar 2024 - 17:53