Post Style View

[cagatay]

@phenomlab yes i want my site to match what Sudonix has on post style.

[phenomlab]

@cagatay Something like this?

Add this to your custom CSS (obviously change colours to suit taste)

@media (min-width: 1200px) {
li.topic-owner-post .content, li.topic-response-post .content {
    background: lightgrey;
    padding: 30px;
    border-radius: 6px;
}
.topic .posts.timeline .timeline-event>div:not(.content), .topic .posts.timeline>[component=post]>div:not(.content) {
    margin-left: 2.5rem;
}
[data-index="0"] .content[component="post/content"]:before, .topic-owner-post:before, .topic-response-post:before {
    border-left: 20px solid transparent;
    border-top: 20px solid lightgrey;
    top: 66px;
    content: "";
    position: absolute;
    left: 70px;
}
li.self-post .content:not(.isSolved [component="post/content"])[itemprop="text"] {
    background: lightblue;
    padding: 30px;
    border-radius: 6px;
    margin-right: 8.5rem !important;
}
li.self-post .content:not(.isSolved [component="post/content"]):after, li.self-post.topic-owner-post:first-child:after {
border-right: 20px solid transparent;
    border-top: 20px solid var(--self-post);
    top: 66px;
    content: "";
    position: absolute;
    right: 90px;
    left: unset !important;
    border-bottom: none !important;
    bottom: unset !important;
}
li.self-post.topic-response-post .pull-left {
    float: right !important;
}
li.self-post .content:not(.isSolved [component="post/content"]):after, li.self-post.topic-owner-post:first-child:after {
    border-right: 20px solid transparent;
    border-top: 20px solid lightblue;
    top: 58px;
    content: "";
    position: absolute;
    right: 95px;
    left: unset !important;
    border-bottom: none !important;
    bottom: unset !important;
}
}

Add this to your custom JS

$(window).on('action:ajaxify.loaded', function(data) {
    $(document).ready(function() {
        if (!$('li[component="post"]').hasClass('.topic-owner-post') || (!$('li[component="post"]').hasClass('.self-post'))) {
            console.log("Adding required classes for messenger type view");
            $('li[component="post"]').addClass('topic-response-post');

        }
    });
});

$(window).on('action:ajaxify.end', function(data) {
    $(document).ready(function() {
        if (!$('li[component="post"]').hasClass('.topic-owner-post') || (!$('li[component="post"]').hasClass('.self-post'))) {
            console.log("Adding required classes for messenger type view");
            $('li[component="post"]').addClass('topic-response-post');

        }
    });
});

[cagatay]

@phenomlab said in Post Style View:

$(window).on(‘action:ajaxify.end’, function(data) {
$(document).ready(function() {
if (!$(‘li[component=“post”]’).hasClass(‘.topic-owner-post’) || (!$(‘li[component=“post”]’).hasClass(‘.self-post’))) {
console.log(“Adding required classes for messenger type view”);
$(‘li[component=“post”]’).addClass(‘topic-response-post’);

    }
});

});

thank you so such dear, worked.

[cagatay]

@phenomlab there is one small problem that shown below;

[phenomlab]

@cagatay There’s a missing float by the looks of it. Can you PM me a login and password for the site so I can check?

[phenomlab]

@cagatay I can’t see any issue here?

Can you PM me the link to that post?

[cagatay]

@phenomlab yes from now everything is great, thank you dear.

[phenomlab]

@cagatay Great. Thanks. I’ll mark this as resolved.

[cagatay]

@phenomlab there is one unknown symbol at the post, i cant delete it. This is when i answered seems.

[phenomlab]

@cagatay let me have a look

EDIT - yes, I see why. Because we are using a pseudo class, this is being applied to multiple elements, so we are forced to change the colour of the class where you see the erroneous addition to use a darker one so that you do not see it.

This is what I had to do on my own install as a workaround. It’s crude, but it’ll work.

[cagatay]

@phenomlab ok dear, waiting for it. thanks.

[phenomlab]

@cagatay You need to change the colours yourself, so the .self-post is darker than the .topic-owner-post

[cagatay]

@phenomlab nothing changed dear.

[phenomlab]

@cagatay You also need to set the same for .topic-response-post

[cagatay]

@phenomlab said in Post Style View:

.topic-response-post

So i think we can fixed that small problem to use same color all of them

[phenomlab]

@cagatay You can try this (with different colours), but it might be a bit greedy

li.self-post.topic-response-post:before {
    display: none;
}

[cagatay]

@phenomlab said in Post Style View:
Same color is worked.

li.self-post.topic-response-post:before {
display: none;
}

also worked

[phenomlab]

@cagatay Good. Keep an eye on that though - as I said, it may produce unexpected results as it’s quite “greedy”

[cagatay]

@phenomlab If the post is new one created by me, there is also shown

@phenomlab said in Post Style View:

Good. Keep an eye on that though - as I said, it may produce unexpected results as it’s quite “greedy”

Yes i know dear, it is a no problem for me, i m learning with you thats cool.

[phenomlab]

@cagatay This is a bit experimental currently, but the below jQuery should detect correctly when the HTML being targeted has no class.

Can you please try replacing the below you previously inserted

$(window).on('action:ajaxify.loaded', function(data) {
    $(document).ready(function() {
        if (!$('li[component="post"]').hasClass('.topic-owner-post') || (!$('li[component="post"]').hasClass('.self-post'))) {
            console.log("Adding required classes for messenger type view");
            $('li[component="post"]').addClass('topic-response-post');

        }
    });
});

$(window).on('action:ajaxify.end', function(data) {
    $(document).ready(function() {
        if (!$('li[component="post"]').hasClass('.topic-owner-post') || (!$('li[component="post"]').hasClass('.self-post'))) {
            console.log("Adding required classes for messenger type view");
            $('li[component="post"]').addClass('topic-response-post');

        }
    });
});

with

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

Try it and let me know.