Skip to content

Post Style View

Solved Customisation
67 3 29.9k 2
  • @cagatay in case you’re still following this thread, I found a far more efficient way of adding the classes using jQuery. To this end, you can change this block above with this code

    // Target those elements already loaded in the DOM
    $(document).ready(function() {
        $(window).on('action:ajaxify.end', function(data) {
            $('li[component="post"]').each(function(i, obj) {
                if (!$(this).hasClass('self-post') || (!$(this).hasClass('self-post'))) {
                    console.log("Adding required classes for messenger type view");
                    $(this).addClass('topic-response-post');
                }
    
            });
        });
    });
    // Target elements dynamically added to the DOM on post load
    $(document).ready(function() {
        $(window).on('action:ajaxify.loaded', function(data) {
            $('li[component="post"]').each(function(i, obj) {
                if (!$(this).hasClass('self-post') || (!$(this).hasClass('self-post'))) {
                    console.log("Adding required classes for messenger type view");
                    $(this).addClass('topic-response-post');
                }
    
            });
        });
    });
    

    @phenomlab said in Post Style View:

    // Target those elements already loaded in the DOM
    $(document).ready(function() {
    $(window).on(‘action:ajaxify.end’, function(data) {
    $(‘li[component=“post”]’).each(function(i, obj) {
    if (!$(this).hasClass(‘self-post’) || (!$(this).hasClass(‘self-post’))) {
    console.log(“Adding required classes for messenger type view”);
    $(this).addClass(‘topic-response-post’);
    }

        });
    });
    

    });
    // Target elements dynamically added to the DOM on post load
    $(document).ready(function() {
    $(window).on(‘action:ajaxify.loaded’, function(data) {
    $(‘li[component=“post”]’).each(function(i, obj) {
    if (!$(this).hasClass(‘self-post’) || (!$(this).hasClass(‘self-post’))) {
    console.log(“Adding required classes for messenger type view”);
    $(this).addClass(‘topic-response-post’);
    }

        });
    });
    

    });

    thank you Mark.
    changed it.

  • @cagatay in case you’re still following this thread, I found a far more efficient way of adding the classes using jQuery. To this end, you can change this block above with this code

    // Target those elements already loaded in the DOM
    $(document).ready(function() {
        $(window).on('action:ajaxify.end', function(data) {
            $('li[component="post"]').each(function(i, obj) {
                if (!$(this).hasClass('self-post') || (!$(this).hasClass('self-post'))) {
                    console.log("Adding required classes for messenger type view");
                    $(this).addClass('topic-response-post');
                }
    
            });
        });
    });
    // Target elements dynamically added to the DOM on post load
    $(document).ready(function() {
        $(window).on('action:ajaxify.loaded', function(data) {
            $('li[component="post"]').each(function(i, obj) {
                if (!$(this).hasClass('self-post') || (!$(this).hasClass('self-post'))) {
                    console.log("Adding required classes for messenger type view");
                    $(this).addClass('topic-response-post');
                }
    
            });
        });
    });
    

    @phenomlab there is small problem after revised codes which you shared.
    problem is shown below; answered nick and labels nested.

    8cb60812-c40c-4834-bdb2-bd8ef6271340-image.png

  • @phenomlab there is small problem after revised codes which you shared.
    problem is shown below; answered nick and labels nested.

    8cb60812-c40c-4834-bdb2-bd8ef6271340-image.png

    @cagatay that’s just a margin missing. The code I provided won’t be causing that. If you look for the element in the developers console and add a margin-left value to it, that should resolve it.

  • @cagatay that’s just a margin missing. The code I provided won’t be causing that. If you look for the element in the developers console and add a margin-left value to it, that should resolve it.

    @phenomlab may i use this code?

    .topic-owner-post [itemprop="author"] {
        float: left;
    }
    // Add these to (or edit) the existing classes you have
    .user-level-topic {
        float: none;
    }
    .group-label {
        margin-top: -1px;
    }
    .topic-owner-post [itemprop="author"]:after {
        margin-top: 1px;
        height: 18px;
    }
    
  • @phenomlab may i use this code?

    .topic-owner-post [itemprop="author"] {
        float: left;
    }
    // Add these to (or edit) the existing classes you have
    .user-level-topic {
        float: none;
    }
    .group-label {
        margin-top: -1px;
    }
    .topic-owner-post [itemprop="author"]:after {
        margin-top: 1px;
        height: 18px;
    }
    

    @cagatay from the screenshot you provided, it looks like you’ve used them. They are fine to use, but you are missing a couple of styles.

    I’ll have a look at this tomorrow and give you the remainder of the code you need.

  • @cagatay from the screenshot you provided, it looks like you’ve used them. They are fine to use, but you are missing a couple of styles.

    I’ll have a look at this tomorrow and give you the remainder of the code you need.

    @phenomlab i cant fix it 😞

    0ec83f76-a140-46dc-9a9f-b4f6f3d98b9c-image.png

  • @phenomlab i cant fix it 😞

    0ec83f76-a140-46dc-9a9f-b4f6f3d98b9c-image.png

    @cagatay

    Just add margin-left on the element like @phenomlab said to you :

    topic [component="post/parent"] {
        margin-left: 10px;
    }
    

    aa08c62b-4223-4cba-8c0f-c73d50474c0d-image.png

    Maybe @phenomlab have a better way


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
  • NodeBB recent cards customisation

    Solved Customisation nodebb recent cards
    3
    1
    2 Votes
    3 Posts
    1k Views
    @phenomlab thank you very much for the assistance Mark, massively appreciated as always. The great thing about this is it’s all documented for other NodeBB users that come looking for solutions . Looks far better .
  • 5 Votes
    4 Posts
    2k Views
    @DownPW thanks. I forgot about that.
  • www. Infront stops website access?

    Solved Configure nodebb
    10
    1 Votes
    10 Posts
    3k Views
    @Panda because there is no match for the DNS entry specified. The receiving web server parses the headers looking for a destination hostname to match, and anything the web server is unable to resolve will be sent back to the root.
  • SEO and Nodebb

    Performance nodebb seo
    2
    2 Votes
    2 Posts
    1k Views
    @Panda It’s the best it’s ever been to be honest. I’ve used a myriad of systems in the past - most notably, WordPress, and then Flarum (which for SEO, was absolutely dire - they never even had SEO out of the box, and relied on a third party extension to do it), and NodeBB easily fares the best - see below example https://www.google.com/search?q=site%3Asudonix.org&oq=site%3Asudonix.org&aqs=chrome..69i57j69i60j69i58j69i60l2.9039j0j3&sourceid=chrome&ie=UTF-8#ip=1 However, this was not without significant effort on my part once I’d migrated from COM to ORG - see below posts https://community.nodebb.org/topic/17286/google-crawl-error-after-site-migration/17?_=1688461250365 And also https://support.google.com/webmasters/thread/221027803?hl=en&msgid=221464164 It was painful to say the least - as it turns out, there was an issue in NodeBB core that prevented spiders from getting to content, which as far as I understand, is now fixed. SEO in itself is a dark art - a black box that nobody really fully understands, and it’s essentially going to boil down to one thing - “content”. Google’s algorithm for indexing has also changed dramatically over the years. They only now crawl content that has value, so if it believes that your site has nothing to offer, it will simply skip it.
  • 1 Votes
    1 Posts
    1k Views
    No one has replied
  • NodeBB: Creating pages

    Solved Configure nodebb create page
    9
    0 Votes
    9 Posts
    3k Views
    OK, I think I have figured out how to place a link in the footer which will click to a new page.
  • Gettin Erors NodeBB

    Solved Configure nodebb eror
    7
    0 Votes
    7 Posts
    2k Views
    @phenomlab no forum is working goods. there is no eror message since yestarday.
  • [NodeBB] Creating new user to auto post content

    Solved Customisation
    3
    0 Votes
    3 Posts
    2k Views
    @phenomlab many thanks Mark .