![[GREY AND INFORMATIVE] Empty](https://2img.net/i/fa/empty.gif)
Jawn
# [GREY AND INFORMATIVE] - Lun 17 Déc - 3:20
![[GREY AND INFORMATIVE] 9LiN4hK](https://i.imgur.com/9LiN4hK.png)
LE HTML : - se met dans le template overall_haeader juste après la barre de navigation !
- Code:
<div class="sidebar_all">
</div>
<div id="sidebar">
<center>
<br />
<div class="reseaux_sociaux">
<a herf="#" class="bt active"></a><a href="#" class="bt active" style="cursor:cell;"></a><a href="LIEN_RESEAUXSOCIAUX"><img src="IMAGE50x50" class="carre2" /></a> </a><a href="LIEN_RESEAUXSOCIAUX"><img src="IMAGE50x50" class="carre2" /></a>
</div>
<div class="admin_humor">
(Petit mot ou phrase)
</div>
<img src="http://imgur.com/zidQbai.png" alt="couronne" /><span class="title"> <strong>Intrigue</strong></span><img src="http://imgur.com/zUg2nVE.png" alt="baroq" /> <br />
<div id="intrigue" class="intrigue_class">
Ac ne quis a nobis hoc ita dici forte miretur, quod alia quaedam in hoc facultas sit ingeni, neque haec dicendi ratio aut disciplina, ne nos quidem huic uni studio penitus umquam dediti fuimus. Etenim omnes artes, quae ad humanitatem pertinent, habent quoddam commune vinculum, et quasi cognatione quadam inter se continentur.
</div>
<span class="title"><strong>Event </strong></span><img alt="baroq" src="http://imgur.com/zUg2nVE.png" /> <a href="LIEN_VERS_EVENT"><img class="membredumois" src="IMAGE220x120" /></a>
<div class="intrigue_class" id="intrigue">
Ac ne quis a nobis hoc ita dici forte miretur, quod alia quaedam in hoc facultas sit ingeni, neque haec dicendi ratio aut disciplina, ne nos quidem huic uni studio penitus umquam dediti fuimus. Etenim omnes artes, quae ad humanitatem pertinent, habent quoddam commune vinculum, et quasi cognatione quadam inter se continentur.</em>
</div>
<span class="title"><strong>Prédéfinis</strong></span><img alt="baroq" src="http://imgur.com/zUg2nVE.png" />
<div class="infobulle">
<img src="IMAGE50x50" class="carre" />
<div>
<strong>NOM<br /><a href="LIEN_FICHE">>>> plus</a></strong>
</div>
</div>
<div class="infobulle">
<img src="IMAGE50x50" class="carre" />
<div>
<strong>NOM<br /><a href="LIEN_FICHE">>>> plus</a></strong>
</div>
</div>
<div class="infobulle">
<img src="IMAGE50x50" class="carre" />
<div>
<strong>NOM<br /><a href="LIEN_FICHE">>>> plus</a></strong>
</div>
</div>
<div class="infobulle">
<img src="IMAGE50x50" class="carre" />
<div>
<strong>NOM<br /><a href="LIEN_FICHE">>>> plus</a></strong>
</div>
</div>
<div class="infobulle">
<img src="IMAGE50x50" class="carre" />
<div>
<strong>NOM<br /><a href="LIEN_FICHE">>>> plus</a></strong>
</div>
</div>
<div class="infobulle">
<img src="IMAGE50x50" class="carre" />
<div>
<strong>NOM<br /><a href="LIEN_FICHE">>>> plus</a></strong>
</div>
</div>
<div class="infobulle">
<img src="IMAGE50x50" class="carre" />
<div>
<strong>NOM<br /><a href="LIEN_FICHE">>>> plus</a></strong>
</div>
</div>
<div class="infobulle">
<img src="IMAGE50x50" class="carre" />
<div>
<strong>NOM<br /><a href="LIEN_FICHE">>>> plus</a></strong>
</div>
</div>
<div class="title">
<strong>RP libres</strong>
</div><img src="http://imgur.com/zUg2nVE.png" alt="baroq" />
<div id="rplibre">
17/02/2017 — <strong>NOM DU MEMBRE</strong> cherche un partenaire RP ! Plus d'infos par <a href="LIEN_VERS_LA_DEMANDE">ici</a>.
<hr />
17/02/2017 — <strong>NOM DU MEMBRE</strong> cherche un partenaire RP ! Plus d'infos par <a href="LIEN_VERS_LA_DEMANDE">ici</a>.
<hr />
17/02/2017 — <strong>NOM DU MEMBRE</strong> cherche un partenaire RP ! Plus d'infos par <a href="LIEN_VERS_LA_DEMANDE">ici</a>.
<hr />
17/02/2017 — <strong>NOM DU MEMBRE</strong> cherche un partenaire RP ! Plus d'infos par <a href="LIEN_VERS_LA_DEMANDE">ici</a>.
<hr />
17/02/2017 — <strong>NOM DU MEMBRE</strong> cherche un partenaire RP ! Plus d'infos par <a href="LIEN_VERS_LA_DEMANDE">ici</a>.
<hr />
17/02/2017 — <strong>NOM DU MEMBRE</strong> cherche un partenaire RP ! Plus d'infos par <a href="LIEN_VERS_LA_DEMANDE">ici</a>.
</div>
<div class="title">
<strong>Top sites</strong>
</div>
<img alt="baroq" src="http://imgur.com/zUg2nVE.png" /> <a href="LIEN_TOP_SITE"><img src="IMAGE50x50" class="carre" /></a><a href="LIEN_TOP_SITE"><img src="IMAGE50x50" class="carre" /></a><a href="LIEN_TOP_SITE"><img src="IMAGE50x50" class="carre" /></a><a href="LIEN_TOP_SITE"><img src="IMAGE50x50" class="carre" /></a>
<div class="title">
<strong>Membre du mois</strong>
</div><img alt="baroq" src="http://imgur.com/zUg2nVE.png" />
<div class="bubulle">
<a href="LIEN_PROFIL_MEMBRE"><img class="membredumois" src="IMAGE220x120" /></a>
<div>
<strong>Petit texte pour remerciement pour le membre ou toute autre chose !</strong>
</div>
</div>
<div id="lescreditslol">
@JAWN pour <a href="https://epsilon-ls.forumactif.com/">EPSILON</a>
</div>
</center>
</div>
LE CSS :
- Code:
#sidebar {
height: 2350px;
opacity: 90;
padding: 0 7px 7px;
position: absolute;
left: 0;
top: 0;
width: 270px;
}
.reseaux_sociaux img {
border: 1px solid #dadada;
background: #cecece;
padding: 5px;
}
.admin_humor {
font-size: 10px;
}
#sidebar img[src="http://imgur.com/zidQbai.png"] {
display: block;
}
#sidebar .title {
font-family: Anton;
display: block;
font-size: 50px;
margin-bottom: 10px;
line-height: 50px;
}
#intrigue {
background: #efefef;
border: 1px solid #a0a0a0;
padding: 10px;
text-align: justify;
font-size: 13px;
height: 200px;
overflow: auto;
margin-bottom: 20px;
}
.membredumois {
border: 3px solid #1d1d1d;
margin: 15px 0px;
}
.infobulle {
width: 50px;
height: 50px;
overflow: hidden;
display: -webkit-inline-box;
border: 2px solid #1d1d1d;
position: relative;
}
#sidebar img[src="http://imgur.com/zUg2nVE.png"] {
display: block;
margin-bottom: 15px;
}
.infobulle img {
height: 100%;
}
#rplibre {
background: #c19bca;
font-size: 12px;
padding: 10px;
color: white;
margin-bottom: 15px;
}
#sidebar .carre {
width: 60px;
margin: 2px;
border: 1px solid #5f5f5f;
}
#sidebar .bubulle {
position: relative;
}
#sidebar .bubulle:hover div {
transform: scale(1);
}
#sidebar .bubulle div {
position: absolute;
background: rgba(255, 255, 255, 0.7);
width: 207px;
top: 15px;
left: 22px;
right: 0;
margin: 0;
height: 106px;
overflow: auto;
font-size: 11px;
text-align: justify;
padding: 10px;
line-height: 10px;
transform: scale(0);
transition: 0.5s all;
}
#lescreditslol {
font-size: 11px;
}
.sidebar_all {
background: #bbbbbb;
height: 100% !important;
position: fixed;
top: 0;
left: 0px;
z-index: 0;
width: 310px !important;
}
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum|
|
|