C'est la fin du projet CSSActif, vous trouverez les explications ici : Fin de CSSActif, ouverture du forum. Le forum reste cependant ouvert à tous et ses ressources sont entièrement disponibles. Merci à tous !
Derniers sujets
» Système d'onglets simple et personnalisable
Aujourd'hui à 08:35 par Moony

» Partenariats échange de liens
Hier à 06:04 par digi575

» Vos partenaires dans le footer
Jeu 14 Sep 2017, 23:45 par ThunderTB

» Pack forum complet "Androïd Sylver" RPU (N°2)
Dim 10 Sep 2017, 10:34 par Leiris

» Infobulle avec effets CSS3
Sam 09 Sep 2017, 12:45 par Leiris

» [Plugin] Effet rollover sur une image
Sam 09 Sep 2017, 10:37 par Jelly33

» Effet de volet glissant sur un bloc
Sam 09 Sep 2017, 10:32 par Jelly33

» Rédaction article blog pas cher
Jeu 07 Sep 2017, 09:16 par digi575


Poster un nouveau sujet   Répondre au sujetPartagez | 
 

Page d'accueil codée

Voir le sujet précédent Voir le sujet suivant Aller en bas 
Aller à la page : 1, 2, 3  Suivant
Voir le profil de l'utilisateur http://kagami-academie.forumpro.fr
avatar
{ Membre }
{ Membre }

Féminin Messages : 51



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>

Maintenant, c'est à vous de remplir à votre guise.
Veuillez laisser les crédits pour la page d'accueil codée, merci.
MessageSujet: Page d'accueil codée   Jeu 19 Avr 2012, 17:46
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://graphoto.actifforum.com/
{ Membre }
{ Membre }

Masculin Messages : 75



Merci à toi, vraiment beau !
MessageSujet: Re: Page d'accueil codée   Ven 20 Avr 2012, 06:43
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://graphoto.actifforum.com/
{ Membre }
{ Membre }

Masculin Messages : 75



J'ai simplement copié collé, mais là je règle tout je pense Smile
MessageSujet: Re: Page d'accueil codée   Ven 20 Avr 2012, 07:36
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://...
avatar
{ Membre }
{ Membre }

Féminin Messages : 9



Merci à toi, cela va m'être je pense très utile !
MessageSujet: Re: Page d'accueil codée   Sam 21 Avr 2012, 07:14
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Membre }
{ Membre }

Féminin Messages : 69



Merci
MessageSujet: Re: Page d'accueil codée   Sam 21 Avr 2012, 09:14
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://hogwarts-muggle.forumgratuit.be/
avatar
{ Membre }
{ Membre }

Féminin Messages : 30



Merci
MessageSujet: Re: Page d'accueil codée   Sam 21 Avr 2012, 11:47
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://hikari-no-gakuen.forum-actif.net/
avatar
{ Membre }
{ Membre }

Féminin Messages : 5



Merci, c'est vraiment superbe !
MessageSujet: Re: Page d'accueil codée   Sam 21 Avr 2012, 13:26
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://blacksheepschool.forumcanada.org
avatar
{ Membre }
{ Membre }

Féminin Messages : 2



thanks!
MessageSujet: Re: Page d'accueil codée   Lun 23 Avr 2012, 08:38
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
{ Membre }
{ Membre }

Féminin Messages : 34



Merci pour le code
MessageSujet: Re: Page d'accueil codée   Mer 25 Avr 2012, 09:51
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.royale-pub.com/
avatar
{ Membre }
{ Membre }

Masculin Messages : 11



Ah c'est cool, merci Wink
MessageSujet: Re: Page d'accueil codée   Jeu 26 Avr 2012, 13:02
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://neidrilh.forumactif.com
avatar
{ Membre }
{ Membre }

Féminin Messages : 22



Merci
MessageSujet: Re: Page d'accueil codée   Ven 27 Avr 2012, 11:03
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://hypnothicfansub.asiat-world.com
{ Membre }
{ Membre }

Féminin Messages : 7



Merci beaucoup ^w^
MessageSujet: Re: Page d'accueil codée   Jeu 03 Mai 2012, 06:06
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
avatar
Administrateur
Administrateur

Masculin Messages : 1819



21-05-2012 : Code revu et mis à jour


MessageSujet: Re: Page d'accueil codée   Lun 21 Mai 2012, 05:27
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://poudlard.forumactif.pro/
avatar
{ Membre }
{ Membre }

Féminin Messages : 15



Merci, c'est vraiment superbe *o* ♥
MessageSujet: Re: Page d'accueil codée   Jeu 24 Mai 2012, 12:56
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://serialdesigner.forumactif.fr/
avatar
{ Spécialiste }
{ Spécialiste }

Masculin Messages : 1707



Merci, et les titres on le droit d'être vert (le titre de ce sujet) ?




MessageSujet: Re: Page d'accueil codée   Sam 09 Juin 2012, 10:07
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://salon-des-musulmanes.1fr1.net/
{ Membre }
{ Membre }

Féminin Messages : 3



Juste waaaaaa
MessageSujet: Re: Page d'accueil codée   Lun 11 Juin 2012, 18:25
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://a-new-life.forumactif.org/
{ Membre }
{ Membre }

Féminin Messages : 6



    Merci d'avoir partagé, j'étais à court d'idées pour une PA sympa
    Je vais pouvoir m'inspirer de celle-là. Merci Very Happy
MessageSujet: Re: Page d'accueil codée   Mer 13 Juin 2012, 13:47
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://nospetitsboutdechoux.forumactif.org
{ Membre }
{ Membre }

Féminin Messages : 29



génial un grand merci pour ce tuto
MessageSujet: Re: Page d'accueil codée   Ven 22 Juin 2012, 09:53
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
{ Membre }
{ Membre }

Féminin Messages : 40



Merci a toi
MessageSujet: Re: Page d'accueil codée   Mer 27 Juin 2012, 22:44
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://hollywood-ramdam.lebonforum.com/
avatar
{ Membre }
{ Membre }

Féminin Messages : 103



Merci pour le partage !
Cette PA est superbe, je pense l'utiliser pour mon forum. Merci Smile


Avatar : © Design Touch.
MessageSujet: Re: Page d'accueil codée   Jeu 28 Juin 2012, 04:46
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.welovetokiohotel.net/
avatar
{ Membre }
{ Membre }

Féminin Messages : 16



Un grand merci à toi Very Happy
MessageSujet: Re: Page d'accueil codée   Ven 03 Aoû 2012, 11:10
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://meneldil.forumsactifs.com/
avatar
{ Membre }
{ Membre }

Féminin Messages : 29



merci à toi cette PA est très joli
MessageSujet: Re: Page d'accueil codée   Sam 04 Aoû 2012, 10:49
Revenir en haut Aller en bas
Voir le profil de l'utilisateur
{ Membre }
{ Membre }

Masculin Messages : 21



merci pourle code *-* cette PA et tout simplement magnifique ^^
MessageSujet: Re: Page d'accueil codée   Mar 11 Sep 2012, 14:04
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://crucify-sorrow.chocoforum.com/
avatar
{ Membre }
{ Membre }

Féminin Messages : 13



Merci pour le code ^^


MessageSujet: Re: Page d'accueil codée   Mer 12 Sep 2012, 11:10
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://the-gift.rpgboard.net/forum
avatar
{ Membre }
{ Membre }

Féminin Messages : 19



Un grand merci pour ce codage, c'est exactement ce qui manquait à mon Index ♥.
MessageSujet: Re: Page d'accueil codée   Dim 23 Sep 2012, 12:22
Revenir en haut Aller en bas
Contenu sponsorisé




MessageSujet: Re: Page d'accueil codée   
Revenir en haut Aller en bas
 

Page d'accueil codée

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 3Aller à la page : 1, 2, 3  Suivant

 Sujets similaires

-
» Page d'accueil codée
» Faire un tableau sur la page d'accueil
» Vérification écriture code pour page d'accueil
» [ABANDON] Une page d'accueil à onglets
» [Lixyr Yrna] Une page d'accueil pour rainbow style

Permission de ce forum:Vous pouvez répondre aux sujets dans ce forum
CSSActif :: Codes Directement Exploitables :: Personnalisation F.A. :: Message d'Accueil (PA)-
Poster un nouveau sujet   Répondre au sujet

Partenaires Or


← Page précédente   ↑ Aller en haut Copyright © CSSActif 2009 - 2013 Tous droits réservés
Créer un forum | © phpBB | Forum gratuit d'entraide | Contact | Signaler un abus | Forum gratuit