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

    Rappel du premier message :


    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
    Kaamee
    FémininAge : 21Messages : 110

    le Dim 9 Nov 2014 - 15:14

    Merci !



    avatar
    Kiki*
    FémininAge : 20Messages : 32

    le Lun 10 Nov 2014 - 18:53

    Merci !
    avatar
    EAVENN
    FémininAge : 21Messages : 162

    le Mar 11 Nov 2014 - 14:47

    Merci !
    avatar
    BluesRose's
    MasculinAge : 22Messages : 37

    le Ven 14 Nov 2014 - 20:01

    Merchi !



    avatar
    Potatoes
    FémininAge : 15Messages : 11

    le Dim 16 Nov 2014 - 14:51

    Merci!



    avatar
    ClaryF
    FémininAge : 26Messages : 133

    le Dim 16 Nov 2014 - 18:15

    J'aime beaucoup le rendu ! merci beaucoup *^*
    avatar
    EverLiam
    FémininAge : 28Messages : 899

    le Lun 17 Nov 2014 - 12:54

    J'adore





    avatar
    Invité

    le Jeu 20 Nov 2014 - 16:27

    Very Happy
    avatar
    Kim Jae Yoon
    FémininAge : 26Messages : 126

    le Dim 23 Nov 2014 - 18:49

    Merci !!!
    avatar
    Demily
    FémininAge : 30Messages : 48

    le Mar 25 Nov 2014 - 8:29

    Très beau. Merci du partage.
    avatar
    sabritheducks_79
    FémininAge : 30Messages : 88

    le Mar 25 Nov 2014 - 13:39

    Merci !! Simple & efficace !
    avatar
    Badabulle
    FémininAge : 25Messages : 25

    le Mar 25 Nov 2014 - 15:18

    merci beaucoup :)
    avatar
    FeliceFelicis
    FémininAge : 26Messages : 88

    le Mer 26 Nov 2014 - 1:27

    wonderfull, thanks!
    avatar
    arvalis
    FémininAge : 22Messages : 53

    le Mer 26 Nov 2014 - 19:00

    merci beaucoup
    avatar
    AlexeB
    FémininAge : 21Messages : 164

    le Dim 30 Nov 2014 - 0:35

    Merci du partage :heart:
    avatar
    Edana
    FémininAge : 26Messages : 173

    le Jeu 4 Déc 2014 - 14:32

    Merci beaucoup! =D
    avatar
    Hyuna
    FémininAge : 20Messages : 95

    le Sam 6 Déc 2014 - 20:01

    merci
    avatar
    sayedn73
    MasculinAge : 43Messages : 17

    le Dim 7 Déc 2014 - 2:46

    Thank you
    avatar
    Stitch56
    FémininAge : 23Messages : 199

    le Lun 8 Déc 2014 - 12:13

    Merci
    avatar
    Agnïeszka
    FémininAge : 22Messages : 38

    le Mer 10 Déc 2014 - 0:29

    merci :)
    avatar
    Sachikou
    FémininAge : 17Messages : 48

    le Mer 10 Déc 2014 - 15:04

    Du rose *-*
    Merci !



    avatar
    Chocolakato
    FémininAge : 27Messages : 778

    le Jeu 11 Déc 2014 - 0:06

    Merci beaucoup !



    avatar
    Nymeria.
    FémininAge : 22Messages : 297

    le Mer 24 Déc 2014 - 0:31

    Merci Wink
    avatar
    Toonsi
    MasculinAge : 19Messages : 34

    le Mer 24 Déc 2014 - 16:28

    imer
    avatar
    1charlotte
    FémininAge : 16Messages : 196

    le Jeu 25 Déc 2014 - 15:13

    C'est simple, parfait pour mon forum ^^
    Contenu sponsorisé


      La date/heure actuelle est Sam 24 Juin 2017 - 3:56