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 style Néon

    Partagez
    avatar
    Ayfoth
    MasculinAge : 28Messages : 1229

    le Mer 1 Oct 2014 - 21:32

    Bonjour,

    j'ai commencé par fini des catégories en style néon, donc je continue en vous fournissant cette fois-ci le QEEL.

    Aperçu
    Spoiler:

    Cette catégorie est optimisée sur Invision.

    Pour cette catégorie nous toucherons la template index_body et le CSS


    Template index_body (remplacer à partir de
    Code:
     <!-- BEGIN disable_viewonline --> jusqu'à <!-- END disable_viewonline -->
    Code:
    <!-- BEGIN disable_viewonline -->
      <h1 id="titre_qeel_neon">Titre Qeel</h1>
    <div class="qeel_neon">
      <h1 id="legende_h1">Légende</h1>
      <div id="legende">{GROUP_LEGEND}</div>
      <div id="qeel_gauche">
        <h1 id="connect">Phrase pour les co</h1>
        <div id="connect2">{LOGGED_IN_USER_LIST}{L_CONNECTED_MEMBERS}</div>
        <h1 id="calendrier">Calendrier</h1>
        <div id="calendrier2">
       
          <!-- BEGIN switch_calendar_5days -->
          {CALENDAR_EVENTS_5DAYS}
            </div >
      </div>
     
             
             <!-- END switch_calendar_5days -->
     
      <div id="qeel_droite">
        <h1 id="stats">Statistiques</h1>
        <div id="stats2">{TOTAL_POSTS}<br />
          {TOTAL_USERS}<br />
          {NEWEST_USERS}<br />
          {RECORD_USERS}<br /></div>
       
        <h1 id="annif">Anniversaires</h1>
        <div id="annif2">
          <!-- BEGIN switch_birthday -->
          {L_WHOSBIRTHDAY_TODAY}{L_WHOSBIRTHDAY_WEEK}
             
             <!-- END switch_birthday -->
        </div>
       
        </div>
     
     
         
         
         
      <!-- BEGIN switch_statistics_link -->
                
                <!-- END switch_statistics_link -->

                <!-- BEGIN switch_statistics_nolink -->
                
                <!-- END switch_statistics_nolink -->
             
             <!-- BEGIN switch_chatbox_activate -->
             
                   <!-- BEGIN switch_chatbox_popup -->
                   <div id="chatbox_popup"></div>
                   <script type="text/javascript">
                   insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
                   </script>
                   <!-- END switch_chatbox_popup -->
                
             <!-- END switch_chatbox_activate -->
     <div id="credit">QEEL réalisé par Ayfoth de <a href="http://www.never-utopia.com" >Never Utopia</a></div>   
    </div>
    <!-- END disable_viewonline -->


    CSS
    Code:
    /* ---------------------------------------------- QEEL ------------------------------------------------------ */
    .qeel_neon{
      width: 800px;
      margin-left: auto;
      margin-right: auto;
      background-color: #6e6b6e;
      border: 8px #41dd23 solid;
      -webkit-border-radius: 60px;
    -moz-border-radius: 60px;
    border-radius: 60px;

      overflow: hidden;
     
      box-shadow: 0px 0px 8px green;
      margin-top: 30px;
      position: relative;
    }


    #titre_qeel_neon{
      font-size: 30px;
      text-transform: uppercase;
    text-align: center; 
      color: rgba(255,255,255,0.7);
      text-shadow: 0px 0px 8px green;
      font-family: 'Orbitron', sans-serif;
      position: relative;
      top: 30px;
    }

    #legende_h1{
      font-size: 18px;
      text-transform: uppercase;
    text-align: center; 
      color: rgba(255,255,255,0.7);
      text-shadow: 0px 0px 8px green;
      font-family: 'Orbitron', sans-serif;
      margin-top: 10px;
    }

    #legende{
     background-color: rgba(255,255,255,0.4);
      text-align: center;
      width: 700px;
      overflow: hidden;
      box-shadow: 0px 0px 8px green;
      font-size: 15px;
      position: relative;
      left: 7%;
    }

    #qeel_gauche{
      width: 350px;
      float: left;
    }


    #connect{
      font-size: 18px;
      text-transform: uppercase;
    text-align: center; 
      color: rgba(255,255,255,0.7);
      text-shadow: 0px 0px 8px green;
      font-family: 'Orbitron', sans-serif;
      margin-top: 50px;
      margin-left: 20px;
    }

    #connect2{
     background-color: rgba(255,255,255,0.4);
      text-align: center;
     
      overflow: hidden;
      box-shadow: 0px 0px 8px green;
      font-size: 15px;
      height: 100px;
      overflow: auto;
      margin-left: 20px;
      padding: 5px;
      color: white;
     
    }


    #calendrier{
      font-size: 18px;
      text-transform: uppercase;
    text-align: center; 
      color: rgba(255,255,255,0.7);
      text-shadow: 0px 0px 8px green;
      font-family: 'Orbitron', sans-serif;
      margin-top: 10px;
      margin-left: 20px;
    }

    #calendrier2{
     background-color: rgba(255,255,255,0.4);
      text-align: center;
     
      overflow: hidden;
      box-shadow: 0px 0px 8px green;
      font-size: 15px;
      margin-left: 20px;
      padding: 5px;
      height: 100px;
      overflow: auto;
      color: white;
      margin-bottom: 20px;

    }



    #qeel_droite{
      width: 350px;
      float: right;
    }


    #stats{
      font-size: 18px;
      text-transform: uppercase;
    text-align: center; 
      color: rgba(255,255,255,0.7);
      text-shadow: 0px 0px 8px green;
      font-family: 'Orbitron', sans-serif;
      margin-top: 50px;
      margin-right: 20px;
    }

    #stats2{
     background-color: rgba(255,255,255,0.4);
      text-align: center;
     
      overflow: hidden;
      box-shadow: 0px 0px 8px green;
      font-size: 15px;
      height: 100px;
      overflow: auto;
      margin-right: 20px;
      padding: 5px;
      color: white;
     
    }


    #annif{
      font-size: 18px;
      text-transform: uppercase;
    text-align: center; 
      color: rgba(255,255,255,0.7);
      text-shadow: 0px 0px 8px green;
      font-family: 'Orbitron', sans-serif;
      margin-top: 10px;
      margin-right: 20px;
    }

    #annif2{
     background-color: rgba(255,255,255,0.4);
      text-align: center;
     
      overflow: hidden;
      box-shadow: 0px 0px 8px green;
      font-size: 15px;
      margin-right: 20px;
      padding: 5px;
      height: 100px;
      overflow: auto;
      color: white;
      margin-bottom: 20px;

    }



    #credit{
      font-size: 15px;
      text-transform: uppercase;
    text-align: right; 
      color: rgba(255,255,255,0.7);
      text-shadow: 0px 0px 8px green;
      font-family: 'Orbitron', sans-serif;
      margin-top: 50px;
     
      margin-right: 10px;
      padding: 10px;
      width: 700px;
      overflow: hidden;
     
    }






    /*--------------------------------------------------------------------------------------------------------------*/

    Mettre un crédit vers Never-Utopia est obligatoire. Retirer un crédit est interdit.
    S'il y a des problèmes, venez poster ici.
    Merci de laisser un message pour donner vos impressions, commentaires et/ou remerciements ^^



    avatar
    Halloween
    FémininAge : 24Messages : 9752

    le Dim 12 Oct 2014 - 14:06

    Merci pour le partage, je déplace Wink




    < / Libre service codage >
    avatar
    Tatia38
    FémininAge : 29Messages : 306

    le Sam 25 Oct 2014 - 7:48

    Merci beaucoup
    avatar
    Arpège
    FémininAge : 19Messages : 111

    le Dim 2 Nov 2014 - 0:24

    Merci ~




    Writers World commence à ouvrir !
    avatar
    Brookinette
    FémininAge : 25Messages : 46

    le Dim 2 Nov 2014 - 20:50

    Merci beaucoup :)
    avatar
    Nutop
    FémininAge : 15Messages : 254

    le Ven 19 Juin 2015 - 23:06

    Merci ^^






    avatar
    Luna_Rakuen
    FémininAge : 25Messages : 79

    le Mar 14 Juil 2015 - 5:58

    Merci, c'est super beau Very Happy
    avatar
    Just4Adventure
    MasculinAge : 23Messages : 48

    le Sam 1 Aoû 2015 - 10:53

    Merci je vais essayer. Very Happy
    avatar
    Nartiifiice
    FémininAge : 20Messages : 88

    le Mer 21 Oct 2015 - 20:50

    danke
    avatar
    Kelalin
    FémininAge : 25Messages : 1886

    le Mer 21 Oct 2015 - 22:07

    Merci pour le partage ! (•ิ_•ิ)?
    avatar
    Ombinou
    FémininAge : 23Messages : 133

    le Mar 24 Nov 2015 - 16:18

    Merci ^^
    avatar
    lacoste
    MasculinAge : 24Messages : 30

    le Lun 21 Déc 2015 - 5:01

    merci Very Happy
    avatar
    Leonce
    MasculinAge : 23Messages : 95

    le Jeu 28 Jan 2016 - 0:30

    Merci pour ce tuto cheers



    avatar
    Saphira
    FémininAge : 21Messages : 72

    le Mer 31 Aoû 2016 - 0:17

    merci
    avatar
    Edward Speleers
    FémininAge : 30Messages : 456

    le Mar 20 Sep 2016 - 14:47

    Super! Merci



    avatar
    SenseiThor
    MasculinAge : 28Messages : 1

    le Ven 28 Oct 2016 - 13:43

    merci bien
    avatar
    Paulind
    FémininAge : 16Messages : 24

    le Lun 7 Nov 2016 - 9:42

    Merci :)
    avatar
    Scratpub
    FémininAge : 29Messages : 73

    le Lun 5 Déc 2016 - 22:35

    Super merci pour le partage !
    avatar
    petit lu
    FémininAge : 25Messages : 172

    le Mar 2 Mai 2017 - 14:40

    Merci du partage ♥
    avatar
    Nyls
    MasculinAge : 17Messages : 28

    le Sam 9 Sep 2017 - 16:28

    merci énorméééément !
    Contenu sponsorisé


      La date/heure actuelle est Mer 20 Juin 2018 - 11:48