Skip to content

Heading text on NodeBB forum

Solved Customisation
27 2 5.3k 1
  • @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
  • @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 Thatโ€™s awesome! Keen to give that a try right now! Thank you ๐Ÿ™‚ I shall be back.

  • 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??

    @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;
    }
    }
    

    @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;
    }
    }
    

    @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

  • 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 ?

    @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
  • who is read NodeBB

    Customisation read post nodebb
    6
    0 Votes
    6 Posts
    1k Views
    @cagatay You should ask in the NodeBB forums. Perhaps reference this post https://discuss.flarum.org/d/23066-who-read
  • NodeBB inline videoplayer

    Solved Customisation nodebb
    12
    3 Votes
    12 Posts
    2k Views
    @phenomlab YAY! It works Thanks so much
  • Title on homepage of nodebb forum

    Solved Customisation nodebb
    2
    1 Votes
    2 Posts
    1k 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.
  • Forum Statistics Box

    Solved Customisation customization
    5
    2
    4 Votes
    5 Posts
    1k Views
    @Sampo2910 said in Forum Statistics Box: Say i wanted new theme for example or again something like this? Yes, exactly the same process.
  • [NODEBB] Stats

    Unsolved Customisation plugin stats script
    20
    1
    2 Votes
    20 Posts
    4k Views
    @phenomlab said in [NODEBB] Stats: @jac or I land up fixing it I wouldnโ€™t put it past you
  • NodeBB Footer

    Solved Customisation footer nodebb
    10
    1 Votes
    10 Posts
    2k Views
    @phenomlab said in NodeBB Footer: @jac and you. Hope all is well and you recover quickly Thanks pal
  • [NodeBB] username cards

    Solved Customisation nodebb
    8
    5 Votes
    8 Posts
    2k Views
    @phenomlab Ahaโ€ฆnice to know. As always thank you for the reply and information.
  • 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