AccueilDernières imagesRechercherS'enregistrerConnexion

Forum de graphisme, codage et game design proposant des tutoriels, astuces, libres services et commandes dans les domaines de l'infographie amateur, de l'intégration web (HTML et CSS essentiellement) ainsi que dans la conception de RPG sur forum.

Le Deal du moment : -17%
(Black Friday) Apple watch Apple SE GPS + Cellular ...
Voir le deal
249 €

    (Shanelia) Demande de codage d'une fiche de pub'

    Exenties
    Exenties
    FémininAge : 37Messages : 75

    Mar 11 Avr 2017 - 12:48

    Codage d'une fiche de pub'



    Bonjour !

    J'aimerais passer commande pour une fiche de pub' pour mon forum svp !

    Merci d'avance ! :hudada:


    Schéma(s) et Eléments


    Schémas :
    Spoiler:
    Tailles des éléments : Mon forum est à 500. Je voudrais que la fiche ne déforme pas les sujets quand je la poste, et aussi qu'elle ne soit pas déformée quand je la poste sur des forums d'une largeur différente.
    Effets voulus : J'aimerais un effet hover sur les liens, avec une transition en petites majuscules quand on passe la souris dessus.
    Version de votre forum : PHPBB2


    Ressources


    Pas d'images de fond. Juste une couleur : #FFF4E2. Et du blanc pour l'intérieur des cadres.
    Pour la police des titres : https://fonts.google.com/specimen/Montez
    Et les images pour les infobulles staff :
    - Alrun (et en dessous : Fondatrice) - https://i.servimg.com/u/f58/17/22/61/09/avamoi11.jpg
    - Tomgoku (en dessous : Fondateur) - https://i.servimg.com/u/f58/17/22/61/09/14608810.jpg


    Autres précisions ?


    - La bannière en haut de la fiche est celle de mon forum qui fait 800*450px : https://i.servimg.com/u/f37/17/22/61/09/bog610.jpg (si le codeur voit les choses autrement, je suis ouverte aux suggestions !)
    - J'aimerais une infobulle comportant pseudo + rang sur les avatars du staff
    - La bannière du bas fait 468*60px :
    Code:
        <a href="http://esprit-zen.forumactif.com/" target="_blank"><img src="https://i37.servimg.com/u/f37/17/22/61/09/rymq10.png" /></a>
    - J'aimerais une scrollbar dans les catégories Nouveauté et présentation, au cas où le texte serait trop grand pour les cases.





    Demandez moi si vous avez besoin de précisions ! Very Happy

    Encore merci d'avance !




    (Shanelia) Demande de codage d'une fiche de pub' 128765signpiratetypoBIScadre
    • Revenir en haut
    Anonymous
    Invité

    Mer 12 Avr 2017 - 10:44

    Je me charge de cette commande :)

    [EDIT] Pourrais-je avoir la bannière du haut sans le fond blanc ? J'aimerais qu'il soit transparent pour donner l'impression que la fiche commence directement avec l'image :)


    Dernière édition par Shaneliae le Mer 12 Avr 2017 - 11:47, édité 2 fois
    • Revenir en haut
    Exenties
    Exenties
    FémininAge : 37Messages : 75

    Mer 12 Avr 2017 - 11:10

    Merci pour la rapidité de ta réponse Shaneliae :)

    Voilà la bannière en png !
    https://2img.net/r/hpimg4/pics/501107bog6.png




    (Shanelia) Demande de codage d'une fiche de pub' 128765signpiratetypoBIScadre
    • Revenir en haut
    Anonymous
    Invité

    Mer 12 Avr 2017 - 11:49

    Voilà mon rendu actuel :

    http://neon-le-neon.creer-forums.com/h5-fiche-de-pub

    Qu'en penses-tu ?
    • Revenir en haut
    Exenties
    Exenties
    FémininAge : 37Messages : 75

    Mer 12 Avr 2017 - 11:54

    J'aime beaucoup ! Very Happy





    (Shanelia) Demande de codage d'une fiche de pub' 128765signpiratetypoBIScadre
    • Revenir en haut
    Anonymous
    Invité

    Mer 12 Avr 2017 - 11:56

    Je fais juste une petite correction au niveau de la bannière du haut et je te donne le code :)

    Aucun changement désiré ?
    • Revenir en haut
    Exenties
    Exenties
    FémininAge : 37Messages : 75

    Mer 12 Avr 2017 - 11:58

    J'avais juste une question ^^
    Ca sera la taille finale ? Parc'qu'elle apparaît énorme dans la démo, et j'ai peur que ca déforme les sujets quand je la posterais.

    Sinon j'adore ! Merci ! :)




    (Shanelia) Demande de codage d'une fiche de pub' 128765signpiratetypoBIScadre
    • Revenir en haut
    Anonymous
    Invité

    Mer 12 Avr 2017 - 12:06

    C'est la taille maximum, et la taille se réduit selon la largeur du forum, tu peux essayer en réduisant la largeur de ta fenêtre. Il y a juste un petit bug au niveau de la bannière du haut, je suis en train de corriger cela :)
    • Revenir en haut
    Exenties
    Exenties
    FémininAge : 37Messages : 75

    Mer 12 Avr 2017 - 12:24

    Ah d'accord !
    Super :)

    J'ai vu aucun bug, mais je te fais confiance ^^




    (Shanelia) Demande de codage d'une fiche de pub' 128765signpiratetypoBIScadre
    • Revenir en haut
    Anonymous
    Invité

    Mer 12 Avr 2017 - 12:35

    Voilà, s'est terminé ! Tu peux constater le résultat final :)

    Voilà le code pour mettre sur une page HTML externe :

    Code:
    <!DOCTYPE html>
    <html lang="fr">
    <head>
        <meta charset="UTF-8">
        <title>Fiche de pub</title>
        <link href="https://fonts.googleapis.com/css?family=Montez" rel="stylesheet">
        <style>
            /* Général */
            .fiche_pub {
                width: 100%;
                border-radius: 90px 90px 0 0;
                min-width: 450px;
                max-width: 782px;
                margin: auto;

                background-color: #FFF4E2;
                color: #000;
                font-size: 16px;
            }
         
            .banniere_haut img {
                width: 100%;
            }

            /* Les titres */
            .fiche_pub h2 {
                font-family: 'Montez', cursive;
                font-size: 36px;
                margin: 10px 0 -18px 40px;
            }

            /* Liens utiles */
            .liens_utiles, .banniere_bas {
                text-align: center;
            }

            .liens_utiles h2 {
                margin-bottom: 0;
            }

            .liens_utiles p {
                font-size: 24px;
                margin: 0;
                margin-top: 10px;
                margin-bottom: 20px;
            }

            .liens_utiles a {
                text-decoration: none !important;
                color: #000;
            }

            .liens_utiles a:hover {
                text-transform: lowercase;
            }

            /* Les blocs de texte */
            .bloc_text {
                padding: 20px 10px 5px;
                background-color: #fff;
                margin: 0 20px;
            }

            .bloc_text p {
                margin: 0 0 10px;
            }

            /* Système en 2 colonnes */
            .tableau {
                padding-bottom: 50px;
            }

            .tableau:after {
                content: "";
                display: block;
                clear: both;
            }

            .une_cellule {
                width: 50%;
                float: left;
            }

            /* Le staff */
            .staff {
                text-align: center;
            }

            .staffien {
                width: 160px;
                height: 160px;
                border-radius: 50% 50%;
                overflow: hidden;
                display: inline-block;
                margin: 0 15px;
                position: relative;
            }

            .staffien img {
                width: 160px;
                height: auto;
            }

            .infobulle {
                width: 160px;
                height: 160px;
                background-color: rgba(0, 0, 0, 0.8);
                color: #ffffff;
                font-size: 20px;
                position: absolute;
                padding: 20px 0;
                opacity: 0;
                transition: opacity ease 1s;
            }

            .staffien:hover .infobulle {
                opacity: 1;
                transition: opacity ease 1s;
            }

            /* Bannière du bas */

            .banniere_bas {
                padding: 10px 0;
                margin-top: 30px;
            }

            .banniere_bas h2 {
                margin-bottom: 10px;
            }
        </style>
    </head>
    <body>

    <div class="fiche_pub">
        <div class="banniere_haut">
            <img src="http://image.noelshack.com/fichiers/2017/15/1491992136-banniere2.png" alt="Bannière du forum"/>
        </div>

        <div class="liens_utiles">
            <h2>Liens utiles</h2>
            <p><a href="#">Le réglement</a> - <a href="#">Nous lier</a> - <a href="#">Demander un partenariat</a></p>
        </div>

        <h2>Présentation du forum</h2>
        <div class="bloc_text">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta dolor numquam officia! Consequuntur cumque
                excepturi perspiciatis quae, similique sint vero. Atque beatae consectetur nostrum optio perspiciatis
                placeat qui similique voluptate?</p>
            <p>Alias dolorem eius minima molestias saepe tempore? Accusamus ad alias aspernatur dolores eius error fugiat
                hic iure, magni nam officiis quidem tenetur? Architecto eos facilis ipsum, quos sequi sit temporibus.</p>
            <p>Accusantium adipisci alias aliquid animi aperiam consectetur consequatur corporis delectus dolorem eligendi
                excepturi facilis illum labore laudantium mollitia nam necessitatibus numquam obcaecati officia, pariatur
                placeat quam quisquam recusandae sed soluta?</p>
        </div>

        <div class="tableau">
            <div class="une_cellule">
                <h2>Les nouveautés</h2>
                <div class="bloc_text">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Atque dignissimos ex quae rerum tempore.
                        Aliquam consequatur cum dignissimos nemo odio, voluptates! Culpa doloribus ducimus non perferendis
                        provident reiciendis vel veniam.</p>
                </div>
            </div>
            <div class="une_cellule">
                <h2>Nos stats</h2>
                <div class="bloc_text">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aperiam architecto blanditiis delectus
                        dicta
                        dolorem dolores eligendi esse harum labore maxime, molestias qui quidem rem repudiandae, rerum sequi
                        sunt? Aliquid, sequi?</p>
                </div>
            </div>
        </div>

        <div class="staff">
            <div class="staffien">
                <div class="infobulle">
                    <p>Alrun</p>
                    <p>Fondatrice</p>
                </div>
                <img src="https://i58.servimg.com/u/f58/17/22/61/09/avamoi11.jpg" alt="Fondatrice"/>
            </div>
            <div class="staffien">
                <div class="infobulle">
                    <p>Tomgoku</p>
                    <p>Fondateur</p>
                </div>
                <img src="https://i58.servimg.com/u/f58/17/22/61/09/14608810.jpg" alt="Fondateur"/>
            </div>
        </div>

        <div class="banniere_bas">
            <h2>Viens nous rejoindre !</h2>
            <a href="http://esprit-zen.forumactif.com/" target="_blank">
                <img src="https://i37.servimg.com/u/f37/17/22/61/09/rymq10.png"/>
            </a>
        </div>

    </div>

    </body>
    </html>

    Si tu as un soucis après installation, n'hésites pas !
    • Revenir en haut
    Exenties
    Exenties
    FémininAge : 37Messages : 75

    Mer 12 Avr 2017 - 12:47

    Merci ! :)

    Après essai, il s'avère que je n'y pige rien :/

    Désolée, je sais pas comment l'installer :/




    (Shanelia) Demande de codage d'une fiche de pub' 128765signpiratetypoBIScadre
    • Revenir en haut
    Anonymous
    Invité

    Mer 12 Avr 2017 - 12:54

    Pas de soucis ! Je vais t'expliquer :)

    J'ai voulu reprendre le principe de ce tutoriel : https://www.never-utopia.com/t53472-fiche-de-publicite-en-iframe

    Tu vas dans ton panneau d'admin puis Modules > HTML & JAVASCRIPT > Gestion des pages HTML > Création en mode avancée (HTML). Là tu donnes un nom à ta page (fiche de pub par exemple) et tu colles le code que je t'ai donné. Tu valides puis tu vas prendre le lien qui apparaît dans "gestion des pages HTML" sous la forme "http://nom-du-forum.com/hX-nom-de-la-page"

    Ensuite, quand tu vas publier ta fiche sur un forum tu fais ceci :

    Code:
    <iframe src="ULR_de_la_page" width="XXpx" height="XXpx" border="none" frameborder="no"></iframe>

    Je ne sais pas si c'est clair x)
    • Revenir en haut
    Exenties
    Exenties
    FémininAge : 37Messages : 75

    Mer 12 Avr 2017 - 12:56

    Ah d'accord ! Merci pour ces explications ! :)

    Par contre faut que je me renseigne, je sais pas si les forums où je suis inscrite acceptent les liens en iframe.




    (Shanelia) Demande de codage d'une fiche de pub' 128765signpiratetypoBIScadre
    • Revenir en haut
    Anonymous
    Invité

    Mer 12 Avr 2017 - 17:29

    Je te laisse te renseigner et s'il y a un soucis, signale le et on adaptera :)
    • Revenir en haut
    Exenties
    Exenties
    FémininAge : 37Messages : 75

    Jeu 13 Avr 2017 - 9:20

    Hello !

    C'est bien ce que je pensais, l'iframe n'est pas acceptée sur la plupart des forums où je suis... :/




    (Shanelia) Demande de codage d'une fiche de pub' 128765signpiratetypoBIScadre
    • Revenir en haut
    Anonymous
    Invité

    Jeu 13 Avr 2017 - 13:23

    Pas de soucis !

    Voici donc la version à mettre directement dans un message :



    J'ai essayé de faire pour que le code soit plus compréhensible.
    • Revenir en haut
    Exenties
    Exenties
    FémininAge : 37Messages : 75

    Jeu 13 Avr 2017 - 14:12

    Merci beaucoup :)




    (Shanelia) Demande de codage d'une fiche de pub' 128765signpiratetypoBIScadre
    • Revenir en haut
    Contenu sponsorisé

    • Revenir en haut
    « Voir le sujet précédent · Voir le sujet suivant »
      La date/heure actuelle est Dim 24 Nov 2024 - 17:12