Skip to content

Avatar on Topic Header

Solved Customisation
9 3 1.8k 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
  • 3 Votes
    2 Posts
    1k Views
    Very great
  • 50 Votes
    107 Posts
    29k Views
    @crazycells [image: 1711908210287-7f4c7193-7c28-4e2e-80e8-d439ac7285c6-image.png] [image: 1711908232109-3ab9c33d-04b9-4c15-91e6-891450aebfc2-image.png]
  • The theme came with space on left side

    Solved WordPress css
    7
    3 Votes
    7 Posts
    2k Views
    @phenomlab yes it’s a different theme. The other one was not offering much on editable sidebar. It was like flarum hahah
  • 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.
  • Changing the look of recent cards

    Announcements cards css
    1
    1
    2 Votes
    1 Posts
    677 Views
    No one has replied
  • creating topic specific widgets

    Solved Customisation nodebb
    16
    10 Votes
    16 Posts
    4k 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
  • [NODEBB] Help for my custom CSS

    Solved Customisation nodebb css bugfix
    237
    49 Votes
    237 Posts
    93k 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 !!
  • [NODEBB] CSS Style Sheets SelectBox

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