Header
Partagez | 

[FA] Une chatbox en annonce

avatar

Mes clubs


En savoir plus
Mes clubs extra-scolaires:

Amaranthe

Doyenne
Bons Points (BP) : 147
Voir le profil de l'utilisateur

Message Sujet: [FA] Une chatbox en annonce   Mar 31 Déc - 20:22

Une chatbox en annonce


Vous êtes du genre à aimer faire la causette avec vos amis sur la chatbox pendant que vous vous baladez sur le forum, mais vous en avez votre dose, de toujours devoir changer de fenêtre ou d'onglet pour les rejoindre ? Vos membres sont de sacrées pipelettes et veulent disposer de la chatbox comme de leur portable, l'abonnement payé une fortune en moins ? Vous vous arrachez les cheveux à force de chercher une solution, sans y parvenir ? Ouais non là vous avez juste un problème d'addiction, faut penser à consulter... xD Mais si vous voulez une chatbox sur toutes les pages de votre forum, j'ai une bonne nouvelle pour vous : c'est possible !

Ah ! et comment ?


J'ai une bonne et une mauvaise nouvelle. La bonne, c'est que vous n'avez pas besoin d'être le fondateur du forum pour le faire. La mauvaise, c'est que vous aurez des problèmes si vous utilisez déjà les annonces. Mais bon, pour elles, c'est pas grave : il suffit de rajouter un petit bandeau défilant dans le haut de votre page d'accueil, et hop ! ni vu, ni connu, ça marche (presque) pareil, puisque la PA ne s'affiche que sur l'index du forum, pas sur toutes les pages. Donc ! Si vous tenez absolument à vos magnifiques annonces défilantes, vous pouvez pleurer ou chercher une solution bis. Si vous préférez la chatbox à vos annonces, tant mieux, suivez-moi. ^^

1. Activer la chatbox

C'est l'évidence, mais on ne va pas prendre le risque de perdre certaines personnes dès le départ. x)

Pour activer la chatbox, rendez-vous dans le panneau d'administration. Cliquez sur l'onglet Modules (dans la barre des onglets, en haut du panneau d'administration), puis, dans la zone chatbox, cliquez sur configuration (dans la liste à gauche de la page). Ca va, vous y êtes ? Parfait ! Activez la chatbox en cochant la case "oui", puis sélectionnez "ne pas afficher" : vous n'avez pas besoin d'une chatbox en haut ou en bas de votre forum en plus d'une chatbox en annonce, si ? En tout cas, si c'est le cas, votre cas ne s'améliore pas, la consultation est plus que conseillée... Razz

2. Activer les annonces

Captain Obvious, le retour de la vengeance. Avec la même excuse que précédemment : on ne va pas prendre le risque de perdre en route ceux qui n'ont pas l'habitude du panneau d'administration. ^^ Déjà, on va commencer par... visualiser ce qu'est une annonce.
C'est ça:
 

Maintenant, imaginez qu'à la place de cette zone bleue avec du texte, vous avez une jolie chatbox, qui s'affiche sur absolument toutes les pages du forum. Ca vous botte ? Allez, on continue ! Pour activer les zones d'annonce, on ouvre le panneau d'administration, on va dans l'onglet général et on sélectionne annonces dans le menu. On les active, sans défilement, et on règle la hauteur de l'annonce en fonction de celle qu'aura la chatbox. Compter 350px pour une chatbox "normale", telle qu'affichée sur le forum en règle générale. Enfin, pour que la chatbox puisse s'afficher en annonce, il faut... créer une annonce ! Ne remplissez pas encore le champ de texte, on va le remplir avec du code. Wink Si vous avez déjà créé des annonces, je suis au regret de vous annoncer qu'il va falloir les supprimer...

3. Mettre la chatbox dans l'annonce

On a activé la chatbox, on a activé les annonces. Il est temps de les fusionner ! ^^

Vous avez gardé votre page avec la nouvelle annonce ouverte ? Parfait ! Pour que la chatbox puisse y être installée, il faut mettre en place ce qu'on appelle une "iframe" (non, ça n'a définitivement RIEN à voir avec les produits Apple !), c'est-à-dire une inception : une page internet dans une page internet. On ouvre donc des balises iframe dans la zone de texte de l'annonce :

Code:
<iframe></iframe>

Il faut maintenant y ajouter la page de la chatbox (sinon ça sert à rien Razz). Pour en trouver l'url, c'est très facile : on prend le lien du forum (pour SoP, ce sera http://www.school-of-progress.fr/) et on ajoute chatbox après le slash (http://www.school-of-progress.fr/chatbox... notez que pour SoP, le lien ne mène à rien, parce que la chatbox n'est pas activée... mais c'est pas grave, c'est juste pour l'exemple). Ensuite, on met tout ça dans la balise ouvrante de l'iframe, après la mention src : celle-ci signifie que vous allez appeler un lien. Et comme c'est du discours direct, on met ça entre guillemets !

Code:
<iframe src="http://www.school-of-pub.net/chatbox"></iframe>

Vous y êtes ? Parfait. On va peaufiner un peu cette belle iframe en lui donnant un nom (évitez Cunégonde et Haginon, c'est un peu passé de mode) via l'attribut name, une hauteur via l'attribut height et une largeur via l'attribut width. Un peu comme pour un bébé, en fait. Et à nouveau, on n'oublie pas les guillemets !

Code:
<iframe src="http://www.school-of-pub.net/chatbox" name="Ursule" height="300px" width="700px"></iframe>
(Sinon, vous pouvez bêtement l'appeler "Chatbox", ça marche aussi.)

Maintenant, vous remarquerez qu'il y a une bordure toute moche autour de votre iframe... Si vous aimez, vous pouvez laisser. Sinon, il suffit de l'enlever, via l'attribut frameborder, en mettant comme valeur de bordure un beau zéro.

Code:
<iframe src="http://www.school-of-pub.net/chatbox" name="Ursule" height="300px" width="700px" frameborder="0"></iframe>

Restent les questions d'esthétique. Pour tout ce qui est fond, bordures, couleurs et compagnie, rendez-vous dans le CSS du forum. Les attributs liés aux annonces sont #fa_ticker_block table et #fa_ticker_block td. Il vous faudra modifier leurs contenus par défaut pour arranger votre chatbox selon votre souhait, en employant les propriétés CSS de votre choix. Attention : les propriétés s'appliqueront à la zone d'annonce, pas à la chatbox elle-même ! (Ca peut paraître évident à certains, mais je précise quand même). Vous devrez donc ajouter un passage comme celui-ci à votre feuille de CSS :

Code:
#fa_ticker_block table, #fa_ticker_block td{
vos propriétés ici;
}

Les propriétés dont vous avez le plus de chances de mobiliser sont background (fond) et border (bordure). Voici ce que vous pouvez en faire :
Code:
background: none; /*pas de fond*/
background-color:#000000; /*fond uni de la couleur de votre choix*/
background-image:url('lien_de_l'image'); /*image de fond*/

Code:
border:none; /*pas de bordure*/

border: 1px #000000 solid/dashed/dotted/double; /*bordure de taille 1px, de couleur au choix, pleine/en tirets/en pointillés/doublée*/

border_top/border_bottom/border_left/border_right: 1px #000000 solid; /*bordure supérieure/inférieure/gauche/droite, avec les attributs que vous désirez*/.

Comme on est en CSS, on n'oublie pas le point-virgule après chaque attribut (comme je l'ai fait dans les deux codes ci-dessus). Enfin, précision importante, chaque attribut devra être suivi de la mention "!important", ce qui signifie que l'attribut défini ici prédomine sur les attributs par défaut. Nous aurons donc, pour une zone d'annonce à fond vert et à bordure pleine blanche de 2px un code de ce genre :

Code:
#fa_ticker_block table, #fa_ticker_block td{
background-color:#339966 !important;
border:2px #000000 solid !important;
}

Et le tour est joué ! Very Happy


PS : et si j'ai vraiment un truc important à annoncer ?

Pas de panique ! En fait, ce qu'on ne peut plus faire une fois la chatbox mise en annonce, c'est créer de nouvelles annonces : ça ferait planter le code. Par contre, si vous avez un truc vraiment important à noter au-dessus de la chatbox, ça peut se faire : il suffit d'écrire le texte de votre annonce dans l'annonce qui contient la chatbox, avant ou après le code de l'iframe. En gros :

Code:
/*VOUS POUVEZ ECRIRE ICI*/

<iframe src="http://www.school-of-pub.net/chatbox" name="Chatbox" height="300px" width="700px" frameborder="0"></iframe>

/*VOUS POUVEZ ECRIRE ICI */

Par contre, n'écrivez pas dans l'iframe, ou vous allez faire capoter le code. ^^

Allez, discutez bien ! Very Happy




Vous rencontrez un souci avec ce tutoriel ? Venez poser votre question [ici].

Idea N'oubliez pas de lire et de suivre les [règles de la section].

Je soussignée, Amaranthe, accepte qu'un directeur reposte le tutoriel "Une chatbox en annonce" tel que je l'ai rédigé.
Revenir en haut Aller en bas



Amaranthe - Templier de l'Orthographe parti en Croisade
(Inspectrice, correctrice et professeur)

[FA] Une chatbox en annonce
Page 1 sur 1
 Sujets similaires
-
» Chatbox latérale coulissante (sans template)
» ANIMATION CB #4 : JDR CHATBOX
» Un Signal pour la ChatBox
» Les délires CB
» Cours par ChatBox - Samedi 19 Janvier 2013
Réponse rapide

School of Progress :: La bibliothèque :: Tutoriels :: Informatique :: Codage+