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
» Modifier l'apparence du titre des topics
Mer 21 Juin 2017, 10:21 par Invité

» Zoomer progressivement sur une image
Mar 20 Juin 2017, 12:38 par Lutèce

» Décoration avant ou après un lien
Mar 20 Juin 2017, 12:05 par nuanciel

» [RPG] Fiche de présentation
Lun 19 Juin 2017, 18:54 par Invité

» Système d'onglets simple et personnalisable
Dim 18 Juin 2017, 20:17 par VankaAD

» Quelques codes utiles pour la Chatbox
Dim 18 Juin 2017, 11:43 par Invité

» Signature codée avec onglets
Mer 14 Juin 2017, 05:35 par PolardK

» [phpBB2] Sauvegarde des posts en cours d'écriture
Mer 14 Juin 2017, 05:15 par PolardK


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