Skip to content

Heading text on NodeBB forum

Solved Customisation
27 2 10.9k 1
  • @phenomlab Here is an example of what I meant:

    au header example.jpg

    Basically, having the tagline in the header, where the logo is.
    The tagline can be a JPEG banner that I can create and upload or it can be a text that can appear there.

    wrote on last edited by
    #18

    @mventures You could achieve this effect with a :psuedo CSS class. Let me have a look at this

  • @phenomlab Here is an example of what I meant:

    au header example.jpg

    Basically, having the tagline in the header, where the logo is.
    The tagline can be a JPEG banner that I can create and upload or it can be a text that can appear there.

    wrote on last edited by
    #19

    @mventures I forked this into it’s own topic as it deviates from the original thread.

  • @phenomlab Here is an example of what I meant:

    au header example.jpg

    Basically, having the tagline in the header, where the logo is.
    The tagline can be a JPEG banner that I can create and upload or it can be a text that can appear there.

    wrote on last edited by phenomlab
    #20

    @mventures How’s this ?

    b7ecc749-3019-49cb-bd62-db573472c960-image.png

    To achieve this look

    1. Create a Brand Header widget

    d7e5bbca-0135-4967-983b-5c3bfe489723-image.png

    Save

    1. Go to admin/appearance/customise#custom-css
    2. Add the below CSS
    [data-widget-area="brand-header"] {
        display: contents;
    }
    .tagline {
        position: relative;
        margin-left: 10px;
        margin-top: 20px;
    }
    

    Save

  • phenomlab phenomlab has marked this topic as solved on
  • @mventures How’s this ?

    b7ecc749-3019-49cb-bd62-db573472c960-image.png

    To achieve this look

    1. Create a Brand Header widget

    d7e5bbca-0135-4967-983b-5c3bfe489723-image.png

    Save

    1. Go to admin/appearance/customise#custom-css
    2. Add the below CSS
    [data-widget-area="brand-header"] {
        display: contents;
    }
    .tagline {
        position: relative;
        margin-left: 10px;
        margin-top: 20px;
    }
    

    Save

    wrote on last edited by
    #21

    @phenomlab That’s awesome! Keen to give that a try right now! Thank you 🙂 I shall be back.

  • wrote on last edited by
    #22

    UPDATE: It worked 🙂 Thank you again. I added a few sentences and had to do a hard refresh for everything to appear and its exactly how I need it to be.
    Was that BRAND HEADER widget always there or did you create it just now??

  • UPDATE: It worked 🙂 Thank you again. I added a few sentences and had to do a hard refresh for everything to appear and its exactly how I need it to be.
    Was that BRAND HEADER widget always there or did you create it just now??

    wrote on last edited by
    #23

    @mventures The brand widget is part of the Harmony theme, so it already exists.

    Also, I added another CSS class so that the tagline is hidden on mobiles. With all that text, it’ll wrap and take half of the mobile screen estate, which will look awful.

    @media (max-width: 576px) {
    .tagline {
        display: none;
    }
    }
    
  • @mventures The brand widget is part of the Harmony theme, so it already exists.

    Also, I added another CSS class so that the tagline is hidden on mobiles. With all that text, it’ll wrap and take half of the mobile screen estate, which will look awful.

    @media (max-width: 576px) {
    .tagline {
        display: none;
    }
    }
    
    wrote on last edited by
    #24

    @phenomlab That’s a great idea! I didn’t think of that. Thank you.

  • @mventures The brand widget is part of the Harmony theme, so it already exists.

    Also, I added another CSS class so that the tagline is hidden on mobiles. With all that text, it’ll wrap and take half of the mobile screen estate, which will look awful.

    @media (max-width: 576px) {
    .tagline {
        display: none;
    }
    }
    
    wrote on last edited by
    #25

    @phenomlab Sorry I am back on this one. I just noticed on the desktop a blue bar appears across the header region when you visit any of the categories. Does it have to do with your CSS class insertion? It doesn’t appear on the homepage but the channel pages only.

    Screen Shot 2023-04-07 at 1.53.33 pm.png

  • wrote on last edited by
    #26

    UPDATE: That blue bar has now disappeared and I did nothing. Perhaps, you @phenomlab ?

  • UPDATE: That blue bar has now disappeared and I did nothing. Perhaps, you @phenomlab ?

    wrote on last edited by
    #27

    @mventures I’ve not done anything here.


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
    1 Posts
    640 Views
    No one has replied
  • Whitespace fixes in Nodebb

    Solved Customisation nodebb
    18
    2
    7 Votes
    18 Posts
    6k Views
    phenomlab
    @Panda Just circling back here with something of an update (which I think you’ll like). I’ve completely restructured the ranking system. There are now less ranks, with a higher point threshold to reach them. More importantly, if you reload the site, you’ll notice that the ranks are now icons. I also removed the “Author” badge, and made this a single icon, which (to me) looks much better.
  • Forum Icons NodeBB

    Solved Customisation icons forum nodebb
    13
    0 Votes
    13 Posts
    5k Views
    phenomlab
    @cagatay That matches what I see [image: 4f0f858d-9812-42b1-9f61-ffb13d31dccd-image.png]
  • Changing Background on NodeBB

    Solved Customisation background image nodebb
    4
    0 Votes
    4 Posts
    2k Views
    phenomlab
    @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
  • Title on homepage of nodebb forum

    Solved Customisation nodebb
    2
    1 Votes
    2 Posts
    2k Views
    phenomlab
    @eveh Welcome board The code you are referring to is custom written as no such functionality exists under NodeBB. However, adding the functionality is relatively trivial. Below are the required steps Navigate to /admin/appearance/customise#custom-header Add the below code to your header, and save once completed <ol id="mainbanner" class="breadcrumb"><li id="addtext">Your Title Goes Here</li></ol> Navigate to /admin/appearance/customise#custom-js and add the below code, then save $(document).ready(function() { $(window).on('action:ajaxify.end', function(data) { // Initialise mainbanner ID, but hide it from view $('#mainbanner').hide(); var pathname = window.location.pathname; if (pathname === "/") { $("#addtext").text("Your Title"); $('#mainbanner').show(); } else {} // If we want to add a title to a sub page, uncomment the below and adjust accordingly //if (pathname === "/yourpath") { //$("#addtext").text("Your Title"); //$('#mainbanner').show(); //} }); }); Navigate to /admin/appearance/customise#custom-css and add the below CSS block .breadcrumb { right: 0; margin-right: auto; text-align: center; background: #0086c4; color: #ffffff; width: 100vw; position: relative; margin-left: -50vw; left: 50%; top: 50px; position: fixed; z-index: 1020; } Note, that you will need to adjust your CSS code to suit your own site / requirements.
  • [NODEBB] Stats

    Unsolved Customisation plugin stats script
    20
    1
    2 Votes
    20 Posts
    6k Views
    JAC
    @phenomlab said in [NODEBB] Stats: @jac or I land up fixing it I wouldn’t put it past you
  • [NodeBB] username cards

    Solved Customisation nodebb
    8
    5 Votes
    8 Posts
    3k Views
    Sampo2910
    @phenomlab Aha…nice to know. As always thank you for the reply and information.
  • Social icon (Nodebb)

    Solved Customisation nodebb social
    7
    0 Votes
    7 Posts
    3k Views
    JAC
    @phenomlab said in Social icon (Nodebb): @jac I just tested my theory around using the OG image, and according to the Twitter card validator, it works fine [image: 73e805e1-997b-41bf-9259-51c5052ca8fc-image.png] fixed