![[FLAT AND GREY] Empty](https://2img.net/i/fa/empty.gif)
Jawn
# [FLAT AND GREY] - Lun 17 Déc - 2:17
![[FLAT AND GREY] It6NeRJ](https://i.imgur.com/it6NeRJ.png)
On va commencer par aller mettre les polices d'écritures. Dans Affichage > Templates > Général > Overall_header, juste après la balise {CSS} qui est presque au tout début du template. Copiez coller les polices d'écritures puis enregistrez, et n'oubliez pas de valider le template !
- Code:
<link href="https://fonts.googleapis.com/css?family=Open+Sans+Condensed:300" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Special+Elite" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Nixie+One" rel="stylesheet">
Le HTML est directement à mettre dans votre panneau d'administration > Affichage > Généralité !
- Code:
<div class="fondpa">
<div class="firstbloc">
<div class="fondtitre">
<div class="group1" style="color: #6e9090;">C</div><div class="group1" style="color: white;">o</div><div class="group1" style="color: #6f678a;">n</div><div class="group1" style="color: #6f678a;">c</div><div class="group1" style="color: white;">e</div><div class="group1" style="color: #8baa84;">p</div><div class="group1" style="color: #6e9090;">t.</div></div>
<div class="textepa">Et quoniam apud eos ut in capite mundi morborum acerbitates celsius dominantur, ad quos vel sedandos omnis professio medendi torpescit, excogitatum est adminiculum sospitale nequi amicum perferentem similia videat, additumque est cautionibus paucis remedium aliud satis validum, ut famulos percontatum missos quem ad modum valeant noti hac aegritudine colligati, non ante recipiant domum quam lavacro purgaverint corpus. ita etiam alienis oculis visa metuitur labes.
Rogatus ad ultimum admissusque in consistorium ambage nulla praegressa inconsiderate et leviter proficiscere inquit ut praeceptum est, Caesar sciens quod si cessaveris, et tuas et palatii tui auferri iubebo prope diem annonas. hocque solo contumaciter dicto subiratus abscessit nec in conspectum eius postea venit saepius arcessitus.
Unde Rufinus ea tempestate praefectus praetorio ad discrimen trusus est ultimum. ire enim ipse compellebatur ad militem, quem exagitabat inopia simul et feritas, et alioqui coalito more in ordinarias dignitates asperum semper et saevum, ut satisfaceret atque monstraret, quam ob causam annonae convectio sit impedita.
</div>
<div class="secondbloc">
<div class="fondgroupe1"><span>Groupe</span></div>
<div class="soustitre">Courte description de groupe pour faire joli.</div>
<div class="textsucre">Et quoniam apud eos ut in capite mundi morborum acerbitates celsius dominantur, ad quos vel sedandos omnis professio medendi torpescit, excogitatum est adminiculum sospitur labes.</div>
</div>
<div class="thirdbloc">
<div class="fondgroupe2"><span>Groupe</span></div>
<div class="soustitre2">Courte description de groupe pour faire joli.</div>
<div class="textesable">Et quoniam apud eos ut in capite mundi morborum acerbitates celsius dominantur, ad quos vel sedandos omnis professio medendi torpescit, excogitatum est adminiculum sospitur labes.</div>
</div>
</div>
<div class="fourthbloc">
<div class="group2"><a href="#" class="colBleu">Concept détaillé</a></div>
<div class="group2"><a href="#" class="colViolet">Règlement</a></div>
<div class="group2"><a href="#" class="colVert">Guide du nouveau</a></div>
<div class="group2"><a href="#" class="colBleu">Zone invités</a></div>
<div class="group2"><a href="#" class="colViolet">Partenariats</a></div>
<div class="group2"><a href="#" class="colVert">Crédits</a></div>
<div class="topparto">
<div class="carre"><a href="/"><img src="http://via.placeholder.com/50x50"></div></a>
<div class="carre"><a href="/"><img src="http://via.placeholder.com/50x50"></div></a>
<div class="carre"><a href="/"><img src="http://via.placeholder.com/50x50"></div></a>
<div class="carre"><a href="/"><img src="http://via.placeholder.com/50x50"></div></a>
<div class="carre"><a href="/"><img src="http://via.placeholder.com/50x50"></div></a>
<div class="carre"><a href="/"><img src="http://via.placeholder.com/50x50"></div></a>
<div class="carre"><a href="/"><img src="http://via.placeholder.com/50x50"></div></a>
<div class="carre"><a href="/"><img src="http://via.placeholder.com/50x50"></div></a>
<div class="carre"><a href="/"><img src="http://via.placeholder.com/50x50"></div></a>
<div class="carre"><a href="/"><img src="http://via.placeholder.com/50x50"></div></a>
<div class="carre"><a href="/"><img src="http://via.placeholder.com/50x50"></div></a>
<div class="carre"><a href="/"><img src="http://via.placeholder.com/50x50"></div></a>
<div class="carre"><a href="/"><img src="http://via.placeholder.com/50x50"></div></a>
<div class="carre"><a href="/"><img src="http://via.placeholder.com/50x50"></div></a>
<div class="carre"><a href="/"><img src="http://via.placeholder.com/50x50"></div></a>
<div class="carre"><a href="/"><img src="http://via.placeholder.com/50x50"></div></a>
<div class="carre"><a href="/"><img src="http://via.placeholder.com/50x50"></div></a>
<div class="carre"><a href="/"><img src="http://via.placeholder.com/50x50"></div></a>
<div class="carre"><a href="/"><img src="http://via.placeholder.com/50x50"></div></a>
<div class="carre"><a href="/"><img src="http://via.placeholder.com/50x50"></div></a>
<div class="carre"><a href="/"><img src="http://via.placeholder.com/50x50"></div></a>
<div class="carre"><a href="/"><img src="http://via.placeholder.com/50x50"></div></a>
<div class="carre"><a href="/"><img src="http://via.placeholder.com/50x50"></div></a>
<div class="carre"><a href="/"><img src="http://via.placeholder.com/50x50"></div></a>
</div></div>
</div>
<div style="text-align:center;">Codage de la PA réalisé par @ <a href="http://epsilon-ls.forumactif.com/">E P S I L O N</a>.</div>
LE CSS :
- Code:
.colVert {
color: #8baa84;
}
.colViolet {
color: #6f678a;
}
.colBleu{
color: #6e9090;
}
::-webkit-scrollbar {
width: 5px;
height: 10px;
}
.fondpa {
width:1000px;
height:550px;
background-color:#272727;
}
.firstbloc {
width:75%;
display:inline-block;
height:300px;
}
.fondtitre {
position:relative;
margin:0 auto;
background-color:#1c1c1c;
width:180px;
height:auto;
text-align:center;
padding:5px;
margin-top:50px;
}
.group1 {
margin-top:5px;
font-family:'Special Elite';
display:inline-block;
font-size:35px;
}
.textepa {
background-color:none;
font-size:12px;
font-style:italic;
text-align:justify;
width:550px;
padding:10px;
color:darkgrey;
line-height:17px;
margin:0 auto;
overflow:auto;
}
.secondbloc {
width:49%;
display:inline-block;
}
.fondgroupe1 {
position:relative;
background-color:#1c1c1c;
width:180px;
height:auto;
text-align:center;
padding:5px;
margin-top:30px;
}
.fondgroupe1 span {
margin-top:5px;
font-family:'Special Elite';
font-size:25px;
color:#6e9090;
}
.soustitre {
text-align:center;
width:255px;
font-family:'Nixie One';
font-style:italic;
font-size:15px;
margin-top:5px;
color:#6e9090;
}
.textsucre {
width:255px;
overflow:auto;
height:250px;
text-align:justify;
margin-top:20px;
color:darkgrey;
font-family:'Times New Roman';
font-size:12px;
}
.thirdbloc {
width:50%;
display:inline-block;
vertical-align:top;
}
.fondgroupe2 {
position:relative;
background-color:#1c1c1c;
width:180px;
height:auto;
text-align:center;
padding:5px;
margin-top:30px;
}
.fondgroupe2 span {
margin-top:5px;
font-family:'Special Elite';
font-size:25px;
color:#6f678a;
}
.soustitre2 {
text-align:center;
width:300px;
font-family:'Nixie One';
font-style:italic;
font-size:15px;
margin-top:5px;
color:#6f678a;
}
.textesable {
width:255px;
overflow:auto;
height:300px;
text-align:justify;
margin-top:20px;
color:darkgrey;
font-family:'Times New Roman';
font-size:12px;
}
.fourthbloc {
width:24%;
margin-top:20px;
height:500px;
vertical-align:top;
display:inline-block;
}
.group2 {
text-align:center;
font-family:'Special Elite';
font-size:15px;
text-transform:uppercase;
margin:5px;
}
.group2 a{
text-decoration:none;
}
.toparto {
margin:0 auto;
}
.carre {
transform: translateY(20px);
margin:5px;
display:inline-block;
}
.carre img {
width:50px;
height:50px;
}
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum|
|
|