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 cells when a new message is posted

View previous topic View next topic Go down

Colorize the cells when a new message is posted

Post by Ange Tuteur on October 10th 2014, 7:40 am

Colourize the cells when a new message is posted


The following tutorial will allow you to colourize the cells of your Forumotion forum when a new is message posted. Below you will find an example with phpbb3 :


Installing

Go to Administration Panel > Modules > JavaScript Codes Management and create a new script.

Title : Your choice
Placement : In the homepage
Paste the script below which corresponds to your forum version :

phpbb3 :
Code:
$(function() {
  $('dl.icon[style*="http://illiweb.com/fa/empty.gif"]').addClass('newpost');
  $('dl.icon[style*="http://illiweb.com/fa/empty.gif"]').addClass('newpost');
});

phpbb2, punbb, and invision :
Code:
$(function() {
  $('img[src="http://illiweb.com/fa/empty.gif"]').closest('tr').addClass('newpost');
  $('img[src="http://illiweb.com/fa/empty.gif"]').closest('tr').addClass('newpost');
});

Modifications :
Replace http://illiweb.com/fa/empty.gif by the URL of your image which indicates a new message. Attention ! The script has two similar lines, because you need to include the new message image for categories and forums. When finished making modifications, save and submit your script.


Modifying the CSS

Once the script is installed, you only need to customize the CSS in order to apply color to the cells when new messages are posted. Go to Administration Panel > Display > Colors > CSS stylesheet and paste the code which corresponds to your forum version.

phpbb3 :
Code:
dl.newpost { background-color:#COLOR !important }

phpbb2, punbb, and invision :
Code:
tr.newpost td { background-color:#COLOR !important }

Modifications :
For both versions, replace #COLOR by the color code of your choice.
- Help : Find a color code

Save your modifications and it's done !  :wouhou:





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