Skip to content

Post Style View

Solved Customisation
67 3 16.3k 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