Terrible

Bienvenue sur Terrible, le forum de libre-service pour vos codages de forums. Venez trouver ici toutes sortes de codes pour agrémenter aussi bien vos templates que vos messages, sans avoir besoin d'inscription !


Terrible :: Code forum :: PA
avatar
le Jeu 9 Mar - 14:16


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://illiweb.com/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);
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum