Post Style View

[cagatay]

@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

[phenomlab]

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

[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');
            }

        });
    });
});

[cagatay]

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

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

[phenomlab]

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

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

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

@phenomlab i cant fix it

[DownPW]

@cagatay

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

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

Maybe @phenomlab have a better way