The forum of the forums
Welcome to the Official Support Forum of Forumotion!

To take full advantage of everything offered by our forum, please log in if you are already a member, or join our community if you've not yet.



Create a free forum like this one.

Colorize the backgrounds of stickies and announcements

View previous topic View next topic Go down

Colorize the backgrounds of stickies and announcements

Post by Ange Tuteur on 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="http://url_image_annonce.jpg"]').closest('tr').addClass('annonce');
  /* add a class to the cells of stickies */
  $('img[src="http://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*='http://url_image_annonce.jpg']").addClass("annonce");
  /* add a class to the cells of stickies */
  $("dl.icon[style*='http://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 :
- http://url_image_annonce.jpg : The image URL used for announcements
- http://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 , 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="http://r24.imgfast.net/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*='http://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


Ange Tuteur
Forumaster

Male Posts : 13021
Reputation : 2683
Language : EN10, FR5
Location : Pennsylvania

http://fmdesign.forumotion.com

Back to top Go down

View previous topic View next topic Back to top


 
Permissions in this forum:
You cannot reply to topics in this forum