PRÉAMBULE
Le code est en trois parties :
- la première qui correspond à un codage HTML est à placer en tant que page d'accueil (Affichage > Page d'accueil > Généralité)
- la seconde partie (le CSS) est à placer dans la feuille de style CSS (Affichage > Couleurs > Feuille de style CSS).
- et enfin un code simple et court à placer dans la template overall_header (Affichage > Templates > overall_header).
[size]
Les # sont à remplacer par vos liens.
Les couleurs sont personnalisables à conditions de conserver le crédit -of course- et si vous vous y connaissez un minimum, histoire de ne pas déformer le code.
[/size]
PREMIÈRE PARTIE • HTML
[size]
Code:Sélectionner le contenuSélectionner le contenu
<div class="center">
<br />
<div class="point"></div>
<a href="#">
<span class="menu">règlement</span>
</a>
<img src="Publicités , Interdites Merci!://image.noelshack.Publicités , Interdites Merci!/fichiers/2012/44/1351879218-878748748.png" class="space" />
<a href="#">
<span class="menu">présentation</span>
</a>
<img src="Publicités , Interdites Merci!://image.noelshack.Publicités , Interdites Merci!/fichiers/2012/44/1351879218-878748748.png" class="space" />
<a href="#">
<span class="menu">partenariat</span>
</a>
<img src="Publicités , Interdites Merci!://image.noelshack.Publicités , Interdites Merci!/fichiers/2012/44/1351879218-878748748.png" class="space" />
<a href="#">
<span class="menu">infos</span>
</a>
<img src="Publicités , Interdites Merci!://image.noelshack.Publicités , Interdites Merci!/fichiers/2012/44/1351879218-878748748.png" class="space" />
<a href="#">
<span class="menu">autre ?</span>
</a>
<br /><br />
<table>
<tr>
<td>
<div class="blocstaff">
<div class="center">
<div class="yoo">
<span class="titrepa">Le Staff</span>
</div>
</div><br />
<div class="center">
<img src="Publicités , Interdites Merci!://25.media.tumblr.Publicités , Interdites Merci!/tumblr_mbsavepfqc1rga9u7o1_250.gif" class="staff" /><br />
pseudo <a href= "lien profil">profil</a> • <a href="lien mp">contacter</a><br />
<img src="Publicités , Interdites Merci!://24.media.tumblr.Publicités , Interdites Merci!/tumblr_mbsavepfqc1rga9u7o4_250.gif" class="staff" /><br />
pseudo <a href="lien profil">profil</a> • <a href="lien mp">contacter</a>
</div>
</div>
</td>
<td>
<div class="blocb">
<div class="center">
<div class="yoo">
<span class="titrepa">Bienvenue !</span>
</div><br />
<div class="textepa">
texte de bienvenue ici
</div><br />
</div>
</div>
</td>
<td>
<div class="blocpoto">
<div class="center">
<div class="yoo">
<span class="titrepa">Partenariat</span>
</div><br />
<div class="cpart">
<a href="#">
<img src="Publicités , Interdites Merci!://image.noelshack.Publicités , Interdites Merci!/fichiers/2012/44/1351954728-logo98.png" class="potos" />
</a>
<a href="#">
<img src="Publicités , Interdites Merci!://image.noelshack.Publicités , Interdites Merci!/fichiers/2012/44/1351954728-logo98.png" class="potos" />
</a>
<a href="#">
<img src="Publicités , Interdites Merci!://image.noelshack.Publicités , Interdites Merci!/fichiers/2012/44/1351954728-logo98.png" class="potos" />
</a>
<a href="#">
<img src="Publicités , Interdites Merci!://image.noelshack.Publicités , Interdites Merci!/fichiers/2012/44/1351954728-logo98.png" class="potos" />
</a>
<a href="#">
<img src="Publicités , Interdites Merci!://image.noelshack.Publicités , Interdites Merci!/fichiers/2012/44/1351954728-logo98.png" class="potos" />
</a>
<a href="#">
<img src="Publicités , Interdites Merci!://image.noelshack.Publicités , Interdites Merci!/fichiers/2012/44/1351954728-logo98.png" class="potos" />
</a>
<a href="#">
<img src="Publicités , Interdites Merci!://image.noelshack.Publicités , Interdites Merci!/fichiers/2012/44/1351954728-logo98.png" class="potos" />
</a>
<a href="#">
<img src="Publicités , Interdites Merci!://image.noelshack.Publicités , Interdites Merci!/fichiers/2012/44/1351954728-logo98.png" class="potos" />
</a>
</div>
<a href="#">les autres</a> • <a href="#">demande</a>
</div>
</div>
</td>
</tr>
<tr>
<td>
<div class="blocredit">
<div class="center">
<div class="yoo">
<span class="titrepa">Crédits</span>
</div>
</div><br />
<span class="textc">Crédit ici<br />
Et ici aussi (ne pas retirer le logo du forum et mon pseudo svp)<br />
Page d'accueil réalisée par ABSOLUTE.SUNSHINE</span><br />
<div class="center">
<a href="Publicités , Interdites Merci!://www.css-actif.Publicités , Interdites Merci!/"><img src="Publicités , Interdites Merci!://files.cssactif.Publicités , Interdites Merci!/logos/css-actif-8831.gif" border="0" /></a>
</div>
</div>
</td>
<td>
<div class="blocnews">
<div class="center">
<div class="yoo">
<span class="titrepa">Nouveautés</span>
</div>
</div>
00/00/00 • nouveauté ici<br />
00/00/00 • nouveauté ici<br />
00/00/00 • nouveauté ici<br />
00/00/00 • nouveauté ici<br />
00/00/00 • nouveauté ici<br />
00/00/00 • nouveauté ici<br />
<br />
</div>
</td>
<td>
<div class="bloctop">
<div class="center">
<div class="yoo">
<span class="titrepa">Top sites</span>
</div>
<div class="ctop">
<a href="#">
<img src="Publicités , Interdites Merci!://image.noelshack.Publicités , Interdites Merci!/fichiers/2012/44/1351880464-topsite98.png" class="tops" />
</a>
<a href="#">
<img src="Publicités , Interdites Merci!://image.noelshack.Publicités , Interdites Merci!/fichiers/2012/44/1351880464-topsite98.png" class="tops" />
</a>
<a href="#">
<img src="Publicités , Interdites Merci!://image.noelshack.Publicités , Interdites Merci!/fichiers/2012/44/1351880464-topsite98.png" class="tops" />
</a>
</div>un vote toutes les deux heures ~
</div>
</div>
</td>
</tr>
</table>
[/size]
SECONDE PARTIE • CSS
[size]
Code:Sélectionner le contenuSélectionner le contenu
/* espace pour le menu*/
.space {
width:6px;
height:2px;
}
/* fin espace menu* /
/* staff presenté de manière simple avec uniquement une bordure */
.staff {
width:200px;
height:70px;
padding:2px;
border:1px solid #CABCAB;
}
/* fin staff */
/* top sites aux formes automatiquement arrondis */
.tops {
width:60px;
height:60px;
border:2px solid #E4DED6;
opacity:0.8;
-webkit-border-radius: 120px;
-moz-border-radius: 120px;
border-radius: 120px;
-webkit-transform: rotate(2deg) ;
-moz-transform: rotate(2deg) ;
-o-transform: rotate(2deg) ;
-ms-transform: rotate(2deg) ;
transform: rotate(2deg) ;
}
/* fin top sites */
/* propriétés communes aux blocs */
.blocstaff,
.blocb,
.blocpoto,
.blocredit,
.blocnews,
.bloctop {
text-align:justify;
font-family : Verdana;
font-size:11px;
color:#858585;
letter-spacing: 1px;
padding:3px;
background-color:#ECEAE8;
border-left:3px solid #B7A49B;
border-right:3px solid #B7A49B;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-moz-box-shadow:white 1px 1px 0,0 0 3px #E4DED6;
-webkit-box-shadow:white 1px 1px 0,0 0 3px #E4DED6;
box-shadow:1px 1px 0 white,0 0 3px #E4DED6;
}
/* fin propriétés communes */
/* bloc staff */
.blocstaff{
width:230px;
height:240px;
}
/* fin bloc staff */
/* bloc bienvenue*/
.blocb{
width:340px;
height:240px;
}
/* fin bloc bienvenue */
/* bloc partenariat*/
.blocpoto{
width:190px;
height:240px;
}
/* fin bloc partenariat */
/* centre les logos partenaires */
.cpart {
width:98%;
height:150px;
overflow:auto;
}
/* fin logo partenaires */
/* bloc crédit */
.blocredit{
width:230px;
height:200px;
}
/* fin bloc crédit */
/* crédit texte */
.textc {
font-size:10px;
}
/* fin crédit texte */
/* bloc nouveauté */
.blocnews {
width:340px;
height:200px;
}
/* fin bloc nouveauté */
/* bloc topsites */
.bloctop {
width:190px;
height:200px;
}
/* fin bloc topsites */
/* centre logo tops*/
.ctop{
width:98%;
height:135px;
overflow:auto;
}
/* fin centre logo tops */
/* les titres avec pour police Kite One */
.titrepa {
font-family: 'Kite One', sans-serif;
font-size:27px;
color:#B7A49B;
}
/* fin titre */
/* petits points sous les titres */
.yoo {
border-bottom:1px dotted white;
}
/* fin points sous titres */
/* les liens rapides tout n haut de la PA */
.menu {
color:#F8F7F6;
letter-spacing: 1px;
font-variant:small-caps;
font-size:11px;
padding:2px;
padding-left:4px;
padding-right:4px;
background-color:#CABCAB;
border-left:3px solid #F2F2F2;
border-right:3px solid #F2F2F2;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
-o-transition:all 0.5s ease;
}
/* fin liens rapides */
/* les pointillés dérrière le menu à peut-être adapter selon le forum */
.point {
border-top:8px dotted #F2F2F2;
margin-bottom:-10px;
}
/* fin pointillés */
/* simple texte qui se trouve dans les tables pour ne pas deborder */
.textepa {
width:90%;
height:180px;
overflow:auto;
}
/* fin texte */
/* les logos des partenaires dont l'opacité augmente au survol de la souris */
.potos {
width:88px;
height:31px;
opacity:0.5;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
-webkit-transition:all 0.5s ease;
-moz-transition:all 0.5s ease;
-o-transition:all 0.5s ease;
}
.potos:hover {
opacity:0.7;
}
/* fin logos partenaires */
[/size]
DERNIÈRE PARTIE • TEMPLATE
[size]
Enfin, pour cette partie, modifiez donc votre template overall_header en repérant les lignes suivantes :
Code:Sélectionner le contenuSélectionner le contenu
{T_HEAD_STYLESHEET}
{CSS}
<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}" />
Placer le code suivant au-dessus de
[/size]
- Code:
-
{T_HEAD_STYLESHEET}
[size]
:
Code:Sélectionner le contenuSélectionner le contenu
<link href='Publicités , Interdites Merci!://fonts.googleapis.Publicités , Interdites Merci!/css?family=Kite+One' rel='stylesheet' type='text/css' />
[/size]