Comment faire un message bulle comme les staffs de ForumActif ?

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Comment faire un message bulle comme les staffs de ForumActif ?

Message par Xoomi34 le Mar 25 Fév 2014 - 19:37

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


Dernière édition par Lionel FUN le Mer 26 Fév 2014 - 17:20, édité 3 fois

Xoomi34
***

Masculin
Messages : 141
Inscrit(e) le : 30/08/2013

http://xoomi.forumactif.org
Xoomi34 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment faire un message bulle comme les staffs de ForumActif ?

Message par Kinotto le Mar 25 Fév 2014 - 19:39

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. Wink

Cordialement.

Kinotto
+ Hyperactif +

Masculin
Messages : 2177
Inscrit(e) le : 12/09/2012

http://test-nightmare.superforum.fr/
Kinotto a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment faire un message bulle comme les staffs de ForumActif ?

Message par Xoomi34 le Mar 25 Fév 2014 - 20:08

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. Sad

Xoomi34
***

Masculin
Messages : 141
Inscrit(e) le : 30/08/2013

http://xoomi.forumactif.org
Xoomi34 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment faire un message bulle comme les staffs de ForumActif ?

Message par Luninho le Mar 25 Fév 2014 - 20:32

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-left50px;
}

/!\ "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-left50px;
}

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, ...)

Luninho
***

Masculin
Messages : 123
Inscrit(e) le : 13/09/2013

http://battle-street.frbb.net/
Luninho a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment faire un message bulle comme les staffs de ForumActif ?

Message par Lixyr le Mer 26 Fév 2014 - 2:08

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 :editer: de votre premier message. Wink

A bientôt sur ForumActif Smile

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.


Dernière édition par Lixyr le Mer 26 Fév 2014 - 16:38, édité 1 fois (Raison : erreur d'attribut)

Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment faire un message bulle comme les staffs de ForumActif ?

Message par Xoomi34 le Mer 26 Fév 2014 - 16:04

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

Xoomi34
***

Masculin
Messages : 141
Inscrit(e) le : 30/08/2013

http://xoomi.forumactif.org
Xoomi34 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment faire un message bulle comme les staffs de ForumActif ?

Message par Lixyr le Mer 26 Fév 2014 - 16:34

Bonjour.

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

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 :editer: de votre premier message. Wink

A bientôt sur ForumActif Smile

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.





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment faire un message bulle comme les staffs de ForumActif ?

Message par Xoomi34 le Mer 26 Fév 2014 - 16:56

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

Xoomi34
***

Masculin
Messages : 141
Inscrit(e) le : 30/08/2013

http://xoomi.forumactif.org
Xoomi34 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment faire un message bulle comme les staffs de ForumActif ?

Message par Lixyr le Mer 26 Fév 2014 - 16:59

Super, pour le titre.

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

@Lixyr a écrit: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.





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment faire un message bulle comme les staffs de ForumActif ?

Message par Xoomi34 le Mer 26 Fév 2014 - 17:09

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

Xoomi34
***

Masculin
Messages : 141
Inscrit(e) le : 30/08/2013

http://xoomi.forumactif.org
Xoomi34 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment faire un message bulle comme les staffs de ForumActif ?

Message par Lixyr le Mer 26 Fév 2014 - 17:10

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.





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment faire un message bulle comme les staffs de ForumActif ?

Message par Xoomi34 le Mer 26 Fév 2014 - 17:14

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) ?

Xoomi34
***

Masculin
Messages : 141
Inscrit(e) le : 30/08/2013

http://xoomi.forumactif.org
Xoomi34 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment faire un message bulle comme les staffs de ForumActif ?

Message par Lixyr le Mer 26 Fév 2014 - 17:16

Pour mettre une couleur de fond, pareil, il faut rajouter dans le CSS :
Code:
background-color:#FF0000;





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Comment faire un message bulle comme les staffs de ForumActif ?

Message par Xoomi34 le Mer 26 Fév 2014 - 17:20

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. Smile

Xoomi34
***

Masculin
Messages : 141
Inscrit(e) le : 30/08/2013

http://xoomi.forumactif.org
Xoomi34 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment faire un message bulle comme les staffs de ForumActif ?

Message par Xoomi34 le Mer 26 Fév 2014 - 17:42

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

Xoomi34
***

Masculin
Messages : 141
Inscrit(e) le : 30/08/2013

http://xoomi.forumactif.org
Xoomi34 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment faire un message bulle comme les staffs de ForumActif ?

Message par Lixyr le Mer 26 Fév 2014 - 17:55

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

Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment faire un message bulle comme les staffs de ForumActif ?

Message par Xoomi34 le Mer 26 Fév 2014 - 18:09

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

Xoomi34
***

Masculin
Messages : 141
Inscrit(e) le : 30/08/2013

http://xoomi.forumactif.org
Xoomi34 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment faire un message bulle comme les staffs de ForumActif ?

Message par Lixyr le Mer 26 Fév 2014 - 18:17

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

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

}





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment faire un message bulle comme les staffs de ForumActif ?

Message par Xoomi34 le Mer 26 Fév 2014 - 18:46

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 ?

Xoomi34
***

Masculin
Messages : 141
Inscrit(e) le : 30/08/2013

http://xoomi.forumactif.org
Xoomi34 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Comment faire un message bulle comme les staffs de ForumActif ?

Message par Lixyr le Mer 26 Fév 2014 - 18:59

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.





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum