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 du moment : -23%
EVGA SuperNOVA 650 G6 – Alimentation PC 100% ...
Voir le deal
77.91 €

    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
    Rainy-Sunny
    Rainy-Sunny
    FémininAge : 25Messages : 22

    Mar 3 Juin 2014 - 16:21

    Merci !



    Sunny : Petite folle, a moyenne chevelure brune et avec des lunettes de Geekou. Aime se taper des délires toute seule.


    Rainy : Grande folle, a grande chevelure brune et aussi des lunettes, mais pas de Geekou. Aime les chouettes et les minets ce qui est complètement HS.

    Baby Pikachu
    Baby Pikachu
    FémininAge : 27Messages : 72

    Mar 3 Juin 2014 - 21:52

    Merci :3
    EnjoyPhoenix
    EnjoyPhoenix
    FémininAge : 27Messages : 22

    Mer 4 Juin 2014 - 10:09

    Superbe !
    Skitty
    Skitty
    FémininAge : 27Messages : 50

    Mer 4 Juin 2014 - 13:14

    J'adore ! Merci (:
    avatar
    Claclou02
    FémininAge : 25Messages : 46

    Mer 4 Juin 2014 - 13:16

    C'est joli !
    Trenz
    Trenz
    MasculinAge : 21Messages : 44

    Mer 4 Juin 2014 - 18:12

    Merci beaucoup !
    Sachem
    Sachem
    FémininAge : 27Messages : 51

    Mer 4 Juin 2014 - 21:02

    Merci !
    Kasshad
    Kasshad
    MasculinAge : 34Messages : 319

    Mer 4 Juin 2014 - 22:07

    Mercey :)



    QEEL en 3 colonnes avec effet zoom (CSS) - Page 5 Prateb
    Neko-Rika
    Neko-Rika
    FémininAge : 25Messages : 115

    Ven 6 Juin 2014 - 13:25

    Merci, il a vraiment trop la classe !!
    Miss lili
    Miss lili
    FémininAge : 33Messages : 49

    Ven 6 Juin 2014 - 18:05

    merci du partage belle effet
    0smose
    0smose
    FémininAge : 28Messages : 167

    Ven 6 Juin 2014 - 20:27

    Gnaaaah j'adore ton travail, comme toujours ! Merci énormément.



    QEEL en 3 colonnes avec effet zoom (CSS) - Page 5 Bannie10

    But I'm only human
    And I bleed when I fall down... I'm only human and I crash and I break down. Your words in my head,
    knives in my heart. You build me up and then I fall apart.
    'Cause I'm only human.
    Airore
    Airore
    FémininAge : 24Messages : 132

    Sam 7 Juin 2014 - 10:46

    Merci !
    Thorn
    Thorn
    MasculinAge : 23Messages : 432

    Sam 7 Juin 2014 - 16:36

    Merci !^^



    QEEL en 3 colonnes avec effet zoom (CSS) - Page 5 Kryr
    Ailou ~3
    Ailou ~3
    FémininAge : 24Messages : 61

    Sam 7 Juin 2014 - 22:12

    Merci !
    destanee
    destanee
    FémininAge : 37Messages : 43

    Dim 8 Juin 2014 - 11:32

    Merci pour le partage
    Bzzzz
    Bzzzz
    FémininAge : 39Messages : 88

    Dim 8 Juin 2014 - 11:43

    Simple et efficace, merci pour le partage ^^
    Ungoliant.
    Ungoliant.
    FémininAge : 25Messages : 22

    Dim 8 Juin 2014 - 22:25

    Woah, c'est vraiment trop beau ! En, plus, c'est Percy Jackson. *-*
    Valou93
    Valou93
    MasculinAge : 31Messages : 50

    Lun 9 Juin 2014 - 12:50

    Superbe QEEL  :friends: 
    Merci du partage Very Happy
    avatar
    SinoJak
    MasculinAge : 22Messages : 44

    Lun 9 Juin 2014 - 19:15

    j'adore.
    Anonymous
    Invité

    Lun 9 Juin 2014 - 20:28

    C'est trop zouliiiiii :3
    Saku Hana
    Saku Hana
    FémininAge : 25Messages : 27

    Lun 9 Juin 2014 - 22:49

    merci c'est super
    Mangédéfruiélégumeuh
    Mangédéfruiélégumeuh
    MasculinAge : 26Messages : 83

    Mar 10 Juin 2014 - 11:56

    Merci beaucoup Very Happy
    Ondée
    Ondée
    FémininAge : 25Messages : 659

    Mar 10 Juin 2014 - 23:30

    Sobre et efficace, merci ! Very Happy



    EN VACANCES JUSQU'À DÉBUT AOÛT - TOTALEMENT ABSENTE
    Toshiki
    Toshiki
    FémininAge : 27Messages : 56

    Jeu 12 Juin 2014 - 12:40

    merci
    Anonymous
    Invité

    Jeu 12 Juin 2014 - 15:02

    Joli!
    Contenu sponsorisé


      La date/heure actuelle est Ven 29 Mar 2024 - 7:15