Choose from our various pricing plans. There is a package for everyone!


Add color to Global A - Announcement - Sticky with jQuery

View previous topic View next topic Go down

Tutorial Add color to Global A - Announcement - Sticky with jQuery

Post by Mati™ on Tue May 08, 2012 2:13 pm

Hi, All

In this tutorial I will show you guys how to change color of the text for Global A - Announcement and Sticky with jQuery.

Step 1. Administration Panel => Modules => HTML & JAVASCRIPT => Javascript codes management => Create a new javascript ---> name it whatever you want and mark it In all the pages.

Here is the code for PhpBB3 Forum Version!
Code:
$(document).ready(function() {
$('dd.dterm strong:contains("Sticky")').each(function(){
$(this).css({ "color": "blue"});
});
});

$(document).ready(function() {
$('dd.dterm strong:contains("Announcement")').each(function(){
$(this).css({ 'color': 'red'});
});
});

$(document).ready(function() {
$('dd.dterm strong:contains("Global announcement")').each(function(){
$(this).css({ 'color': 'green'});
});
});

Here is the code for PunBB Forum Version!
Code:
$(document).ready(function() {
 $('.tcl strong:contains("Sticky")').each(function(){
$(this).css({ 'color': 'blue'});
});
});

$(document).ready(function() {
 $('.tcl strong:contains("Announcement")').each(function(){
$(this).css({ 'color': 'red'});
});
});

$(document).ready(function() {
$('.tcl strong:contains("Global announcement")').each(function(){
$(this).css({ 'color': 'green'});
});
});

Here is the code for PhpBB2 Forum Version!
Code:
$(document).ready(function() {
$('strong:contains("Sticky")').each(function(){
$(this).css({ "color": "blue"});
});
});

$(document).ready(function() {
$('strong:contains("Announcement")').each(function(){
$(this).css({ 'color': 'red'});
});
});

$(document).ready(function() {
$('strong:contains("Global announcement")').each(function(){
$(this).css({ 'color': 'green'});
});
});

Here is the code for Invision Forum Version!
Code:
$(document).ready(function() {
$('strong:contains("Sticky")').each(function(){
$(this).css({ "color": "blue"});
});
});

$(document).ready(function() {
$('strong:contains("Announcement")').each(function(){
$(this).css({ 'color': 'red'});
});
});

$(document).ready(function() {
$('strong:contains("Global announcement")').each(function(){
$(this).css({ 'color': 'green'});
});
});

Thats it!
You can also add background color and make it looks more cool. Smile


Last edited by Mati™ on Sat Nov 15, 2014 2:06 am; edited 2 times in total
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Tutorial Re: Add color to Global A - Announcement - Sticky with jQuery

Post by ChauSy on Sat Jul 06, 2013 5:06 pm

A demo?
avatar
ChauSy
Member
Member

Age : 18
Posts : 20
Join date : 2013-06-17
Forum Version : PhpBB3
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: Add color to Global A - Announcement - Sticky with jQuery

Post by unleashed on Sat Aug 24, 2013 5:57 am

ohh this is nice what am looking for

Thanks for this tut
avatar
unleashed
Member
Member

Age : 31
Posts : 22
Join date : 2013-08-24
Forum Version : PhpBB3
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: Add color to Global A - Announcement - Sticky with jQuery

Post by ChauSy on Fri Sep 06, 2013 2:36 pm

How to add rounded corners?
avatar
ChauSy
Member
Member

Age : 18
Posts : 20
Join date : 2013-06-17
Forum Version : PhpBB3
Reputation : 0

View user profile

Back to top Go down

Tutorial Re: Add color to Global A - Announcement - Sticky with jQuery

Post by Stallmp on Sun Jan 26, 2014 1:07 pm

Is it also possible to change the background color instead of just the text?
avatar
Stallmp
Member
Member

Age : 23
Posts : 227
Join date : 2014-01-10
Forum Version : PunBB
Reputation : 15

View user profile

Back to top Go down

Tutorial Re: Add color to Global A - Announcement - Sticky with jQuery

Post by Dark-Avenger on Fri Feb 07, 2014 8:39 pm

Hi all,
Its not working on phpbb2
avatar
Dark-Avenger
Member
Member

Age : 42
Posts : 25
Join date : 2013-12-21
Forum Version : PunBB
Reputation : 1

View user profile

Back to top Go down

Tutorial Re: Add color to Global A - Announcement - Sticky with jQuery

Post by Stallmp on Sat Feb 08, 2014 4:44 pm

@Dark-Avenger wrote:Hi all,
Its not working on phpbb2

Are you sure you used the right code?

Code:
$(document).ready(function() {
 $('.tcl strong:contains("Sticky")').each(function(){
$(this).css({ 'color': 'blue'});
});
});

$(document).ready(function() {
 $('.tcl strong:contains("Announcement")').each(function(){
$(this).css({ 'color': 'red'});
});
});

$(document).ready(function() {
$('.tcl strong:contains("Global announcement")').each(function(){
$(this).css({ 'color': 'green'});
});
});
avatar
Stallmp
Member
Member

Age : 23
Posts : 227
Join date : 2014-01-10
Forum Version : PunBB
Reputation : 15

View user profile

Back to top Go down

Tutorial Re: Add color to Global A - Announcement - Sticky with jQuery

Post by Dark-Avenger on Sat Feb 08, 2014 5:09 pm

@Stallmp wrote:
@Dark-Avenger wrote:Hi all,
Its not working on phpbb2

Are you sure you used the right code?

Code:
$(document).ready(function() {
 $('.tcl strong:contains("Sticky")').each(function(){
$(this).css({ 'color': 'blue'});
});
});

$(document).ready(function() {
 $('.tcl strong:contains("Announcement")').each(function(){
$(this).css({ 'color': 'red'});
});
});

$(document).ready(function() {
$('.tcl strong:contains("Global announcement")').each(function(){
$(this).css({ 'color': 'green'});
});
});
Hi all,
Its still not working as you can see here http://prntscr.com/2qmx1s

Code:

$(document).ready(function() {
 $('.tcl strong:contains("Καρφιτσωμένο Θέμα")').each(function(){
$(this).css({ 'color': 'blue'});
});
});
$(document).ready(function() {
 $('.tcl strong:contains("Ανακοίνωση")').each(function(){
$(this).css({ 'color': 'red'});
});
});
$(document).ready(function() {
$('.tcl strong:contains("Σημαντική Ανακοίνωση")').each(function(){
$(this).css({ 'color': 'green'});
});
});

The only modification which I was made in my forum is the substitution of english words with the greek words as my forum is in Greek language because I have declare them in Greek language in my ACP.

Best Regards,
Dark-Avenger
avatar
Dark-Avenger
Member
Member

Age : 42
Posts : 25
Join date : 2013-12-21
Forum Version : PunBB
Reputation : 1

View user profile

Back to top Go down

Tutorial Re: Add color to Global A - Announcement - Sticky with jQuery

Post by Stallmp on Sat Feb 08, 2014 7:07 pm

@Dark-Avenger wrote:
@Stallmp wrote:
@Dark-Avenger wrote:Hi all,
Its not working on phpbb2

Are you sure you used the right code?

Code:
$(document).ready(function() {
 $('.tcl strong:contains("Sticky")').each(function(){
$(this).css({ 'color': 'blue'});
});
});

$(document).ready(function() {
 $('.tcl strong:contains("Announcement")').each(function(){
$(this).css({ 'color': 'red'});
});
});

$(document).ready(function() {
$('.tcl strong:contains("Global announcement")').each(function(){
$(this).css({ 'color': 'green'});
});
});
Hi all,
Its still not working as you can see here http://prntscr.com/2qmx1s

Code:

$(document).ready(function() {
 $('.tcl strong:contains("Καρφιτσωμένο Θέμα")').each(function(){
$(this).css({ 'color': 'blue'});
});
});
$(document).ready(function() {
 $('.tcl strong:contains("Ανακοίνωση")').each(function(){
$(this).css({ 'color': 'red'});
});
});
$(document).ready(function() {
$('.tcl strong:contains("Σημαντική Ανακοίνωση")').each(function(){
$(this).css({ 'color': 'green'});
});
});

The only modification which I was made in my forum is the substitution of english words with the greek words as my forum is in Greek language because I have declare them in Greek language in my ACP.

Best Regards,
Dark-Avenger

Then I might know the solution
Go to:
Admin Panel -> General -> Messages and E-mails -> Configuration.

You will see:
Define another name for sticky:
Define another name for announcement:
Define another name for global announcement;

Change that to the name you used in that javascript code
Tell me if it worked Smile
avatar
Stallmp
Member
Member

Age : 23
Posts : 227
Join date : 2014-01-10
Forum Version : PunBB
Reputation : 15

View user profile

Back to top Go down

Tutorial Re: Add color to Global A - Announcement - Sticky with jQuery

Post by Mati™ on Sat Feb 08, 2014 8:52 pm

Guys you can ask in the right section if you face any problem.
Thank you!
avatar
Mati™
Administrator
Administrator

Age : 31
Posts : 2112
Join date : 2011-10-20
Forum Version : PhpBB3
Reputation : 147

View user profile http://fmfocus.forumotion.net/forum

Back to top Go down

Tutorial Re: Add color to Global A - Announcement - Sticky with jQuery

Post by Dark-Avenger on Sun Feb 09, 2014 1:44 am

@Stallmp wrote:
@Dark-Avenger wrote:
@Stallmp wrote:
@Dark-Avenger wrote:Hi all,
Its not working on phpbb2

Are you sure you used the right code?

Code:
$(document).ready(function() {
 $('.tcl strong:contains("Sticky")').each(function(){
$(this).css({ 'color': 'blue'});
});
});

$(document).ready(function() {
 $('.tcl strong:contains("Announcement")').each(function(){
$(this).css({ 'color': 'red'});
});
});

$(document).ready(function() {
$('.tcl strong:contains("Global announcement")').each(function(){
$(this).css({ 'color': 'green'});
});
});
Hi all,
Its still not working as you can see here http://prntscr.com/2qmx1s

Code:

$(document).ready(function() {
 $('.tcl strong:contains("Καρφιτσωμένο Θέμα")').each(function(){
$(this).css({ 'color': 'blue'});
});
});
$(document).ready(function() {
 $('.tcl strong:contains("Ανακοίνωση")').each(function(){
$(this).css({ 'color': 'red'});
});
});
$(document).ready(function() {
$('.tcl strong:contains("Σημαντική Ανακοίνωση")').each(function(){
$(this).css({ 'color': 'green'});
});
});

The only modification which I was made in my forum is the substitution of english words with the greek words as my forum is in Greek language because I have declare them in Greek language in my ACP.

Best Regards,
Dark-Avenger

Then I might know the solution
Go to:
Admin Panel -> General -> Messages and E-mails -> Configuration.

You will see:
Define another name for sticky:
Define another name for announcement:
Define another name for global announcement;

Change that to the name you used in that javascript code
Tell me if it worked Smile
I have the same names in my javascript and at Admin Panel -> General -> Messages and E-mails -> Configuration but it still not working. Furthermore the defined names are in Greek language both.
avatar
Dark-Avenger
Member
Member

Age : 42
Posts : 25
Join date : 2013-12-21
Forum Version : PunBB
Reputation : 1

View user profile

Back to top Go down

Tutorial Re: Add color to Global A - Announcement - Sticky with jQuery

Post by Stallmp on Sun Feb 09, 2014 9:22 am

At the javascript, did you select: In the sub-forums?
avatar
Stallmp
Member
Member

Age : 23
Posts : 227
Join date : 2014-01-10
Forum Version : PunBB
Reputation : 15

View user profile

Back to top Go down

Tutorial Re: Add color to Global A - Announcement - Sticky with jQuery

Post by Dark-Avenger on Sun Feb 09, 2014 1:33 pm

@Stallmp wrote:At the javascript, did you select: In the sub-forums?
Yes of course I was selected.
avatar
Dark-Avenger
Member
Member

Age : 42
Posts : 25
Join date : 2013-12-21
Forum Version : PunBB
Reputation : 1

View user profile

Back to top Go down

Tutorial Re: Add color to Global A - Announcement - Sticky with jQuery

Post by Stallmp on Sun Feb 09, 2014 3:07 pm

Try this at javascript:
Code:
$(document).ready(function() {
$('strong:contains("Sticky")').each(function(){
$(this).css({ "color": "blue"});
});
});

$(document).ready(function() {
$('strong:contains("Announcement")').each(function(){
$(this).css({ 'color': 'red'});
});
});

$(document).ready(function() {
$('strong:contains("Global announcement")').each(function(){
$(this).css({ 'color': 'green'});
});
});
avatar
Stallmp
Member
Member

Age : 23
Posts : 227
Join date : 2014-01-10
Forum Version : PunBB
Reputation : 15

View user profile

Back to top Go down

Tutorial Re: Add color to Global A - Announcement - Sticky with jQuery

Post by Dark-Avenger on Sun Feb 09, 2014 3:59 pm

@Stallmp wrote:Try this at javascript:
Code:
$(document).ready(function() {
$('strong:contains("Sticky")').each(function(){
$(this).css({ "color": "blue"});
});
});

$(document).ready(function() {
$('strong:contains("Announcement")').each(function(){
$(this).css({ 'color': 'red'});
});
});

$(document).ready(function() {
$('strong:contains("Global announcement")').each(function(){
$(this).css({ 'color': 'green'});
});
});
The problem still remains
http://prntscr.com/2qxpw4
avatar
Dark-Avenger
Member
Member

Age : 42
Posts : 25
Join date : 2013-12-21
Forum Version : PunBB
Reputation : 1

View user profile

Back to top Go down

Tutorial Re: Add color to Global A - Announcement - Sticky with jQuery

Post by Stallmp on Sun Feb 09, 2014 5:08 pm

Can you provide me your forum url and an admin account via PM? Then I can also help you with the "Style Announcement, and Sticky" tutorial.
avatar
Stallmp
Member
Member

Age : 23
Posts : 227
Join date : 2014-01-10
Forum Version : PunBB
Reputation : 15

View user profile

Back to top Go down

Tutorial Re: Add color to Global A - Announcement - Sticky with jQuery

Post by aEEk.# on Wed Feb 12, 2014 3:43 pm

Hi all,
Its not working on punBB, can help me?
avatar
aEEk.#
Member
Member

Age : 22
Posts : 4
Join date : 2014-02-12
Forum Version : PunBB
Reputation : 0

View user profile http://aeek.forumulmeu.ro

Back to top Go down

Tutorial Re: Add color to Global A - Announcement - Sticky with jQuery

Post by Stallmp on Thu Feb 13, 2014 3:35 pm

It should work for PunBB. Are you sure you selected: In the sub forums?

Make sure you used this code:
Code:
$(document).ready(function() {
 $('.tcl strong:contains("Sticky")').each(function(){
$(this).css({ 'color': 'blue'});
});
});

$(document).ready(function() {
 $('.tcl strong:contains("Announcement")').each(function(){
$(this).css({ 'color': 'red'});
});
});

$(document).ready(function() {
$('.tcl strong:contains("Global announcement")').each(function(){
$(this).css({ 'color': 'green'});
});
});

Incase you've changed the Sticky, Announcement, Global Announcement label/string/text/input, make sure you specify that in the javascript. For example: At the configuration, you defined another name for Sticky. Then you have to change in the javascript the Sticky to the name you used in that javascript, otherwise the javascript can't detect it.

avatar
Stallmp
Member
Member

Age : 23
Posts : 227
Join date : 2014-01-10
Forum Version : PunBB
Reputation : 15

View user profile

Back to top Go down

Tutorial Re: Add color to Global A - Announcement - Sticky with jQuery

Post by aEEk.# on Thu Feb 13, 2014 6:09 pm

Solved, i changed this:
Code:
$('.tcl strong:contains("Sticky")')
Code:
$('.tcl strong:contains("Announcement")')
Code:
$('.tcl strong:contains("Global Announcement")')
avatar
aEEk.#
Member
Member

Age : 22
Posts : 4
Join date : 2014-02-12
Forum Version : PunBB
Reputation : 0

View user profile http://aeek.forumulmeu.ro

Back to top Go down

Tutorial Re: Add color to Global A - Announcement - Sticky with jQuery

Post by Sponsored content


Sponsored content


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