Skip to content

Post Style View

Solved Customisation
  • @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

  • @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? Why not buy me a coffee? It's a nice gesture, and a great way to show your appreciation 💗


61/67

21 Nov 2022, 23:17



Related Topics