What I want to do is make a JavaScript code in the JavaScript code management area thingy. What I want the code to do, is to set a certain warning message on the top of the page* that displays a custom text message in a red box.

*What I mean by top of the page:
The box would go where the red box is currently surrounding in the image below



This is what the notification box would look like:

Hello ThePhantomHourglass,

The announcements should already show on all the pages. What exactly would you like the code to do ?

Ange Tuteur wrote:Hello ThePhantomHourglass,

The announcements should already show on all the pages. What exactly would you like the code to do ?

For it to do the same but with that box. I'll have Announcements disabled and I'll change the announcement text via the code.

Okay, try this :
* tick in all the pages

Code:

$(function() {
    var message = 'Message content';
    $('#pun-head').after('<div class="module main"><div class="main-content clearfix">'+message+'</div></div>')
});

Ange Tuteur wrote:Okay, try this :
* tick in all the pages

Code:

$(function() {
    var message = 'Message content';
    $('#pun-head').after('<div class="module main"><div class="main-content clearfix">'+message+'</div></div>')
});

Awesome, thanks! It works. One last thing, how would I get the text to be centered, colored white, size 16px font, and the box to be red (#FF0000) with a black border?

Try this :

Code:

$(function() {
    var settings = {
        message : 'Message content',
        style : 'text-align:center;color:white;font-size:16px;font-weight:bold;border:2px solid black;',
        innerstyle : 'background:red;border:none;'
    };
    
    $('#pun-head').after('<div class="module main" style="'+settings["style"]+'"><div class="main-content clearfix" style="'+settings["innerstyle"]+'">'+settings["message"]+'</div></div>');
    
});

I've added some settings to edit the box style. You can also use HTML in the message content.

Ange Tuteur wrote:Try this :

Code:

$(function() {
    var settings = {
        message : 'Message content',
        style : 'text-align:center;color:white;font-size:16px;font-weight:bold;border:2px solid black;',
        innerstyle : 'background:red;border:none;'
    };
    
    $('#pun-head').after('<div class="module main" style="'+settings["style"]+'"><div class="main-content clearfix" style="'+settings["innerstyle"]+'">'+settings["message"]+'</div></div>');
    
});

I've added some settings to edit the box style. You can also use HTML in the message content.

It works! Thank you very much for helping me.

You're welcome

Topic solved and archived