The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.

Colorize the backgrounds of stickies and announcements

2 posters

Go down

Tutorial Colorize the backgrounds of stickies and announcements

Post 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.

Colorize the backgrounds of stickies and announcements Captur19

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


Colorize the backgrounds of stickies and announcements 09615110 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


Colorize the backgrounds of stickies and announcements 09615110 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..


Colorize the backgrounds of stickies and announcements 09615110 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, 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

Ange Tuteur
Ange Tuteur
Forumaster

Male Posts : 13207
Reputation : 3000
Language : English & 日本語
Location : Pennsylvania

https://fmdesign.forumotion.com

TonnyKamper and trajce like this post

Back to top Go down

Tutorial Re: Colorize the backgrounds of stickies and announcements

Post by skouliki March 13th 2022, 2:00 pm

This code was updated to fit in with the new HTTPS address 

updated 13.03.2022 by skouliki
skouliki
skouliki
Manager
Manager

Female Posts : 15404
Reputation : 1709
Language : English,Greek
Location : Greece

http://iconskouliki.forumgreek.com

TonnyKamper likes this post

Back to top Go down

Back to top

- Similar topics

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