Skip to content

Post Style View

Solved Customisation
67 3 17.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
  • 1 Votes
    1 Posts
    757 Views
    No one has replied
  • Email validation NodeBB

    Bugs nodebb
    21
    3 Votes
    21 Posts
    6k Views
    @Panda said in Email validation NodeBB: Did you configure that as a custom change to the usual quote icon. How do you do that? I notice on NodeBB site its a solid blue quotes Yes, I changed it. NodeBB by default users the free font awesome library whereas I use the pro (paid) version SDK have access to a wider set of icons, and at different thicknesses etc. The change of colour is just simple CSS.
  • 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.
  • Changing Background on NodeBB

    Solved Customisation background image nodebb
    4
    0 Votes
    4 Posts
    1k Views
    @cagatay You’d target the body tag and use the below line of CSS background: url(/assets/customcss/backgrounds/default/default.png) no-repeat center center fixed; Obviously, you need to change the path to suit where your image is being stored. More info around the background property can be found here https://www.w3schools.com/cssref/css3_pr_background.php
  • Adjusting the size of boxes in posts-list class

    Solved Customisation nodebb
    3
    3 Votes
    3 Posts
    1k Views
    @phenomlab thanks a lot, this combination works best .posts-list .posts-list-item .content { overflow: auto; max-height: 600px; }
  • [NodeBB] First post customization

    Solved Customisation nodebb
    5
    4 Votes
    5 Posts
    2k Views
    @phenomlab thanks
  • NodeBB Discord Plugins

    Unsolved Customisation nodebb discord plugin
    7
    0 Votes
    7 Posts
    2k Views
    @RiekMedia hi. Just following up on this thread (I know it’s old) but was curious to understand if it’s still an issue or not ?
  • [NodeBB] custom Gravatar image not showing

    Solved Customisation
    6
    1 Votes
    6 Posts
    2k Views
    @jac said in [NodeBB] custom Gravatar image not showing: @phenomlab said in [NodeBB] custom Gravatar image not showing: @jac are you using Custom ? Sure am mate Confirmed Fixed