-15%
Le deal à ne pas rater :
(Adhérents) LEGO® Icons 10318 Le Concorde
169.99 € 199.99 €
Voir le deal

Terrible :: Codes forum :: PA
Awful
Jeu 9 Mar - 14:16
Awful


Codes et explications

Pour installer votre page d'accueil, je vous conseille de créer une iframe et de l'installer dans l'emplacement réservé aux pages d'accueil.

Dans votre panneau d'administration, Modules > HTML & Javascript > Gestion des pages HTML. Cliquez sur le bouton "CRÉATION EN MODE AVANCÉ (HTML)" puis copiez et collez le code suivant dans le contenu de la page :
Code:
<head>
  <link href="https://fonts.googleapis.com/css?family=Abel|Roboto" rel="stylesheet" />
<style>
 
/*PA par Awful*/
 body {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
}
/*Taille et couleur de la PA*/
 #pa-wrap {
     width: 822px;
     height: 422px;
     background: #fff;
     border: 1px solid #ccc;
     padding: 10px;
     margin: auto;
     font-family: 'Roboto', sans-serif;
}
 #pa {
     width: 100%;
     height: 100%;
     border: 1px solid #ccc;
     background: #fbfbfb;
     margin: auto;
     display: flex;
     box-sizing: border-box;
     flex-wrap: wrap;
     padding: 0 20px 0 20px;
     justify-content: space-between;
}
 .bloc-mid {
     display: flex;
     flex-flow: column;
     justify-content: space-between;
     width: 270px;
     height: 330px;
}
/*Style des liens*/
 #pa a {
     text-decoration: none;
     color: #9d9bb9;
     transition: all 0.3s;
}
 #pa a:hover {
     color: #ccc;
}
/*Style des titre*/
 #pa h1 {
     text-align: center;
     text-transform: uppercase;
     font-size: 20px;
     margin: 15px 0;
     font-family: 'Abel', sans-serif;
     color: #ccc;
     letter-spacing: 2px;
     flex: 100%;
}
 #pa h2 {
     text-align: center;
     font-size: 11px;
     color: #000;
     color: #82818e;
     margin: 0 0 10px;
     text-transform: uppercase;
     letter-spacing: 1px;
     background: #f5f5f5;
     border: 1px solid #ccc;
     font-family: 'Abel', sans-serif;
}
 #pa h3 {
     margin: 6px 0 0;
     text-transform: uppercase;
     color: #ccc;
     font-size: 12px;
     letter-spacing: 1.5px;
}
 #pa h4 {
     text-align: center;
     font-size: 9px;
     color: #82818e;
     margin: 0;
     text-transform: uppercase;
     letter-spacing: 1px;
     font-family: 'Abel', sans-serif;
}
/*Bloc contexte*/
 #pa-contexte {
     width: 200px;
     display: flex;
     flex-direction: column;
     height: 330px;
}
 #pa-contexte div, #pa-news {
     width: 100%;
     background: #fff;
     border: 1px solid #ccc;
     box-sizing: border-box;
     padding: 8px;
     overflow: auto;
     text-align: justify;
     font-size: 10px;
     line-height: 150%;
     flex: 1;
}
/*Bloc Staff*/
 #pa-staff {
     text-align: center;
     display: flex;
     justify-content: space-between;
}
 #pa-staff .pa-staff-block {
     display: inline-block;
     position: relative;
     height: 60px;
     box-sizing: content-box;
     max-width: 80px;
     border: 2px solid #2F4B56;
     overflow: hidden;
     padding: 3px;
     background: #fff;
     border: 1px solid #ccc;
}
 #pa-staff .pa-staff-content {
     position: absolute;
     height: 100%;
     width: 100%;
     background: rgba(255, 255, 255, 0.8);
     top: 0;
     left: 0;
     font-size: 10px;
     box-sizing: border-box;
     padding-top: 20px;
     transform: translate(0, 100%);
     transition: all 0.3s;
}
 #pa-staff .pa-staff-block:hover .pa-staff-content {
     transform: translate(0, 0);
}
/*Bloc des news*/
 #pa-news {
     flex: 1;
     margin: 8px 0;
}
 #pa-news div {
     margin-bottom: 10px;
}
 #pa-news div b {
     color: #acacb4;
}
/*Bloc des partenaires*/
 #pa-part {
     text-align: center;
}
 #pa-part div {
     display: flex;
     width: 100%;
     flex-wrap: wrap;
     justify-content: space-between;
}
 #pa-part div a {
     margin-top: 4px;
}
/*Bloc des prédéfinis*/
 .pa-bloc-right {
     width: 250px;
     display: flex;
     flex-direction: column;
     justify-content: space-between;
     height: 330px;
}
 #pa-predef .pa-predef-bloc {
     width: 100%;
     display: flex;
     flex-wrap: wrap;
     justify-content: space-between;
}
 #pa-predef a.lien-pred {
     letter-spacing: 1px;
     font-size: 10px;
     text-transform: uppercase;
}
 #pa-predef .pa-pred {
     height: 80px;
     display: inline-block;
     position: relative;
     overflow: hidden;
     margin-bottom: 5px;
     max-width: 80px;
}
 #pa-predef .pa-pred-content {
     position: absolute;
     height: 100%;
     width: 100%;
     background: rgba(255, 255, 255, 0.8);
     top: 0;
     font-size: 11px;
     box-sizing: border-box;
     padding-top: 20px;
     transform: translate(0, 100%);
     transition: all 0.3s;
     text-align: center;
     line-height: 1.3em;
}
 #pa-predef .pa-pred:hover .pa-pred-content {
     transform: translate(0, 0);
}
/*Bloc des top-sites*/
 #pa-top #pa-top-content {
     width: 100%;
     overflow: hidden;
     display: flex;
     justify-content: space-between;
}
/*Crédit*/
 #pa-credit {
     flex: 100%;
     font-size: 9px;
     color: #d6d6d6;
     letter-spacing: 1px;
}

</style>
</head>

<body>
    <div id="pa-wrap">
        <div id="pa">
            <h1>Bienvenue sur lorem ipsum</h1>
            <div id="pa-contexte">
                <h2>Contexte</h2>
                <div>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur
                    adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit
                    in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                </div>
            </div>

            <div class="pa-bloc bloc-mid">
                <div id="pa-staff">
                    <div class="pa-staff-block">
                        <img src="http://placehold.it/80x60" alt="" />
                        <div class="pa-staff-content">
                            <h4>Pseudo</h4>Rang | <a href="#">MP</a>
                        </div>
                    </div>
                    <div class="pa-staff-block">
                        <img src="http://placehold.it/80x60" alt="" />
                        <div class="pa-staff-content">
                            <h4>Pseudo</h4>Rang | <a href="#">MP</a>
                        </div>
                    </div>
                    <div class="pa-staff-block">
                        <img src="http://placehold.it/80x60" alt="" />
                        <div class="pa-staff-content">
                            <h4>Pseudo</h4>Rang | <a href="#">MP</a>
                        </div>
                    </div>
                </div>
                <div id="pa-news">
                    <div><b>08/03</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore</div>
                    <div><b>08/03</b> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                        consequat. </div>
                    <div><b>08/03</b> Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem
                        ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
                        aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
                    </div>
                </div>
                <div id="pa-part">
                    <h2>Partenaires</h2>
                    <div>
                        <a href="#"><img src="http://placehold.it/50x50" alt="" />
                        </a>
                        <a href="#"><img src="http://placehold.it/50x50" alt="" />
                        </a>
                        <a href="#"><img src="http://placehold.it/50x50" alt="" />
                        </a>
                        <a href="#"><img src="http://placehold.it/50x50" alt="" />
                        </a>
                        <a href="#"><img src="http://placehold.it/50x50" alt="" />
                        </a>
                        <a href="#"><img src="http://placehold.it/50x50" alt="" />
                        </a>
                        <a href="#"><img src="http://placehold.it/50x50" alt="" />
                        </a>
                        <a href="#"><img src="http://placehold.it/50x50" alt="" />
                        </a>
                        <a href="#"><img src="http://placehold.it/50x50" alt="" />
                        </a>
                        <a href="#"><img src="http://placehold.it/50x50" alt="" />
                        </a>
                    </div>
                </div>
            </div>

            <div class="pa-bloc-right">
                <div id="pa-predef">
                    <h2>Prédéfinis</h2>
                    <div class="pa-predef-bloc">
                        <div class="pa-pred">
                            <img src="http://placehold.it/80x80" alt="" />
                            <div class="pa-pred-content">Nom
                                <br />Groupe
                                <br /><a href="#">Lien</a>
                            </div>
                        </div>
                        <div class="pa-pred">
                            <img src="http://placehold.it/80x80" alt="" />
                            <div class="pa-pred-content">Nom
                                <br />Groupe
                                <br /><a href="#">Lien</a>
                            </div>
                        </div>
                        <div class="pa-pred">
                            <img src="http://placehold.it/80x80" alt="" />
                            <div class="pa-pred-content">Nom
                                <br />Groupe
                                <br /><a href="#">Lien</a>
                            </div>
                        </div>
                        <div class="pa-pred">
                            <img src="http://placehold.it/80x80" alt="" />
                            <div class="pa-pred-content">Nom
                                <br />Groupe
                                <br /><a href="#">Lien</a>
                            </div>
                        </div>
                        <div class="pa-pred">
                            <img src="http://placehold.it/80x80" alt="" />
                            <div class="pa-pred-content">Nom
                                <br />Groupe
                                <br /><a href="#">Lien</a>
                            </div>
                        </div>
                        <div class="pa-pred">
                            <img src="http://placehold.it/80x80" alt="" />
                            <div class="pa-pred-content">Nom
                                <br />Groupe
                                <br /><a href="#">Lien</a>
                            </div>
                        </div>
                    </div>
                    <h3>Adoptez-les !</h3> <a href="#" class="lien-pred">Voir les autres prédéfinis</a>

                </div>
                <div id="pa-top">
                    <h2>Top-sites</h2>
                    <div id="pa-top-content">
                        <a href="#"><img src="http://placehold.it/50x50" alt="" />
                        </a>
                        <a href="#"><img src="http://placehold.it/50x50" alt="" />
                        </a>
                        <a href="#"><img src="http://placehold.it/50x50" alt="" />
                        </a>
                        <a href="#"><img src="http://placehold.it/50x50" alt="" />
                        </a>
                    </div>
                </div>
            </div>
            <div id="pa-credit">
                <a href="http://terrible.forumactif.org/" target="_blank">Awful</a>
            </div>
        </div>
    </div>

    </div>

Puis dans Affichage > Page d'accueil > Généralités, collez le code suivant :
Code:
<iframe style="width: 844px; height: 444px;" scrolling="no" frameborder="0" src="VOTRE URL"></iframe>

IMPORTANT


Il se peut que Forumactif fasse des siennes (quelle surprise...) avec ce code, à cause de la propriété :
Code:
background: rgba(255, 255, 255, 0.8);

Si vous découvrez que votre code est tout cassé, vérifiez que FA n'a pas remplacé le 8 ) par un smiley :
Code:
background: rgba(255, 255, 255, 0.<img src="https://2img.net/i/fa/i/smiles/icon_cool.gif" alt="Cool" longdesc="6" />;

Si c'est le cas, corrigez juste en remettant comme avant :
Code:
background: rgba(255, 255, 255, 0.8);

Aadelrun
Lun 1 Avr - 18:18
avatar
Coucou ! Super PA ! Juste une petite chose, pour ce qui est des pages HTML, je te conseille de mettre la ligne cette ligne dans la balise "head" :

Code:
<meta charset ="UTF-8"/>

Ca permet au navigateur de lire correctement les accents et caractères spéciaux, et évite d'avoir ce genre de chose xD
Fading skies 1554135465-truc

Merci pour ce code sinon !^^
Troublemakers
Dim 6 Oct - 11:22
avatar
bonjour ,
Si je t'écris c'est que j'ai craquer sur tes codes que je voulais utiliser pour habillée mon forum. mais j'ai un petit beug avec ton code de P.A qui s'affiche pas correctement ..
Fading skies B499
Awful
Lun 7 Oct - 10:02
Awful
@Troublemakers
Lis bien le post, FA a problablement remplacé une propriété par un smiley, il faut le corriger dans le code :
Code:
background: rgba(255, 255, 255, 0.<img src="https://2img.net/i/fa/i/smiles/icon_cool.gif" alt="Cool" longdesc="6" />;
à changer en :
Code:
background: rgba(255, 255, 255, 0.8);

Ça devrait régler ton souci ! ;3
Contenu sponsorisé