Couleur spécifique (Titre des notes et annonces)

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

Résolu Couleur spécifique (Titre des notes et annonces)

Message par Invité le Mar 5 Mai 2015 - 17:54

Détails techniques


Version du forum : phpBB2
Poste occupé : Fondateur
Navigateur(s) concerné(s) : Mozilla Firefox
Personnes concernées par le problème : Tous les utilisateurs
Lien du forum : http://homesweethome.forumperso.com

Description du problème

Bonjour,

J'aimerais voir les titres des notes et annonces s'afficher automatiquement d'une couleur spécifique. Toujours la même (en blanc par exemple).

Et ce, parce que de un, la couleur que je désire ne fait pas partie du choix de couleur quand on active l'option "Couleur des titres des sujets". Et de deux, parce que je ne veux tout simplement pas donner accès à cette option.

Est-ce possible ?

Merci ! Cool



Dernière édition par Dopamine le Mar 5 Mai 2015 - 19:39, édité 1 fois

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Couleur spécifique (Titre des notes et annonces)

Message par MlleAlys le Mar 5 Mai 2015 - 18:23

Bonjour ^^

On va adapter le code du tutoriel sur la colorisation des lignes annonce et notes pour changer la couleur du titre plutôt que la couleur du fond : Le principe du code est de repérer les images correspondant aux annonces et notes, et d'ajouter une class à la ligne qui contient cette image. Cela permet ensuite de modifier ce qui se trouve sur cette ligne via le css ^^
  • Allez dans modules > javascripts
  • vérifiez que la gestion des javascript est bien activée
  • créez un nouveau code
  • donnez lui un titre ("couleur annonces et notes" par exemple ^^)
  • activez le javascript sur les sous-forums
  • collez le code suivant dans la zone de saisie :
    Code:
    $(function() {
    $('img[src="URL IMAGE ANNONCE"]').closest('tr').addClass('annonce');
    $('img[src="URL IMAGE NOTE"]').closest('tr').addClass('note');
    });
  • remplacez URL IMAGE ANNONCE et URL IMAGE NOTE par les url des images correspondant à une annonce et à une note.
    Explication du code :
    • Le code recherche une image sur la page en fonction de son url avec $('img[src="URL IMAGE ANNONCE"]'), ici donc l'image d'une annonce.
    • Puis il cherche la balise <tr> la plus proche (qui correspond à une ligne de tableau) avec .closest('tr') , ici c'est donc la ligne qui contient l'image de l'annonce.
    • Puis il ajoute la class "annonce" à cette ligne avec .addClass('annonce')
    • Puis le point-virgule lui dit "fin", et la ligne suivante il recommence avec l'image des notes, etc ^^
  • enregistrez le javascript

=> Il n'y a aucun changement visible sur le forum, mais normalement les lignes des annonces et des notes ont maintenant une class supplémentaire en fonction de leur statut ^^

Il ne reste donc plus qu'à appliquer la couleur voulue au titres sur les lignes qui ont de class annonce et note :
Dans affichage > couleurs > feuille de style css, ajoutez le code suivant :
Code:
tr.annonce a.topictitle, tr.note a.topictitle {
  color: white;
}


Dernière édition par MlleAlys le Mar 5 Mai 2015 - 18:38, édité 5 fois

MlleAlys
+ Hyperactif +

Messages : 4407
Inscrit(e) le : 12/09/2012

MlleAlys a été remercié(e) par l'auteur de ce sujet.
  • 0

Résolu Re: Couleur spécifique (Titre des notes et annonces)

Message par Milouze14 le Mar 5 Mai 2015 - 18:29

Salut Dopamine,

tu peux via un script obtenir ce que tu recherches:

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

Mettre un titre explicite.

Cocher sur les sous-forums

Déposes ceci:
Code:

$(function(){
//Les annonces globales
$('div.topictitle strong:contains("Annonce globale:")').closest('tr').attr('id','M14_Annonce_Glob');
//Les annonces
$('div.topictitle strong:contains("Annonce:")').closest('tr').attr('id','M14_Annonce');
//Les notes
$('div.topictitle strong:contains("Note:")').closest('tr').attr('id','M14_Note');
});


Penses à cliquer sur le bouton

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

Déposes ceci et change les couleurs


Code:

/*Les annonces globales*/
#M14_Annonce_Glob h2.topic-title a.topictitle
{
color:green;
text-decoration:none !important;
}
/*Les annonces*/
#M14_Annonce h2.topic-title a.topictitle
{
color:blue;
text-decoration:none !important;
}
/*Les notes*/
#M14_Note h2.topic-title a.topictitle
{
color:red;
text-decoration:none !important;
}




Penses à cliquer sur le bouton


Edit: désolé MlleAlys 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: Couleur spécifique (Titre des notes et annonces)

Message par Invité le Mar 5 Mai 2015 - 19:39

Un Gros Merci à vous deux. Tout est nickel comme vous dites chez vous. Very Happy

Sujet résolu

Invité
Invité


Invité 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