Skip to content

Avatar on Topic Header

Solved Customisation
9 3 1.6k 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
  • 5 Votes
    2 Posts
    1k Views
    Nice. Very good tips Mark
  • 6 Votes
    15 Posts
    3k Views
    No no, I said that in the sense that he told me it was simple ^^ I was able to see that this was not the case by targeting the elements he had advised me.
  • Header Menu After Upgrading V3.1.1

    Solved Customisation header nodebb
    2
    1
    2 Votes
    2 Posts
    659 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
  • The best css to customize our logo?

    Solved Customisation css
    2
    1 Votes
    2 Posts
    1k Views
    @Sala This should look better .sidenav .navbar-brand { padding-top: 0.5rem; padding-bottom: 0.5rem; } [image: 1669026666905-e5cec20e-be36-4ee8-9129-fd11ad4656ac-image.png] You can increase the top and bottom padding by increasing the values above.
  • Fontawesome 5

    Unsolved Customisation fonts css nodebb
    14
    1 Votes
    14 Posts
    3k Views
    @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] Help for my custom CSS

    Solved Customisation nodebb css bugfix
    237
    49 Votes
    237 Posts
    80k Views
    @baris said: You should change your selectors so it doesn’t look at the entire document. You probably only want to apply fancybox to stuff inside the #content element which is what changes when the user navigates around the page. So use $('#content a').... for your selectors then the forum logo in the header won’t be selected. I modified the JS Fancybox code now and this code and it seem better // --------------------------------------------- // Fancybox Media Reader (Without Website Logo) // --------------------------------------------- if (top.location.pathname !== '/login') { $(window).on('action:posts.loaded', function(data) { console.log("Polling DOM for lazyLoaded images to apply Fancybox"); $(document).ready(function() { $('#content a').not('.forum-logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() { $('#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]').addClass("noanimate"); }); }); }); } if (top.location.pathname !== '/login') { $(document).ready(function() { $(window).on('action:ajaxify.end', function(data) { $('#content a').not('.logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() { $('#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]').addClass("noanimate"); data.preventDefault() // Strip out the images contained inside blockquotes as this looks nasty :) $('#content blockquote img').remove(); }); Fancybox.bind( '#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]', { groupAll: true, } ); }); }); } // Chat fancybox - fires when chat module loaded and AJAX calls new chat $(document).ready(function() { $(window).on('action:chat.loaded', function(data) { // >>> Se limiter au contenu principal uniquement <<< $('#content img').not('.forum-logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() { var newHref = $(this).attr("src"); $(this).wrap("<a class='fancybox' href='" + newHref + "'/>"); $('#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]').addClass("noanimate"); data.preventDefault(); // Strip out the images contained inside blockquotes as this looks nasty :) $('#content blockquote img').remove(); }); Fancybox.bind( '#content a[href*=".jpg"], #content a[href*=".jpeg"], #content a[href*=".png"], #content a[href*=".gif"], #content a[href*=".webp"]', { groupAll: true, } ); }); }); For the logo, I must use overflow: visible !important; on [component="brand/logo"] /* --- Logo --- */ [component="brand/logo"] { max-height: 50px; width: auto; height: auto; max-width: 100%; display: block; object-fit: contain; object-position: left center; overflow: visible !important; } Better result !!
  • Multiple link on one ico non Navbar

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

    Locked Solved Customisation css
    112
    24 Votes
    112 Posts
    33k Views
    @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