Page d'accueil codée Bouton_activePage d'accueil codée Bouton_hoverPage d'accueil codée Fb-hoverPage d'accueil codée Fb-active
CSSActif, le forum, n'est plus maintenu. Il est néanmoins disponible pour consultation. Pour des outils pratiques, rendez-vous sur:

Découvrez CSSActif, une collection d'outils et de tutoriels interactifs pour les développeurs Web — HTML, CSS, JavaScript et bien plus!

Derniers sujets
» Système d'onglets simple et personnalisable
Page d'accueil codée EmptyLun 03 Juin 2024, 17:20 par birds

» Fiche de Présentation RPG
Page d'accueil codée EmptySam 30 Mar 2024, 22:07 par Peyton972

» [RPG] Fiche personnage avec bannière
Page d'accueil codée EmptySam 30 Mar 2024, 22:06 par Peyton972

» Structure de Qui Est En Ligne (1)
Page d'accueil codée EmptyLun 04 Mar 2024, 23:20 par Peyton972

» Qui Est En Ligne - Utopia
Page d'accueil codée EmptyDim 24 Déc 2023, 18:16 par romee

» Pack forum complet "Androïd Sylver" RPU (N°2)
Page d'accueil codée EmptyJeu 02 Nov 2023, 06:42 par Hydrar

» Formulaire de connexion rapide amélioré
Page d'accueil codée EmptySam 04 Mar 2023, 18:57 par Krager

» Avatar centré dans le profil
Page d'accueil codée EmptySam 11 Fév 2023, 06:04 par Krager

Le Deal du moment :
LEGO Icons 10331 – Le martin-pêcheur
Voir le deal
35 €

Partagez
 

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
http://kagami-academie.forumpro.fr
Silver°Dragon
Silver°Dragon
{ Membre }
{ Membre }

Féminin Messages : 51



Page d'accueil codée Empty

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   Page d'accueil codée EmptyJeu 19 Avr 2012, 17:46
Revenir en haut Aller en bas
http://graphoto.actifforum.com/
Glamor
{ Membre }
{ Membre }

Masculin Messages : 75



Page d'accueil codée Empty
Merci à toi, vraiment beau !
MessageSujet: Re: Page d'accueil codée   Page d'accueil codée EmptyVen 20 Avr 2012, 06:43
Revenir en haut Aller en bas
http://graphoto.actifforum.com/
Glamor
{ Membre }
{ Membre }

Masculin Messages : 75



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

Féminin Messages : 9



Page d'accueil codée Empty
Merci à toi, cela va m'être je pense très utile !
MessageSujet: Re: Page d'accueil codée   Page d'accueil codée EmptySam 21 Avr 2012, 07:14
Revenir en haut Aller en bas
Hurricane
Hurricane
{ Membre }
{ Membre }

Féminin Messages : 69



Page d'accueil codée Empty
Merci Page d'accueil codée 577704309
MessageSujet: Re: Page d'accueil codée   Page d'accueil codée EmptySam 21 Avr 2012, 09:14
Revenir en haut Aller en bas
http://hogwarts-muggle.forumgratuit.be/
as-line
as-line
{ Membre }
{ Membre }

Féminin Messages : 30



Page d'accueil codée Empty
Merci Page d'accueil codée 1688815589
MessageSujet: Re: Page d'accueil codée   Page d'accueil codée EmptySam 21 Avr 2012, 11:47
Revenir en haut Aller en bas
http://hikari-no-gakuen.forum-actif.net/
Tsuchie
Tsuchie
{ Membre }
{ Membre }

Féminin Messages : 5



Page d'accueil codée Empty
Merci, c'est vraiment superbe !
MessageSujet: Re: Page d'accueil codée   Page d'accueil codée EmptySam 21 Avr 2012, 13:26
Revenir en haut Aller en bas
http://blacksheepschool.forumcanada.org
Hell of wisteria
Hell of wisteria
{ Membre }
{ Membre }

Féminin Messages : 2



Page d'accueil codée Empty
thanks!
MessageSujet: Re: Page d'accueil codée   Page d'accueil codée EmptyLun 23 Avr 2012, 08:38
Revenir en haut Aller en bas
Poukite
Poukite
{ Membre }
{ Membre }

Féminin Messages : 34



Page d'accueil codée Empty
Merci pour le code Page d'accueil codée 1001172573
MessageSujet: Re: Page d'accueil codée   Page d'accueil codée EmptyMer 25 Avr 2012, 09:51
Revenir en haut Aller en bas
http://www.royale-pub.com/
Vengryn
Vengryn
{ Membre }
{ Membre }

Masculin Messages : 11



Page d'accueil codée Empty
Ah c'est cool, merci Wink
MessageSujet: Re: Page d'accueil codée   Page d'accueil codée EmptyJeu 26 Avr 2012, 13:02
Revenir en haut Aller en bas
http://neidrilh.forumactif.com
naima-kell
naima-kell
{ Membre }
{ Membre }

Féminin Messages : 22



Page d'accueil codée Empty
Merci
MessageSujet: Re: Page d'accueil codée   Page d'accueil codée EmptyVen 27 Avr 2012, 11:03
Revenir en haut Aller en bas
http://hypnothicfansub.asiat-world.com
Keh
{ Membre }
{ Membre }

Féminin Messages : 7



Page d'accueil codée Empty
Merci beaucoup ^w^
MessageSujet: Re: Page d'accueil codée   Page d'accueil codée EmptyJeu 03 Mai 2012, 06:06
Revenir en haut Aller en bas
Espeon
Espeon
Administrateur
Administrateur

Masculin Messages : 1819



Page d'accueil codée Empty
21-05-2012 : Code revu et mis à jour
MessageSujet: Re: Page d'accueil codée   Page d'accueil codée EmptyLun 21 Mai 2012, 05:27
Revenir en haut Aller en bas
http://poudlard.forumactif.pro/
Queen.Basterds
Queen.Basterds
{ Membre }
{ Membre }

Féminin Messages : 15



Page d'accueil codée Empty
Merci, c'est vraiment superbe *o* ♥
MessageSujet: Re: Page d'accueil codée   Page d'accueil codée EmptyJeu 24 Mai 2012, 12:56
Revenir en haut Aller en bas
http://serialdesigner.forumactif.fr/
K-Surf
K-Surf
{ Spécialiste }
{ Spécialiste }

Masculin Messages : 1707



Page d'accueil codée Empty
Merci, et les titres on le droit d'être vert (le titre de ce sujet) ?
MessageSujet: Re: Page d'accueil codée   Page d'accueil codée EmptySam 09 Juin 2012, 10:07
Revenir en haut Aller en bas
http://salon-des-musulmanes.1fr1.net/
Laura <3
{ Membre }
{ Membre }

Féminin Messages : 3



Page d'accueil codée Empty
Juste waaaaaa
MessageSujet: Re: Page d'accueil codée   Page d'accueil codée EmptyLun 11 Juin 2012, 18:25
Revenir en haut Aller en bas
http://a-new-life.forumactif.org/
Law
{ Membre }
{ Membre }

Féminin Messages : 6



Page d'accueil codée Empty
    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   Page d'accueil codée EmptyMer 13 Juin 2012, 13:47
Revenir en haut Aller en bas
http://nospetitsboutdechoux.forumactif.org
laetitia
{ Membre }
{ Membre }

Féminin Messages : 29



Page d'accueil codée Empty
génial un grand merci pour ce tuto
MessageSujet: Re: Page d'accueil codée   Page d'accueil codée EmptyVen 22 Juin 2012, 09:53
Revenir en haut Aller en bas
Ying et Yang
{ Membre }
{ Membre }

Féminin Messages : 40



Page d'accueil codée Empty
Merci a toi
MessageSujet: Re: Page d'accueil codée   Page d'accueil codée EmptyMer 27 Juin 2012, 22:44
Revenir en haut Aller en bas
http://hollywood-ramdam.lebonforum.com/
Kaileen
Kaileen
{ Membre }
{ Membre }

Féminin Messages : 103



Page d'accueil codée Empty
Merci pour le partage !
Cette PA est superbe, je pense l'utiliser pour mon forum. Merci Smile
MessageSujet: Re: Page d'accueil codée   Page d'accueil codée EmptyJeu 28 Juin 2012, 04:46
Revenir en haut Aller en bas
http://www.welovetokiohotel.net/
coconutxjuice
coconutxjuice
{ Membre }
{ Membre }

Féminin Messages : 16



Page d'accueil codée Empty
Un grand merci à toi Very Happy
MessageSujet: Re: Page d'accueil codée   Page d'accueil codée EmptyVen 03 Aoû 2012, 11:10
Revenir en haut Aller en bas
http://meneldil.forumsactifs.com/
Kevla
Kevla
{ Membre }
{ Membre }

Féminin Messages : 29



Page d'accueil codée Empty
merci à toi cette PA est très joli
MessageSujet: Re: Page d'accueil codée   Page d'accueil codée EmptySam 04 Aoû 2012, 10:49
Revenir en haut Aller en bas
Angel Tiger
{ Membre }
{ Membre }

Masculin Messages : 21



Page d'accueil codée Empty
merci pourle code *-* cette PA et tout simplement magnifique ^^
MessageSujet: Re: Page d'accueil codée   Page d'accueil codée EmptyMar 11 Sep 2012, 14:04
Revenir en haut Aller en bas
http://crucify-sorrow.chocoforum.com/
Vicky Venin
Vicky Venin
{ Membre }
{ Membre }

Féminin Messages : 13



Page d'accueil codée Empty
Merci pour le code ^^
MessageSujet: Re: Page d'accueil codée   Page d'accueil codée EmptyMer 12 Sep 2012, 11:10
Revenir en haut Aller en bas
http://the-gift.rpgboard.net/forum
Everniss
Everniss
{ Membre }
{ Membre }

Féminin Messages : 19



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




Page d'accueil codée Empty
MessageSujet: Re: Page d'accueil codée   Page d'accueil codée Empty
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

-
» onglet à droite du contenue (page daccueil)
» Page D'accueil codée sur Xooit ?
» Footer toujours en bas de page et à la largeur de la page
» Signature codée
» Signature Codée

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
CSSActif :: Codes Directement Exploitables :: Personnalisation F.A. :: Message d'Accueil (PA)-

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 | Signaler un abus | Cookies | Forum gratuit