Skip to content

Avatar on Topic Header

Solved Customisation
9 3 2.3k 1
  • Hi @phenomlab

    How are you ?

    I see that you have the avatar of the creator of the topic in the “topic header” and you have a keyboard above the avatar when this one or another user is writing in the topic

    f9e71dd6-f150-474b-9796-bbd2c4d060c8-image.png

    It’s really interesting, I would like to test to implement it.

    How did you do this?

    Thanks four expertise Sir 😉

  • Hi @phenomlab

    How are you ?

    I see that you have the avatar of the creator of the topic in the “topic header” and you have a keyboard above the avatar when this one or another user is writing in the topic

    f9e71dd6-f150-474b-9796-bbd2c4d060c8-image.png

    It’s really interesting, I would like to test to implement it.

    How did you do this?

    Thanks four expertise Sir 😉

  • Thanks I wil test this plugin !

  • phenomlabundefined phenomlab has marked this topic as solved on
  • Great Plugin 🙂

    I make it a bit cleaner via this CSS code:

    /*------------------------------------------------------------------*/
    /*----------------  nodebb-plugin-browsing-users   -----------------*/
    /*------------------------------------------------------------------*/
    
    /*Space between the avatar and the RSS icon */
    .topic [component="topic/browsing-users"] {
        margin-bottom: -5px;
        padding-left: 10px;
    }
    
    /*Space between avatars*/
    .pull-left {
        float: left!important;
        padding-right: 5px;
    }
    
  • Great Plugin 🙂

    I make it a bit cleaner via this CSS code:

    /*------------------------------------------------------------------*/
    /*----------------  nodebb-plugin-browsing-users   -----------------*/
    /*------------------------------------------------------------------*/
    
    /*Space between the avatar and the RSS icon */
    .topic [component="topic/browsing-users"] {
        margin-bottom: -5px;
        padding-left: 10px;
    }
    
    /*Space between avatars*/
    .pull-left {
        float: left!important;
        padding-right: 5px;
    }
    

    @downpw said in Avatar on Topic Header:

    Great Plugin 🙂

    I make it a bit cleaner via this CSS code:

    /*------------------------------------------------------------------*/
    /*----------------  nodebb-plugin-browsing-users   -----------------*/
    /*------------------------------------------------------------------*/
    
    /*Space between the avatar and the RSS icon */
    .topic [component="topic/browsing-users"] {
        margin-bottom: -5px;
        padding-left: 10px;
    }
    
    /*Space between avatars*/
    .pull-left {
        float: left!important;
        padding-right: 5px;
    }
    

    Do you have a screenshot of how this looks with the CSS change?

  • @downpw said in Avatar on Topic Header:

    Great Plugin 🙂

    I make it a bit cleaner via this CSS code:

    /*------------------------------------------------------------------*/
    /*----------------  nodebb-plugin-browsing-users   -----------------*/
    /*------------------------------------------------------------------*/
    
    /*Space between the avatar and the RSS icon */
    .topic [component="topic/browsing-users"] {
        margin-bottom: -5px;
        padding-left: 10px;
    }
    
    /*Space between avatars*/
    .pull-left {
        float: left!important;
        padding-right: 5px;
    }
    

    Do you have a screenshot of how this looks with the CSS change?

    @jac

    Sure. I have just modify the space between icon and avatar :

    e2abae23-188a-413e-a089-b1f6cb5a3f0f-image.png

  • Great Plugin 🙂

    I make it a bit cleaner via this CSS code:

    /*------------------------------------------------------------------*/
    /*----------------  nodebb-plugin-browsing-users   -----------------*/
    /*------------------------------------------------------------------*/
    
    /*Space between the avatar and the RSS icon */
    .topic [component="topic/browsing-users"] {
        margin-bottom: -5px;
        padding-left: 10px;
    }
    
    /*Space between avatars*/
    .pull-left {
        float: left!important;
        padding-right: 5px;
    }
    

    @downpw looks great. I was always going to do something with this but never implemented it.

  • @jac

    Sure. I have just modify the space between icon and avatar :

    e2abae23-188a-413e-a089-b1f6cb5a3f0f-image.png

    @downpw said in Avatar on Topic Header:

    @jac

    Sure. I have just modify the space between icon and avatar :

    e2abae23-188a-413e-a089-b1f6cb5a3f0f-image.png

    Looks good that 😁👍🏻

  • @downpw said in Avatar on Topic Header:

    Great Plugin 🙂

    I make it a bit cleaner via this CSS code:

    /*------------------------------------------------------------------*/
    /*----------------  nodebb-plugin-browsing-users   -----------------*/
    /*------------------------------------------------------------------*/
    
    /*Space between the avatar and the RSS icon */
    .topic [component="topic/browsing-users"] {
        margin-bottom: -5px;
        padding-left: 10px;
    }
    
    /*Space between avatars*/
    .pull-left {
        float: left!important;
        padding-right: 5px;
    }
    

    Do you have a screenshot of how this looks with the CSS change?

    @jac said in Avatar on Topic Header:

    @downpw said in Avatar on Topic Header:

    Great Plugin 🙂

    I make it a bit cleaner via this CSS code:

    /*------------------------------------------------------------------*/
    /*----------------  nodebb-plugin-browsing-users   -----------------*/
    /*------------------------------------------------------------------*/
    
    /*Space between the avatar and the RSS icon */
    .topic [component="topic/browsing-users"] {
        margin-bottom: -5px;
        padding-left: 10px;
    }
    
    /*Space between avatars*/
    .pull-left {
        float: left!important;
        padding-right: 5px;
    }
    

    Do you have a screenshot of how this looks with the CSS change?

    Just added this change, thanks @DownPW 🙂


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
    297 Views
    No one has replied
  • navigation menu panel on mobile

    Solved Customisation nodebb css
    8
    1
    7 Votes
    8 Posts
    2k Views
    @crazycells hmm. That’s odd. I haven’t made any changes from recollection but I could be wrong. I’ll need to check. EDIT - very strange. I honestly don’t recall adding the below CSS block to alter the bottom bar, but you’re right… .bottombar-nav { padding: 0px !important; } I’ve removed this so it reflects stock Harmony.
  • Header Menu After Upgrading V3.1.1

    Solved Customisation header nodebb
    2
    1
    2 Votes
    2 Posts
    942 Views
    @cagatay this relates to a change the css classes used for the brand header meaning it will now float to the left instead of right. If you’d like to retain the original behavior, you can add this css class [data-widget-area="brand-header"] { justify-content: end; display: flex; } Further information here https://community.nodebb.org/topic/17090/manual-build-a-custom-header-in-harmony/19?_=1684069325296
  • answers appearance css code request

    Solved Customisation css answers
    11
    1
    1 Votes
    11 Posts
    3k Views
    @DownPW yes, because of the modifications that Sudonix uses, you’ll need to tailor to fit your needs.
  • creating topic specific widgets

    Solved Customisation nodebb
    16
    10 Votes
    16 Posts
    5k Views
    @crazycells said in creating topic specific widgets: Additionally if hide class exists, why are we re-defining it? We’re not 🤭 I misspelled it - it should be hidden
  • Reading Meter Progress bar

    Locked Solved Customisation css
    15
    1
    9 Votes
    15 Posts
    4k Views
    For anyone else following this thread, please see https://sudonix.com/topic/467/issues-with-progress-bar-on-v3
  • Bug Navbar CSS

    Solved Customisation navbar css
    3
    1 Votes
    3 Posts
    1k Views
    Not better way. Thanks.
  • 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.