Skip to content

Heading text on NodeBB forum

Solved Customisation
27 2 8.5k 1
  • @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
  • Forum customisation

    Customisation nodebb forum customised
    11
    2
    6 Votes
    11 Posts
    2k Views
    Thank you Mark, the changes look fantastic!!
  • Whitespace fixes in Nodebb

    Solved Customisation nodebb
    18
    2
    7 Votes
    18 Posts
    5k 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.
  • Blinking text Effect

    Customisation nodebb text effect css
    3
    5 Votes
    3 Posts
    1k 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
    3k Views
    is there any way to see whose reputation is changed by this plugin?
  • [NODEBB] Stats

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

    Solved Customisation css html nodebb
    20
    2
    13 Votes
    20 Posts
    7k 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.
  • Social icon (Nodebb)

    Solved Customisation nodebb social
    7
    0 Votes
    7 Posts
    3k Views
    @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: 1638880098289-73e805e1-997b-41bf-9259-51c5052ca8fc-image.png] fixed
  • NodeBB Design help

    Solved Customisation
    8
    3
    2 Votes
    8 Posts
    3k 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.