Skip to content

Heading text on NodeBB forum

Solved Customisation
  • @phenomlab
    I followed the exact steps you mentioned above but my heading isn’t appearing. Do I need to “Enable” the button at the bottom of these 3 boxes?

  • @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.

    @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
    I followed the exact steps you mentioned above but my heading isn’t appearing. Do I need to “Enable” the button at the bottom of these 3 boxes?

    @mventures Yes, you need to enable all three - Custom CSS/LESS, Custom Javascript, and Custom Header - for example, below

    7f80fce9-7376-4f0e-908e-a575779a9ff3-image.png

  • I enabled the 3 buttons and on the main, I can see something appearing below the icons but it was cut off/hidden. See the screenshot below:
    Screen Shot 2023-04-02 at 11.47.27 am.png

    So, I took a gamble and decided to play with spacing on the CSS window. I have zero idea as to how CSS works. Anyways, I changed the number on TOP to “150 px”. That showcased my header as below and it was following me up & down the page also.

    Screen Shot 2023-04-02 at 11.51.29 am.png

    Changed the TOP number to 80:
    Got the position right but it’s covering the “Categories” field 😞
    Screen Shot 2023-04-02 at 11.57.54 am.png

    Also, my actual heading (which I have in the Custom Header window) appeared for a few seconds only before reverting to “Your Title”. So, I replaced the “Your Text” field in the Custom Javascript window with the exact sentence from the Custom Header window. That fixed it! But wondering why is there a need to add the header title in 2 windows.

    Anyways, now I need to figure out how to (1) stop the banner from following the page scroll (2) How to place it above the Categories label, so it’s not hidden.

  • I enabled the 3 buttons and on the main, I can see something appearing below the icons but it was cut off/hidden. See the screenshot below:
    Screen Shot 2023-04-02 at 11.47.27 am.png

    So, I took a gamble and decided to play with spacing on the CSS window. I have zero idea as to how CSS works. Anyways, I changed the number on TOP to “150 px”. That showcased my header as below and it was following me up & down the page also.

    Screen Shot 2023-04-02 at 11.51.29 am.png

    Changed the TOP number to 80:
    Got the position right but it’s covering the “Categories” field 😞
    Screen Shot 2023-04-02 at 11.57.54 am.png

    Also, my actual heading (which I have in the Custom Header window) appeared for a few seconds only before reverting to “Your Title”. So, I replaced the “Your Text” field in the Custom Javascript window with the exact sentence from the Custom Header window. That fixed it! But wondering why is there a need to add the header title in 2 windows.

    Anyways, now I need to figure out how to (1) stop the banner from following the page scroll (2) How to place it above the Categories label, so it’s not hidden.

    @mventures That code you have is very bespoke, and designed for v2. If you upgrade to v3, it won’t work anymore without significant modification (which I do not support as it’s dropped completely in v3)

  • @mventures That code you have is very bespoke, and designed for v2. If you upgrade to v3, it won’t work anymore without significant modification (which I do not support as it’s dropped completely in v3)

    @phenomlab Oh, I see. I can see the banner still on my website after the upgrade but it’s completely left-justified and cut off at the beginning of the bar. So, do you recommend, I don’t have an introduction bar at all? I just wanted something up at the top, that tells people what the site is about. If I have to get a designer to do some custom work, what kind of person should I look for - UI designer, CSS stylist?

  • @phenomlab Oh, I see. I can see the banner still on my website after the upgrade but it’s completely left-justified and cut off at the beginning of the bar. So, do you recommend, I don’t have an introduction bar at all? I just wanted something up at the top, that tells people what the site is about. If I have to get a designer to do some custom work, what kind of person should I look for - UI designer, CSS stylist?

    @mventures My recommendation here would be to have an “about” page for this sort of stuff. Keep the site layout to a minimum. You don’t need a designer - I can help you with that.

  • @mventures My recommendation here would be to have an “about” page for this sort of stuff. Keep the site layout to a minimum. You don’t need a designer - I can help you with that.

    @phenomlab
    (1) I think there should be 1 banner right above the categories just like the one you have. Basically, a phrase/tagline as to what the site is about.
    (2) Yes, ABOUT page is one of the pages I would like, and I can see you have grouped it under the “link”/paperclip symbol on the top menu. I am trying to figure out how you got that in the first place.

  • @phenomlab
    (1) I think there should be 1 banner right above the categories just like the one you have. Basically, a phrase/tagline as to what the site is about.
    (2) Yes, ABOUT page is one of the pages I would like, and I can see you have grouped it under the “link”/paperclip symbol on the top menu. I am trying to figure out how you got that in the first place.

    @mventures said in Title on homepage of nodebb forum:

    I think there should be 1 banner right above the categories just like the one you have. Basically, a phrase/tagline as to what the site is about.

    Be careful with this one. The text is being added via Javascript so crawlers will not see this content anyway - in essence, it’s cosmetic for the user. You’d be better placed having a well-worded about page that explains everything.

    @mventures said in Title on homepage of nodebb forum:

    Yes, ABOUT page is one of the pages I would like, and I can see you have grouped it under the “link”/paperclip symbol on the top menu. I am trying to figure out how you got that in the first place.

    You can add that using the navigation settings shown below

    /admin/settings/navigation

    87d15357-e53e-4c6c-8c4a-b80363aec089-image.png

    Again, this is for v2, and has changed in v3.

    f038a8c7-c52a-47fe-b51f-43fe65ec7333-image.png

    I’d recommend you have a look around https://sudonix.dev for inspiration. Registration is disabled, as this is a test site and not for public access, so let me know if you’d like access and I’ll create you an account.

  • @mventures said in Title on homepage of nodebb forum:

    I think there should be 1 banner right above the categories just like the one you have. Basically, a phrase/tagline as to what the site is about.

    Be careful with this one. The text is being added via Javascript so crawlers will not see this content anyway - in essence, it’s cosmetic for the user. You’d be better placed having a well-worded about page that explains everything.

    @mventures said in Title on homepage of nodebb forum:

    Yes, ABOUT page is one of the pages I would like, and I can see you have grouped it under the “link”/paperclip symbol on the top menu. I am trying to figure out how you got that in the first place.

    You can add that using the navigation settings shown below

    /admin/settings/navigation

    87d15357-e53e-4c6c-8c4a-b80363aec089-image.png

    Again, this is for v2, and has changed in v3.

    f038a8c7-c52a-47fe-b51f-43fe65ec7333-image.png

    I’d recommend you have a look around https://sudonix.dev for inspiration. Registration is disabled, as this is a test site and not for public access, so let me know if you’d like access and I’ll create you an account.

    @phenomlab
    (1) That’s right, it’s purely cosmetic and not for SEO/crawlers.

    (2) For the ABOUT page in the top menu link:
    I just checked the NAVIGATION in V3 and can see the exact settings as seen on your screenshot. So, I toggled the DROPDOWN to ON and added the line:
    <li><a href=“/about> About </a></li>
    Nothing appeared on the page.
    Is this because of what you mentioned about V3 being different to V2?

    (3) Sudonix.dev: You mean access to the ACP to see how you’ve set it all up and I can just mirror those for my own site? If so, YES PLEASE! That would be super helpful for me. Thank you!

  • @phenomlab
    (1) That’s right, it’s purely cosmetic and not for SEO/crawlers.

    (2) For the ABOUT page in the top menu link:
    I just checked the NAVIGATION in V3 and can see the exact settings as seen on your screenshot. So, I toggled the DROPDOWN to ON and added the line:
    <li><a href=“/about> About </a></li>
    Nothing appeared on the page.
    Is this because of what you mentioned about V3 being different to V2?

    (3) Sudonix.dev: You mean access to the ACP to see how you’ve set it all up and I can just mirror those for my own site? If so, YES PLEASE! That would be super helpful for me. Thank you!

    @mventures
    UPDATE

    I placed this script in the GLOBAL HEADER widget, a remake of the existing Footer class script 🙂

    <header id="header" class="container header">
    	<div>
    		<a target="_blank" href="https://MYSITE.COM/about">About</a> |
    <a target="_blank" href="https://MYSITE.COM/meetups">Meetups</a> |
    	</div>
    </header>
    

    And I got the below:
    Screen Shot 2023-04-04 at 11.13.38 pm.png

    Not exactly the dropdown Menu Link you have, but it serves the purpose for now 🙂

  • @phenomlab
    (1) That’s right, it’s purely cosmetic and not for SEO/crawlers.

    (2) For the ABOUT page in the top menu link:
    I just checked the NAVIGATION in V3 and can see the exact settings as seen on your screenshot. So, I toggled the DROPDOWN to ON and added the line:
    <li><a href=“/about> About </a></li>
    Nothing appeared on the page.
    Is this because of what you mentioned about V3 being different to V2?

    (3) Sudonix.dev: You mean access to the ACP to see how you’ve set it all up and I can just mirror those for my own site? If so, YES PLEASE! That would be super helpful for me. Thank you!

    @mventures said in Title on homepage of nodebb forum:

    (2) For the ABOUT page in the top menu link:
    I just checked the NAVIGATION in V3 and can see the exact settings as seen on your screenshot. So, I toggled the DROPDOWN to ON and added the line:
    <li><a href=“/about> About </a></li>
    Nothing appeared on the page.
    Is this because of what you mentioned about V3 being different to V2?

    Be careful what you alter, as you’ve changed the behaviour of the categories page so now it does this

    8fcbbf44-0222-4a5f-816f-7ff11925f903-image.png

    The way this works is as below

    You drag the custom route to the navbar

    41154f90-3259-45e9-8240-0183cd6f2b0d-image.png

    Select an icon

    51f8319e-ea21-43dc-8316-b2a3847736b3-image.png

    Enable the dropdown, and add the code

    c7ca8e3a-12cd-4e8d-956b-f2ebda160d29-image.png

    Save

    97964825-4a17-4a89-9afd-c69fe08c42b0-image.png

    Reload the page, and you’ll see an additional menu created

    ad250b76-490a-4512-a1cd-3c0a3932cccc-image.png

  • @phenomlab
    (1) That’s right, it’s purely cosmetic and not for SEO/crawlers.

    (2) For the ABOUT page in the top menu link:
    I just checked the NAVIGATION in V3 and can see the exact settings as seen on your screenshot. So, I toggled the DROPDOWN to ON and added the line:
    <li><a href=“/about> About </a></li>
    Nothing appeared on the page.
    Is this because of what you mentioned about V3 being different to V2?

    (3) Sudonix.dev: You mean access to the ACP to see how you’ve set it all up and I can just mirror those for my own site? If so, YES PLEASE! That would be super helpful for me. Thank you!

    @mventures said in Title on homepage of nodebb forum:

    (3) Sudonix.dev: You mean access to the ACP to see how you’ve set it all up and I can just mirror those for my own site? If so, YES PLEASE! That would be super helpful for me. Thank you!

    No, an account that has access to the site so you can see how it is laid out. No access to the ACP is granted, because it isn’t needed.

  • @mventures said in Title on homepage of nodebb forum:

    (2) For the ABOUT page in the top menu link:
    I just checked the NAVIGATION in V3 and can see the exact settings as seen on your screenshot. So, I toggled the DROPDOWN to ON and added the line:
    <li><a href=“/about> About </a></li>
    Nothing appeared on the page.
    Is this because of what you mentioned about V3 being different to V2?

    Be careful what you alter, as you’ve changed the behaviour of the categories page so now it does this

    8fcbbf44-0222-4a5f-816f-7ff11925f903-image.png

    The way this works is as below

    You drag the custom route to the navbar

    41154f90-3259-45e9-8240-0183cd6f2b0d-image.png

    Select an icon

    51f8319e-ea21-43dc-8316-b2a3847736b3-image.png

    Enable the dropdown, and add the code

    c7ca8e3a-12cd-4e8d-956b-f2ebda160d29-image.png

    Save

    97964825-4a17-4a89-9afd-c69fe08c42b0-image.png

    Reload the page, and you’ll see an additional menu created

    ad250b76-490a-4512-a1cd-3c0a3932cccc-image.png

    @phenomlab I shall go through this tomorrow and check what the issue on Categories is about, although I can’t see any issue at my end on Chrome and Safari.

    By the way, how do you upload a full-length image/photo onto a page like what you have on the ABOUT page?

  • @phenomlab I shall go through this tomorrow and check what the issue on Categories is about, although I can’t see any issue at my end on Chrome and Safari.

    By the way, how do you upload a full-length image/photo onto a page like what you have on the ABOUT page?

    @mventures said in Title on homepage of nodebb forum:

    I shall go through this tomorrow and check what the issue on Categories is about, although I can’t see any issue at my end on Chrome and Safari.

    You won’t do now as I rectified it 🙂

  • @mventures said in Title on homepage of nodebb forum:

    I shall go through this tomorrow and check what the issue on Categories is about, although I can’t see any issue at my end on Chrome and Safari.

    You won’t do now as I rectified it 🙂

    @phenomlab Oh wow! Thanks again, so much! I can see the page menu in the “down” arrow on the left navigation bar now.

    How do I get that one small tagline bar up at the top, perhaps next to the logo, as its a white blank space, since the menu is to the left now? I can create a JPG/PNG image of my statement which can be loaded there. If that’s a bad idea, then something I can type up there.

  • @phenomlab Oh wow! Thanks again, so much! I can see the page menu in the “down” arrow on the left navigation bar now.

    How do I get that one small tagline bar up at the top, perhaps next to the logo, as its a white blank space, since the menu is to the left now? I can create a JPG/PNG image of my statement which can be loaded there. If that’s a bad idea, then something I can type up there.

    @mventures I think I know what you’re after, but could you explain and clarify? Perhaps a mock-up sketch would help.

  • @mventures I think I know what you’re after, but could you explain and clarify? Perhaps a mock-up sketch would help.

    @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.

  • @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.

    @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.

    @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.

    @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

  • phenomlabundefined phenomlab has marked this topic as solved on

Did this solution help you?
Did you find the suggested solution useful? Why not buy me a coffee? It's a nice gesture, and a great way to show your appreciation 💗

Related Topics
  • Whitespace fixes in Nodebb

    Solved Customisation
    18
    2
    7 Votes
    18 Posts
    1k Views
    @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.
  • Title on homepage of nodebb forum

    Solved Customisation
    2
    1 Votes
    2 Posts
    688 Views
    @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.
  • Link Text Colour.

    Solved Customisation
    5
    2
    2 Votes
    5 Posts
    445 Views
    @phenomlab Thx again for the reply. Well I am sure that it will be well worth the wait. I will watch with anticipation. For now it is OK. Just small minor irritations I fell in a lot of NodeBB ‘default’ things.
  • 5 Votes
    9 Posts
    1k Views
    is there any way to see whose reputation is changed by this plugin?
  • NodeBB Footer

    Solved Customisation
    10
    1 Votes
    10 Posts
    1k Views
    @phenomlab said in NodeBB Footer: @jac and you. Hope all is well and you recover quickly Thanks pal
  • NodeBB Design help

    Solved Customisation
    8
    3
    2 Votes
    8 Posts
    983 Views
    @riekmedia I’ve applied some new CSS to your site. Can you reload the page and try again ? For the record, this is what I added #footer { background: #2d343e; border-top: 4px solid #2d343e; font-size: 0.9em; margin-top: 70px; padding: 80px 0 0; position: relative; clear: both; bottom: 0; left: 0; right: 0; z-index: 1000; margin-left: -15px; margin-right: -338px; } The /categories page seems a bit messed up, so looking at that currently EDIT - issued some override CSS in the CATEGORIES widget <!--- CSS fix for overspill on /categories page - DO NOT DELETE --> <style> #footer { margin-right: -45px; } </style> That should resolve the /categories issue.
  • How to set a signature in NodeBB?

    Solved Customisation
    4
    2 Votes
    4 Posts
    810 Views
    @phenomlab said in How to set a signature in NodeBB?: @jac No issues at all with copying. This is set using the signature for the user you are posting as. In the case of Hostrisk, it’s set like the below [image: 1633427929198-7bf04183-f6e8-4d72-b0eb-c9a05c9cd24b-image.png] You can set the signature by using https://domain.com/user/theuser/edit Mamy thanks Mark, I’ll set this up later .
  • Customising NodeBB

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