Mettre une image de fond sur les posts d'un Groupe

[@nnie]

Bonjour,

Serait-il possible d'avoir un code pour mettre une image de fond uniquement dans des posts écrits par des Membres d'un même groupe ?

Une image commune à tous ces posts. Pour phpBB2.

Merci d'avance aux bonnes volontés.

[@nnie]

Up !

[@nnie]

Up !

[@nnie]

up ...

[@nnie]

up

[@nnie]

up

[@nnie]

Up !

[@nnie]

up ...

[@nnie]

up ...

[Danux]

Bonjour,

Le même sujet a été abordé il y a quelques jours, et une solution y a été apportée concernant votre problème :

https://forum.forumactif.com/t332842-cadre-autour-de-l-avatar-en-fonction-du-groupe

[Psyaliah]

Coucou,
Effectivement la solution proposée au dessus reste encore la plus efficace, étant donné que l'on n'à pas encore trouvé un code convenable pour les forums PHPBB 2.
On arrive à un résultat, mais le rendu visuel n'est pas bon du tout, c'est plutôt déconseillé ^^

[@nnie]

Ah ! des réponses, enfin ! Merci !

Le même sujet a été abordé il y a quelques jours, et une solution y a été apportée concernant votre problème :

Euh ... pas vraiment le même sujet. Dans le cas d'Ocsidot, il s'agit d'un cadre autour de l'avatar en fonction du groupe.
Moi, j'aimerais mettre une image en fond des posts de certains groupes.
Comme par exemple ici => les posts de la Modération.

Peut-être sa solution est-elle adaptable à mon problème, mais malheureusement, c'est en-dehors de mes modestes compétences.

Surtout si :

On arrive à un résultat, mais le rendu visuel n'est pas bon du tout, c'est plutôt déconseillé ^^

[Psyaliah]

On arrive à un résultat déconseillé avec une image de fond dégradé, mais peut-être que si vous mettez un motif ca rendra mieux ..
Bref voici le code pour PHPBB 2 ^^

Donc pour commencer, faut éditer le nom du rang associé au groupe où vous souhaitez afficher le fond, puis par exemple remplacer "Administrateur" par:

Code:

<span class="fondstaff">Administrateur</span>

Ensuite, dans la gestion des codes Javascript, cliquer sur "Ajouter un nouveau code" et cochez seulement la case "Sur les sujets".
Pour le nom mettez ce que vous désirez.
Puis dans le code, copier coller ceci:

Code:

$(function() {
$('.fondstaff').parent().parent().parent().addClass('bgstaff');
 $('.bgstaff').children().removeClass('row2');
     
$('.fondstaff').parent().parent().parent().addClass('bgstaff');
 $('.bgstaff').children().removeClass('row1');

});

Ensuite, notez ceci dans votre CSS:

Code:

tr.bgstaff {
  background-image: url('LIENDELIMAGE');
 }

Il faudrait donc un motif ou quelque chose de pas trop foncé pour que le texte soit lisible quand même.

[@nnie]

Sympa, Psyaliah !
Je vais tester ça et je reviendrai dire ce qu'il en est.
:thanks:

[@nnie]

Alors, cela met bien un fond, mais dans tout : le post proprement dit, son titre et l'avatar ! Un peu trop à mon goût ...
Je voudrais juste pour le message, pas le reste.

D'autre part, je pensais davantage à quelque chose comme ce que font ici les Modés, comme ici par exemple. Une image de fond adaptée à la taille du texte. Enfin je ne sais pas comment c'est fait, évidemment.

[Psyaliah]

Coucou,
Justement le dégradé la, c'est pas encore réalisable !
Par contre j'ai une alternative, essaye voir de remplacer le CSS donné plus haut par celui-ci, et c'est également le code CSS pour seulement l'avoir sur le partie message:

Code:

.bgstaff div.postbody {
background-image: url('http://img135.imageshack.us/img135/6152/sanstitre1yg.png');
background-position: bottom;
  background-repeat: repeat-x;
}

Puis remplace le code Javascript donné plus haut par celui ci ^^:

Code:

$(function() {
$('.fondstaff').parent().parent().parent().addClass('bgstaff');
});

Je vais faire plusieurs dégradés et les mettre en libre service, avec différentes couleurs, comme ça tu pourras choisir si tu le souhaites et remplacer le lien actuel par le nouveau de celui choisi

[@nnie]

Coucou !

Super ! Je viens de mettre en place tes modifs et effectivement, le fond n'est plus que sur le message !
Merci, ça se rapproche de plus en plus de ce que je souhaiterais.
Et ta proposition de libre-service est vraiment sympa.

Maintenant, saurais-tu comment faire pour que l'image ne prenne pas tout le fond et que le texte soit dedans, comme dans le post d'Anzu donné en exemple ?
On voit que l'image de fond est centrée et que le texte est aligné à l'intérieur de l'image. Une jistoire de marge ? ou de % ?
Je dis ça au hasard parce que je n'i bien sûr pas la moindre idée de la façon de procéder...

Un grand merci à toi en tous cas de prendre de ton temps pour essayer de m'aider !

[Psyaliah]

Coucou,
Tu peux essayer de remplacer le lien du dégradé, par un lien de dégradé "PHPBB3" que j'ai mis en libre service, et rajouter dans ton css, à côté du "bottom", "bottom right", ta ligne donnera ceci normalement:

Code:

background-position: bottom right;

A voir ce que ça donne, ça ne rendra jamais pareil que sur ce forum, car il est en version PHPBB3 ^^

[@nnie]

Hello !

Non, aucune différence.
De toutes façons, il restera le problème de cadrer le texte.
A moins que la solution ne soit là : encadrer le texte du message ?

Bon, moi je raccroche pour ce soir (23h50 chez moi) et je te dis encore merci et à demain ... si tu as encore de la patience pour mon problème !

[Psyaliah]

Ahhhh je viens de comprendre désolé XD

Pour encadrer le texte, il faut faire un tableau avec un code css rattaché.

Dans ton CSS, tu met:

Code:

.EncadreAdministrateur {
border: solid 3px #ff0000; *-- Type / Taille / Couleur --*
border-radius: 20px; *-- taille de l'arrondi des angles--*
color: #ff0000; *-- couleur du texte --*
font-weight: bold; *-- pour mettre le texte en gras --*
}

Tu peux modifier ton css avec d'autres attributs selon ce que tu souhaites

Et a chaque fois que tu voudras écrire un message, tu devras écrire ceci, avec dans "class" ce que tu veux, par exemple "EncadreAdministrateur" ou "EncadreModerateur", selon la couleur que tu veux adopter.

Code:

[table class="EncadreAdministrateur][tr][td]Contenu de ton message[td][tr][/table]

[@nnie]

Psyaliah,

Je viens de tester et voici les résultats.

Ce que j'obtenais (avec un dégradé rouge)

Spoiler:

Ce que j'obtiens après application des dernières modifs, faites telles quelles en copié-collé

Spoiler:

Plus de fond, pas de bordure, disparition du texte de sujet et alignement vertical du titre du sujet !
Gloups ! Un léger problème, on dirait ...

[Psyaliah]

Mmh, tu as fait quoi la ? x.x
Le tableau de mon dernier message ? XD

[@nnie]

Mmh, tu as fait quoi la ? x.x
Le tableau de mon dernier message ? XD

Oui, j'ai suivi à la lettre tes dernières instructions. Que penses-tu du résultat ?
Ca vient manifestement du code à mettre dans le corps du message, mais à part ça ...

[Psyaliah]

Bah dans le code CSS tu met ce que j'ai marqué, et ensuite, tu met dans ton message que tu écris:

Code:

[table class="EncadreAdministrateur][tr][td]Contenu de ton message[td][tr][/table]

Ce qui chez nous donne ceci:

Bla bla bla

[@nnie]

Ben oui, comme je te l'ai déjà dit 2 fois, c'est exactement ce que j'ai fait !!!
Du pur copié-collé dans le CSS pareil pour le code.
Ch'suis dégoûtée, là ... :no

J'ai pensé que ça venait peut-être du fait que mon forum a du CSS modifié : pour tester, je suis passée sur un autre forum sans modifs de CSS => même résultat.
J'ai essayé de voir ce qui pouvait clocher au niveau rang : je ne vois rien d'anormal.
Là, je n'y comprends vraiment rien de rien.
Pourtant, je t'assure que j'ai fait exactement ce que tu m'as dit.

Que deviennent les codes et le Javascript donnés au début ? à éliminer ou pas ?
Sur mon 1er forum, j'ai tout gardé, sur le 2ème je n'ai mis que les derniers codes => résultats identiques sur les 2. Je m'arrache les cheveux avec ça !

[Invité]

Bonjour,
désolé mais vous avez oublié de mettre le " dans le coe voici le code

Code:

[table class="EncadreAdministrateur"][tr][td]Contenu de ton message[td][tr][/table]

Merci

[@nnie]

Yes !!! Grâce à toi, Alexandre, j'ai enfin pu appliquer correctement le code de Psyaliah !
Car comme dit plus haut, j'avais fait un bête copié-collé, sans même penser à vérifier le code.
Il manque aussi les / avant les td et tr, ce qui explique que tout s'alignait en vertical sur mon forum.

Voici donc le bon code :

Code:

[table class="EncadreAdministrateur"][tr][td]Contenu de ton message[/td][/tr][/table]

J'aurais encore 4 questions :
1) comment centrer le texte à l'intérieur du cadre ?
2) comment centrer le tout à l'intérieur du message (là, c'est aligné à gauche) ?
3) comment mettre une marge entre le texte et la bordure ?
4) et enfin, comment obtenir le même effet que toi, Psyaliah ? ta bordure est une image, non ?

Merci à vous !

Edit : j'ai résolu la question n° 4, mais pas les autres.

[Psyaliah]

Suis une quiche je devais être fatiguée ^^

1) Alors pour aligné à l'intérieur du cadre, dans le css approprié on rajoute ceci:

Code:

vertical-align: middle;

2) Pour centrer le tout, c'est ceci:

Code:

text-align: center;

3) Pour la marge, c'est ceci, où la valeur est à modifiée comme tu aimes:

Code:

padding: 10px;

Voila

[@nnie]

Suis une quiche ...

Pas de souci, Psyaliah : en ce domaine, tu ne peux pas me concurrencer !
J'aurais dû le voir moi-même car bien que nulle en code, je connais tout de même le principe de «toujours fermer ce qui est ouvert», mais bon, je n'ai pas vu alors que je cherchais désespéremment ce qui n'allait pas !

Bref, je viens d'appliquer tes dernières lignes de code, que j'ai ajoutées dans le .EncadreAdministrateur.
C'est bien là, n'est-ce pas ?
Et on y est presque !
- Le texte est bien centré dans le cadre.
- Les marges sont OK.

Reste juste à centrer tout ça
au milieu du post, comme ceci

J'ai essayé les balises Center dans le post lui-même mais ça ne marche pas.
Encore un grrrros merci pour ton aide !

[Psyaliah]

Vui j'ai souvent le soucis du centrer tout au milieu, normalement c'est le "text-align: center;" mais j'ai souvent du mal.

Essaye de rajouter dans le "td" ceci, comme ceci:

Code:

[td text-align="center"]blabla[/td]