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
    Miyoko
    FémininAge : 25Messages : 213

    le Dim 28 Déc 2014 - 13:47

    Merci



    avatar
    ARIZONA DREAM
    FémininAge : 18Messages : 33

    le Lun 29 Déc 2014 - 15:19

    merci ♥
    avatar
    LittleMuffin
    FémininAge : 20Messages : 18

    le Ven 2 Jan 2015 - 19:50

    Merci pour le partage :)
    avatar
    Sinon
    FémininAge : 18Messages : 68

    le Mer 7 Jan 2015 - 18:11

    C'est jolie :)
    Merci !
    avatar
    Flaura
    FémininAge : 14Messages : 151

    le Mer 7 Jan 2015 - 19:38

    Michi!
    Daryel
    FémininAge : 30Messages : 336

    le Ven 9 Jan 2015 - 22:14

    Merci !
    avatar
    Ysamar
    FémininAge : 37Messages : 36

    le Sam 10 Jan 2015 - 1:10

    merci!!
    avatar
    Nyan-cat
    FémininAge : 18Messages : 326

    le Sam 10 Jan 2015 - 20:57

    merci <3



    avatar
    Sinavlia
    FémininAge : 19Messages : 158

    le Dim 11 Jan 2015 - 9:26

    Merci !



    avatar
    Foxe
    FémininAge : 16Messages : 122

    le Dim 11 Jan 2015 - 9:53

    Merci beaucoup !



    avatar
    Bunny Lune
    FémininAge : 27Messages : 134

    le Dim 11 Jan 2015 - 13:44

    Bonjour, merci pour le partage
    avatar
    Romann
    FémininAge : 23Messages : 183

    le Mar 13 Jan 2015 - 9:23

    Merci beaucoup !! Very Happy



    avatar
    EUPHORIE*
    FémininAge : 25Messages : 6

    le Ven 16 Jan 2015 - 18:55

    Merci pour le partage !
    avatar
    Luuny
    FémininAge : 19Messages : 43

    le Lun 19 Jan 2015 - 14:28

    Merci !
    avatar
    Lamire
    FémininAge : 23Messages : 88

    le Lun 19 Jan 2015 - 23:51

    Merci beaucoup~
    avatar
    summerby
    FémininAge : 23Messages : 34

    le Jeu 22 Jan 2015 - 20:52

    très sympa :)
    avatar
    Solitude
    FémininAge : 42Messages : 281

    le Ven 23 Jan 2015 - 11:35

    Très jolie merci



    ~ Je suis capable du meilleur comme du pire, mais dans le pire c'est moi la meilleure. ~
    avatar
    Noruenu
    FémininAge : 24Messages : 119

    le Sam 24 Jan 2015 - 1:00

      Merci ! :hug:
    avatar
    Blem.
    FémininAge : 20Messages : 54

    le Dim 8 Fév 2015 - 17:03

    Simple et tout mimi ! J'approuve ! Merci Very Happy
    avatar
    Rara
    FémininAge : 20Messages : 84

    le Lun 9 Fév 2015 - 21:33

    Merci!
    avatar
    Alumine
    FémininAge : 19Messages : 488

    le Lun 16 Fév 2015 - 19:20

    merci ! (=



    Alumine
    avatar
    KimmyKinder
    FémininAge : 15Messages : 179

    le Mar 17 Fév 2015 - 14:25

    Merci beaucoup c:
    avatar
    petit lu
    FémininAge : 24Messages : 170

    le Mar 17 Fév 2015 - 14:55

    Merci
    avatar
    Bleu
    FémininAge : 19Messages : 14

    le Sam 21 Fév 2015 - 11:37

    Merci beaucoup !
    avatar
    Kortyx
    MasculinAge : 27Messages : 81

    le Sam 21 Fév 2015 - 13:55

    Je cherchais justement comment modifier les mots non modifiables... bref, je me comprend ! Merci, hihi.
    Contenu sponsorisé


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