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 Pink & Gray

    Partagez
    avatar
    A-Lice
    FémininAge : 23Messages : 4939

    le Sam 19 Juil 2014 - 3:48


    Qeel Pink & Gray


    Suite à une demande de Javarakita voici un Qeel Pink & Gray.

    Je précise que l'arrière plan beige correspond à mon forum.

    HTML & CSS ~ Voici donc un aperçu : www


    Et le code :
    Il faut remplacer cette partie du template index-body :
    Code:
    <!-- BEGIN disable_viewonline -->
    <table class="forumline" width="100%" border="0" cellspacing="1" cellpadding="0">
      <tr>
          <td class="catHead" colspan="2" height="28">
          <!-- BEGIN switch_viewonline_link -->
          <span class="cattitle"><a class="cattitle" href="{U_VIEWONLINE}" rel="nofollow">{L_WHO_IS_ONLINE}</a></span>
          <!-- END switch_viewonline_link -->

          <!-- BEGIN switch_viewonline_nolink -->
          <span class="cattitle">{L_WHO_IS_ONLINE}</span>
          <!-- END switch_viewonline_nolink -->
          </td>
      </tr>
      <tr>
          <td class="row1" rowspan="6" align="center" valign="middle"><img src="{L_ONLINE_IMG}" id="i_whosonline" alt="{L_WHO_IS_ONLINE}" /></td>
          <td class="row1" width="100%"><span class="gensmall">{TOTAL_POSTS}<br />
          {TOTAL_USERS}<br />
          {NEWEST_USER}</span></td>
      </tr>
      <tr>
          <td class="row1"><span class="gensmall">{TOTAL_USERS_ONLINE}<br />
          {RECORD_USERS}<br />
          <br />
          {LOGGED_IN_USER_LIST}</span></td>
      </tr>
      {L_CONNECTED_MEMBERS}
      {L_WHOSBIRTHDAY_TODAY}
      {L_WHOSBIRTHDAY_WEEK}
      <tr>
          <td class="row1"><span class="gensmall">{LEGEND} : {GROUP_LEGEND}</span></td>
      </tr>
      <!-- BEGIN switch_chatbox_activate -->
      <tr>
          <td class="row1">
            <span class="gensmall">{TOTAL_CHATTERS_ONLINE} :&nbsp; {CHATTERS_LIST}<br />
                <!-- BEGIN switch_chatbox_popup -->
                <div id="chatbox_popup"></div>
                <script type="text/javascript">
                //<![CDATA[
                insertChatBoxPopup('{disable_viewonline.switch_chatbox_activate.switch_chatbox_popup.U_FRAME_CHATBOX}', '{L_CLICK_TO_JOIN_CHAT}');
                //]]>
                </script>
                <!-- END switch_chatbox_popup -->
            </span>
          </td>
      </tr>
      <!-- END switch_chatbox_activate -->
    </table>
    <!-- END disable_viewonline -->

    Par celle-ci :
    Code:
    <!-- BEGIN disable_viewonline -->
    <link href='http://fonts.googleapis.com/css?family=Playball' rel='stylesheet' type='text/css'><div id="qeel_fond"><div id="qeel_img"></div><div class="titre_qeel">Que se passe-t-il à Canberra ?</div>
    <table id="qeel_position">
      <tr>
        <td class="qeel_colonne1"><span id="nb_messages">{TOTAL_POSTS}<script type="text/javascript">document.getElementById('nb_messages').innerHTML=document.getElementById('nb_messages').innerHTML.replace(/messages/,"aventures se sont passées à Canberra.");
    document.getElementById('nb_messages').innerHTML=document.getElementById('nb_messages').innerHTML.replace(/Nos membres ont posté un total de/," ");</script></span><br />
          <span id="nb_membres">{TOTAL_USERS}<script type="text/javascript">document.getElementById('nb_membres').innerHTML=document.getElementById('nb_membres').innerHTML.replace(/Nous avons/,"Il y a eu");
    document.getElementById('nb_membres').innerHTML=document.getElementById('nb_membres').innerHTML.replace(/membres enregistrés/,"déménagements depuis le début.");
    document.getElementById('nb_membres').innerHTML=document.getElementById('nb_membres').innerHTML.replace(/membre enregistré/,"déménagement depuis le début.");</script></span><br />
          <span id="new_user">{NEWEST_USER}<script type="text/javascript">document.getElementById('new_user').innerHTML=document.getElementById('new_user').innerHTML.replace(/L'utilisateur enregistré le plus récent est/,"Le petit dernier à avoir emménager est");</script></span><br /><br/>
        <span id="tot_user">{TOTAL_USERS_ONLINE}<script type="text/javascript">document.getElementById('tot_user').innerHTML=document.getElementById('tot_user').innerHTML.replace(/Il y a en tout/,"Il y a");
    document.getElementById('tot_user').innerHTML=document.getElementById('tot_user').innerHTML.replace(/utilisateurs en ligne/,"personnes près de Canberra en ce moment même");
    document.getElementById('tot_user').innerHTML=document.getElementById('tot_user').innerHTML.replace(/utilisateur en ligne/,"personne près de Canberra en ce moment même");
    document.getElementById('tot_user').innerHTML=document.getElementById('tot_user').innerHTML.replace(/Enregistrés/,"habitants");
    document.getElementById('tot_user').innerHTML=document.getElementById('tot_user').innerHTML.replace(/Enregistré/,"habitant");
    document.getElementById('tot_user').innerHTML=document.getElementById('tot_user').innerHTML.replace(/Invisibles/,"inconnus au bataillon");
    document.getElementById('tot_user').innerHTML=document.getElementById('tot_user').innerHTML.replace(/Invisible/,"inconnu au bataillon");
    document.getElementById('tot_user').innerHTML=document.getElementById('tot_user').innerHTML.replace(/Invités/,"touristes qui hésitent à s'installer")
     document.getElementById('tot_user').innerHTML=document.getElementById('tot_user').innerHTML.replace(/Invité/,"touriste qui hésite à s'installer");</script></span><br />
          {RECORD_USERS}<br />
          <br />
          <span id="logged">{LOGGED_IN_USER_LIST}<script type="text/javascript">document.getElementById('logged').innerHTML=document.getElementById('logged').innerHTML.replace(/Utilisateurs enregistrés :/,"Les actifs présents sont");</script></span><br />
    </td>
    <td width="20px;"></td>
    <td class="qeel_colonne2">
    <script type="text/javascript">
            //<!--
                    function change_onglet(bouya)
                    {
                            document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet';
                            document.getElementById('onglet_'+bouya).className = 'onglet_1 onglet';
                            document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none';
                            document.getElementById('contenu_onglet_'+bouya).style.display = 'block';
                            anc_onglet = bouya;
                    }
            //-->
    </script><span class="onglet_0 onglet" id="onglet_un" onmouseover="javascript:change_onglet('un');">Kapou</span><span class="onglet_0 onglet" id="onglet_deux" onmouseover="javascript:change_onglet('deux');">Bibiche</span><span class="onglet_0 onglet" id="onglet_trois" onmouseover="javascript:change_onglet('trois');">Yankee</span>
    <div class="contenu_onglet" id="contenu_onglet_un">
        Contenu du 1er onglet
    </div>
    <div class="contenu_onglet" id="contenu_onglet_deux">
        Contenu du 2ième onglet
    </div>
    <div class="contenu_onglet" id="contenu_onglet_trois">
        Contenu du 3ième onglet
    </div><script type="text/javascript">
            //<!--
                    var anc_onglet = 'un';
                    change_onglet(anc_onglet);
            //-->
      </script>
    </td>
    <td width="20px;"></td>
        <td class="qeel_colonne1"><table class="transparent">{L_CONNECTED_MEMBERS}
      {L_WHOSBIRTHDAY_TODAY}
      {L_WHOSBIRTHDAY_WEEK}</table>
    </td>
      </tr>
    </table>
    </div>
    <!-- END disable_viewonline -->


    CSS :
    Code:
    .titre_qeel {
    font-size:40px;
    color:crimson;
    text-align:center;
    display:block;
    margin-top:-30px;
    font-family: 'Playball', cursive;
    }
    .transparent .row1 {
    background-color: transparent;
    }
    .transparent .gensmall {
    font-size:12px;
    }
    /*onglets*/
    .onglet {
    background:white;
    padding:2px;
    margin-right:3px;
    }

    .onglet_0 {
    background:whitesmoke;
    }

    .onglet_1 {
    background:white;
    }

    #onglet_un {
    color:cyan;
    }

    #onglet_deux {
    color:pink;
    }

    #onglet_trois {
    color:silver;
    }

    .contenu_onglet {
    display:none;
    padding:10px;
    height:120px;
    text-align:justify;
    }

    #contenu_onglet_un {
    font-size:13px;
    }

    #contenu_onglet_deux{
    font-size:13px;
    }

    #contenu_onglet_trois {
    font-size:13px;
    }
    /*fin onglets*/

    #qeel_fond {
    background:whitesmoke;
    }

    #qeel_img {
    height:63px;
    background-image:url(http://upz.fr/Ueim1.png);
    }

    #qeel_position {
    position: relative;
    padding:10px;
    }

    .qeel_colonne1 {
    font-size: 12px;
    text-align: justify;
    width: 35%;
    height: 150px;
    overflow: auto;
    background:pink;
    padding:10px;
    }

    .qeel_colonne2 {
    width: 25%;
    height: 150px;
    overflow: auto;
    background:pink;
    padding:10px;
    text-align:center;
    }


    La suite de l'ensemble se trouve ici :


    PA Pink & Gray
    Catégories
    Qeel

    /!\ En cas de problème, c'est ici que ça ce passe.


    Dernière édition par A-Lice le Mar 17 Fév 2015 - 15:26, édité 2 fois

    avatar
    Halloween
    FémininAge : 23Messages : 9741

    le Mar 22 Juil 2014 - 18:15

    Merci A-Lice je déplace Wink



    Je déménage sur NMD o/
    avatar
    Aile
    FémininAge : 29Messages : 134

    le Mar 22 Juil 2014 - 21:11

    C'est simple et tout joli. Merci beaucoup.



    avatar
    Leoguillem
    MasculinAge : 17Messages : 137

    le Mer 23 Juil 2014 - 20:08

    J'aime beaucoup, merci ! Very Happy



    - Je signe Marabout -
    avatar
    Catalane
    FémininAge : 23Messages : 110

    le Jeu 24 Juil 2014 - 14:16

    Merci c'est très jolie Wink




    avatar
    Little Melody
    FémininAge : 16Messages : 64

    le Jeu 24 Juil 2014 - 18:35

    Merchiii c:
    avatar
    Lighane
    FémininAge : 21Messages : 41

    le Jeu 24 Juil 2014 - 21:57

    superbe merci
    avatar
    Daisukai
    FémininAge : 22Messages : 44

    le Ven 25 Juil 2014 - 17:27

    Merci
    avatar
    Kokoro Korou
    MasculinAge : 21Messages : 68

    le Ven 25 Juil 2014 - 22:36

    Merci !!
    avatar
    Tchii
    FémininAge : 31Messages : 225

    le Sam 26 Juil 2014 - 14:27

    Coucou!
    Merci pour ce joli QEEL!
    A trés vite.
    Tchii!
    avatar
    zbou
    FémininAge : 23Messages : 83

    le Sam 26 Juil 2014 - 15:14

    Merci ♥
    avatar
    warning.sign
    FémininAge : 26Messages : 57

    le Sam 26 Juil 2014 - 19:57

    merci Very Happy
    avatar
    Cydae
    FémininAge : 24Messages : 99

    le Dim 27 Juil 2014 - 13:20

    merci!
    avatar
    Airore
    FémininAge : 18Messages : 132

    le Dim 27 Juil 2014 - 15:45

    Merci !
    avatar
    EricSouvaltzis
    MasculinAge : 18Messages : 47

    le Mar 29 Juil 2014 - 16:38

    Merci  Very Happy 
    avatar
    Tatia38
    FémininAge : 28Messages : 303

    le Mer 30 Juil 2014 - 9:00

    Merci beaucoup.J'adore
    avatar
    bubulle
    FémininAge : 30Messages : 76

    le Mer 30 Juil 2014 - 18:14

    Merci
    avatar
    Tchi
    FémininAge : 24Messages : 40

    le Jeu 31 Juil 2014 - 11:41

    Merci !
    avatar
    Drysfer
    MasculinAge : 27Messages : 71

    le Ven 1 Aoû 2014 - 16:29

    Merci.



    avatar
    PLOIM
    FémininAge : 19Messages : 52

    le Ven 1 Aoû 2014 - 18:45

    Merciii ~
    avatar
    AQW
    FémininAge : 22Messages : 223

    le Ven 1 Aoû 2014 - 22:52

    Mercii
    *^*



    Blblbl. ♥
    avatar
    Dadash_Pearl
    FémininAge : 25Messages : 40

    le Sam 2 Aoû 2014 - 15:19

    Merci beaucoup :)
    avatar
    Bridgess
    FémininAge : 18Messages : 51

    le Sam 2 Aoû 2014 - 17:16

    Super élégant, j'aime beaucoup ! Merci !
    avatar
    Everdeen
    FémininAge : 23Messages : 34

    le Sam 2 Aoû 2014 - 18:58

    Merci encore pour tout **



    avatar
    louha
    FémininAge : 29Messages : 213

    le Dim 3 Aoû 2014 - 14:32

    merci ^^
    Contenu sponsorisé


      La date/heure actuelle est Ven 21 Juil 2017 - 12:41