Skip to content

NodeBB changing color of the text

Solved Customisation
7 2 1.8k 1

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
  • Custom Page - nodebb

    Solved Customisation custom-pages nodebb
    13
    2
    5 Votes
    13 Posts
    430 Views
    Iโ€™m happy to see this
  • Changing Background on NodeBB

    Solved Customisation background image nodebb
    4
    0 Votes
    4 Posts
    1k Views
    @cagatay Youโ€™d target the body tag and use the below line of CSS background: url(/assets/customcss/backgrounds/default/default.png) no-repeat center center fixed; Obviously, you need to change the path to suit where your image is being stored. More info around the background property can be found here https://www.w3schools.com/cssref/css3_pr_background.php
  • Blinking text Effect

    Customisation nodebb text effect css
    3
    5 Votes
    3 Posts
    996 Views
    @phenomlab I love it too @phenomlab said in Blinking text Effect: Has that โ€œbroken neon lightโ€ look that you see in films. Itโ€™s exactly that, kind of old neon signs of bar or pubs a bit cyberpunk too
  • 5 Votes
    9 Posts
    4k Views
    @phenomlab Very very great Mark Thanks again, Itโ€™s perfect now ! โ€“> I share my code that I modified. Iโ€™ve added French and English comments. If you see things to change Mark, donโ€™t hesitate. As usual, all the access paths (FA icons, logo) will have to be modified according to your architecture. You can also very well add/remove time slots and change welcome messages to suit your needs. Widgets ACP/HTML Widget Footer Logo <center> <br><br> <img id="thislogo" src="path/to/my/image"> </center> Widget Welcome Message <!-- IF loggedIn --> <div class="getUsername">, <a href="/me"><span class="username"></span></a></div> <!-- ENDIF loggedIn --> CSS โ€“ I added the size font-weight: 900; in the CSS because otherwise some FA icon wasnโ€™t displayed correctly and reduce margin : i#thisicon { font-family: "Font Awesome 5 Free"; font-style: normal; margin-right: 8px; font-weight: 900; } .getUsername { padding-top: 20px; text-align: right; } /*Smartphone*/ /*On dรฉsactive le message de bienvenue"*/ /*We disable the welcome message"*/ @media all and (max-width: 1024px) { .getUsername { display: none; } } JAVASCRIPT // ------------------------------------------ // Welcome Message avec icรดne et Footer logo // Welcome Message with icon and Footer logo // ------------------------------------------ $(window).on('action:ajaxify.end', function (data) { //On rรฉcupรจre le username dans le DOM et on l'affiche //We retrieve the username from the DOM and display it function updateUsername() { $('.getUsername .username').text(app.user.username); } if (document.readyState === 'loading') { document.addEventListener('DOMContentLoaded', updateUsername); } else { updateUsername(); } //On dรฉclare les variables principales (themessage & thehours) ainsi que les variables secondaires correspondants aux plages horaires //We declare the main variables (themessage & thehours) as well as the secondary variables corresponding to the time slots var thehours = new Date().getHours(); var themessage; var wakeup = ('Good day'); var morning = ('Good morning'); var lunch = ('Bon appรฉtit'); var afternoon = ('Good afternoon'); var drink = ('Cheers'); var evening = ('Good evening'); var night = ('Good night'); var welcome = ('Welcome'); var matched = false; //On peux ici tester le rรฉsultat du code en spรฉcifiant une heure (!!!IMPORTANT: Commenter une fois le script testรฉ!!!) //Here we can test the result of the code by specifying a time (!!!IMPORTANT: Comment once the script has been tested!!!) //thehours = 20 //On dรฉclare les plages horaires avec les icones FA et les logos //We declare the time slots with FA icons and logos path if (thehours >= 0 && thehours < 6) { themessage = night; theicon = "fa-solid fa-moon"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 6 && thehours < 8) { themessage = wakeup; theicon = "fa-solid fa-mug-hot"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 8 && thehours < 12) { themessage = morning; theicon = "fa-solid fa-sun"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 12 && thehours < 13) { themessage = lunch; theicon = "fas fa-hamburger"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 13 && thehours < 16) { themessage = afternoon; theicon = "fa-solid fa-sun"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 16 && thehours < 18) { themessage = welcome; theicon = "fa-solid fa-rocket"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 18 && thehours < 19) { themessage = drink; theicon = "fa-solid fa-wine-glass"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 19 && thehours < 20) { themessage = lunch; theicon = "fas fa-pizza-slice"; thelogo = "/assets/customlogo/XXX.png"; } else if (thehours >= 20 && thehours < 24) { themessage = evening; theicon = "fa-solid fa-tv"; thelogo = "/assets/customlogo/XXX.png"; } // Si la page active est un topic, on dรฉsactive/cache le message de bienvenue // If the active page is a topic, we deactivate/hide the welcome message if (window.location.href.indexOf("topic") > -1) { console.log("This is a topic, so hide the user welcome message"); $('#thisuser').hide(); } // Sinon, on affiche le message en fonction, l'icone FA et son emplacement (prepend) // Otherwise, we display the message in function, the FA icon and its location (prepend) else { $('.getUsername').prepend("<i id='thisicon' class='" + theicon + "'></i>" + themessage); $("#thislogo").attr("src", thelogo); //$('.getUsername').prepend("<img id='thisicon' src='" + thelogo + "'></>" + themessage); } });
  • [NODEBB] Welcome Message

    Solved Customisation css html nodebb
    20
    2
    13 Votes
    20 Posts
    6k 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.
  • Discourse Design Change

    Customisation design change css html
    25
    7 Votes
    25 Posts
    5k Views
    @phenomlab okay
  • Customising NodeBB

    Locked Customisation nodebb
    3
    0 Votes
    3 Posts
    2k Views
    Closing this thread as a duplicate of https://sudonix.com/topic/12/nodebb-customisation
  • NodeBB customisation

    Locked Customisation
    332
    27 Votes
    332 Posts
    137k Views
    @jac Given your departure away from your previous project, Iโ€™m going to close this threadโ€ฆ