Skip to content

Post Style View

Solved Customisation
67 3 16.3k 2
  • @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”

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

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

    856c68b0-b288-46d5-aa7f-75a8c2658e47-image.png

    @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 If the post is new one created by me, there is also shown 🙂

    856c68b0-b288-46d5-aa7f-75a8c2658e47-image.png

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

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

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

    @phenomlab nothing changed for first owner post;

    0e13b6dc-ac14-4a15-b56b-e5b87461d351-image.png

  • @phenomlab nothing changed for first owner post;

    0e13b6dc-ac14-4a15-b56b-e5b87461d351-image.png

    @cagatay Is that with or without the new functions I provided, or with both ?


Did this solution help you?
Did you find the suggested solution useful? Support 💗 Sudonix with a coffee
If your organisation needs deeper expertise around infrastructure, security, or technology leadership, learn more about Phenomlab Ltd. Many of the deeper technical guides behind Sudonix are published there.

Related Topics
  • Sudonix and fediverse

    Solved Customisation sudonix
    16
    4 Votes
    16 Posts
    2k Views
    @Panda said in Sudonix and fediverse: Federation will have huge advantages, especially for starting off forums that would otherwise be quiet, because it can bring in posts from similar sites to increase content. Can’t say I agree with this statement. To me, if I visit a new forum, I’d much rather be viewing original content rather than that which I can easily consume elsewhere. I understand that new forums are often empty with not much content, but the growth needs to be organic rather than ingested from elsewhere to make it look busy. Using RSS feeds to pull in content from remote sites is fine as long as you use it for reading reference and create a discussion around the topic you are referring to (as I do with Sudonix), but absolutely pointless if you include the entire article and all associated responses - you may as well just visit the origin site instead. Another issue is SEO and the impact duplicated content will have on your own forum when it comes to Google indexing your site. Duplicated content negatively impacts SEO and in addition, that same content may be proprietary meaning you need permission to include it on your site. Potentially, it’s a legal minefield which should be treated with trepidation to ensure no copyright infringement takes place.
  • CSS codes to prevent votes to disappear

    Solved Customisation nodebb
    3
    1 Votes
    3 Posts
    894 Views
    @phenomlab yes, it is thanks a lot…
  • nodebb error logs

    Bugs nodebb
    6
    2
    4 Votes
    6 Posts
    1k Views
    I just wanted to ask because I don’t have much knowledge about the new installation. Thank you for the explanatory answer.
  • 1 Votes
    1 Posts
    725 Views
    No one has replied
  • Top Ranked Forums

    Chitchat nodebb top ranked
    9
    1
    3 Votes
    9 Posts
    2k Views
    The real issue here is that most people consider forums to be “dead” in the sense that nobody uses them anymore, and social media groups have taken their place. Their once dominant stance in the 90’s and early 00’s will never be experienced again, but having said that, there are a number of forums that did in fact survive the social media onslaught, and still enjoy a large user base. Forums tend to be niche. One that immediately sticks out is Reddit - despite looking like it was designed in the 80s, it still has an enormous user base. Another is Stack Overflow, which needs no introduction. The key to any forum is the content it offers, and the more people whom contribute in terms of posting , the more popular and widely respected it becomes as a reliable source of information. Forums are still intensely popular with gamers, alongside those that offer tips on hacking etc.
  • Error install plugin

    Solved Customisation plugin nodebb
    8
    1
    1 Votes
    8 Posts
    3k Views
    @pobojmoks Not WP plugin but nodeBB but it a known bug
  • [NODEBB] CSS Style Sheets SelectBox

    Locked Solved Customisation css
    112
    24 Votes
    112 Posts
    33k Views
    @DownPW as discussed in PM Seems to have been solved with the new JS code that you added allowing the version CSS file change!! Cache problem therefore with the JS of the Switcher theme Based on this, I will close this thread and reference https://sudonix.com/topic/207/nodebb-help-for-my-custom-css/27
  • [NodeBB] First post customization

    Solved Customisation nodebb
    5
    4 Votes
    5 Posts
    1k Views
    @phenomlab thanks