[Tutorial] Add message before the first post

Add a message before the first post for specific forums


Create a new JavaScript set only for topics:

Code:

/*
 *  Application: Add message before the first post
 *  Date: 22/05/2018
 *  Version: 1.022052018
 *  Copyright (c) 2018 Daemon <help.forumotion.com>
 *  This work is free. You can redistribute it and/or modify it
 */
$(function() {
 
    /*
    * forumID -> Enter the forum id that will display the message
    * You can add the same text to multiple forums using an array "[1, 2, 3]"
    * Or just for a forum by adding just the ID
    * icon -> Choose the fontawesome icon that will appear at the beginning of the message.
    * You can choose an icon from the following webpage: https://www.w3schools.com/icons/fontawesome_icons_webapp.asp
    * text -> Text to be displayed
    * bgColor -> Message background color (Only hex colors)
    * borderColor -> Message border color (Only hex colors)
    * fontColor -> Message text color (Only hex colors)
    */

    var config = [
        // Note: Add a comma at the end of each new entry
        {
            forumID: [1, 2],
            icon: 'fa fa-exclamation-circle',
            text: 'Make a constructive comment',
            bgColor: '#c52e1f',
            borderColor: '#b52c1e',
            fontColor: '#ffffff'
        },
        {
            forumID: 3,
            icon: 'fa fa-exclamation-triangle',
            text: 'Be careful what you comment on here',
            bgColor: '#ecff83',
            borderColor: '#daef67',
            fontColor: '#7e8a3b'
        }
        // Note: Do not add a comma at the end of the last entry
    ];
    var forumID = parseInt($("a[href*='mode=newtopic']").attr("href").match(/\d+/g)[0]),
        el = null,
        validateColors = function(a, b, c) {
            if (!/#([a-fA-F0-9]{3}){1,2}\b/.test(a, b, c)) throw new RangeError("Use only hexadecimal colors");
        };
    $.each(config, function(idx, item) {
        if ($.isArray(item.forumID) && $.inArray(forumID, item.forumID) !== -1 || item.forumID === forumID) {
 
            // Default settings
            var icon = 'fa fa-exclamation',
                text = '',
                bgColor = '#f3f3f3',
                borderColor = '#dddddd',
                fontColor = '#333333';
 
            $("head").append(
            '<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">' +
            '<style type="text/css">' +
            '.message-box {' +
            '    background-color: #fff;' +
            '    border: 1px solid #fff;' +
            '    padding: 13px;' +
            '    border-radius: 3px;' +
            '    -moz-border-radius: 3px;' +
            '    -webkit-border-radius: 3px;' +
            '    font-size: 15px;' +
            '    font-family: open sans,helvetica neue,Helvetica,Arial,sans-serif;' +
            '    font-weight: normal;' +
            '}' +
            '</style>'
            );
 
            icon = item.icon ? item.icon : icon,
            text = item.text ? item.text : text,
            bgColor = item.bgColor ? item.bgColor : bgColor,
            borderColor = item.borderColor ? item.borderColor : borderColor,
            fontColor = item.fontColor ? item.fontColor : fontColor;
 
            // Validate colors
            validateColors(bgColor, borderColor, fontColor);
 
            el = $("<div>", {
                class: 'message-box',
                style: 'background-color:' + bgColor + ';border-color:' + borderColor + ';color:' + fontColor,
            }).html("<i class='" + icon + "'></i> " + text);
            $(el).insertBefore(".post:first");
        }
    });
});

You can add the same text to multiple forums using an array "[3, 27, 48]", or just for a forum by adding just the ID.


All instructions are in code.
Access the following link to view examples of fontawesome icons: https://www.w3schools.com/icons/fontawesome_icons_webapp.asp

tested in phpbb3 and woking just fine

Not bad, this will be like a warning box to reminder the forum rules.
Good job