Skip to content

Post Style View

Solved Customisation
  • Could you please share with us post style codes of Sudonix 🙂
    Mean this view which without avatar 🙂
    2cc75749-036b-4a43-ae2c-59542a735d96-image.png

    currently i m using with avatar 🙂 ;

    c940f74e-65db-427c-aebc-5cfe2443eb55-image.png

  • @phenomlab maybe there is a problem in my vps or ubuntu is not clearlu working or library etc…

    @cagatay Found the issue. It appears that the hook I should be calling is in fact action:posts.loaded and not action:ajaxify.loaded 🤦

    Should be fixed now but take a look. The best way to test this is to find a topic with lots of posts, and scroll to the bottom. Then, reload the page, and start scrolling up from the bottom to the top. As the new posts are added into the DOM, that function I wrote should execute and add the missing class

    For anyone else following this thread, the two required jQuery functions are

        $(window).on('action:posts.loaded', function(data) {
            $(document).ready(function() {
            if ($('li[component="post"]').hasClass("")) {
                console.log("New posts detected,so adding 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("")) {
                console.log("Adding required classes for messenger type view");
                $('li[component="post"]').addClass('topic-response-post');
            }
        });
    });
    
  • Could you please share with us post style codes of Sudonix 🙂
    Mean this view which without avatar 🙂
    2cc75749-036b-4a43-ae2c-59542a735d96-image.png

    currently i m using with avatar 🙂 ;

    c940f74e-65db-427c-aebc-5cfe2443eb55-image.png

    @cagatay Do you want your site to match what Sudonix has ? Sorry - it’s not entirely clear when you say “without avatar”.

  • @cagatay Do you want your site to match what Sudonix has ? Sorry - it’s not entirely clear when you say “without avatar”.

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

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

    @cagatay Something like this?

    7a330ecb-474e-4cb8-9b04-042f4fa9acc1-image.png

    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 Something like this?

    7a330ecb-474e-4cb8-9b04-042f4fa9acc1-image.png

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

    @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 Something like this?

    7a330ecb-474e-4cb8-9b04-042f4fa9acc1-image.png

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

    @phenomlab there is one small problem that shown below;

    26fa885d-91b1-441e-a170-a1e4ae76e46e-image.png

  • @phenomlab there is one small problem that shown below;

    26fa885d-91b1-441e-a170-a1e4ae76e46e-image.png

    @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 there is one small problem that shown below;

    26fa885d-91b1-441e-a170-a1e4ae76e46e-image.png

    @cagatay I can’t see any issue here?

    480259db-f513-4e75-8390-37d2958fdd94-image.png

    Can you PM me the link to that post?

  • @cagatay I can’t see any issue here?

    480259db-f513-4e75-8390-37d2958fdd94-image.png

    Can you PM me the link to that post?

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

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

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

  • phenomlabundefined phenomlab has marked this topic as solved on
  • @cagatay Great. Thanks. I’ll mark this as resolved.

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

    57d5f412-fd83-4a42-a751-d32cd689c1a3-image.png

    ca9f5b27-3034-4e2d-bc41-f1e30e496559-image.png

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

    57d5f412-fd83-4a42-a751-d32cd689c1a3-image.png

    ca9f5b27-3034-4e2d-bc41-f1e30e496559-image.png

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

    @phenomlab ok dear, waiting for it. thanks.

  • @phenomlab ok dear, waiting for it. thanks.

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

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

    @phenomlab nothing changed dear.

  • @phenomlab nothing changed dear.

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

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

    @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 said in Post Style View:

    .topic-response-post

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

    @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 You can try this (with different colours), but it might be a bit greedy

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

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

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

    also worked 🙂

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

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

    also worked 🙂

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


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 💗

Related Topics