Fond de message différent pour le staff (dégradé)

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

  • 0

Tutoriel Fond de message différent pour le staff (dégradé)

Message par Threax le Mar 10 Juil 2012 - 17:18

Dégradé de message par rapport aux groupes (Phpbb3)
Version phpBB2 dans le message suivant

Bonjour,
Voici une explication pour réaliser un dégradé sur les messages, par rapport au staff, ou aux membres d'un certain groupe, comme sur le FdF.

En premier lieu, on va éditer ou créer le rang auquel vous voulez associer le dégradé de couleur, en nous rendant ici:
Panneau d'administration Utilisateurs & groupes Rangs Administration des Rangs

Cliquez ensuite sur le bouton edit d'un rang ou sur "Ajouter un nouveau rang".
Dans la case "Titre du rang:", on y insère ce code:
Code:
<span class="Administrateur">Administrateur</span>
Vous pouvez personnaliser le nom de la "class" par ce que vous souhaitez, en faisant bien attention de le remplacer également dans la suite du tutoriel

Pour associer la couleur à un groupe complet, il vous faudra assigner le rang à tout les membres du groupe souhaité

Ensuite, on va insérer le code Javascript nécessaire pour afficher le dégradé. Rendez-vous donc ici:
Panneau d'administration Modules HTML & JAVASCRIPT Gestion des codes Javascript

Vérifiez que "Activer la gestion des codes Javascript :" est coché "oui" et cliquez sur :enreg: .

Ensuite, cliquez sur le bouton " ajout Créer un nouveau Javascript".
Pour le titre, on peut par exemple mettre pour s'y retrouver "Dégradé Administrateur".
Puis dans "Placement", cochez seulement la case "Sur les sujets".
Insérez ensuite dans le code, le Javascript suivant:
Code:
$(function() {
$('.Administrateur').parent().parent().parent().parent().parent().addClass('AdministrateurDegrade');
});

Validez.

Dernière étape, le dégradé.
Allez sur cette page:
Panneau d'administration Affichage Images et couleurs Couleurs Feuille de style CSS

Rajoutez ce code dans la case:
Code:
div .AdministrateurDegrade {
  background-image: url("lien_du_degradé");
  background-position: bottom right;
}

Dans le code, le "bottom right" indique que le dégradé se placera dans le coin droit, en bas.
Remplacez maintenant "lien_du_dégradé" par l'url de votre dégradé, qui doit être de taille 1428*461 pixels.

Un grand nombre de dégradé pour Phpbb 3 est disponible dans le libre service, en cliquant ici.

avatar

Threax
+ Hyperactif +

Masculin
Messages : 17277
Inscrit(e) le : 27/08/2005

http://lesforumsde.forumactif.com
Threax a été remercié(e) par l'auteur de ce sujet.

Tutoriel Re: Fond de message différent pour le staff (dégradé)

Message par Threax le Mar 10 Juil 2012 - 17:19

Dégradé de message par rapport aux groupes (Phpbb2)

Bonjour,
Voici une explication pour réaliser un dégradé sur les messages, par rapport au staff, ou aux membres d'un certain groupe, presque comme sur le FdF.

En premier lieu, on va éditer ou créer le rang auquel vous voulez associer le dégradé de couleur, en nous rendant ici:
Panneau d'administration Utilisateurs & groupes Rangs Administration des Rangs

Cliquez ensuite sur le bouton edit d'un rang ou sur "Ajouter un nouveau rang".
Dans la case "Titre du rang:", on y insère ce code:
Code:
<span class="Administrateur">Administrateur</span>
Vous pouvez personnaliser le nom de la "class" par ce que vous souhaitez, en faisant bien attention de le remplacer également dans la suite du tutoriel.
Vous pouvez modifier autant de rangs que vous le souhaitez, comme faire de même avec les modérateurs, ou les graphistes, mais en ne mettant pas d'accents dans les "class".


Pour associer la couleur à un groupe complet, il vous faudra assigner le rang à tout les membres du groupe souhaité

Ensuite, on va insérer le code Javascript nécessaire pour afficher le dégradé. Rendez-vous donc ici:
Panneau d'administration Modules HTML & JAVASCRIPT Gestion des codes Javascript

Vérifiez que "Activer la gestion des codes Javascript :" est coché "oui" et cliquez sur :enreg: .

Ensuite, cliquez sur le bouton " ajout Créer un nouveau Javascript".
Pour le titre, on peut par exemple mettre pour s'y retrouver "Dégradé Administrateur".
Puis dans "Placement", cochez seulement la case "Sur les sujets".
Insérez ensuite dans le code, le Javascript suivant:
Code:
$(function() {
$('.Administrateur').parent().parent().parent().addClass('bgAdministrateur');
});

Validez.

Pour ajouter d'autres dégradés à d'autres rangs/groupes, rajouter les a la ligne comme ceci:
Code:
$(function() {
$('.Administrateur').parent().parent().parent().addClass('bgAdministrateur');
$('.Moderateur').parent().parent().parent().addClass('bgModerateur');
$('.Graphiste').parent().parent().parent().addClass('bgGraphiste');
});

Dernière étape, le dégradé.
Allez sur cette page:
Panneau d'administration Affichage Images et couleurs Couleurs Feuille de style CSS

Rajoutez ce code dans la case:
Code:
.bgAdministrateur td.row1 {
background-image: url('Lien du dégradé') !important;
background-position: bottom;
background-repeat: repeat-x;
}
.bgAdministrateur td.row2 {
background-image: url('Lien du dégradé') !important;
background-position: bottom;
background-repeat: repeat-x;
}

Ajoutez ce code autant de fois que vous avez modifié de rangs, en n'oubliant pas de changer le lien du dégradé pour en mettre un différent à chaque fois.
Code:
.bgAdministrateur td.row1 {
background-image: url('Lien du dégradé 1') !important;
background-position: bottom;
background-repeat: repeat-x;
}
.bgAdministrateur td.row2 {
background-image: url('Lien du dégradé 1') !important;
background-position: bottom;
background-repeat: repeat-x;
}

.bgModerateur td.row1 {
background-image: url('Lien du dégradé 2') !important;
background-position: bottom;
background-repeat: repeat-x;
}
.bgModerateur td.row2 {
background-image: url('Lien du dégradé 2') !important;
background-position: bottom;
background-repeat: repeat-x;
}

.bgGraphiste td.row1 {
background-image: url('Lien du dégradé 3') !important;
background-position: bottom;
background-repeat: repeat-x;
}
.bgGraphiste td.row2 {
background-image: url('Lien du dégradé 3') !important;
background-position: bottom;
background-repeat: repeat-x;
}

Dans le code, le "bottom" indique que le dégradé se placera en bas.
Remplacez maintenant "Lien du dégradé #" par l'url de votre dégradé, qui doit faire 461 pixels de hauteur.

Un grand nombre de dégradé pour Phpbb 2 est disponible dans le libre service de la section graphique !

avatar

Threax
+ Hyperactif +

Masculin
Messages : 17277
Inscrit(e) le : 27/08/2005

http://lesforumsde.forumactif.com
Threax 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