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 : 761

    le Lun 20 Juil 2015 - 15:23

    Rappel du premier message :


    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 ! Pour voir les codes il faudra poster ! 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
    pixelman
    FémininAge : 36Messages : 237

    le Mar 12 Juil 2016 - 17:43

    Merci pour cette option pratique et compacte !




    Vit pour manger que de manger pour vivre !
    Citation du jour a écrit:"C'est avec une main sur le coeur que je te dis 'je t'aime',
    mais c'est avec un sourire que je te dis 'je te hais'.... "

    avatar
    [No]
    FémininAge : 24Messages : 31

    le Mer 13 Juil 2016 - 18:17

    Merci!
    avatar
    Eil'liathan Tyan'Lirulin
    FémininAge : 25Messages : 306

    le Dim 31 Juil 2016 - 12:52

    Han, il est là ! Enfin, depuis le temps que je cherche ce tuto XD Merci *3*
    avatar
    .Lucifer.
    MasculinAge : 43Messages : 150

    le Jeu 11 Aoû 2016 - 11:44

    Merci beaucoup! Wink



    avatar
    NanoiHime
    FémininAge : 18Messages : 513

    le Sam 27 Aoû 2016 - 23:45

    mercii





    avatar
    Rynkka
    FémininAge : 18Messages : 117

    le Mar 30 Aoû 2016 - 17:33

    Merci !



    avatar
    rpgharrypotter2016
    FémininAge : 23Messages : 106

    le Sam 10 Sep 2016 - 20:36

    merci
    avatar
    Tatia38
    FémininAge : 27Messages : 300

    le Lun 17 Oct 2016 - 21:43

    sublime merci
    avatar
    Mystigri
    FémininAge : 14Messages : 94

    le Mar 1 Nov 2016 - 10:03

    Merci !



    avatar
    mon-etoile
    FémininAge : 28Messages : 140

    le Jeu 3 Nov 2016 - 19:00

    Merci beaucoup
    avatar
    Sunn
    MasculinAge : 21Messages : 24

    le Jeu 10 Nov 2016 - 23:59

    Merci bcp ! Very Happy
    avatar
    Géranium
    FémininAge : 16Messages : 56

    le Dim 13 Nov 2016 - 14:28

    MERCI ! *-*
    avatar
    AkaZukin
    FémininAge : 22Messages : 35

    le Sam 10 Déc 2016 - 15:33

    merci!
    avatar
    Talesof91
    FémininAge : 26Messages : 73

    le Sam 17 Déc 2016 - 20:56

    Génial ! Merci ^^
    avatar
    Gieve
    FémininAge : 27Messages : 57

    le Sam 7 Jan 2017 - 10:24

    Merci !
    Contenu sponsorisé


      La date/heure actuelle est Jeu 23 Mar 2017 - 11:19