PAGE D'ACCUEIL CODÉE

PAGE D'ACCUEIL CODÉE

Informations générales

Description :: Voici un code, facile pour faire une page d'accueil codée simple et claire.
Démo :: Pour avoir un aperçu, veuillez cliquer >ici<
Testé sur :: Firefox, Chrome, Safari, Opera
Crédits :: Proposé par Silver°Dragon le 19/04/2012 | Espeon
Mise(s) à jour :: Le 09/05/12 par Espeon

Le tutoriel

Pour pouvoir installer cette page d'accueil sur votre forum, il vous faut avoir les droits d'admin.
Nous allons toucher au HTML & CSS.

Voici donc le CSS à placer dans votre feuille de style qui se trouve dans le Panneau d'Administration > Affichage > Couleur > Feuille de Style CSS :

Code:: /*
|--------------------------------------------------------------------------
| CSS MESSAGE ACCUEIL
|--------------------------------------------------------------------------
*/

/* Propriétés générales */
.block, .titre, .lien {
background: #000000;
color: #ffffff;

border: 2px #ffffff solid;
-moz-border-radius:20px 20px 20px 20px;
-webkit-border-radius:20px 20px 20px 20px;
border-radius:20px 20px 20px 20px;

text-shadow: 0px 0px 8px #ffffff;
-moz-box-shadow: 1px 1px 5px #ffffff;
-webkit-box-shadow: 1px 1px 5px #ffffff;
}

.block, .lien {
text-align: center;
padding: 10px;
}

td {
vertical-align: top;
}

/* Images */
.block-partenaires img, .thumbnail > div {
-moz-transition: opacity 1s;
-o-transition: opacity 1s;
-webkit-transition: opacity 1s;
-htm-transition: opacity 1s;
transition: opacity 1s;
}

.block-partenaires img {
width: 88px;
height: 31px;
padding: 1px;

opacity: 0.5;
-moz-opacity: 0.5;
filter: alpha(opacity=50);
}

.block-partenaires img:hover {
opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=100);
}

.thumbnail {
position: absolute;
z-index: 0;
}

.thumbnail:hover{
background-color: transparent;
z-index: 50;
}

.thumbnail > div {
position: absolute;
left: -2000px;
padding: 5px;
margin: auto;
background-color: #000000;
color: #ffffff;
text-shadow: 0px 0px 8px #000000;
border: #ffffff 1px solid;

opacity: 0.5;
-moz-opacity: 0.5;
filter: alpha(opacity=50);
}

.thumbnail:hover > div {
top: 0px;
left: 0px;
width: 78px;
height: 78px;

opacity: 1;
-moz-opacity: 1;
filter: alpha(opacity=100);

}

/* Liens */
.lien{
display: block;
width: 110px;
margin-right: 10px;

text-decoration: none;
color: #ffffff;
}

.lien:hover{
background: #ffffff;
color: #000000;
}

a.tstaff {
display: block;
text-align: center;
margin-top: 95px;
}

.block a {
text-decoration: none;
}

/* Blocs */
.block-welcome, .block-staff {
height: 150px;
overflow: auto;
text-align: justify;
}

.block-welcome {
width: 500px;
}

.block-staff {
width: 332px;
}

.block-staff table {
margin: auto;
}

.block-staff td {
width: 92px;
}

.block-partenaires, .block-nouveautes, .block-credits {
width: 280px;
height: 120px;
}

.block-partenaires > div, .block-nouveautes > div, .block-credits > div {
width: 280px;
height: 70px;
overflow: auto;
}

/* Titres */
.titre {
font-family: impact;
font-size: 14px;
padding: 4px;
margin: auto;
margin-bottom: 5px;
}

.titre-welcome {
height: 130px;
width: 20px;
padding: 7px;
margin-right: -4px;
margin-top: 15px;
text-align: center;

border-right: 0px #ffffff solid;
}

.titre-staff {
width: 130px;
text-align: center;
}

.titre:hover {
background: #FFFFFF;
color: #000000;
text-shadow: 0px 0px 8px #000000;
}

.titre-welcome:hover {
background: #000000;
color: #ffffff;
text-shadow: 0px 0px 8px #ffffff;
}

Ensuite, nous plaçons le code HTML , dans Affichage > Généralité :

Code:: <table>
<tr>
<td><a href="#" class="lien">Lien One</a></td>
<td><a href="#" class="lien">Lien Two</a></td>
<td><a href="#" class="lien">Lien Three</a></td>
<td><a href="#" class="lien">Lien Four</a></td>
<td><a href="#" class="lien">Lien Five</a></td>
</tr>
</table>

<table>
<tr>
<td>
<div class="titre titre-welcome">
W<br />E<br />L<br />C<br />O<br />M<br />E
</div>
</td>

<td>
<div class="block block-welcome">
Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte Ton texte
</div>
</td>

<td>
<div class="block block-staff">
<h1 class="titre titre-staff">L'equipe du Forum</h1>

<table>
<tr>
<td>
<div class="thumbnail">
<img src="http://i41.servimg.com/u/f41/16/01/60/39/icon_910.png" />
<div>
Pseudo<br /><br /><a href="LIEN_MP">Mp</a> & <a href="LIEN_PROFIL">Profil</a>
</div>
</div>
</td>

<td>
<div class="thumbnail">
<img src="http://i41.servimg.com/u/f41/16/01/60/39/icon_910.png" />
<div>
Pseudo<br /><br /><a href="LIEN_MP">Mp</a> & <a href="LIEN_PROFIL">Profil</a>
</div>
</div>
</td>

<td>
<div class="thumbnail">
<img src="http://i41.servimg.com/u/f41/16/01/60/39/icon_910.png" />
<div>
Pseudo<br /><br /><a href="LIEN_MP">Mp</a> & <a href="LIEN_PROFIL">Profil</a>
</div>
</div>
</td>
</tr>
</table>

<a href="LIEN_DU_SUJET_STAFF" class="tstaff">Tout le staff ?</a>
</div>
</td>
</tr>
</table>

<table>
<tr>
<td>
<div class="block block-partenaires">
<h1 class="titre">Partenaires</h1>

<a href="LIEN_PARTENAIRE">
<img src="http://i41.servimg.com/u/f41/16/01/60/39/sans_t15.png" />
</a>
<a href="LIEN_PARTENAIRE">
<img src="http://i41.servimg.com/u/f41/16/01/60/39/sans_t15.png" />
</a>
<a href="LIEN_PARTENAIRE">
<img src="http://i41.servimg.com/u/f41/16/01/60/39/sans_t15.png" />
</a>
<br />

<a href="LIEN_PARTENAIRE">
<img src="http://i41.servimg.com/u/f41/16/01/60/39/sans_t15.png" />
</a>
<a href="LIEN_PARTENAIRE">
<img src="http://i41.servimg.com/u/f41/16/01/60/39/sans_t15.png" />
</a>
<a href="LIEN_PARTENAIRE">
<img src="http://i41.servimg.com/u/f41/16/01/60/39/sans_t15.png" />
</a>
<br />
</div>
</td>

<td>
<div class="block block-nouveautes">
<h1 class="titre">Nouveautes</h1>

<div>
00 / 00 / 00 ~> Nouveaute<br />
00 / 00 / 00 ~> Nouveaute<br />
00 / 00 / 00 ~> Nouveaute<br />
00 / 00 / 00 ~> Nouveaute<br />
00 / 00 / 00 ~> Nouveaute<br />
00 / 00 / 00 ~> Nouveaute<br />
00 / 00 / 00 ~> Nouveaute<br />
00 / 00 / 00 ~> Nouveaute<br />
00 / 00 / 00 ~> Nouveaute<br />
</div>
</div>
</td>

<td>
<div class="block block-credits">
<h1 class="titre">Credits</h1>

<div>
Design by ...<br />Page D'accueil By <a href="http://www.css-actif.com/">Silver°Dragon</a>
</div>
</div>
</td>
</tr>
</table>