Colorize the backgrounds of stickies and announcements

by Ange Tuteur January 29th 2016, 4:42 pm

Colorize the backgrounds of stickies and announcements

The following tutorial will allow you to display a specific color for stickies and announcements on your Forumotion forum. This way important messages will be highlighted in your sub-forums.

This tutorial is applicable to the following forum versions : phpbb2, phpbb3, punbb, and invision

Before making any changes, make sure that your forum meets the following conditions :
- JavaScript codes management is activated

1. The JavaScript

The first step of this tutorial is to install the JavaScript on your board. This will allow us to add a class to the cells containing the sticky and announcement images. Go to Admin Panel > Modules > JavaScript codes management and create a new script with the following settings.

Placement : In the sub-forums

If you're using phpbb2, punbb, or invision paste this code :

Code:: $(function() { /* add a class to the cells of announcements */ $('img[src="https://url_image_annonce.jpg"]').closest('tr').addClass('annonce'); /* add a class to the cells of stickies */ $('img[src="https://url_image_Note.jpg"]').closest('tr').addClass('Note'); });

otherwise paste this code for phpbb3 :

Code:: $(function() { /* add a class to the cells of announcements */ $("dl.icon[style*='https://url_image_annonce.jpg']").addClass("annonce"); /* add a class to the cells of stickies */ $("dl.icon[style*='https://url_image_Note.jpg']").addClass("Note"); });

Modifications :
In both scripts, make sure to change the image URLs with the ones you use on your theme :
- https://url_image_annonce.jpg : The image URL used for announcements
- https://url_image_Note.jpg : The image URL used for stickies

When you're finished make sure to save the script. Wink

2. The CSS

Now that the script is installed, a class will be added to the cells of stickies and announcements. We will use these classes to apply a style to them. Go to Admin Panel > Display > Colors > CSS stylesheet and paste the code that corresponds to your forum version.

phpBB2, punBB and Invision :

Code:: tr.annonce td {background-color:#COLOR!important;} /* modify the background color of announcements */ tr.Note td {background-color:#COLOR!important;} /* modify the background color of stickies */

phpBB3 :

Code:: dl.annonce {background-color:#COLOR!important;} /* modify the background color of announcements */ dl.Note {background-color:#COLOR!important;} /* modify the background color of stickies */

Modifications :
For both versions, replace #COLOR with the color code of your choice.
- tool : http://www.colorpicker.com/

Note :
If you are familiar with CSS, you can apply a more perfect style on stickies and announcements, such as a specific font color, a different typeface, etc..

Extra : topic icons, global announcements, etc..

The tutorial above is mainly focused on changing the background color of stickies and announcements, you can apply this to different cells in your forum by modifying the base script. For example you can apply it to global announcements using the URL of the image associated with global announcements, or to topics icons, using the URL of the images used for your various icons.

For example, if we want to add a color for cells containing the icon Colorize the backgrounds of stickies and announcements 505812

Colorize the backgrounds of stickies and announcements 505812

, simply use the script and CSS below :

phpBB2, punBB and Invision :

Code:: $(function() { /* add a class to topics with the icon Résolu */ $('img[src="https://forum.forumactif.com/users/2913/10/00/00/smiles/505812.png"]').closest('tr').addClass('resolu'); });

phpbb3 :

Code:: $(function() { /* add a class to topics with the icon Résolu */ $("dd.dterm[style*='https://forum.forumactif.com/users/2913/10/00/00/smiles/505812.png']").closest("dl.icon").addClass("resolu"); });

phpBB2, punBB and Invision :

Code:: tr.resolu td {background-color:#COLOR!important;} /* modify the background color */

phpbb3 :

Code:: dl.resolu {background-color:#COLOR;} /* modify the background color */

Explanation :
In the script, we simply change the URL of the image, and the class added here : addClass("resolu"); ( thus changes from "annonce" or "Note" to "resolu" ). If you do not change this class, the script will not work correctly.

Don't hesitate, be creative ! Wink