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


    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
    Kortyx
    MasculinAge : 27Messages : 81

    le Ven 24 Juil 2015 - 11:12

    Franchement jolie, merci!
    avatar
    Dacota.
    FémininAge : 23Messages : 39

    le Dim 9 Aoû 2015 - 12:25

    Owi, merci :)
    avatar
    Kelalin
    FémininAge : 24Messages : 1506

    le Dim 9 Aoû 2015 - 14:24

    Merci (’-’*)
    avatar
    Rozenbrez
    FémininAge : 25Messages : 1306

    le Dim 9 Aoû 2015 - 15:19

    Merci Shaneliae!! Mais on ne gagne pas de PeaNUt's en répondant ici. :siffle:





    Merci au lutin anonyme de cette année. <3

    avatar
    Shaneliae
    FémininAge : 20Messages : 791

    le Dim 9 Aoû 2015 - 15:50

    Ici non, mais dans le coin des LS archivés, si =D (il faut juste attendre que le LS soit déplacé ^^)



    avatar
    Kuvera
    FémininAge : 23Messages : 30

    le Jeu 13 Aoû 2015 - 17:45

    :O Merci!
    avatar
    Heartfilia
    FémininAge : 17Messages : 98

    le Jeu 20 Aoû 2015 - 17:46

    merci !



    YOU HELLA SAVED MY LIFE
    - chloe price
    avatar
    Laeta
    FémininAge : 16Messages : 73

    le Jeu 20 Aoû 2015 - 19:06

    Thank you!
    avatar
    Romann
    FémininAge : 23Messages : 183

    le Mer 2 Sep 2015 - 19:46

    merci !



    avatar
    TiGraou
    MasculinAge : 24Messages : 219

    le Mer 9 Sep 2015 - 14:29

    Merci ^^
    avatar
    Grande
    FémininAge : 29Messages : 206

    le Lun 28 Sep 2015 - 16:13

    Merci



    avatar
    skyfighter
    MasculinAge : 34Messages : 345

    le Mar 13 Oct 2015 - 0:57

    merci





    avatar
    Mello
    FémininAge : 20Messages : 52

    le Mar 13 Oct 2015 - 8:42

    Merci
    avatar
    Invité

    le Mer 28 Oct 2015 - 20:27

    ty
    avatar
    Lou Ainsel
    FémininAge : 25Messages : 842

    le Mar 3 Nov 2015 - 10:09

    Merci Very Happy
    avatar
    Shanoa
    FémininAge : 19Messages : 64

    le Sam 14 Nov 2015 - 21:33

    merci beaucoup !!!!
    avatar
    Seoki
    FémininAge : 22Messages : 7

    le Mer 18 Nov 2015 - 16:25

    Merci
    avatar
    Cruelly
    FémininAge : 24Messages : 2542

    le Lun 23 Nov 2015 - 1:20

    Merci <3




    avatar
    Angie H.-Carter
    FémininAge : 33Messages : 690

    le Lun 14 Déc 2015 - 16:19

    merci c'est trop bien ^^



    Your my brillant! You shine into the darkness and you guide me in my life with no fear. I love you so much and i don't want to loose you in my heart. You will be my love forerver. You and me it's like the sky and the sea...This is LIFE!
    avatar
    CaraDelevngnie
    FémininAge : 17Messages : 320

    le Jeu 14 Jan 2016 - 0:15

    Vraiment super intéressant, j'ai hâte de voir le code utilisé en tout cas ! Merci beaucoup



    avatar
    Frosty Blue
    FémininAge : 21Messages : 161

    le Jeu 25 Fév 2016 - 11:47

    Merci ❤
    avatar
    Lyana Taylor
    FémininAge : 21Messages : 69

    le Mar 8 Mar 2016 - 18:45

    Merci pour ce code *-*



    avatar
    Err0r
    FémininAge : 23Messages : 130

    le Jeu 10 Mar 2016 - 1:49

    je pique, merci Very Happy



    avatar
    Llariarith
    FémininAge : 32Messages : 217

    le Jeu 10 Mar 2016 - 19:11

    Merci !
    Contenu sponsorisé


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