• @phenomlab said in Post Style View:

    @cagatay No problems. Glad it’s all working. I need to document this for others to be able to use.

    this post is very good document for the users who will want to use it 🙂


  • @cagatay Yes, but I want to create something more concise and simpler to follow

  • Topic has been marked as solved  phenomlab phenomlab 

  • @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.


  • @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.


  • @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.


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


If this topic and the associated threads resolved an issue for you, or was useful, why not buy me a coffee? It's a nice gesture, and there's other ways to donate if you wish 💗

Discover More