Comment faire un message bulle comme les staffs de ForumActif ?

[Xoomi34]

Bonjour/Bonsoir cher membre de ForumActif .
Je souhaiterai savoir comment est-ce que je pourrai créer cette forme de message, que je rencontre aussi avec les Aidactif.
Mais quand je teste les balises sur mon forum, elle ne marche pas.
Donc il me laisse pensé qu'il faut un code JAVASCRIPT et un code CSS .
Merci
Cordialement
EDIT : Désolé, je suis désolé pour le petit désagrément .
Je voulez parlez de ce message comme celui-ci:

Ce message-ci

[Invité]

Bonsoir,

Ce sont des class propres à ce forum, il est donc normal qu'elles ne fonctionnent pas sur le vôtre. Il vous faut en créer par vous-même dans Affichage > Couleurs > Feuille de style CSS et vous pourrez alors les utiliser sur votre propre forum.

Cordialement.

[Xoomi34]

Oui, c'est ce que j'ai dit. ^^
Mais j'aimerai bien que l'on m'aide.
Notamment le Staff, car seul le staff peut me donner ce code.
Que j'avais demandé précédemment .
Désolé pour les autres.

[Luninho]

Chaque code à son ID ou CLASS, il suffit que sur ton forum tu rouve le nom de l'ID ou la CLASS qui affiche t'es titre de forum et que tu ajoute dans ton css ceci :

#titre:hover {
    font-style: italic;
   margin-left: 50px;
}

/!\ "titre" est juste un autre style, et le # représente que dans le div ou dans le p c'est un ID, si c'est un class on le mettre avec un point "."

.titre:hover {
    font-style: italic;
   margin-left: 50px;
}

Comment on le sait : Clic droit, inspecter l'élément ou sinon CTRL + MAJ + I

Et on vois dans le code si on est dans un CLASS ou un ID :

Code:

Code:

<div id="title">Je suis un titre</div>

Il ne te reste qu'à chercher car chaque type de forum à sont code différent. (PHPBB3, PHPBB2, ...)

[Lixyr]

Bonjour, Afin de faciliter les recherches ultérieures, merci de respecter les règles concernant le titre de votre sujet. En effet, votre titre : - doit être explicite (qui explique brièvement le problème), - ne doit pas être en majuscules, - ne doit pas contenir de mots trop généralistes : "aide" ; "help" ; "besoin d'aide" ; "problème"... Merci de le modifier en cliquant sur le bouton de votre premier message. A bientôt sur ForumActif

Bonsoir, Lionel FUN.

Bien entendu, FA ne vous donnera pas ses codes. Comme dit plus haut c'est à vous de les faire. Il n'y a pas de javascript à avoir, ça n'utilise que du HTML/ou BBcode, et du CSS.
Je vous laisse lire ce tuto, qui vous aidera à apprendre les bases du HTML, et ensuite, en bas du tuto, celui qui vous apprendra à mieux appréhender le CSS.

De base, les messages de modération ont :
> une table, avec une bordure
> une ombre
> et une ombre sur le texte
C'est tout.

En HTML basiquement ça donne :

<table class="table">texte</table>

et pour mettre ça en forme, avec le CSS :

Code:

.table {
border: 1px solid #000000; /*bordure en noir*/
box-shadow: 1px 1px 3px #000000; /*ombre en noir sur la boite*/
color: #000000; /*couleur noir pour le texte*/
text-shadow: 1px 1px 3px #000000; /*ombre noire sur le texte*/
}

A vous de modifier les couleurs #000000 par une qui vous convient le mieux.

[Xoomi34]

J'ai édité mon message. ^^
Il est plus clair je pense.

[Lixyr]

Bonjour.

Avant toute chose, je réitère ce que j'ai dit plus haut !   

Bonjour, Afin de faciliter les recherches ultérieures, merci de respecter les règles concernant le titre de votre sujet. En effet, votre titre : - doit être explicite (qui explique brièvement le problème), - ne doit pas être en majuscules, - ne doit pas contenir de mots trop généralistes : "aide" ; "help" ; "besoin d'aide" ; "problème"... Merci de le modifier en cliquant sur le bouton de votre premier message. A bientôt sur ForumActif

Merci de modifier le titre de ce topique, de sorte qu'il profite au plus grand nombre. Si le titre n'est pas modifié prochainement, je verrouille le sujet.

[Xoomi34]

Voilà.
Je pense que c'était Matriochka qui m'avait donné le code.

[Lixyr]

Super, pour le titre.

Pour le message de modération, je vous ai donné un début plus haut :

De base, les messages de modération ont :
> une table, avec une bordure
> une ombre
> et une ombre sur le texte
C'est tout.

En HTML basiquement ça donne :

<table class="table"><tr><td>texte</td></tr></table>

et pour mettre ça en forme, avec le CSS :

Code:

.table {
border: 1px solid #000000; /*bordure en noir*/
box-shadow: 1px 1px 3px #000000; /*ombre en noir sur la boite*/
color: #000000; /*couleur noir pour le texte*/
text-shadow: 1px 1px 3px #000000; /*ombre noire sur le texte*/
}

A vous de modifier les couleurs #000000 par une qui vous convient le mieux.

C'est du html, on peut aussi le fait en bbcode

Code:

[table class="table"][tr][td]TEXTE[/td][/tr][/table]

Après si vous voulez d'autres choses ; il faudrait nous dire quoi exactement. Et déjà tester ça.

[Xoomi34]

Est-il possible de faire les coté arrondis?
Ou sinon, le code marche.

[Lixyr]

Pour les coins arrondis, il faut rajouter ça dans le CSS :

Code:

border-radius:10px;

L'angle d'arrondis, c'est le 10. Si vous voulez un angle plus accentué, il faut augmenter la valeur, sinon la diminuer.

[Xoomi34]

Juste une dernière demande.
Comment pourrais-je remplir le message d'une couleur ?
Vous voyez, le milieu du message est sur fond transparent.
Comment pourrait-on le remplir de rouge (#FF0000) ?

[Lixyr]

Pour mettre une couleur de fond, pareil, il faut rajouter dans le CSS :

Code:

background-color:#FF0000;

[Xoomi34]

Merci, vous avez résolu ma question.
Mon sujet est résolu et j'ai coché l'icone résolu.
On peut verrouiller le sujet.

[Xoomi34]

Comment est-ce qu'on ajoute une image ?
Comme avec celle-là qui apparaît :
https://i.servimg.com/u/f32/09/02/12/09/search10.png
J'aimerai l'ajouter.

[Lixyr]

Alors, dans le code, après la cellule, on met l'image et ensuite via le CSS on lui dit qu'il est en flottant à gauche par rapport au texte :

Version HTML :

Code:

<table class="table"><tr><td><img src="URL_IMAGE" /> TEXTE </td></tr></table>

Version BBCODE :

Code:

[table class="table"][tr][td][img]URL_IMAGE[/img] TEXTE [/td][/tr][/table]

Et dans le CSS il faut rajouter :

Code:

.table img {float:left; margin-right:10px; margin-left:10px;}

• float:left pour que ça se mette à gauche du reste qui sera dans la table
• margin-right pour mettre une marge à droite de l'image, comme ça ce n'est pas collé au texte. Pour pouvez diminuer ou augmenter le 10
• margin-left pour mettre une marge à gauche de l'image, qu'elle ne soit pas collée à la bordure. Pour pouvez diminuer ou augmenter le 10

[Xoomi34]

Mon message est retracté
Pas à cause du code, mais bien au début.
https://i.servimg.com/u/f56/18/22/49/53/26-02-10.png
Ou sinon, le code, il marche, mais le message est rétracte.

[Lixyr]

Vous pouvez donner une largeur et une hauteur fixe à votre table :

.table {
width:250px;
height:120px;
}

[Xoomi34]

Juste une question, quand j'ai essayé de poster un message avec vos balise sur ce forum-ci.
je n'ai pas eu besoin de mettre:

Code:

[img][/img]

Comment puis-je faire ?

[Lixyr]

L'image est bel et bien présente dans la trame forumactif :

Ce message-ci

C'est juste qu'elle n'est pas en float mais dans une autre cellule.