AccueilFAQRechercherMembresGroupesS'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.


    Créer un coin sympathique pour converser (chatbox en page html)

    Rozenbrez
    Rozenbrez
    FémininAge : 27Messages : 1383

    le Jeu 2 Fév 2017 - 12:15


    Le code n'est pas caché sous balise hide, mais n'hésitez pas à remercier son auteur :)
    Lien pour comprendre pourquoi le contenu n'est pas sous hide


    Bien le bonjour à toutes et à tous.

    Aujourd'hui, je viens vous proposer de coder une page HTML de votre forum pour y créer un coin sympathique pour votre CB. Pourquoi est-ce que je préfère passer par une page indépendante au lieu de mettre la CB directement sur mon forum ? Tout simplement par ce que les CB ne s'intègre pas forcément à la structure et au design réalisé.

    Toutes versions ▬ CSS, HTML & Templates ▬ Aperçu (screen)

    Si vous avez le moindre problème avec ce LS, n'oubliez pas que la section Problème avec mon code est à votre disposition.


    Le code de la page HTML :


    Pour commencer, il faut débuter une nouvelle page HTML :

    Panneau d'administration (en avancée) => Modules => HTML & JAVASCRIPT => Gestion des pages HTML => Création en mode avancé.

    Donnez un titre à votre page. J'ai fait au plus simple avec "tchatbox".

    Maintenant insérez le code entier :

    Code:
    <!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8" />
      <title>Titre de votre page.</title>
      <style type="text/css">
        body {
          margin: 0px;
          background-image: url('http://img15.hostingpics.net/pics/550548fondPA.png');
        }

        .reglement_CB {
          height: 610px;
          width: 470px;
          padding: 10px;
          text-align: justify;
          color: black;
          font-size: 14px;
        }

        .cb_page {
          box-shadow: 0px 0px 2px black;
          margin-top: 5px;
          margin-left: 5px;
          width: 850px;
          height: 630px;
        }

        .cb_page,
        .reglement_CB {
          display: inline-block;
          vertical-align: top;
        }
      </style>
    </head>

    <body>
      <iframe src="/chatbox/index.forum" class="cb_page" frameborder="0"></iframe>
      <div class="reglement_CB">
        <div style="text-align: center;"><img src="http://img11.hostingpics.net/pics/392986titrereglecb.png" /></div><br /> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes,
        nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
      </div>
    </body>
    </html>

    Détail du code :


    Code:
    <style type="text/css">
      body {
        margin: 0px;
        background-image: url('http://img15.hostingpics.net/pics/550548fondPA.png');
      }

      .reglement_CB {
        height: 610px;
        width: 470px;
        padding: 10px;
        text-align: justify;
        color: black;
        font-size: 14px;
      }

      .cb_page {
        box-shadow: 0px 0px 2px black;
        margin-top: 5px;
        margin-left: 5px;
        width: 850px;
        height: 630px;
      }

      .cb_page,
      .reglement_CB {
        display: inline-block;
        vertical-align: top;
      }
    </style>
    Ceci est le CSS de votre page HTML, il doit être impérativement entre les balises :
    Code:
    <style type="text/css"></style>

    Si vous souhaitez personnaliser votre CB avec du CSS, vous devez passer par la feuille de CSS de votre forum et non dans la page HTML, sinon ça ne prendra pas en compte vos modifications.


    Code:
    <iframe src="/chatbox/index.forum" class="cb_page" frameborder="0" ></iframe>
    Ceci est votre CB mise en iframe pour l'intégrer à la page. Elle a la classe "cb_page", donc dans le CSS vous pouvez lui donner les propriétés que vous souhaitez, notamment sa hauteur (height) et sa largeur (width). La hauteur et la largeur sont impératives sinon votre CB sera toute petite.


    Code:
    <div class="reglement_CB"><div style="text-align: center;"><img src="http://img11.hostingpics.net/pics/392986titrereglecb.png" /></div><br />
    Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu.
    </div>
    J'ai mis en place cette partie pour incorporer le règlement de la CB. Vous pouvez y mettre ce qui vous chante, comme une image, des liens menant à divers sujets de votre forum, etc.


    Faire venir les membres sur la page.


    Votre salon privé est opérationnel, mais il faut faire venir les membres maintenant.

    Il n'y aura rien de plus simple dans la pratique. Il suffit d'insérer le lien de votre page HTML où vous le souhaitez :

    Spoiler:
    Créer un coin sympathique pour converser (chatbox en page html) 388363screenCB2TutoNU


    Pour ma part, j'ai fait une image de présentation et l'ai inséré dans le template : "overall_footer_begin"

    Code:
    <div style="text-align: center;"><a href="Lien de votre page HTML" target="_blank"><img src="Lien de l'image de présentation" alt="Visiter la chatbox" /></a></div>

    A vous de voir comment vous voulez rendre visible cette invitation à la papote.


    Merci d'avoir suivi ce petit LS. N'oubliez pas de créditer Never-Utopia si vous l'utilisez.

    Nihil Scar Winspeare
    Nihil Scar Winspeare
    Messages : 5072

    le Dim 26 Fév 2017 - 22:45

    Merci pour ton partage Roz, une jolie petite page pour nos chatboxs !

    J'ai légèrement édité ton LS pour :
    - corriger le head et body (je t'invite à toujours reprendre la base donnée par Nyo : Créer une page HTML (pour fiche de pub, formulaires, etc,)), comme ça tu es sûre de ne pas oublier des parties :p
    - déplacer le CSS de la chatbox (sa taille, son ombre), dans le style plus haut :)
    - remplacer les balises center par ceci :
    Code:
    <div style="text-align: center;"> CONTENU </div>

    Ton LS sera prochainement déplacé au bon endroit :hug:

    J'en profite pour rajouter pour moi même (ou le responsable qui passera par là) le code de l'index :
    Code:
    <div class="ls_codage"><div class="lscodage_illu"><img src="http://i.imgur.com/y1GgvDd.jpg" /></div><div class="tutograph_titre">[Chatbox] Créer un coin sympathique pour converser.</div><div class="tutograph_mots">par Rozenbrez</div><a href="http://www.never-utopia.com/t62397-chatbox-creer-un-coin-sympathique-pour-converser" class="tutograph_lien">Voir le Code</a></div><!--NEXT-->


    Bonne journée !



    Très peu présente -> MP ou Discord s'il y a quelque chose d'important ♥︎
    neko-systeme
    neko-systeme
    MasculinAge : 20Messages : 2

    le Lun 21 Aoû 2017 - 1:48

    merci beaucoup!! c'est vraiment pratique, j'adore !
    Kelalin
    Kelalin
    FémininAge : 26Messages : 2058

    le Lun 21 Aoû 2017 - 9:44

    Merci pour le partage !
    Cassisse
    Cassisse
    FémininAge : 26Messages : 121

    le Jeu 14 Sep 2017 - 15:15

    Merci Very Happy
    Contenu sponsorisé


      La date/heure actuelle est Ven 19 Avr 2019 - 4:24