AccueilDernières imagesRechercherS'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.

Le deal à ne pas rater :
Manette DualSense PS5 édition limitée 30ème Anniversaire : où ...
Voir le deal

    Qeel Pink & Gray

    A-Lice
    A-Lice
    FémininAge : 30Messages : 4939

    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

    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 ^^


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

    Anonymous
    Invité

    Mar 22 Juil 2014 - 18:15

    Merci A-Lice je déplace Wink
    Aile
    Aile
    FémininAge : 36Messages : 134

    Mar 22 Juil 2014 - 21:11

    C'est simple et tout joli. Merci beaucoup.



    Qeel Pink & Gray 799284Sanstitre1
    Leoguillem
    Leoguillem
    MasculinAge : 25Messages : 137

    Mer 23 Juil 2014 - 20:08

    J'aime beaucoup, merci ! Very Happy



    - Je signe Marabout -
    Catalane
    Catalane
    FémininAge : 31Messages : 110

    Jeu 24 Juil 2014 - 14:16

    Merci c'est très jolie Wink



    Qeel Pink & Gray Cat2r
    Little Melody
    Little Melody
    FémininAge : 23Messages : 64

    Jeu 24 Juil 2014 - 18:35

    Merchiii c:
    Lighane
    Lighane
    FémininAge : 29Messages : 41

    Jeu 24 Juil 2014 - 21:57

    superbe merci
    Daisukai
    Daisukai
    FémininAge : 29Messages : 44

    Ven 25 Juil 2014 - 17:27

    Merci
    Kokoro Korou
    Kokoro Korou
    MasculinAge : 28Messages : 74

    Ven 25 Juil 2014 - 22:36

    Merci !!
    Tchii
    Tchii
    FémininAge : 38Messages : 285

    Sam 26 Juil 2014 - 14:27

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

    Sam 26 Juil 2014 - 15:14

    Merci ♥
    warning.sign
    warning.sign
    FémininAge : 34Messages : 58

    Sam 26 Juil 2014 - 19:57

    merci Very Happy
    Cydae
    Cydae
    FémininAge : 32Messages : 99

    Dim 27 Juil 2014 - 13:20

    merci!
    Airore
    Airore
    FémininAge : 25Messages : 132

    Dim 27 Juil 2014 - 15:45

    Merci !
    EricSouvaltzis
    EricSouvaltzis
    MasculinAge : 25Messages : 47

    Mar 29 Juil 2014 - 16:38

    Merci  Very Happy 
    Tatia38
    Tatia38
    FémininAge : 35Messages : 318

    Mer 30 Juil 2014 - 9:00

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

    Mer 30 Juil 2014 - 18:14

    Merci
    Tchi
    Tchi
    FémininAge : 31Messages : 40

    Jeu 31 Juil 2014 - 11:41

    Merci !
    Drysfer
    Drysfer
    MasculinAge : 34Messages : 71

    Ven 1 Aoû 2014 - 16:29

    Merci.



    Qeel Pink & Gray Gc001
    PLOIM
    PLOIM
    FémininAge : 27Messages : 52

    Ven 1 Aoû 2014 - 18:45

    Merciii ~
    avatar
    AQW
    FémininAge : 30Messages : 225

    Ven 1 Aoû 2014 - 22:52

    Mercii
    *^*
    Dadash_Pearl
    Dadash_Pearl
    FémininAge : 32Messages : 40

    Sam 2 Aoû 2014 - 15:19

    Merci beaucoup :)
    Bridgess
    Bridgess
    FémininAge : 26Messages : 59

    Sam 2 Aoû 2014 - 17:16

    Super élégant, j'aime beaucoup ! Merci !
    Everdeen
    Everdeen
    FémininAge : 30Messages : 36

    Sam 2 Aoû 2014 - 18:58

    Merci encore pour tout **



    Qeel Pink & Gray Anastasia
    louha
    louha
    FémininAge : 37Messages : 219

    Dim 3 Aoû 2014 - 14:32

    merci ^^
    Contenu sponsorisé


      La date/heure actuelle est Mar 15 Oct 2024 - 8:59