Skip to content

Avatar on Topic Header

Solved Customisation
9 3 3.2k 1
  • wrote on last edited by
    #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 😉

    wrote on last edited by
    #2
  • wrote on last edited by
    #3

    Thanks I wil test this plugin !

  • phenomlab phenomlab has marked this topic as solved on
  • wrote on last edited by DownPW
    #4

    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;
    }
    
    wrote on last edited by
    #5

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

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

    wrote on last edited by DownPW
    #6

    @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;
    }
    
    wrote on last edited by
    #7

    @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

    wrote on last edited by
    #8

    @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 😁👍🏻

  • JAC JAC

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

    wrote on last edited by
    #9

    @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
  • Widget | CSS customization

    Solved WordPress css
    53
    17 Votes
    53 Posts
    19k Views
    phenomlab
    @Sala the only way you can achieve this is to use a robots.txt file and disallow access to those links.
  • Header Menu After Upgrading V3.1.1

    Solved Customisation header nodebb
    2
    1
    2 Votes
    2 Posts
    1k Views
    phenomlab
    @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
  • Footer bar add center text

    Solved Customisation css
    41
    1
    8 Votes
    41 Posts
    20k Views
    DownPW
    @phenomlab said in Footer bar add center text: div#console-nav-tab Ah ok test with bottom: 0px !important; idem
  • answers appearance css code request

    Solved Customisation css answers
    11
    1
    1 Votes
    11 Posts
    4k Views
    phenomlab
    @DownPW yes, because of the modifications that Sudonix uses, you’ll need to tailor to fit your needs.
  • Fontawesome 5

    Unsolved Customisation fonts css nodebb
    14
    1 Votes
    14 Posts
    6k Views
    phenomlab
    @pwsincd hi. Just following up on this thread (I know it’s old) but was curious to understand if it’s still an issue or not ?
  • [NODEBB] Scroll Button

    Solved Customisation css javascript html scroll button
    7
    1
    0 Votes
    7 Posts
    3k Views
    phenomlab
    @downpw ooops. Forgot that. Thanks for adding.
  • Multiple link on one ico non Navbar

    Solved Customisation links css navbar
    7
    1
    2 Votes
    7 Posts
    3k Views
    DownPW
    yeah you’re right @phenomlab. Problem of NodeBB Version
  • [NODEBB] CSS Style Sheets SelectBox

    Locked Solved Customisation css
    112
    24 Votes
    112 Posts
    65k Views
    phenomlab
    @DownPW as discussed in PM Seems to have been solved with the new JS code that you added allowing the version CSS file change!! Cache problem therefore with the JS of the Switcher theme Based on this, I will close this thread and reference https://sudonix.com/topic/207/nodebb-help-for-my-custom-css/27