AccueilFAQRechercherMembresGroupesS'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.


    QEEL en 3 colonnes avec effet zoom (CSS)

    Partagez
    avatar
    Okhmhaka
    FémininAge : 33Messages : 31851

    le 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



    avatar
    Jessabelle
    FémininAge : 24Messages : 109

    le Mer 3 Fév 2016 - 3:12

    Super code merci =D
    avatar
    Djeina
    FémininAge : 21Messages : 233

    le Jeu 4 Fév 2016 - 21:18

    Merci :)
    avatar
    Tinkky
    FémininAge : 27Messages : 89

    le Ven 5 Fév 2016 - 0:14

    Merci du partage !
    avatar
    Shidomaru
    MasculinAge : 25Messages : 8

    le Sam 6 Fév 2016 - 19:44

    Merci c'est cool
    avatar
    Elocha
    FémininAge : 67Messages : 255

    le Sam 6 Fév 2016 - 19:54

    merci !



    eLoChA.
    avatar
    KTMiz
    MasculinAge : 19Messages : 47

    le Dim 7 Fév 2016 - 23:01

    Merci



    avatar
    HEAVEN.SPIRIT
    MasculinAge : 23Messages : 37

    le Mar 9 Fév 2016 - 17:48

    merci du partage
    avatar
    Pinkie
    FémininAge : 18Messages : 32

    le Mer 10 Fév 2016 - 16:24

    J'aime beaucoup ! C'est simple et c'est parfait, exactement ce que je cherchais merci ! :3
    avatar
    One..
    MasculinAge : 19Messages : 54

    le Dim 14 Fév 2016 - 15:04

    Thank's
    avatar
    Neya
    FémininAge : 19Messages : 164

    le Mar 16 Fév 2016 - 20:06

    Top du top, merci !
    avatar
    WizzyFree
    MasculinAge : 24Messages : 1994

    le Mer 17 Fév 2016 - 13:23

    Merci



    avatar
    Roromiya
    FémininAge : 100Messages : 111

    le Ven 19 Fév 2016 - 7:37

    J'adore !



    avatar
    Keylha
    FémininAge : 18Messages : 82

    le Ven 19 Fév 2016 - 12:47

    Merci :3



    avatar
    Apollo Justice
    MasculinAge : 22Messages : 1166

    le Jeu 25 Fév 2016 - 22:25

    Merci Wink




    À bout de bras, à bout de larmes, j'ai construit mon Paradis
    J'ai fait comme Magritte, j'ai mis un verre sur l'parapluie
    Dans ma tête, j'ai tout rangé, j'ai soigné ma maladie
    Et je prends gout à être carré, un peu comme un cube Maggi
    Et je me sens comme Tyson, sur son toit, devant son pigeonnier
    Je l'ai déjà prouvé, j'ferais tout pour protéger
    Mon petit coin de Paradis, mon sas de décompression
    God damn, je suis happy, personne pourra m'le voler
    Je suis high, je suis high, sans avion, j'ai décollé
    Entouré des miens, je suis comme auréolé!
    avatar
    Eywa
    FémininAge : 32Messages : 14

    le Sam 27 Fév 2016 - 15:09

    :love: j'aime
    avatar
    Thuban
    FémininAge : 18Messages : 21

    le Jeu 3 Mar 2016 - 14:57

    merci :)
    avatar
    FanDeFofo
    MasculinAge : 41Messages : 16

    le Jeu 3 Mar 2016 - 16:39

    h
    avatar
    Sapphire
    FémininAge : 21Messages : 48

    le Jeu 3 Mar 2016 - 20:07

    Merci beaucoup !
    avatar
    Litalis
    MasculinAge : 22Messages : 21

    le Ven 4 Mar 2016 - 15:24

    Simple et efficace pour l’œil :)
    avatar
    Kamesora
    FémininAge : 26Messages : 90

    le Dim 6 Mar 2016 - 16:35

    merci
    avatar
    Ombrys
    FémininAge : 16Messages : 27

    le Mar 8 Mar 2016 - 19:23

    Je le prend :3
    avatar
    Unleash
    MasculinAge : 18Messages : 83

    le Jeu 10 Mar 2016 - 11:32

    Merci!
    avatar
    Chesham
    FémininAge : 19Messages : 45

    le Ven 11 Mar 2016 - 22:41

    Merci /o/
    avatar
    Océ
    FémininAge : 43Messages : 280

    le Lun 14 Mar 2016 - 15:32

    Merci.



    Bonjours voici les pv's que nous cherchons : [url=http://www.never-utopia.com/t63181-les-postes-vacants-pour-les-chronuque-de-aya#960582 L’annonce est ici[/url]
    avatar
    Dokigaygay
    MasculinAge : 19Messages : 29

    le Jeu 17 Mar 2016 - 10:44

    merci!
    Contenu sponsorisé


      La date/heure actuelle est Jeu 24 Mai 2018 - 19:36