Vérifiez vos informations

Il semblerait que les informations techniques de votre profil n'aient pas été actualisées depuis un certain temps... Pour que l'aide apportée vous soit efficace, il est important que ces informations soient à jour : prenez quelques secondes pour confirmer ou compléter les informations suivantes.


Lien de votre forum
Version de ce forum
Vous êtes le fondateur de ce forum
Vous avez modifié le CSS de ce forum
Vous avez modifié les templates de ce forum
Votre navigateur

Coloriser les cases des note et des annonces

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

  • 0

Astuce Coloriser les cases des note et des annonces

Message par Matriochka le Dim 17 Mar 2013 - 19:30

Coloriser les cases des Note et des annonces

Le tutoriel qui suit vous permettra d’intégrer une couleur spécifique aux cellules contenant des Note et des annonces sur votre forum Forumactif. Cette astuce mettra donc en valeur les messages importants dans vos sous-forums.

Installation du Javascript

Panneau d'administration  Modules  HTML & JAVASCRIPT - Gestion des codes Javascript

Assurez-vous que la gestion des codes Javascript est activée, puis créez un nouveau javascript ayant pour titre "Coloriser les cases" et pour placement "Sous-forums".

Insérez-y le code suivant, en fonction de la version de votre forum :

phpBB2, punBB et Invision :
Code:
$(function() {
/* Ajoute une class à la cellule des annonces */
$('img[src="http://url_image_annonce.jpg"]').closest('tr').addClass('annonce');
/* Ajoute une class à la cellule des Note*/
$('img[src="http://url_image_Note.jpg"]').closest('tr').addClass('Note');
});

phpBB3, ModernBB :
Code:
$(function() {
/* Ajoute une class à la cellule des annonces */
$("dl.icon[style*='http://url_image_annonce.jpg']").addClass("annonce");
/* Ajoute une class à la cellule des Note */
$("dl.icon[style*='http://url_image_Note.jpg']").addClass("Note");
});

AwesomeBB :
Code:
$(function() {
    /* Ajoute une class à la cellule des annonces */
    $('div.posts-icon.folder_announce').closest('.posts-section').addClass('CAF_annonce');
    /* Ajoute une class à la cellule des notes */
    $('div.posts-icon.folder_sticky').closest('.posts-section').addClass('CAF_note');
});

Modifications à apporter :
Dans les deux premiers scripts, remplacez les URL des images par celles que vous utilisez sur votre thème :
- http://url_image_annonce.jpg : l’URL de l’image utilisée pour les annonces
- http://url_image_Note.jpg : l’URL de l’image utilisée pour les Note

Installation du CSS

Panneau d'administration  Affichage  Couleurs - Feuille de style CSS

Insérez ce code dans votre feuille de style personnalisé en fonction de la version de votre forum :

phpBB2, punBB et Invision :
Code:
tr.annonce td {background-color:#COLOR!important;} /* Modifie la couleur de fond des annonces */
tr.Note td {background-color:#COLOR!important;} /* Modifie la couleur de fond des Note */

phpBB3, ModernBB :
Code:
dl.annonce {background-color:#COLOR;} /* Modifie la couleur de fond des annonces */
dl.Note {background-color:#COLOR;} /* Modifie la couleur de fond des Note */

AwesomeBB :
Code:
div.CAF_annonce {background-color:#COLOR;} /* Modifie la couleur de fond des annonces */
div.CAF_note {background-color:#COLOR;} /* Modifie la couleur de fond des notes */

.forum-description h3, .posts-description h3, .block-topics h2 {
    white-space: normal;
    padding-right: 0 !important;
}
.forum-description h3::after, .posts-description h3::after, .block-topics h2::after {
    content: none;
}

Modifications à apporter :
Remplacez #COLOR par le code couleur de votre choix.

Note :
Si vous maîtrisez le langage CSS, vous pouvez parfaitement appliquer plus de style sur les cellules des annonces et des Note : une couleur pour l’écriture, une police d’écriture particulière, etc.
- Pour plus d’informations, consultez le tutoriel suivant : Le CSS, comment ça marche ?



Complément : icône de sujets, annonces globales, etc.
Si le tutoriel ci-dessus se concentre principalement sur la personnalisation des cellules liées aux annonces et aux Note, vous pouvez parfaitement l’appliquer aux autre cellules de votre forum en modifiant simplement le script de base. Vous pouvez par exemple l’appliquer aux annonces globales en utilisant l’URL de l’image liée aux annonces globales, ou encore aux icônes de sujets, en utilisant les URL des images utilisées pour vos diverses icônes.

Explications :
Dans le script, on modifie simplement l’URL de l’image, ainsi que la class ajoutée ici : addClass("resolu"); (qui passe donc de "annonce" ou "Note" à "resolu"). Si vous ne modifiez pas cette class, le script ne pourra fonctionner.

N’hésitez pas, soyez créatif ! Wink
avatar

Matriochka
Membre actif

Messages : 7604
Inscrit(e) le : 14/07/2010

Matriochka 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