Mettre un effet de couleur dégradé sur un groupe

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

Résolu Mettre un effet de couleur dégradé sur un groupe

Message par Solid6Snake le Mar 26 Juil 2016 - 22:34

Détails techniques


Version du forum : phpBB3
Poste occupé : Administrateur
Navigateur(s) concerné(s) : Google Chrome
Personnes concernées par le problème : Plusieurs utilisateurs
Lien du forum : http://www.entraide-youtubers.com/

Description du problème

Bonsoir Forumactif, j'espère que vous allez bien Hi

Je viens vers vous parce que je recherche à mettre un effet dégradé de couleur sur nos meilleurs membres qui sont dans notre groupe [Membres Honorifiques] en légende et actuellement de couleur verte.

Voilà ce que ça donne: http://www.entraide-youtubers.com/

C'est moche hein? Si si avouez c'est moche, bref ce groupe a été créé afin de mettre en avant nos membres + 1000 messages histoire de leurs donner un peu plus de visibilité dans nos sujets.

Ma question est: est-il possible de mettre une couleur de groupe en dégradé?



Je n'ai pas de couleurs à proposer pour mettre ce groupe en valeur sans que ce soit moche sur l'index..

C'est possible en passant par le CSS par exemple?

Cela ne me pose pas trop de problème de traficoter le CSS.

Merci d'avance Wink



Dernière édition par Solid6Snake le Dim 31 Juil 2016 - 11:18, édité 1 fois

Solid6Snake
****

Messages : 317
Inscrit(e) le : 07/11/2013

http://www.entraide-youtubers.com/
Solid6Snake a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un effet de couleur dégradé sur un groupe

Message par Solid6Snake le Jeu 28 Juil 2016 - 11:32

Up Wink

J'ai bien ce tutoriel: http://forum.forumactif.com/t355411-mettre-le-pseudo-d-un-membre-de-plusieurs-couleurs

Mais il faut ajouter le membre un par un et rajouter le code il n'y à pas plus simple, comme ajouter tout un groupe d'utilisateur par exemple?

Solid6Snake
****

Messages : 317
Inscrit(e) le : 07/11/2013

http://www.entraide-youtubers.com/
Solid6Snake a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un effet de couleur dégradé sur un groupe

Message par Milouze14 le Ven 29 Juil 2016 - 19:33

Hello Solid6Snake,

On peut grâce à la couleur attribuée à ce groupe donner une couleur de fond sur les messages
des membres figurant dans ce dernier.

Ensuite juste sur l'index le nom de ce groupe peut être aussi colorisé pour chacune des lettres mais on ne pourra
par le faire sur les Pseudos .

Pour modifier les lettres de ce groupe on va placer un span dans le template par précaution
afin de ne toucher une autre balise.

Dans le template index_body:
Affichage/Templates/Général/index_body


Recherches ceci:
Code:

{GROUP_LEGEND}

Supprimes et remplaces par:
Code:

<span class="M14_Legende">{GROUP_LEGEND}</span>

Penses a enregistrer les modifications en cliquant respectivement sur et


Ensuite on va créer un script et à partir de ce dernier tu pourras modifier les couleurs lettre par lettre .


Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript


Coches sur l'index.
Déposes ceci:
Code:

$(function(){
$('.M14_Legende a:contains("Membres Honorifiques")').html('
<span style="color:#FFD940;">M</span>
<span style="color:#FF8830;">e</span>
<span style="color:#FFD940;">m</span>
<span style="color:#FF8830;">b</span>
<span style="color:#FFD940;">r</span>
<span style="color:#FF8830;">e</span>
<span style="color:#FFD940;">s</span>
<span style="color:#FF8830;"> H</span>
<span style="color:#FFD940;">o</span>
<span style="color:#FF8830;">n</span>
<span style="color:#FFD940;">o</span>
<span style="color:#FF8830;">r</span>
<span style="color:#FFD940;">i</span>
<span style="color:#FF8830;">f</span>
<span style="color:#FFD940;">i</span>
<span style="color:#FF8830;">q</span>
<span style="color:#FFD940;">u</span>
<span style="color:#FF8830;">e</span>
<span style="color:#FFD940;">s</span>')
});



Penses à cliquer sur le bouton

Bon je ne me suis pas foulé pour les couleurs , à toi de les changer ensuite.

Pour les messages , je pars de la couleur que tu as attribué à ce groupe:
Code:
#00FFFF



Modules/HTML&JAVASCRIPT/Gestion des codes Javascript/Créer un nouveau Javascript

Coches Sur les sujets
Déposes ceci:
Code:

$(function(){
$(' a[href^="/u"] span[style="color:#00FFFF"]').closest('.post').addClass('M14_groupe1');
});



Penses à cliquer sur le bouton


Dans la feuille de style:
Affichage/Images et Couleurs/Couleurs/Feuille de style


Ajoutes ceci:
Code:

.M14_groupe1{background:#00FFFF !important;}



Penses à cliquer sur le bouton

Changes la couleur du groupe par celle que tu souhaites Wink .

Et voilà mon ami Wink .

a++


Milouze14
+ Hyperactif +

Masculin
Messages : 4628
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un effet de couleur dégradé sur un groupe

Message par Solid6Snake le Sam 30 Juil 2016 - 12:46

Bonjour Milouze14 Very Happy

Je devrais avoir le temps d'installer tout ça dans la journée et je repasse ici pour prévenir si tout est Ok.

Il n'est pas possible au lieu d'afficher un dégradé de couleurs sur le fond du message en bas à droite par exemple, de faire afficher un logo?

Genre des étoiles ou autres?

Solid6Snake
****

Messages : 317
Inscrit(e) le : 07/11/2013

http://www.entraide-youtubers.com/
Solid6Snake a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un effet de couleur dégradé sur un groupe

Message par Milouze14 le Sam 30 Juil 2016 - 16:16

Salut Solid6Snake,

Bonjour Milouze14 Very Happy

Je devrais avoir le temps d'installer tout ça dans la journée et je repasse ici pour prévenir si tout est Ok.

Il n'est pas possible au lieu d'afficher un dégradé de couleurs sur le fond du message en bas à droite par exemple, de faire afficher un logo?

Genre des étoiles ou autres?

Hum à droite cela risque de gêner l'affichage mais à gauche comme le profil est placé de ce côté on peut ajouter au script
une image qui sera placé en dessous de l'avatar:

On va garder le fond malgré tout Very Happy .

Édites le script est remplaces le contenu par celui-ci:

Code:

$(function(){
$(' a[href^="/u"] span[style="color:#00FFFF"]').closest('.post').addClass('M14_groupe1');
$(' a[href^="/u"] span[style="color:#00FFFF"]').closest('.postprofile dl dt').after('<img src="http://im0.all-up.com/static/images/free-hosting-forum.png"style="cursor:pointer;"title="Meilleurs posteurs"/>');
});

Remplaces le lien de l'image ici:

Code:

.after('<img src="http://im0.all-up.com/static/images/free-hosting-forum.png"style="cursor:pointer;"title="Meilleurs posteurs"/>');

J'ai ajouter à l'image un title "Meilleur posteurs" , tu peux aussi changer cet intitulé Wink .
J'ai aussi donné un style pour le curseur:
Code:

style="cursor:pointer;"

Mais tu peux aussi placer l'image à droite en ajoutant au style:
Code:
float: right;


a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4628
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un effet de couleur dégradé sur un groupe

Message par Solid6Snake le Sam 30 Juil 2016 - 22:59

Oui sous l'avatar c'est même mieux, excuse moi je rentre seulement ^^^

Bon j'ai installé le code javascript tout fonctionne pour les Membres Honorifiques, le logo test s'affiche bien sous les membres.

Je vais voir pour modifier le logo pour le coup.

Dernière petite chose après je disparaîs Mr. Green

C'est possible d'avoir le même code mais pour les modérateurs et pour les administrateurs?




Solid6Snake
****

Messages : 317
Inscrit(e) le : 07/11/2013

http://www.entraide-youtubers.com/
Solid6Snake a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un effet de couleur dégradé sur un groupe

Message par Milouze14 le Dim 31 Juil 2016 - 3:37

Salut Solid6Snake,

@Solid6Snake a écrit:
Dernière petite chose après je disparaîs Mr. Green
C'est possible d'avoir le même code mais pour les modérateurs et pour les administrateurs?

Je pars donc du principe que les groupes suivants ont ces couleurs d'attribuées:

Code:

Fondateur
color:#FFFF00
Admin
color: #FF2929
Co-Admin
color: #FFA500
Modérateur
color: #0D66FF


Les scripts respectifs seront alors:
Code:

//POUR LE FONDATEUR
$(function(){
$(' a[href^="/u"] span[style="color:#00FFFF"]').closest('.post').addClass('M14_groupe01');
$(' a[href^="/u"] span[style="color:#00FFFF"]').closest('.postprofile dl dt').after('<img src="LIEN IMAGE FONDATEUR"style="cursor:pointer;"title="fondateur du forum"/>');
});

//POUR LES ADMINS
$(function(){
$(' a[href^="/u"] span[style="color:#FF2929"]').closest('.post').addClass('M14_groupe02');
$(' a[href^="/u"] span[style="color:#FF2929"]').closest('.postprofile dl dt').after('<img src="LIEN IMAGE ADMIN"style="cursor:pointer;"title="Administrateur du forum"/>');
});

//POUR LES CO-ADMINS
$(function(){
$(' a[href^="/u"] span[style="color:#FFA500"]').closest('.post').addClass('M14_groupe03');
$(' a[href^="/u"] span[style="color:#FFA500"]').closest('.postprofile dl dt').after('<img src="LIEN IMAGE CO-ADMINS"style="cursor:pointer;"title="Co-Administrateur du forum"/>');
});

//POUR LES MODERATEURS
$(function(){
$(' a[href^="/u"] span[style="color:#0D66FF"]').closest('.post').addClass('M14_groupe04');
$(' a[href^="/u"] span[style="color:#0D66FF"]').closest('.postprofile dl dt').after('<img src="LIEN IMAGE MODERATEURS"style="cursor:pointer;"title="Modérateur du forum"/>');
});






a++

Milouze14
+ Hyperactif +

Masculin
Messages : 4628
Inscrit(e) le : 18/04/2005

http://www.milouze14.com/
Milouze14 a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Mettre un effet de couleur dégradé sur un groupe

Message par Solid6Snake le Dim 31 Juil 2016 - 11:16

Merci merci je met en résolu thumright

Solid6Snake
****

Messages : 317
Inscrit(e) le : 07/11/2013

http://www.entraide-youtubers.com/
Solid6Snake 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