Jawn

# [YELLOW AND CITY] - Lun 17 Déc - 2:47
![[YELLOW AND CITY] FxrQKYp](https://i.imgur.com/fxrQKYp.png)
Dans votre template index_body, entre les balises :
- Code:
<!-- BEGIN disable_viewonline -->
- Code:
<!-- END disable_viewonline -->
Entre votre HTML >
- Code:
<div class="testasta">
<div class="catstaimg">
<div class="catstadeom">
<div id="cadre-qeel-header">
<div>{TOTAL_POSTS} {TOTAL_USERS}</div></div></div></div>
<div class="castaontoom"><div class="castaonov">les derniers connectés</div>
<div class="castaonlis"><table><script type="text/javascript">document.getElementById('online').innerHTML=document.getElementById('onlineuh').innerHTML.replace(/Utilisateurs enregistrés :/," ") .replace(/test/," ");</script>{L_CONNECTED_MEMBERS}</table></div>
<div class="castanew">{NEWEST_USER}</div></div>
<div class="castanowom"><div class="castanowcount">{TOTAL_USERS_ONLINE}</div>
<div class="castanowlis">{LOGGED_IN_USER_LIST}</div>
<div class="castalin"><span class="icon-mouse"></span><br>groupe</div>
<div class="castalin"><span class="icon-chart-1"></span><br>groupe</div>
<div class="castalin"><span class="icon-chart-1"></span><br>groupe</div>
<div class="castalin"><span class="icon-chart-1"></span><br>groupe</div>
<div class="castalin"><span class="icon-chart-1"></span><br>groupe</div></div></div>
Puis dans la feuille de style, votre CSS :
- Code:
.testasta {
background: black;
border-bottom: 5px solid #deb873;
border-left: 5px solid #121212;
border-right: 5px solid #121212;
border-top: 5px solid #121212;
height: 225px;
margin: 0 auto;
outline: 1px solid #deb873;
width: 800px;
}
.catstaimg {
background-image: url(https://i.imgur.com/F8JNpEc.png);
background-position: center;
background-size: cover;
border-right: 20px solid black;
float: left;
height: 225px;
width: 200px;
}
.catstaimg::after {
border-left: 120px solid transparent;
border-top: 225px solid #000;
content: "";
height: 0;
margin-left: 80px;
position: absolute;
width: 0;
}
.catstadeom {
z-index:1;
margin-left:110px;
position:absolute;
-ms-transform: rotate(-35deg);
-webkit-transform: rotate(-35deg);
transform: rotate(-30deg);
}
#cadre-qeel-header {
font-size: 0;
}
#cadre-qeel-header strong {
-ms-transform: rotate(30deg) scale(0.9);
-webkit-transform: rotate(30deg) scale(0.9);
background: #111;
border: 2px solid #deb873;
border-radius: 100%;
color: #bbb;
font-family: montserrat;
font-size: 13px;
height: 48px;
line-height: 13px;
padding-top: 23px;
transform: rotate(30deg) scale(0.9);
width: 70px;
text-align: center;
}
#cadre-qeel-header strong:nth-child(1) {
bottom: -190px;
position: absolute;
right: -10px;
}
#cadre-qeel-header strong:nth-child(1):before {
content: "messages";
position: absolute;
top: 36px;
left: 0;
width: 100%;
font-size: 12px;
font-weight: 100;
}
#cadre-qeel-header strong:nth-child(2) {
bottom: -112px;
position: absolute;
right: -12px;
}
#cadre-qeel-header strong:nth-child(2):before {
content: "membres";
position: absolute;
top: 36px;
left: 0;
width: 100%;
font-size: 12px;
font-weight: 100;
}
.castaontoom {
float:left;
width:250px;
padding:10px;
height:205px;
margin-left:10px;
}
.castaonlis {
border: solid 1px #deb873;
color: #aaa;
font-family: monda;
font-size: 9.4px;
height: 90px;
line-height: 17px;
margin-top: 7px;
overflow: auto;
padding: 0 5px;
text-align: justify;
text-transform: uppercase;
}
.castaonlis .gensmall {
font-size:0px !important;
letter-spacing:0px;
}
.castaonlis .row1 {
font-family: 'Roboto Condensed';
text-transform: uppercase;
background: #000 !important;
}
.castaonlis a {
font-size: 11px;
letter-spacing: 0px;
margin: 2px;
}
.castaonlis::-webkit-scrollbar {
width: 1px;
background: #111;
}
.castaonlis::-webkit-scrollbar {
width: 3px;
}
.castaonlis::-webkit-scrollbar-thumb {
background-color: #669988;
}
.castaonlis::-webkit-scrollbar-track {
background-color: #111;
border: 1px solid #deb873;
}
.castaonov b {
color:#669988;
}
.castaonov {
background: #181818;
border: 1px solid #deb873;
color: #bbb;
font-family: montserrat;
font-size: 7pt;
letter-spacing: .5px;
margin-top: 5px;
padding: 5px 0;
text-transform: uppercase;
text-align: center;
}
.castanew {
background: #0f0f0f;
border: 1px solid #deb873;
color: #bbb;
font-family: montserrat alternates;
font-size: 0;
height: 28px;
margin-top: 20px;
padding: 10px 0;
width: 247px;
text-align: center;
}
.castanew strong a {
font-size: 14px;
margin-left: -124px;
max-height: 46px;
padding: 12px 0 5px;
position: absolute;
text-transform: uppercase;
width: 250px;
text-align: center;
}
.castanew strong a:before {
bottom: 20px;
color: #eaeaea;
content: "dernier arrivant :";
font-family: 'Roboto Condensed';
font-size: 12px;
font-style: italic;
left: 0px;
letter-spacing: 1px;
position: absolute;
text-transform: uppercase;
top: -7px;
width: 250px;
}
.castanowom {
float: left;
margin-left: 10px;
width: 268px;
}
.castanowcount b {
color:#669988;
}
.castanowcount {
border-bottom: 1px dashed #222;
color: #deb873;
font-family: roboto mono;
font-size: 8px;
letter-spacing: 1px;
margin-top: 10px;
padding-bottom: 5px;
text-align: center;
text-transform: uppercase;
width: 270px;
}
.castanowlis {
border: 1px solid #deb873;
color: #aaa;
font-family: montserrat alternates;
font-size: 0;
font-style: italic;
font-weight: 900;
height: 83px;
margin-top: 15px;
overflow: auto;
padding: 0 20px;
width: 200px;
text-align: justify;
}
.castanowlis a {
font-family: 'Roboto Condensed';
font-size: 11px;
letter-spacing: 0;
margin: 3px;
position: relative;
top: 5px;
}
.castanowlis::-webkit-scrollbar {
width: 1px;
background: #111;
}
.castanowlis::-webkit-scrollbar {
width: 2px;
}
.castanowlis::-webkit-scrollbar-thumb {
background-color: #669988;
}
.castanowlis::-webkit-scrollbar-track {
background-color: #111;
border: 1px solid #111;
}
.castalin {
background: #0f0f0f;
border: 1px solid #deb873;
color: #aaa;
display: inline-block;
font-family: montserrat;
font-size: 7px;
height: 39px;
left: 0px;
padding-top: 4px;
line-height: 17px;
margin-right: 5px;
margin-top: 26px;
text-align: center;
position: relative;
text-shadow: 2px 2px #333;
text-transform: uppercase;
width: 37px;
}
.castalin span {
font-size:17px;
color:#deb873;
}
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum
|
|