![[INDEX ASTRONAUT] Empty](https://2img.net/i/fa/empty.gif)
Jawn
# [INDEX ASTRONAUT] - Jeu 19 Sep - 2:36
![[INDEX ASTRONAUT] BqfNB9e](https://imgur.com/bqfNB9e.png)
- L'avatar de la personne connecté dans le titre du forum bat comme un coeur.
- L'astronaute flotte de haut en bas.
- La phrase de description sous l'astronaute défile.
- Les étoiles sur la bannière bougent de gauche à droite, c'est du code.
- Le rond autour de l'avatar du dernier posteur sur les catégories bouge.
- Les deux ronds autour de la bordure qui tourne autour de l'avatar du dernier posteur sur les catégories tournent à vitesse différente.
Barre de navigation + bannière
Tout se trouvant dans le même template, il sera donc à copier coller entièrement. Rendez vous dans votre panneau d'administration > Affichage > Templates > Général > Overall_header :
- Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="{S_CONTENT_DIRECTION}" id="min-width" lang="{L_LANG_HTML}" xml:lang="{L_LANG_HTML}" {NAMESPACE_FB_LIKE} {NAMESPACE_FB} {NAMESPACE_BBCODE}>
<head>
<title>{SITENAME_TITLE}{PAGE_TITLE}</title>
<meta http-equiv="content-type" content="text/html; charset={S_CONTENT_ENCODING}" />
<meta http-equiv="content-script-type" content="text/javascript" />
<meta http-equiv="content-style-type" content="text/css" />
<!-- BEGIN switch_compat_meta -->
<meta http-equiv="X-UA-Compatible" content="IE={switch_compat_meta.VERSION}" />
<!-- END switch_compat_meta -->
<!-- BEGIN switch_canonical_url -->
<link rel="canonical" href="{switch_canonical_url.CANONICAL_URL}" />
<!-- END switch_canonical_url -->
{META_FAVICO}
{META}
{META_FB_LIKE}
<meta name="title" content="{SITENAME_TITLE}{PAGE_TITLE}" />
{T_HEAD_STYLESHEET}
{CSS}
<link href="//solrainha.github.io/honeybee/honeybee.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Aldrich|Orbitron&display=swap" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css?family=Nova+Round|Righteous&display=swap" rel="stylesheet"/>
<script type='text/javascript' src='http://files.jcink.net/html/jquery-1.7.2.min.js'></script>
<script type='text/javascript' src='http://files.jcink.net/html/jquery.cookie-1.3.1.js'></script>
<script type='text/javascript' src='http://files.jcink.net/html/catcollapse.js'></script>
<script src="http://greatdivide.b1.jcink.com/uploads/greatdivide/styletooltips.js"></script>
<script>
(function($){
$(document).ready(function(){
$("[title]").style_my_tooltips({
tip_follows_cursor:true,
tip_delay_time:0,
tip_fade_speed:300
});
});
})(jQuery);
jQuery(document).ready(function($) {
$(".scroll").click(function(event){
event.preventDefault();
$('html,body').animate({scrollTop:$(this.hash).offset().top}, 500);
});
});</script>
<link rel="search" type="application/opensearchdescription+xml" href="/improvedsearch.xml" title="{SITENAME}" />
<link rel="search" type="application/opensearchdescription+xml" href="{URL_BOARD_DIRECTORY}/search/improvedsearch.xml" title="{SEARCH_FORUMS}" />
<script src="{JQUERY_PATH}" type="text/javascript"></script>
<!-- BEGIN switch_recent_jquery -->
<script src="{JS_DIR}jquery1.9/jquery-migrate-1.4.1.js" type="text/javascript"></script>
<script src="{JQUERY_DIR}browser/v1.0/jquery.browser.min.js" type="text/javascript"></script>
<script src="{JQUERY_DIR}support/jquery.support.js" type="text/javascript"></script>
<!-- END switch_recent_jquery -->
<script src="{JS_DIR}{L_LANG}.js" type="text/javascript"></script>
{RICH_SNIPPET_GOOGLE}
<!-- BEGIN switch_fb_login -->
<script src="https://connect.facebook.net/{switch_fb_login.FB_LOCAL}/all.js" type="text/javascript"></script>
<script src="{switch_fb_login.JS_FB_LOGIN}" type="text/javascript"></script>
<!-- END switch_fb_login -->
<!-- BEGIN switch_ticker -->
<link type="text/css" rel="stylesheet" href="{JQUERY_DIR}ticker/ticker.css" />
<script src="{JQUERY_DIR}ticker/ticker.js" type="text/javascript"></script>
<!-- END switch_ticker -->
<!-- BEGIN switch_ticker_new -->
<script src="{JQUERY_DIR}jcarousel/jquery.jcarousel.js" type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
/* Definir le sens de direction en fonction du panneau admin */
var tickerDirParam = "{switch_ticker.DIRECTION}";
var slid_vert = false;
var auto_dir = 'next';
var h_perso = parseInt({switch_ticker.HEIGHT});
switch( tickerDirParam )
{
case 'top' :
slid_vert = true;
break;
case 'left':
break;
case 'bottom':
slid_vert = true;
auto_dir = 'prev';
break;
case 'right':
auto_dir = 'prev';
break;
default:
slid_vert = true;
}
$(document).ready(function() {
$('#fa_ticker_content').css('display','block');
var width_max = $('ul#fa_ticker_content').width();
var width_item = Math.floor(width_max / {switch_ticker.SIZE});
if (width_max > 0)
{
$('ul#fa_ticker_content li').css('float','left').css('list-style','none').width(width_item).find('img').each(function () {
if ($(this).width() > width_item)
{
var ratio = $(this).width() / width_item;
var new_height = Math.round($(this).height() / ratio);
$(this).height(new_height).width(width_item);
}
});
if (slid_vert)
{
var height_max = h_perso;
$('ul#fa_ticker_content li').each( function () {
if ($(this).height() > height_max)
{
height_max = $(this).height();
}
} );
$('ul#fa_ticker_content').width(width_item).height(height_max).css('marginLeft','auto').css('marginRight','auto');
$('ul#fa_ticker_content li').height(height_max);
}
$('#fa_ticker_content').jcarousel({
vertical: slid_vert,
wrap: 'circular',
auto: {switch_ticker.STOP_TIME},
auto_direction: auto_dir,
scroll: 1,
size: {switch_ticker.SIZE},
height_max: height_max,
animation: {switch_ticker.SPEED}
});
}
else
{
$('ul#fa_ticker_content li:not(:first)').css('display','none');
$('ul#fa_ticker_content li:first').css('list-style','none').css('text-align','center');
}
});
//]]>
</script>
<!-- END switch_ticker_new -->
<script type="text/javascript">//<![CDATA[
$(document).ready(function(){
<!-- BEGIN switch_enable_pm_popup -->
pm = window.open('{U_PRIVATEMSGS_POPUP}', '_faprivmsg', 'HEIGHT=225,resizable=yes,WIDTH=400');
if(pm != null) { pm.focus(); }
<!-- END switch_enable_pm_popup -->
<!-- BEGIN switch_report_popup -->
report = window.open('{switch_report_popup.U_REPORT_POPUP}', '_phpbbreport', 'HEIGHT={switch_report_popup.S_HEIGHT},resizable=yes,scrollbars=no,WIDTH={switch_report_popup.S_WIDTH}');
if(report != null) { report.focus(); }
<!-- END switch_report_popup -->
<!-- BEGIN switch_ticker -->
$(document).ready(function() {
Ticker.start({
height : {switch_ticker.HEIGHT},
spacing : {switch_ticker.SPACING},
speed : {switch_ticker.SPEED},
direction : '{switch_ticker.DIRECTION}',
pause : {switch_ticker.STOP_TIME}
});
});
<!-- END switch_ticker -->
});
<!-- BEGIN switch_login_popup -->
var logInPopUpLeft, logInPopUpTop, logInPopUpWidth = {LOGIN_POPUP_WIDTH}, logInPopUpHeight = {LOGIN_POPUP_HEIGHT}, logInBackgroundResize = true, logInBackgroundClass = false;
$(document).ready( function() {
$(window).resize(function() {
var windowWidth = document.documentElement.clientWidth;
var popupWidth = $("#login_popup").width();
var mypopup = $("#login_popup");
$("#login_popup").css({
"left": windowWidth/2 - popupWidth/2
});
});
});
<!-- END switch_login_popup -->
//]]>
</script>
{GREETING_POPUP}
<style type="text/css">
#page-footer, div.navbar, div.navbar ul.linklist {
display: block !important;
}
ul.linklist li.rightside, ul.linklist li.rightside a.copyright {
display: inline !important;
}
<!-- BEGIN switch_ticker_new -->
.jcarousel-skin-tango .jcarousel-item {
text-align:center;
width: 10px;
}
.jcarousel-skin-tango .jcarousel-item-horizontal {
margin-right: {switch_ticker.SPACING}px;
}
.jcarousel-skin-tango .jcarousel-item-vertical {
margin-bottom: {switch_ticker.SPACING}px;
}
<!-- END switch_ticker_new -->
</style>
{HOSTING_JS}
<!-- BEGIN google_analytics_code -->
<script type="text/javascript">
//<![CDATA[
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', '{G_ANALYTICS_ID}', 'auto');
ga('send', 'pageview');
ga('set', 'anonymizeIp', true);
<!-- BEGIN google_analytics_code_bis -->
ga('create', '{G_ANALYTICS_ID_BIS}', 'auto', 'bis');
ga('bis.send', 'pageview');
ga('bis.set', 'anonymizeIp', true);
<!-- END google_analytics_code_bis -->
//]]>
</script>
<!-- END google_analytics_code -->
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,400i,500,700,700i&subset=cyrillic,cyrillic-ext,greek,greek-ext,latin-ext,vietnamese" rel="stylesheet" />
<link href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet" />
</head>
<body id="modernbb">
<div class="stars"></div>
<div class="twinkling"></div>
<div class="banniere">
<div class="txtfo">astr<div class="js-avatar"></div>naut</div>
<div class="astro"><a href="/"><img src="https://imgur.com/YLkSlRM.png"/></a></div>
<div class="typewriter"><h1>Bienvenue sur la base n°8624 ...</h1></div>
</div>
<div class="totalonglet">
<div class="tab">
<button class="tablinks" onclick="openCity(event, 'London')" id="defaultOpen">Contexte</button>
</div>
<div id="London" class="tabcontent">
<div class="insidetab">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius tristique sapien et porta. Vestibulum eget risus lacus. Vivamus vitae fringilla justo. Aenean rutrum tempus arcu nec cursus. Quisque sit amet dui vel nibh cursus varius. Morbi maximus sit amet lacus quis fermentum. Suspendisse in facilisis dolor. Morbi pharetra id orci et euismod. Pellentesque bibendum in elit vel volutpat. Etiam finibus urna sit amet elit egestas auctor. Maecenas facilisis libero quis diam venenatis eleifend. In hac habitasse platea dictumst. Sed metus mi, rutrum sit amet mauris vel, vehicula laoreet ipsum. Integer tortor sapien, rutrum ac eros vel, convallis ornare nisl.
In faucibus et eros eu egestas. Nulla eleifend elit in dolor consequat, a facilisis nisi dictum. Suspendisse ultricies, ipsum sit amet sollicitudin rutrum, dolor risus fermentum nibh, quis ornare velit enim at magna. Aenean a ipsum scelerisque, maximus eros nec, mattis justo. In eu ante libero. Nam finibus felis quis odio posuere, at interdum arcu eleifend. Donec ac justo at ipsum blandit euismod vitae non nibh. Phasellus eu euismod neque. In malesuada lobortis pellentesque.
Donec aliquam tincidunt odio convallis blandit. Integer tincidunt, mi non ultricies cursus, est leo tincidunt massa, id pretium justo urna id tortor. Suspendisse congue tortor at mattis eleifend. Suspendisse at quam a justo finibus placerat. In hac habitasse platea dictumst. Nunc sit amet orci ipsum. Sed eget neque feugiat, ornare mi vel, pretium ipsum. Morbi condimentum neque at arcu lacinia tempus. Sed blandit maximus ex. Sed congue lacinia libero, vitae finibus quam dignissim eget. Curabitur lobortis lacus at est consectetur pharetra. Cras ultrices nunc id faucibus vehicula. Vestibulum sit amet commodo turpis. Quisque vulputate massa a pellentesque semper. Donec commodo, mi sit amet blandit porta, ipsum diam convallis risus, eu euismod nulla arcu sit amet nunc. Proin lacinia leo sit amet finibus molestie.
Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras vitae justo posuere mauris finibus dapibus. Ut ultricies mi ac erat condimentum, a rhoncus purus accumsan. Nam lorem augue, facilisis vitae ante at, tincidunt accumsan nisl. Duis eget laoreet eros, ac iaculis nisl. Phasellus aliquam fringilla orci, maximus vestibulum nulla gravida quis. Vestibulum lacinia a dui commodo convallis.
Integer elementum condimentum dignissim. Nulla luctus, sapien sit amet maximus aliquet, metus eros ultricies nulla, non auctor diam leo vitae dui. Vivamus hendrerit velit ac metus pretium tincidunt. Ut hendrerit elementum justo, vitae imperdiet nisi efficitur vel. Praesent accumsan tincidunt maximus. Vivamus interdum cursus maximus. Maecenas ligula orci, fermentum id pretium vel, posuere ut nisl. Aenean nec lorem lobortis, mollis felis eu, semper velit. Duis ut est ac augue placerat sagittis. Cras ac vehicula ipsum, quis imperdiet orci. Sed in urna ac ligula luctus vulputate at non massa. Proin vel aliquam quam, sed ullamcorper purus. In sed risus tortor. Etiam posuere feugiat augue, congue pulvinar libero facilisis vitae. In nec nisi libero. Etiam nulla ipsum, ullamcorper eu molestie ut, semper a lectus.
</div>
<div class="insidetab2"><span class="th th-solar-system"></span>
<h1>Credits</h1>
Index par <a href="http://www.epicode-entraide.com/">Myrddin d'Epicode</a>. Nulla eleifend elit in dolor consequat, a facilisis nisi dictum. Suspendisse ultricies, ipsum sit amet sollicitudin rutrum, dolor risus fermentum nibh, quis ornare velit enim at magna. Aenean a ipsum scelerisque, maximus eros nec, mattis justo. In eu ante libero. Nam finibus felis quis odio posuere, at interdum arcu eleifend. Donec ac justo at ipsum blandit euismod vitae non nibh. Phasellus eu euismod neque. In malesuada lobortis pellentesque.
</div>
</div>
</div>
<div class="navbarr">
<div class="menuposition">{GENERATED_NAV_BAR}</div>
<div class="sep"></div>
<div class="imgstaff">
<div class="firsty"><img title="rôle du staffeux" src="http://placehold.it/40x40/"/></div>
<div class="second">nom - prénom</div>
<div class="firsty"><img title="rôle du staffeux" src="http://placehold.it/40x40/"/></div>
<div class="second">nom - prénom</div>
<div class="firsty"><img title="rôle du staffeux" src="http://placehold.it/40x40/"/></div>
<div class="second">nom - prénom</div>
<div class="firsty"><img title="rôle du staffeux" src="http://placehold.it/40x40/"/></div>
<div class="second">nom - prénom</div>
<div class="firsty"><img title="rôle du staffeux" src="http://placehold.it/40x40/"/></div>
<div class="second">nom - prénom</div>
</div>
<div class="sep"></div>
<div class="topsite"><a target="_blank" href="/">1</a></div>
<div class="topsite"><a target="_blank" href="/">2</a></div>
<div class="topsite"><a target="_blank" href="/">3</a></div>
<div class="topsite"><a target="_blank" href="/">4</a></div>
<div class="sep"></div>
<div class="copyrighttruc">
:copyright: Copyright : Tout le contenu du forum appartient à bla bla bla ne pas toucher sinon ça va mal se passer après tu connais la chanson on a des cookies tout ça faut être gentil et tout le bordel.
</div>
<div class="arrowdown"></div>
</div>
<!-- BEGIN hitskin_preview -->
<div id="hitskin_preview" style="display: block;">
<h1><img src="{hitskin_preview.PATH_IMG_FA}hitskin/hitskin_logo.png" alt="" /> <em>Hit</em>skin.com</h1>
<div class="content">
<p>
{hitskin_preview.L_THEME_SITE_PREVIEW}
<br />
<span>{hitskin_preview.U_INSTALL_THEME}<a href="https://{hitskin_preview.U_RETURN_THEME}">{hitskin_preview.L_RETURN_THEME}</a></span>
</p>
</div>
</div>
<!-- END hitskin_preview -->
<!-- BEGIN switch_login_popup -->
<div id="login_popup" style="z-index: 10000 !important;">
<div class="h3">{SITENAME}</div>
<div id="login_popup_message">
{LOGIN_POPUP_MSG}
</div>
<div id="login_popup_buttons">
<form action="{S_LOGIN_ACTION}" method="get">
<input type="submit" class="button1" value="{L_LOGIN}" />
<input type="button" class="button1" value="{L_REGISTER}" onclick="parent.location='{U_REGISTER}';" />
<input id="login_popup_close" type="button" class="button2" value="{L_DONT_DISPLAY_AGAIN}" />
</form>
</div>
</div>
<!-- END switch_login_popup -->
<a id="top" name="top" accesskey="t"></a>
{JAVASCRIPT}
<div id="page-header">
<div class="wrap">
<a href="{U_INDEX}" id="logo"><img src="{LOGO}" alt="{L_INDEX}" /></a>
</div>
<!-- BEGIN switch_ticker_new -->
<div id="fa_ticker_blockD" style="margin-top:4px;">
<div class="module">
<div class="inner">
<div id="fa_ticker_container">
<ul id="fa_ticker_content" class="jcarousel-skin-tango" style="display:none">
<!-- BEGIN ticker_row -->
<li>{switch_ticker.ticker_row.ELEMENT}</li>
<!-- END ticker_row -->
</ul>
</div>
</div>
</div>
</div>
<!-- END switch_ticker_new -->
</div>
<div class="conteneur_minwidth_IE">
<div class="conteneur_layout_IE">
<div class="conteneur_container_IE">
<div id="wrap">
<div id="page-body">
<!-- BEGIN switch_ticker -->
<div id="fa_ticker_block" style="margin-top:4px;">
<div class="module">
<div class="inner">
<div id="fa_ticker_container">
<div id="fa_ticker" style="height:{switch_ticker.HEIGHT}px;">
<div class="fa_ticker_content">
<!-- BEGIN ticker_row -->
<div>{switch_ticker.ticker_row.ELEMENT}</div>
<!-- END ticker_row -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END switch_ticker -->
<div id="{ID_CONTENT_CONTAINER}"{CLASS_CONTENT_CONTAINER}>
<div id="outer-wrapper">
<div id="wrapper">
<div id="{ID_LEFT}">
<!-- BEGIN giefmod_index1 -->
{giefmod_index1.MODVAR}
<!-- BEGIN saut -->
<div style="height:{SPACE_ROW}px"></div>
<!-- END saut -->
<!-- END giefmod_index1 -->
</div>
<div id="container">
<div id="content-main">
<div id="main">
<div id="main-content">
Puis ajoutez votre CSS : Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuille de style CSS :
- Code:
.stars,
.twinkling {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
display: block;
}
.stars {
background: transparent url(http://www.script-tutorials.com/demos/360/images/stars.png) repeat top center;
z-index: 0;
animation: move-twink-back 500s linear infinite;
height: 572px;
}
.banniere {
width: 100%;
background-image: url(https://imgur.com/Fk2AhJH.png);
background-size: cover;
background-position: bottom;
height: 570px;
}
.js-avatar {
width: 90px;
height: 90px;
border-radius: 100%;
overflow: hidden;
border: solid 6px #f0f0f0;
margin-right: 15px;
display: inline-block;
object-fit: contain;
animation: beat 1.5s infinite both;
}
.js-avatar img {
width: 100%;
filter: grayscale(50%) contrast(150%);
}
.txtfo {
display: inline-block;
text-align: center;
width: 100%;
font: 120px Persephone;
text-transform: uppercase;
letter-spacing: 8px;
padding-top: 160px;
color: #f0f0f0;
font-weight: bold;
}
.astro {
margin: -220px 0 auto;
text-align: center;
width: 100%;
height: 700px;
}
.astro a {
display: block;
}
.astro img {
width: 920px;
-webkit-animation-name: bounce;
-webkit-animation-duration: 3s;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: cubic-bezier(1,1,1,1);
-webkit-animation-iteration-count: infinite;
}
.typewriter {
width: 445px;
margin: -360px auto;
}
.typewriter h1 {
color: #f0f0f0;
font: 10px Aldrich;
overflow: hidden;
text-transform: uppercase;
border-right: .15em solid #50242c;
white-space: nowrap;
margin: 0 auto;
letter-spacing: 8px;
animation: typing 4s steps(50, end), blink-caret .5s step-end infinite;
}
.navbarr {
background: #f0f0f0;
position: absolute;
left: 0px;
color: black;
list-style: none;
padding: 10px;
text-align: center;
width: 62px;
top: 0;
}
.navbarr img{
width:25px;
}
.arrowdown {
width: 0px;
height: 0px;
border-left: 31px solid transparent;
border-right: 31px solid transparent;
border-top: 20px solid #f0f0f0;
position: absolute;
margin-top: 10px;
left: 0;
}
.menuposition a[href="/"]:after {
content: "home";
color:black;
font:8px arial;
text-transform:uppercase;
}
.menuposition a[href="/faq"]:after {
content: "f.a.q";
color:black;
font:8px arial;
text-transform:uppercase;
}
.menuposition a[href="/search"]:after {
content: "search";
color:black;
font:8px arial;
text-transform:uppercase;
}
.menuposition a[href="/memberlist"]:after {
content: "membres";
color:black;
font:8px arial;
text-transform:uppercase;
}
.menuposition a[href="/groups"]:after {
content: "groupes";
color:black;
font:8px arial;
text-transform:uppercase;
}
.menuposition a[href*="/profile"]:after {
content: "user";
color:black;
font:8px arial;
text-transform:uppercase;
}
.menuposition a[href*="/privmsg"]:after {
content: "message";
color:black;
font:8px arial;
text-transform:uppercase;
}
.menuposition a[href*="/login"]:after {
content: "leave";
color:black;
font:8px arial;
text-transform:uppercase;
}
.menuposition a[href*="/register"]:after {
content: "join us";
color:black;
font:8px arial;
text-transform:uppercase;
}
.sep {
width: 100%;
height: 2px;
background: #d0d0d0;
margin: 5px 0px 5px 0px;
}
.firsty {
padding: 10px 0px 10px 0px;
}
.firsty img {
width: 40px !important;
height: 40px;
border: 5px solid black;
outline: 2px solid #000;
outline-offset: 2px;
}
.second {
text-transform: uppercase;
letter-spacing: 1px;
font: 8px arial;
}
.topsite {
border-radius: 100%;
width: 38px;
border: solid 2px black;
height: 38px;
padding: 10px;
margin: 5px 0px 10px 2px;
}
.topsite a {
color: black;
font: 15px arial;
font-weight: bold;
}
.copyrighttruc {
text-align: justify;
font: 8px arial;
color: black;
line-height: 9px;
width: 42px;
text-transform: uppercase;
}
.totalonglet {
box-sizing: border-box;
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
position: relative;
overflow: hidden;
height: 200px;
}
.tab {
width: 10%;
height: 200px;
border-left: 20px solid #50242c;
}
.tab button {
display: block;
background-color: inherit;
color: #f0f0f0;
padding: 20px;
height: 200px;
width: 100%;
border: none;
outline: none;
text-align: left;
cursor: pointer;
transition: 0.3s;
font: 12px arial !important;
text-transform: uppercase;
letter-spacing: 2px;
}
.tabcontent {
padding: 20px;
background-image: linear-gradient(to right, transparent , #0e1110);
width: 90%;
color: #f0f0f0;
height: 200px;
}
.insidetab {
height: 150px;
overflow: auto;
padding: 10px;
text-align: justify;
font: 11px calibri;
line-height: 16px;
width: 60%;
display: inline-block;
}
.insidetab2 {
width: 40%;
display: inline-block;
padding: 20px;
vertical-align: top;
text-align: justify;
position: relative;
z-index: 9;
}
.insidetab2 h1 {
text-align: center;
font: 50px Persephone;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: bold;
background: -webkit-linear-gradient(#f0f0f0, #212121);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.insidetab2 span {
position: absolute;
right: -30px;
font-size: 200px;
opacity: 0.1;
margin-top: -60px;
z-index: -1;
animation: spinner 20s linear infinite;
background: -webkit-linear-gradient(#0e1413, #b54141);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
Jawn
# Re: [INDEX ASTRONAUT] - Jeu 19 Sep - 2:36
Les catégories
Remplacer l'intégralité de votre template index_box par le HTML :
- Code:
<!-- BEGIN catrow --><!-- BEGIN tablehead -->
<div class="titcate">{catrow.tablehead.L_FORUM}</div>
<!-- END tablehead -->
<!-- BEGIN cathead -->
<!-- END cathead -->
<!-- BEGIN forumrow -->
<div class="categorietotal">
<div class="blokcat">
<div class="sousfo">{catrow.forumrow.L_LINKS}{catrow.forumrow.LINKS}{forumrow.SUBFORUMS}</div>
<div class="iconcat" style="background:url({catrow.forumrow.FORUM_FOLDER_IMG}) no-repeat scroll {catrow.forumrow.INC_LEVEL} 100%;"></div>
<div class="ring">
<span></span> <strong></strong>
</div>
<!-- BEGIN avatar --> <div class="lastpostava">{catrow.forumrow.avatar.LAST_POST_AVATAR}</div><!-- END avatar -->
<div class="fincat">
<div class="titlasecond"><a href="{catrow.forumrow.U_VIEWFORUM}">{catrow.forumrow.FORUM_NAME}</a></div>
<div class="desccat">{catrow.forumrow.FORUM_DESC}</div>
<div class="lastpost"><!-- BEGIN switch_topic_title --><a href="{catrow.forumrow.U_LATEST_TOPIC}" title="{catrow.forumrow.LATEST_TOPIC_TITLE}">{catrow.forumrow.LATEST_TOPIC_NAME}</a>
<!-- END switch_topic_title -->
<div class="namelast">{catrow.forumrow.USER_LAST_POST}</div>
</div>
</div>
</div>
</div>
<!-- END forumrow -->
<!-- END catrow -->
Puis ajoutez votre CSS : Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuille de style CSS :
- Code:
.titcate {
text-align: right;
padding: 20px 0px 20px 0px;
}
.titcate h2 {
font: 52px Persephone;
text-transform: uppercase;
letter-spacing: 2px;
}
.categorietotal {
width: 50%;
display: inline-block;
vertical-align: top;
margin: 0 auto;
}
.blokcat {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 97%;
background: #212121;
box-shadow: -10px -10px 1px #0d0f0d;
margin-bottom: 30px;
position: relative;
}
.sousfo {
width: 17%;
font-size: 0px;
padding: 20px;
overflow: auto;
}
.sousfo a {
display: block;
width: 100%;
height: 40px;
margin-bottom: -5px;
text-align: left;
text-decoration: none;
font: 11px calibri;
text-transform: uppercase;
line-height: 14px;
color: #f0f0f0;
font-style: italic;
}
.iconcat {
width: 34%;
height: 250px;
}
.fincat {
width: 58%;
background: #212121;
height: 150px;
margin: 50px 0px 50px -60px;
padding: 10px;
}
.titlasecond a {
color: #f0f0f0;
font: 24px calibri;
text-transform: uppercase;
letter-spacing: -1px;
font-style: italic;
}
.desccat {
height: 100px;
padding: 10px;
text-transform: uppercase;
font: 9px arial;
overflow: auto;
text-align: justify;
color: #a9a9a9;
line-height: 13px;
}
.lastpost {
font: 7px arial;
margin-top: 20px;
margin-left: 70px;
position: relative;
}
.lastpost br {
display:none;
}
.lastpost a {
font-size: 15px;
text-transform: uppercase;
font-style: italic;
}
.last-post-icon {
position: absolute;
top: -133px;
left: -112px;
}
.namelast {
font: 7px arial;
}
.namelast strong {
padding-left:5px;
text-transform:uppercase;
font:12px Persephone;
}
.ring {
position: absolute;
width: 80px;
top: 10px;
right: 35px;
height: 80px;
border: 5px solid #212121;
border-radius: 50%;
font-size: 25px;
color: #50242c;
}
.ring:before {
content: "";
position: absolute;
top: -5px;
left: -5px;
width: 80px;
height: 80px;
border-left: 3px solid #50242c;
border-right: 3px solid #50242c;
border-radius: 50%;
animation: animateCircle 4s linear infinite;
}
.ring span {
display: block;
position: absolute;
top: calc(50% - 2px);
left: 50%;
width: 50%;
height: 4px;
background: transparent;
transform-origin: left;
animation: animate 2s linear infinite;
}
.ring span:before {
content: '';
position: absolute;
width: 16px;
height: 16px;
border-radius: 50%;
background: #50242c;
top: -25px;
right: -7px;
box-shadow: 0 0 20px #50242c;
}
.ring strong {
display: block;
position: absolute;
top: calc(50% - 2px);
left: 50%;
width: 50%;
height: 4px;
background: transparent;
transform-origin: left;
animation: animate 6s linear infinite;
}
.ring strong:before {
content: '';
position: absolute;
width: 16px;
height: 16px;
border-radius: 50%;
background: #50242c;
top: -24px;
right: 62px;
}
.lastpostava {
width: 50px;
height: 50px;
overflow: hidden;
position: absolute;
border-radius: 100%;
top: 26px;
right: 50px;
filter: grayscale(70%) contrast(150%);
}
.lastpostava img {
width:100%;
}
Jawn
# Re: [INDEX ASTRONAUT] - Jeu 19 Sep - 2:37
Le QUI EST EN LIGNE
Dans votre template index_body, entre les balises :
- Code:
<!-- BEGIN disable_viewonline -->
- Code:
<!-- END disable_viewonline -->
- Code:
<div class="lineqeel"></div>
<div class="statsqeel">
<div class="newmem"><div class="txthere">bienvenue sur la base :</div>{NEWEST_USER}</div>
<div class="totalmem"><div class="txtqeel">astronautes<br/>sur la base</div>{TOTAL_USERS}</div>
<div class="totalmess"><div class="txtqeel2">missives<br/>envoyées</div>{TOTAL_POSTS}</div>
</div>
<div id="basqeel">
<div class="membersonline">
<div class="txt1">Astronautes<div class="lineqeel1"></div>sur place</div>
<div id="qeel_list">{LOGGED_IN_USER_LIST}</div><script type="text/javascript">
document.getElementById('qeel_list').innerHTML=document.getElementById('qeel_list').innerHTML.replace(/Utilisateurs enregistrés :/g," ");
</script>
</div>
<div class="lastcoqeel">
<div id="chaka"><table>{L_CONNECTED_MEMBERS}</table></div><script type="text/javascript">
document.getElementById('chaka').innerHTML=document.getElementById('chaka').innerHTML.replace(/Membres connectés au cours des 24 dernières heures :/g," ");
</script>
<div class="txt2">Derniers<div class="lineqeel2"></div>atterissages</div>
</div>
</div>
<div class="groupsqeel">
<img title="#00 - mercure" src="https://imgur.com/i0ifWls.png"/>
<img title="#00 - venus" src="https://imgur.com/EbTmmjN.png"/>
<img title="#00 - terre & lune" src="https://imgur.com/tDOA6Ww.png"/>
<img title="#00 - mars" src="https://imgur.com/g20Be9E.png"/>
<img title="#00 - jupiter" src="https://imgur.com/wwgtkwV.png"/>
<img title="#00 - saturne" src="https://imgur.com/KY1PAuX.png"/>
<img title="#00 - unarus" src="https://imgur.com/nrEGNWE.png"/>
<img title="#00 - neptune" src="https://imgur.com/6fP5WTk.png"/>
<img title="#00 - pluton" src="https://imgur.com/01AQdxT.png"/>
</div>
<div class="footerqeel">
<a target="_blank" title="nom du forum" href="/"><img src="http://placehold.it/100x35/"/></a>
<a target="_blank" title="nom du forum" href="/"><img src="http://placehold.it/100x35/"/></a>
<a target="_blank" title="nom du forum" href="/"><img src="http://placehold.it/100x35/"/></a>
<a target="_blank" title="nom du forum" href="/"><img src="http://placehold.it/100x35/"/></a>
<a target="_blank" title="nom du forum" href="/"><img src="http://placehold.it/100x35/"/></a>
<a target="_blank" title="nom du forum" href="/"><img src="http://placehold.it/100x35/"/></a>
<a target="_blank" title="nom du forum" href="/"><img src="http://placehold.it/100x35/"/></a>
<a target="_blank" title="nom du forum" href="/"><img src="http://placehold.it/100x35/"/></a>
<a target="_blank" title="nom du forum" href="/"><img src="http://placehold.it/100x35/"/></a>
<a target="_blank" title="nom du forum" href="/"><img src="http://placehold.it/100x35/"/></a>
<a target="_blank" title="nom du forum" href="/"><img src="http://placehold.it/100x35/"/></a>
<a target="_blank" title="nom du forum" href="/"><img src="http://placehold.it/100x35/"/></a>
<a target="_blank" title="nom du forum" href="/"><img src="http://placehold.it/100x35/"/></a>
<a target="_blank" title="nom du forum" href="/"><img src="http://placehold.it/100x35/"/></a>
<a target="_blank" title="nom du forum" href="/"><img src="http://placehold.it/100x35/"/></a>
<a target="_blank" title="nom du forum" href="/"><img src="http://placehold.it/100x35/"/></a>
<a target="_blank" title="nom du forum" href="/"><img src="http://placehold.it/100x35/"/></a>
</div>
Puis ajoutez votre CSS : Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuille de style CSS :
- Code:
.lineqeel {
width: 100%;
height: 22px;
background: #50242c;
border: solid 10px #171717;
margin: 100px 0px 20px 0px;
}
.statsqeel {
margin-top: -50px;
display: flex;
flex-wrap: wrap;
justify-content: center;
font-size: 0px;
}
.newmem {
width: 35%;
}
.newmem a {
font: 40px Persephone;
text-transform: uppercase;
}
.totalmem{
width: 30%;
text-align: center;
}
.totalmem strong {
font: 105px Persephone;
color: #50242c;
font-style: italic;
position: absolute;
margin: -64px 0px 0px -30px;
z-index: -1;
font-weight: bold;
}
.totalmess {
width: 30%;
text-align: center;
}
.totalmess strong {
font: 105px Persephone;
color: #50242c;
font-style: italic;
position: absolute;
margin: -64px 0px 0px -80px;
font-weight: bold;
z-index: -1;
}
.txthere {
color: #f0f0f0;
font: 15px calibri;
text-transform: uppercase;
letter-spacing: 1px;
font-style: italic;
padding-bottom: 10px;
}
.txtqeel {
color: #f0f0f0;
font: 15px calibri;
text-transform: uppercase;
letter-spacing: 1px;
font-style: italic;
}
.txtqeel2 {
color: #f0f0f0;
font: 15px calibri;
text-transform: uppercase;
letter-spacing: 1px;
font-style: italic;
}
#basqeel {
width: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
padding-top: 50px;
}
.membersonline {
width: 30%;
}
.txt1 {
color: #f0f0f0;
font: 38px Persephone;
text-transform: uppercase;
letter-spacing: 1px;
font-style: italic;
}
.lineqeel1 {
width: 100%;
height: 12px;
background: #50242c;
border: solid 5px #171717;
margin: -4px 0px 4px 0px;
}
#qeel_list {
padding: 10px;
width: 100%;
height: 135px;
overflow: auto;
text-align: justify;
}
#qeel_list a {
font:15px arial;
text-transform:uppercase;
margin:0px 5px 0px 10px;
}
.lastcoqeel {
padding-left: 10px;
width: 65%;
text-align: right;
}
.txt2 {
color: #f0f0f0;
font: 38px Persephone;
text-transform: uppercase;
letter-spacing: 1px;
font-style: italic;
}
.lineqeel2 {
width: 100%;
height: 12px;
background: #50242c;
border: solid 5px #171717;
margin: -1px 0px 5px 0px;
}
#chaka {
width: 100%;
padding: 10px;
height: 120px;
overflow: auto;
margin-bottom: 15px;
text-align: justify;
}
#chaka a {
font:15px arial;
text-transform:uppercase;
margin:0px 5px 0px 10px;
}
.groupsqeel {
text-align: center;
padding: 20px 0px 20px 0px;
}
.footerqeel{
text-align: center;
padding-top: 20px;
}
.footerqeel img {
margin: 0px 10px 20px 10px;
width: 100px;
height: 35px;
border: 5px solid #f0f0f0;
outline: 2px solid #f0f0f0;
outline-offset: 2px;
}
Jawn
# Re: [INDEX ASTRONAUT] - Jeu 19 Sep - 2:37
Le JAVASCRIPT et informations complémentaires :
Pour rajouter tous les effets, Panneau d'administration > Affichage > Images et couleurs > Couleurs > Feuille de style CSS :
- Code:
@keyframes spinner{
0%{-webkit-transform: rotate(0deg);}
100%{-webkit-transform: rotate(360deg);}
}
@keyframes beat{from{-webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);}50%{-webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05);}to{-webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1);}}
@keyframes bounce {
from { transform: translate3d(0, 0, 0); }
to { transform: translate3d(0, -20px, 0); }
}
@-webkit-keyframes bounce {
from { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
to { -webkit-transform: translate3d(0, 200px, 0); transform: translate3d(0, -20px, 0); }
}
@keyframes typing {
from { width: 0; }
to { width: 100%; }
}
@keyframes blink-caret {
from, to { border-color: transparent; }
50% { border-color: #50242c; }
}
@keyframes animateCircle{
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}}
@keyframes animate{
0% {
transform: rotate(45deg);
}
100% {
transform: rotate(405deg);
}}
@keyframes move-twink-back {
from {
background-position: 0 0;}
to {
background-position: -10000px 5000px;}
}
Pour avoir le tooltip (effet au survol des images):
- Code:
#s-m-t-tooltip {
max-width:300px;
z-index: 999;
margin:24px 14px 7px 12px;
padding:3px 10px 3px 10px;
border-radius:15px;
background-color: #f0f0f0;
letter-spacing:1px;
font:8px arial;
text-transform: uppercase;
color:black;
box-shadow: 0px 0px 3px rgba(78, 75, 73, 0.8);
}
Pour que le fond forum ne scroll pas de gauche à droite :
- Code:
a{text-decoration:none;}
a:hover{text-decoration:none !important;}
body {
overflow-x: hidden;
padding: 0;
margin-left: 62px !important;
}
Pour avoir les liens de bas de page tout jolis :
- Code:
.conteneur_minwidth_IE {
position: relative;
z-index: 9;
}
#page-footer {
border: 1px solid #f0f0f0;
border-radius: 15px;
box-shadow: 2px 2px 10px #000000;
text-transform: uppercase;
font: 9px calibri;
font-weight: 700;
margin: 0px auto 10px auto;
padding: 1px;
width: 50%;
background: #f0f0f0 !important;
color: black !important;
}
#page-footer a {
color: black;
font: 9px calibri;
text-transform: uppercase;
}
.footerbar-system {
padding: 5px !important;
}
#page-footer .copyright {
color: #000 !important;
}
.footerbar-system .rightside {
margin: 0;
text-align: right;
color: black !important;
font-size: 9px;
}
#page-footer .copyright .wrap {
padding:0px !important;
}
.copyright-body {
border-color: #d0d0d0 !important;
border-style: solid;
border-width: 1px 0 0;
margin: 0px 0 0 0 !important;
padding: 5px 0 0 0 !important;
}
Pour les polices d'écriture :
- Code:
@font-face {font-family: 'Prometheus'; src: url('https://dl.dropbox.com/s/gr0pr1x1e63ixv2/PROMETHEUS.ttf');}
@font-face {
font-family: 'Persephone';
src: url('https://files.jcink.net/uploads/noatest001/Persephone.ttf'); }
Pour une jolie barre de scroll de la page (uniquement sous Chrome) :
- Code:
::-webkit-scrollbar-thumb {
background-color: #f0f0f0;
}
::-webkit-scrollbar {
width: 7px;
height: 8px;
border: 3px solid #141414;
background-color: #f0f0f0;
}
Panneau d'administration > Modules > HTML & Javascript > Gestion des codes Javascript : créez un nouveau Javascript, mettez ce code, puis cochez "sur toutes les pages". Donnez lui un titre et validez. N'oubliez pas d'activer le Javascript !
- Code:
$(function(){
$.each(_userdata, function(key, value){
$(".js-" + key).html(value);
})
});
Contenu sponsorisé
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum|
|
|