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.


    ChatBox en coin avec URL vers la grande CB

    Partagez
    avatar
    Shaneliae
    FémininAge : 20Messages : 791

    le Lun 20 Juil 2015 - 15:23

    Rappel du premier message :


    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


    Lien de la ChatBox en image



    Bonjour à tous pour ce nouveau LS sur la Chatbox !

    Vous aurez certainement tous remarquez cette super CB sur NU avec une petite image dans le coin en haut à droite de la page de l'index (actuellement un chiot). Vous vous demandez certainement comment peut-on faire pour avoir la même chose parce que vous n'aimez pas les CB latérales ? J'ai la solution pour vous ! Evidemment je ne l'ai pas reproduite comme sur NU, mais le principe est le même ^^

    Voici quelques aperçus :
    - Au repos
    - Après passage du curseur


    J'ai évidemment inclus un tout petit crédit pour NU (il se voit presque pas !) alors ne le retirez pas ! Vous pouvez bien sûr modifier son apparence mais ne le retirez pas. Et puis, ajoutez un autre petit crédit ailleurs sur votre forum, ça ne fera pas de mal et ça nous fera plaisir ! Un petit merci ne fait jamais de mal ! Et puis il vous permettra de gagner quelques Peanut's Wink

    Bon LS à vous !


    Si vous désirez afficher ce lien vers la CB sur toutes les pages de votre forum (en utilisant le template overall_header par exemple), l'affichage des membres connectés à la CB ne fonctionnera pas. Le reste du LS peut fonctionner, mais le système utilisé ici pour afficher les connectés à la ChatBox ne fonctionne que dans le template index_body.

    Ce LS a été réalisé sous phpBB2 et il vous faut les droits de fondation pour modifier les templates.



    Les Codes



    Modification du template "index_body"



    Allez dans votre panneau d'admin :
    Affichage > Templates > Général > index_body

    Là vous vous placez où vous voulez, tout au début ou tout à la fin, peu importe ! Ne vous placez juste pas au beau milieu du code.

    Vous collez ce code :
    Code:
    <div id="cb_coin">
      <div class="cb_credits">
        <a href="http://www.never-utopia.com/">Never Utopia</a>
      </div>
      <a style="display: block; width: 100%; height: 100%;" target="_blank" href="/chatbox/index.forum"></a>
      <span class="cb_chatteurs">
        <span class="cb_nom">
          ChatBox
        </span>
        <span class="gensmall">
          {CHATTERS_LIST}
        </span>
      </span>
    </div>
    N'oubliez pas de valider puis de publier !

    CSS



    Pour le CSS, dans votre Panneau d'administration allez dans :
    Affichage > Images & Couleurs > Couleurs > Feuille de style CSS

    Et vous collez ceci :
    Code:
    /***** CB EN COIN *****/
    /* Image icône de la CB */
    #cb_coin {
      position: fixed; /* Pour que la CB reste en place en scrollant */
      z-index: 998;
      bottom: 0; /* Position de l'image, mettre "top" si on la veut en haut */
      left: 0; /* Position de l'image, mettre "right" si on la veut à droite */
      width: 90px; /* Mettre la taille exacte de l'image */
      height: 150px;
      background: url('http://img11.hostingpics.net/pics/183762Fish.png'); /* Mettre le lien de l'image de la CB */
    }
    /* Cadre des personnes connectées à la CB */
    .cb_chatteurs {
      position: absolute;
      bottom: 0; /* Remettre la même position que pour l'image */
      left: 0;
      width: 0px;
      height: 0px;
      margin-left: 40px; /* Placez le départ de votre cadre à votre guise */
      margin-bottom: 100px;
      background: #B8B69D;
      border-radius: 10px;
      overflow: hidden; /* Mettez "auto" à la place de "hidden" pour avoir une barre de scroll quand beaucoup de monde est connecté à la CB */
      padding: 0;
      transition: 500ms; /* Augmentez pour rendre plus lent, et diminuez pour accélérer */
    }
    /* Système permettant de faire apparaître le cadre des connectés à la CB */
    #cb_coin:hover .cb_chatteurs {
      width: 200px; /* Taille de votre cadre quand il apparaît */
      height: 130px;
      border: 2px solid #F6F8F3; /* Si vous souhaitez mettre une bordure au cadre, elle doit être ici */
      margin-left: 70px; /* Position de votre cadre quand il apparaît */
      margin-bottom: 60px;
      padding: 10px;
      transition: 500ms;
    }
    /* Nom de la Cb */
    .cb_nom {
      display: block;
      text-align: center;
      font-size: 25px;
      color: #CB2F3A;
      font-family: Brush Script MT;
    }
    /* Crédit vers NU */
    .cb_credits {
      margin-left: 10px;
    }
    .cb_credits a {
      color: #E53458;
      font-size: 8px;
    }
    /***** FIN CB EN COIN *****/

    Vous avez une question ou un problème avec ce LS ? Cette section est là pour vous, je ne répondrai à aucune question par MP ou posée à la suite du sujet.


    Dernière édition par Shaneliae le Mer 1 Mar 2017 - 18:03, édité 1 fois



    avatar
    Unleash
    MasculinAge : 17Messages : 79

    le Jeu 24 Mar 2016 - 11:56

    ty
    avatar
    Asuka
    FémininAge : 23Messages : 104

    le Ven 25 Mar 2016 - 21:37

    merci ♥



    avatar
    Leyakath
    FémininAge : 24Messages : 44

    le Dim 27 Mar 2016 - 21:20

    Merci merci pour le partage! :)
    avatar
    Euterpe
    FémininAge : 30Messages : 284

    le Lun 28 Mar 2016 - 19:49

    merci!
    avatar
    Youp
    FémininAge : 22Messages : 574

    le Lun 28 Mar 2016 - 23:28

    Merci ^^ :love:



    avatar
    Chadot
    FémininAge : 28Messages : 173

    le Jeu 31 Mar 2016 - 21:42

    Merci



    avatar
    Shaolan
    MasculinAge : 25Messages : 103

    le Dim 3 Avr 2016 - 8:41

    merci beaucoup
    avatar
    Celuna
    FémininAge : 26Messages : 123

    le Dim 3 Avr 2016 - 11:55

    Bonjour,

    Merci pour ce superbe partage

    A plus tard,
    avatar
    Cornelia
    FémininAge : 28Messages : 85

    le Mar 5 Avr 2016 - 14:58

    merci
    avatar
    Xelha
    FémininAge : 24Messages : 107

    le Mar 5 Avr 2016 - 17:31

    Merci beaucoup ^^




    ¤Kit by me¤
    avatar
    Coco-Lapin02
    MasculinAge : 48Messages : 147

    le Sam 9 Avr 2016 - 12:15

    Merci
    avatar
    Discorde
    FémininAge : 20Messages : 52

    le Sam 16 Avr 2016 - 12:53

    Thanks ♥
    avatar
    Lucrécya
    FémininAge : 24Messages : 34

    le Jeu 19 Mai 2016 - 16:49

    Merci !
    avatar
    Aynam
    FémininAge : 20Messages : 73

    le Lun 30 Mai 2016 - 16:28

    merci!




    avatar
    Lay
    FémininAge : 16Messages : 10

    le Mar 31 Mai 2016 - 2:21

    Merci (:
    avatar
    Liia
    FémininAge : 21Messages : 91

    le Mar 7 Juin 2016 - 0:19

    Merci ^^
    avatar
    Kamesora
    FémininAge : 25Messages : 90

    le Mer 8 Juin 2016 - 12:13

    merci beaucoup
    avatar
    0smose
    FémininAge : 21Messages : 162

    le Mer 8 Juin 2016 - 14:59

    J'adoooooooooore !! Merci !! Very Happy





    But I'm only human
    And I bleed when I fall down... I'm only human and I crash and I break down. Your words in my head,
    knives in my heart. You build me up and then I fall apart.
    'Cause I'm only human.
    avatar
    Lilise
    FémininAge : 19Messages : 22

    le Sam 11 Juin 2016 - 13:56

    merci!
    avatar
    Aidden
    MasculinAge : 23Messages : 44

    le Sam 18 Juin 2016 - 3:48

    Merci beaucoup !
    avatar
    Linaewen
    FémininAge : 25Messages : 195

    le Jeu 23 Juin 2016 - 5:28

    Merci x)
    avatar
    Kabrina Lestrange
    FémininAge : 29Messages : 71

    le Dim 3 Juil 2016 - 22:52

    Woahou! Trop mignon!
    avatar
    Rosedesvents
    FémininAge : 30Messages : 90

    le Lun 4 Juil 2016 - 11:29

    Merci *w*
    avatar
    Wiss
    FémininAge : 12Messages : 53

    le Dim 10 Juil 2016 - 16:30

    Merkiii




    Autre signa:
    avatar
    Aoi Kiseki
    FémininAge : 25Messages : 98

    le Mar 12 Juil 2016 - 16:09

    merci !
    Contenu sponsorisé


      La date/heure actuelle est Sam 24 Juin 2017 - 17:42