Skip to content

Fixed background to nodebb forum

Solved Configure
25 2 8.7k 1
  • @phenomlab yea, this is what Im asking,
    Using a skin but maybe modifying one of the color choices

    @Panda the really depends on what you want to do. Are you offering the same skin to everyone, or do you want to have light and dark modes etc?

    If the one skin, then this is simple enough, but you’d need a lot of custom css to make this work.

  • @Panda the really depends on what you want to do. Are you offering the same skin to everyone, or do you want to have light and dark modes etc?

    If the one skin, then this is simple enough, but you’d need a lot of custom css to make this work.

    @phenomlab the background is supposed to be different for every user everytime they reload page
    but its always covered in light yellow color (alpha .86) so background will always be light

    Its just in each skin theres always one text color that is also light

  • Not sure why you are using a before pseudonym element to set the overlay. It’s much more efficient to do it this way (for example)

    body {
        position: relative;
        background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)), url(https://loremflickr.com/500/500/flame);
        min-height: 90%;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
        background-size: cover;
    }
    

    image.png

    The below CSS block should be removed

    body::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 240, 220, 0.85);
        z-index: -100;
    }
    

    z-index: -100; is also overkill - -1 is usually always enough as this places the target element behind everything else.

  • Not sure why you are using a before pseudonym element to set the overlay. It’s much more efficient to do it this way (for example)

    body {
        position: relative;
        background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)), url(https://loremflickr.com/500/500/flame);
        min-height: 90%;
        background-repeat: no-repeat;
        background-attachment: fixed;
        background-position: center;
        background-size: cover;
    }
    

    image.png

    The below CSS block should be removed

    body::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 240, 220, 0.85);
        z-index: -100;
    }
    

    z-index: -100; is also overkill - -1 is usually always enough as this places the target element behind everything else.

    @phenomlab ah…
    Chatgpt told me the ::before method.
    Thanks for the human input 🙂

  • @phenomlab ah…
    Chatgpt told me the ::before method.
    Thanks for the human input 🙂

    @Panda said in Fixed background to nodebb forum:

    Chatgpt told me the ::before method.

    Go figure 😛


Did this solution help you?
Did you find the suggested solution useful? Support 💗 Sudonix with a coffee
If your organisation needs deeper expertise around infrastructure, security, or technology leadership, learn more about Phenomlab Ltd. Many of the deeper technical guides behind Sudonix are published there.

Related Topics
  • 2 Votes
    94 Posts
    22k Views
    @willi@social.tchncs.de a VPS can be had from DigitalOcean or Vultr quite economically (although I know that isn’t always the case in some countries) You can also use our referral link for an account credit too!
  • Page control arrows for PWA

    Solved Customisation nodebb
    27
    25 Votes
    27 Posts
    13k Views
    @crazycells it is, yes - I think I’ll leave it as there is no specific PWA CSS classes I know of. Well, you could use something like the below, but this means multiple CSS files for different operating systems. /** * Determine the mobile operating system. * This function returns one of 'iOS', 'Android', 'Windows Phone', or 'unknown'. * * @returns {String} */ function getMobileOperatingSystem() { var userAgent = navigator.userAgent || navigator.vendor || window.opera; // Windows Phone must come first because its UA also contains "Android" if (/windows phone/i.test(userAgent)) { return "Windows Phone"; } if (/android/i.test(userAgent)) { return "Android"; } if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) { return "iOS"; } return "unknown"; // return “Android” - one should either handle the unknown or fallback to a specific platform, let’s say Android } Once you’re in that rabbit hole, it’s impossible to get out of it.
  • NodeBB: Upgrading to NodeBB v3.x

    Solved Configure nodebb v3.x
    6
    0 Votes
    6 Posts
    2k Views
    @mventures You’d need to connect to the server and execute it directly - not on your local terminal. Review the guide below, which will show you how to gain access via SSH to your server https://docs.ovh.com/gb/en/dedicated/ssh-introduction/ Once you have access, you’ll need to navigate to the actual folder where NodeBB is installed You’ll then need to change to the directory as shown below /home/unbuntu/nodebb [image: 1680448167972-fdffe673-bf63-4b6d-a728-5506fddc1aff-image.png] In most cases, initial access takes you to the root of the file system. You can always issue pwd in a Linux terminal which will show you the Present Working Directory. From there, you can issue the command cd /home/ubuntu/nodebb Once in the NodeBB directory, you’d use the below commands ./nodebb stop git fetch && git checkout develop && git reset --hard origin/develop ./nodebb upgrade ./nodebb start Line 1 stops the NodeBB instance Line 2 gets the latest files from GIT (repository) and then checks out the development branch. It then resets the version you are using to the development branch ready for v3 Line 3 Runs the upgrade once the new branch is set, and code pulled Line 4 Restarts the NodeBB instance after the upgrade has completed Note that when you restart NodeBB and log back in, things will look very different to what you had in v2.
  • 5 Votes
    13 Posts
    3k Views
    'use strict'; const winston = require('winston'); const user = require('../user'); const notifications = require('../notifications'); const sockets = require('../socket.io'); const plugins = require('../plugins'); const meta = require('../meta'); module.exports = function (Messaging) { Messaging.notifyQueue = {}; // Only used to notify a user of a new chat message, see Messaging.notifyUser Messaging.notifyUsersInRoom = async (fromUid, roomId, messageObj) => { let uids = await Messaging.getUidsInRoom(roomId, 0, -1); uids = await user.blocks.filterUids(fromUid, uids); let data = { roomId: roomId, fromUid: fromUid, message: messageObj, uids: uids, }; data = await plugins.hooks.fire('filter:messaging.notify', data); if (!data || !data.uids || !data.uids.length) { return; } uids = data.uids; uids.forEach((uid) => { data.self = parseInt(uid, 10) === parseInt(fromUid, 10) ? 1 : 0; Messaging.pushUnreadCount(uid); sockets.in(`uid_${uid}`).emit('event:chats.receive', data); }); if (messageObj.system) { return; } // Delayed notifications let queueObj = Messaging.notifyQueue[`${fromUid}:${roomId}`]; if (queueObj) { queueObj.message.content += `\n${messageObj.content}`; clearTimeout(queueObj.timeout); } else { queueObj = { message: messageObj, }; Messaging.notifyQueue[`${fromUid}:${roomId}`] = queueObj; } queueObj.timeout = setTimeout(async () => { try { await sendNotifications(fromUid, uids, roomId, queueObj.message); } catch (err) { winston.error(`[messaging/notifications] Unabled to send notification\n${err.stack}`); } }, meta.config.notificationSendDelay * 1000); }; async function sendNotifications(fromuid, uids, roomId, messageObj) { const isOnline = await user.isOnline(uids); uids = uids.filter((uid, index) => !isOnline[index] && parseInt(fromuid, 10) !== parseInt(uid, 10)); if (!uids.length) { return; } if (roomId != 11) { // 5 Is the ID of the ID of the global chat room. Messaging.getUidsInRoom(roomId, 0, -1); // Proceed as normal. } else { user.getUidsFromSet('users:online', 0, -1); // Only notify online users. } const { displayname } = messageObj.fromUser; const isGroupChat = await Messaging.isGroupChat(roomId); const notification = await notifications.create({ type: isGroupChat ? 'new-group-chat' : 'new-chat', subject: `email:notif.chat.subject, ${displayname}`, bodyShort: `notifications:new_message_from, ${displayname}`, bodyLong: messageObj.content, nid: `chat_${fromuid}_${roomId}`, from: fromuid, path: `/chats/${messageObj.roomId}`, }); delete Messaging.notifyQueue[`${fromuid}:${roomId}`]; notifications.push(notification, uids); } };
  • restarting nodebb on boot

    Unsolved Configure nodebb
    3
    1 Votes
    3 Posts
    2k Views
    @eeeee said in restarting nodebb on boot: can I just run nodebb under nodemon for auto restarts? It’s a better method. Nodemon just looks for file system changes and would effectively die if the server was rebooted meaning you’d have to start it again anyway. Systemd is the defacto standard which is how the operating system interacts in terms of services, scheduled tasks etc.
  • Gettin Erors NodeBB

    Solved Configure nodebb eror
    7
    0 Votes
    7 Posts
    2k Views
    @phenomlab no forum is working goods. there is no eror message since yestarday.
  • [NODEBB] Welcome Message

    Solved Customisation css html nodebb
    20
    2
    13 Votes
    20 Posts
    8k Views
    @DownPW the ‘js’ code for the banner takes the time from the client, so what it displays really depends on the regional settings for the operating system. I’ve not seen this issue myself but would like to see some examples of screenshots if possible.
  • NodeBB metadata

    Solved Configure nodebb
    4
    2 Votes
    4 Posts
    2k Views
    @phenomlab said in NodeBB metadata: @jac Are you sure ? https://www.google.co.uk/search?q=site%3Astockportcounty.fans&sxsrf=AOaemvLwnaZL-PliU_2dBOg_Eo1pMVhBjg%3A1638982328139&source=hp&ei=uOKwYeatBcOsad3yp7AE&iflsig=ALs-wAMAAAAAYbDwyLBSDcG5XYoFCKwQFhgz94wTxOcV&ved=0ahUKEwjm6dX71NT0AhVDVhoKHV35CUYQ4dUDCAk&uact=5&oq=site%3Astockportcounty.fans&gs_lcp=Cgdnd3Mtd2l6EAM6BAgjECc6CwgAEIAEELEDEIMBOg4ILhCABBCxAxDHARCjAjoRCC4QgAQQsQMQgwEQxwEQowI6BQguEIAEOggIABCABBCxAzoFCAAQgAQ6CAguELEDEIMBOgsILhCABBDHARCvAToICC4QgAQQsQM6BQgAELEDOgsILhCABBDHARDRAzoLCAAQgAQQsQMQyQM6BQgAEJIDUABYySZg0CdoAHAAeACAAW2IAa0NkgEEMjMuMpgBAKABAQ&sclient=gws-wiz Fair enough 🤪🤪.