Skip to content

Post Style View

Solved Customisation
67 3 35.2k 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');
    
            }
        });
    });
    
    wrote on last edited by
    #5

    @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');
    
            }
        });
    });
    
    wrote on last edited by cagatay
    #6

    @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

    wrote on last edited by
    #7

    @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

    wrote on last edited by phenomlab
    #8

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

    wrote on last edited by
    #9

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

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

    wrote on last edited by
    #10

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

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

    wrote on last edited by
    #11

    @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

    wrote on last edited by phenomlab
    #12

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

    wrote on last edited by
    #13

    @phenomlab ok dear, waiting for it. thanks.

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

    wrote on last edited by phenomlab
    #14

    @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

    wrote on last edited by
    #15

    @phenomlab nothing changed dear.

  • @phenomlab nothing changed dear.

    wrote on last edited by
    #16

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

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

    wrote on last edited by
    #17

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

    wrote on last edited by
    #18

    @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;
    }
    
    wrote on last edited by
    #19

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

    wrote on last edited by
    #20

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

    wrote on last edited by
    #21

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

    wrote on last edited by phenomlab
    #22

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

    wrote on last edited by
    #23

    @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

    wrote on last edited by
    #24

    @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
  • how to hide "moved" badge with CSS?

    Solved Customisation nodebb
    12
    1
    3 Votes
    12 Posts
    4k Views
    phenomlab
    @crazycells ah, I see. That makes sense.
  • How to style tool tip of nodebb-plugin-user-level

    Solved Customisation user level css
    4
    1
    5 Votes
    4 Posts
    3k Views
    phenomlab
    @DownPW thanks. I forgot about that.
  • Nodebb design

    Solved General nodebb
    2
    1 Votes
    2 Posts
    1k Views
    phenomlab
    @Panda said in Nodebb design: One negative is not being so good for SEO as more Server side rendered forums, if web crawlers dont run the JS to read the forum. From recollection, Google and Bing have the capability to read and process JS, although it’s not in the same manner as a physical person will consume content on a page. It will be seen as plain text, but will be indexed. However, it’s important to note that Yandex and Baidu will not render JS, although seeing as Google has a 90% share of the content available on the web in terms of indexing, this isn’t something you’ll likely lose sleep over. @Panda said in Nodebb design: The “write api” is preferred for server-to-server interactions. This is mostly based around overall security - you won’t typically want a client machine changing database elements or altering data. This is why you have “client-side” which could be DOM manipulation etc, and “server-side” which performs more complex operations as it can communicate directly with the database whereas the client cannot (and if it can, then you have a serious security flaw). Reading from the API is perfectly acceptable on the client-side, but not being able to write. A paradigm here would be something like SNMP. This protocol exists as a UDP (UDP is very efficient, as it is “fire and forget” and does not wait for a response like TCP does) based service which reads performance data from a remote source, thus enabling an application to parse that data for use in a monitoring application. In all cases, SNMP access should be “RO” (Read Only) and not RW (Read Write). It is completely feasible to assume complete control over a firewall for example by having RW access to SNMP and then exposing it to the entire internet with a weak passphrase. You wouldn’t do it (at least, I hope you wouldn’t) and the same ethic applies to server-side rendering and the execution of commands.
  • 1 Votes
    1 Posts
    2k Views
    No one has replied
  • Want to use Sudonix themes ?

    Chitchat themes nodebb
    80
    1
    34 Votes
    80 Posts
    30k Views
    cagatay
    omg thank you Mark.
  • NodeBB: Creating pages

    Solved Configure nodebb create page
    9
    0 Votes
    9 Posts
    4k Views
    mventures
    OK, I think I have figured out how to place a link in the footer which will click to a new page.
  • [NODEBB] CSS Style Sheets SelectBox

    Locked Solved Customisation css
    112
    24 Votes
    112 Posts
    63k Views
    phenomlab
    @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] Creating new user to auto post content

    Solved Customisation
    3
    0 Votes
    3 Posts
    2k Views
    JAC
    @phenomlab many thanks Mark .