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 :: Terrible, des codages pour vos forums en libre service :: Commandes
Jeza
le Lun 29 Oct - 17:29

Commande de codage



Élément à coder : Fiche de partenariat
Adresse du forum : http://caelestilapsu.forumactif.com/
Version du forum : phpBB2

Je souhaiterais une fiche de partenariat que je puisse avoir en IFRAM après pour une maj plus rapide sur les forums partenaires.
Schéma :
http://www.noelshack.com/2018-44-1-1540830103-ficheparto.psd
http://image.noelshack.com/fichiers/2018/44/1/1540830202-ficheparto.png
Taille des éléments : 500px sur 600px pour la page en elle même.
Ressources :

Autres précisions :
- Les images du staff, un hover pour découvrir les prénoms et noms.
- Les prédéfinis, un hover pour découvrir leur prénoms, nom et race.
- Une possibilité de changer de couleur à volonté en fonction des thémes
- mettre un lien directe avec la bannière en bas de page vers le forum en lui même.
- possibilité de changer l'image du header pour l'ajuster avec le forum.
- mettre le fond de page légèrement transparents, opacité 70%
- centrer les textes
les polices à utiliser
Code:
<style>
@import url('https://fonts.googleapis.com/css?family=Petit+Formal+Script|Rajdhani');
</style>

font-family: 'Rajdhani', sans-serif; (rajdhani : texte contexte, texte info supplémentaire, race des prédéfinis. )
font-family: 'Petit Formal Script', cursive; (petit formal script : nom prenom du staff, liens.)


Bonjour à vous ** comme je viens zieuter un peu tout les jours votre forum, je tombe sur le fait que vos commandes soit ouvertes pour vous demander ce code de fiche afin de remplir mon forum qui se construit petit à petit. Comme je vous l'ai déjà dis je suis fan de vos créations, pour cette première commande je n'ai pas voulu etre trop gourmande et ne pas vous accabler de travail non plus *yeux de chat* Alors voilà ma demande, en espérant avoir remplis tout les critères pour être compréhensible et complet surtout. Avec tout l’enthousiasme qui me remplis je vous remercie d'avance et vous souhaite une bonne soirée!!! ♥️
avatar
le Mer 7 Nov - 14:12
Coucou, désolé pour le temps de réponse !
Cry forever

Voilà la fiche :


Alors la fiche ne fait pas 600px de hauteur o:
J'ai pensé qu'il serait mieux que tu y mettes ton contenu pour ensuite adapter ton iframe à sa hauteur, mais je peux changer ça, si tu veux !
Jeza
le Ven 9 Nov - 22:21
OMG MERCIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIIII OMG Excited
c'est parfait <3 Je te demanderais bien en mariage mais on ma dis que socialement parlant ça ne se faisait pas et que j'étais trop impulsive donc je vais t'honorer avec un autel et des sacrifices quotidien de mouche! *ok je vais me pendre je suis HS et je dis de la merde ...*

Mais merci bcp ! ne t'excuse pas pour le délais le travail en valait la peine sincèrement merci ! Je reviendrais vers toi pour un thème complet si cela sera possible bientôt moi et mes amis adorons ton travail Hug Hug Hug
Jeza
le Ven 9 Nov - 22:24
Dsl du double poste mais je dois être hyper teuteu .... comment je récupère la fiche? Cry forever
Jeza
le Ven 9 Nov - 22:36
:whut: parfois ma débilité me surprend toute seule, je suis plus très fraîche après une grosse journée et ça fait peur parfois. DOONC du double poste, je passe au triple, frappe moi si tu le désires!

Juste pour dire que de 3 nous sommes passés à 4 staffieux, pourrais tu mettre la troisième image de staff en deux plus simples, la scinder en deux, mais sur la meme hauteur que les autres, je ne sais pas si je me fais bien comprendre :sunglasses:
En gros couper en deux la troisième image pour en faire deux plus petites en largeur, mais de la même hauteur que les deux grandes ! Ce sera tout, promis ce soir j'arrête mes rappels u_u je m'en excuse sincerement!
avatar
le Lun 12 Nov - 11:45
Dsl du double poste mais je dois être hyper teuteu .... comment je récupère la fiche?
J'attends qu'on me confirme que tout est bon avant de fournir les codes

Voilà la nouvelle fiche, donc :
Jeza
le Mar 13 Nov - 16:48
Cest parfait parfait parfait merciiiiiii Hug Hug Hug Hug
Je valide complètement le code, tu as es géniale **
avatar
le Mer 14 Nov - 11:14
Génial !
Voilà le code :
Code:
<head>
    <meta charset="utf-8">
    <style>
@import url("https://fonts.googleapis.com/css?family=Petit+Formal+Script|Rajdhani");
 body {
    margin: 0;
}
 .partenariat {
    background: rgba(21, 4, 31, 0.7);
    color: #fff;
    font-family: "Rajdhani", sans-serif;
    padding: 0 0 5px;
    width: 500px;
}
 .partenariat * {
    box-sizing: border-box;
}
 .partenariat a, .partenariat a:hover, .partenariat a:active {
    text-decoration: none;
}
 .partenariat__img {
    width: 100%;
}
 .partenariat__links {
    display: flex;
    height: 50px;
    list-style: none;
    justify-content: space-between;
    margin: 10px;
    padding: 0;
}
 .partenariat__links li {
    background: #020004;
    line-height: 50px;
    text-align: center;
    width: calc(100% / 3 - 2px);
}
 .partenariat__links li a {
    display: block;
    color: #fff;
    font-family: "Petit Formal Script", cursive;
    height: 100%;
    opacity: 1;
    transition: 0.3s;
    width: 100%;
}
 .partenariat__links li a:hover {
    opacity: 0.5;
}
 .partenariat__content {
    display: flex;
    padding: 5px;
}
 .partenariat__content p {
    font-size: 11px;
    margin: 0;
    text-align: justify;
}
 .partenariat__col1 {
    margin-right: 10px;
}
 .partenariat__predefs {
    display: flex;
    margin-top: 30px;
}
 .partenariat__predef {
    height: 50px;
    margin-right: 5px;
    position: relative;
    width: 50px;
}
 .partenariat__predef:hover .partenariat__predef_content {
    opacity: 1;
    visibility: visible;
}
 .partenariat__predef:hover .partenariat__predef_content > div {
    top: 0;
}
 .partenariat__predef_content {
    bottom: 0;
    height: 110px;
    left: 0;
    opacity: 0;
    position: absolute;
    transition: 0.3s;
    visibility: hidden;
    width: 100px;
    z-index: 2;
}
 .partenariat__predef_content > div {
    background: #000;
    display: flex;
    flex-direction: column;
    font-size: 9px;
    height: 50px;
    justify-content: center;
    left: 0;
    padding: 5px;
    position: absolute;
    text-align: center;
    top: -50%;
    transition: 0.3s;
    width: 100px;
}
 .partenariat__predef_content b {
    text-transform: uppercase;
}
 .partenariat__predef_content a {
    color: #fff;
}
 .partenariat__staff {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-bottom: 30px;
}
 .partenariat__staff_item {
    height: 50px;
    margin-bottom: 5px;
    position: relative;
    width: 250px;
}
 .partenariat__staff_item.small-item {
    width: 122px;
}
 .partenariat__staff_item:hover .partenariat__staff_content {
    opacity: 1;
    visibility: visible;
}
 .partenariat__staff_content {
    align-items: center;
    background: #000;
    display: flex;
    font-family: "Petit Formal Script", cursive;
    height: 100%;
    left: 0;
    opacity: 0;
    position: absolute;
    justify-content: center;
    top: 0;
    transition: 0.3s;
    visibility: hidden;
    width: 100%;
}
 .small-item .partenariat__staff_content {
    font-size: 9px;
}
 .partenariat__banniere {
    display: block;
    margin: 10px auto 0;
    width: 490px;
}
 .partenariat__banniere img {
    vertical-align: middle;
}
 .partenariat-credit {
    margin-top: 3px;
    text-align: center;
    width: 500px;
}
 .partenariat-credit a {
    text-decoration: none!important;
    font-size: 8px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #ccc;
    font-family: arial, sans-serif;
}

    </style>
</head>

<body>
    <div class="partenariat">
      <!-- BANNIERE -->
        <img src="https://via.placeholder.com/500x150" class="partenariat__img">
         
        <!-- LIENS -->
        <ul class="partenariat__links">
            <li><a href="" target="_blank">Lien</a></li>
            <li><a href="" target="_blank">Lien</a></li>
            <li><a href="" target="_blank">Lien</a></li>
        </ul>
         
        <div class="partenariat__content">
          <!-- PARAGRAPHE PREMIER COLONNE -->
            <div class="partenariat__col1">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. In quidem hic tenetur voluptatem excepturi quisquam voluptatum repudiandae dolorum iusto animi officiis illo, commodi incidunt architecto ratione voluptate cumque! Ducimus, doloribus?</p>
               
              <!-- PREDEFINIS -->
                 <div class="partenariat__predefs">
                 
                    <div class="partenariat__predef">
                        <img src="https://via.placeholder.com/50x50" class="partenariat__predef_img">
                        <div class="partenariat__predef_content">
                            <div>
                                <b>Prénom Nom</b>
                                <div><a href="" target="_blank">Fiche</a></div>
                            </div>
                        </div>
                    </div>
                     
                    <div class="partenariat__predef">
                        <img src="https://via.placeholder.com/50x50" class="partenariat__predef_img">
                        <div class="partenariat__predef_content">
                            <div>
                                <b>Prénom Nom</b>
                                <a href="" target="_blank">Fiche</a>
                            </div>
                        </div>
                    </div>
                     
                    <div class="partenariat__predef">
                        <img src="https://via.placeholder.com/50x50" class="partenariat__predef_img">
                        <div class="partenariat__predef_content">
                            <div>
                                <b>Prénom Nom</b>
                                <a href="" target="_blank">Fiche</a>
                            </div>
                        </div>
                    </div>
                     
                    <div class="partenariat__predef">
                        <img src="https://via.placeholder.com/50x50" class="partenariat__predef_img">
                        <div class="partenariat__predef_content">
                            <div>
                                <b>Prénom Nom</b>
                                <a href="" target="_blank">Fiche</a>
                            </div>
                        </div>
                    </div>
                     
                </div>
            </div>
                     
                      <!-- DEUXIEME COLONNE -->
            <div>
              <!-- STAFF -->
                <div class="partenariat__staff">
                    <div class="partenariat__staff_item">
                        <img src="https://via.placeholder.com/250x50" class="partenariat__predef_img">
                        <div class="partenariat__staff_content">
                            Prénom et Nom
                        </div>
                    </div>
                    <div class="partenariat__staff_item">
                        <img src="https://via.placeholder.com/250x50" class="partenariat__predef_img">
                        <div class="partenariat__staff_content">
                            Prénom et Nom
                        </div>
                    </div>
                    <div class="partenariat__staff_item small-item">
                        <img src="https://via.placeholder.com/122x50" class="partenariat__predef_img">
                        <div class="partenariat__staff_content">
                            Prénom et Nom
                        </div>
                    </div>
                    <div class="partenariat__staff_item small-item">
                        <img src="https://via.placeholder.com/122x50" class="partenariat__predef_img">
                        <div class="partenariat__staff_content">
                            Prénom et Nom
                        </div>
                    </div>
                </div>
                      <!-- PARAGRAPHE DEUXIEME COLONNE -->
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae perspiciatis, vel sint assumenda, eum libero delectus voluptates maxime, iste dolores temporibus quis ducimus. Voluptate dignissimos aperiam commodi vel rerum nostrum.</p>
            </div>
        </div>
                      <!-- BANNIERE DU BAS -->
        <a href="" target="_blank" class="partenariat__banniere"><img src="https://via.placeholder.com/490x80" class="partenariat__predef_img"></a>
    </div>
    <div class="partenariat-credit"><a href="http://terrible.forumactif.org" target="_blank">Awful</a></div>
</body>

Dans le doute, je t'explique comment faire :
Dans ton PA > Modules > HTML & Javascript > Gestion des pages HTML, tu crées une page en mode avancé, tu y colles ton code.
Toujours dans ton PA > Affichage > Page d'accueil > Généralités, tu codes le codes suivant :
Code:
<iframe src="URL" style="display: block; margin: auto; width: 585px; height: 610px;" border="0" scrolling="no"></iframe>

En remplaçant bien entendu URL par l'URL de ta page ! c:
Pour l'instant j'ai mis une hauteur de 610px à ton iframe, mais si jamais tu mets plus de texte, il faudra l'adapter.
Contenu sponsorisé
Permission de ce forum:
Vous pouvez répondre aux sujets dans ce forum