Fantôme des Astres est mon nom et il n'appartient qu'à moi
Infos de base Messages : 409Date d'inscription : 26/06/2016Age : 25
Fiche RPG
Sujet: TEMPLATES — QEEL Sam 17 Fév - 21:52 INDEX_BODY
Code: <!-- BEGIN disable_viewonline --> <script type="text/javascript"> <!-- function change_onglet(name) { document.getElementById('onglet_'+anc_onglet).className = 'onglet_0 onglet'; document.getElementById('onglet_'+name).className = 'onglet_1 onglet'; document.getElementById('contenu_onglet_'+anc_onglet).style.display = 'none'; document.getElementById('contenu_onglet_'+name).style.display = 'block'; anc_onglet = name; } //--> </script> <div class="qeel-title">{L_WHO_IS_ONLINE}</div> <div class="updown"></div> <div class="all"> <div class="systeme_onglets"> <div class="onglets"><div onclick="javascript:change_onglet('un');" id="onglet_un" class="onglet_1 onglet"></div><br /> <div onclick="javascript:change_onglet('deux');" id="onglet_deux" class="onglet_0 onglet"></div><br/> <div onclick="javascript:change_onglet('trois');" id="onglet_trois" class="onglet_0 onglet"></div><br /> <div onclick="javascript:change_onglet('quatre');" id="onglet_quatre" class="onglet_0 onglet"></div><br /> <div onclick="javascript:change_onglet('cinq');" id="onglet_cinq" class="onglet_0 onglet"></div> <br /> <div onclick="javascript:change_onglet('six');" id="onglet_six" class="onglet_0 onglet"></div> <div class="contenu_onglets"> <div id="contenu_onglet_un" class="contenu_onglet"> <img src="https://i.imgur.com/QcOXg2S.png" class="imgroupe" /><div class="textgroupe">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin eu mattis augue. Etiam aliquam pulvinar mi, sed semper risus volutpat at. Morbi facilisis lacus eu augue volutpat hendrerit. Vestibulum ultricies vitae nunc vel efficitur. Aenean at efficitur massa. Curabitur ac lorem neque. Etiam eu congue turpis. Sed finibus enim in odio lacinia convallis. Aenean et ex id nisl accumsan luctus non nec nisl. Phasellus a nisl non arcu rhoncus luctus sed pretium nunc. Morbi blandit pellentesque ex, in congue metus euismod a. Nulla bibendum pulvinar neque a ullamcorper. Cras quis porttitor tortor. In rutrum auctor arcu at rhoncus. Quisque vehicula et magna quis lobortis.</div></div> <div id="contenu_onglet_deux" class="contenu_onglet"> <img src="https://i.imgur.com/QcOXg2S.png" class="imgroupe" /><div class="textgroupe">texte here.</div></div> <div id="contenu_onglet_trois" class="contenu_onglet"> <img src="https://i.imgur.com/QcOXg2S.png" class="imgroupe" /><div class="textgroupe">texte here.</div></div> <div id="contenu_onglet_quatre" class="contenu_onglet"> <img src="https://i.imgur.com/QcOXg2S.png" class="imgroupe" /><div class="textgroupe">texte here.</div></div> <div id="contenu_onglet_cinq" class="contenu_onglet"> <img src="https://i.imgur.com/QcOXg2S.png" class="imgroupe" /><div class="textgroupe">texte here.</div></div> <div id="contenu_onglet_six" class="contenu_onglet"> <img src="https://i.imgur.com/QcOXg2S.png" class="imgroupe" /><div class="textgroupe">texte here.</div></div> </div> </div> </div></div> <div class="nuser"><div>Bienvenue à</div><span id="nUSER">{NEWEST_USER}</span><script type="text/javascript">document.getElementById('nUSER').innerHTML=document.getElementById('nUSER').innerHTML.replace(/L'utilisateur enregistré le plus récent est /," ");</script></div> <div class="ttusers"><span id="tUSERS">{TOTAL_USERS} <script type="text/javascript">document.getElementById('tUSERS').innerHTML=document.getElementById('tUSERS').innerHTML.replace(/Nous avons /," "); document.getElementById('tUSERS').innerHTML=document.getElementById('tUSERS').innerHTML.replace(/membres enregistrés/," ") .replace(/membre enregistré/," ");</script>Membres</span></div><br /><br /><br /> <div class="ttpost"><span id="tPOSTS">{TOTAL_POSTS} <script type="text/javascript">document.getElementById('tPOSTS').innerHTML=document.getElementById('tPOSTS').innerHTML.replace(/Nos membres ont posté un total de /," ") .replace(/messages/," "); //--></script>Messages</span></div> <div class="online">{LOGGED_IN_USER_LIST}</div> <div class="onday"><table>{L_CONNECTED_MEMBERS}</table></div> <div class="bdt"><table>{L_WHOSBIRTHDAY_TODAY} <br /> {L_WHOSBIRTHDAY_WEEK}</table></div> <div class="updown"></div> <script type="text/javascript"><!-- var anc_onglet = "un"; change_onglet(anc_onglet); //--></script> <!-- BEGIN switch_chatbox_activate --> <tr> <td class="row1"> <span class="gensmall">{TOTAL_CHATTERS_ONLINE} : {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 --> <!-- END disable_viewonline -->
OVERALL_HEADER après
Code: <head>
Code: <link href="https://fonts.googleapis.com/css?family=Homemade+Apple" rel="stylesheet">
CSS
Code: /* ------------------------------- QEEL ------------------------------- */ .qeel-title{ text-align: center; font-size: 40px; font-family: Homemade Apple; color: white; } .updown{ background-color: #d49f9f; border: 1px solid #824d4d; padding: 10px; width: 800px; margin-bottom: 10px; margin-top: 10px; clear: both; } .all { padding: 10px; width: 485px; background-color: #d49f9f; border: 1px solid #824d4d; float: left; height: 105px; color: white; } .all .systeme_onglets { text-align:center; } .all .onglet { margin: 0 5px; padding:5px; float: right; border-radius: 105px; } .all .onglet_0, .inactif { background:#824d4d; transition: 2s; } /***Onglet survolé***/ .all .onglet_0:hover, .inactif:hover{ background:white; transition: 2s; } /***Onglet sélectionné***/ .all .onglet_1, .affiche-contenu-1{ background:white; transition:all 1s linear; } /***Contenu des onglets principaux***/ .all .contenu_onglet{ background-color:transparent; display:none; font-size:12px; width: 440px; margin: auto; height:85px; } .imgroupe{ width: 90px; height: 90px; padding: 5px; margin: 5px; float: left; margin-top: -90px; margin-left: -20px; } .textgroupe{ width: 350px; height: 80px; overflow: auto; padding: 5px; text-align: justify; margin-top: -100px; margin-right: 0px; float: right; font-size: 11px; } .all .conteneur-onglets { margin: 0; padding:0 0 0 3px; } .nuser{ background-color: #d49f9f; border: 1px solid #824d4d; width: 150px; height: 85px; text-transform: uppercase; font-size: 13px; padding-top: 40px; text-align: center; float: left; margin-left: 5px; color: white; } .ttusers{ background-color: #d49f9f; border: 1px solid #824d4d; width: 150px; height: 39px; text-transform: uppercase; font-size: 13px; text-align: center; float: left; margin-left: 5px; padding-top: 20px; color: white; } .ttpost{ border: 1px solid #824d4d; background-color: #d49f9f; float: left; width: 150px; height: 39px; text-align: center; margin-left: 5px; margin-top: 5px; font-size: 13px; padding-top: 20px; color: white; text-transform: uppercase; } .online{ background-color: #d49f9f; border: 1px solid #824d4d; width: 290px; font-size: 11px; text-align: justify; height: 90px; overflow: auto; margin-top: 5px; float: left; margin-bottom: 5px; color: white; padding: 5px; } .bdt{ background-color: #d49f9f; border: 1px solid #824d4d; width: 195px; font-size: 11px; text-align: justify; height: 90px; padding: 5px; overflow: auto; float: left; margin-top: 5px; margin-left: 5px; } .bdt .row1{ background: transparent !important; } .onday .row1{ background: transparent !important; } .onday{ background-color: #d49f9f; border: 1px solid #824d4d; width: 290px; font-size: 11px; text-align: justify; height: 90px; overflow: auto; margin-top: 5px; float: left; margin-left: 5px; padding: 5px; } /* ------------------------------- FIN DU QEEL ------------------------------- */