Skip to content

Post Style View

Solved Customisation
67 3 20.8k 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
  • 4 Votes
    7 Posts
    2k Views
    @phenomlab oh no, that is 1 cent on the video, but you are right, symbols are similar… I just converted it to $1 , since it is more intuitive in daily life…
  • 5 Votes
    4 Posts
    2k Views
    @DownPW thanks. I forgot about that.
  • Composer options on nodebb

    Solved Configure nodebb
    8
    1
    3 Votes
    8 Posts
    2k Views
    @Panda You should be able to expose the CSS for these using F12 to get into console [image: 1686833368846-3591518c-e3a3-4ada-a43c-6b32a5e0359c-image.png] [image: 1686833399483-a2b8ed46-4157-4ff2-85f0-576543380107-image.png] That should then expose the element once selected [image: 1686833431032-89d9c545-a47a-40d1-98f4-80cf3b958e8f-image.png] Here’s the below CSS you need based on the screenshot provided. .composer .formatting-bar .formatting-group li[data-format="picture-o"], .composer .formatting-bar .formatting-group li[data-format="spoiler"] { display: none; }
  • restarting nodebb on boot

    Unsolved Configure nodebb
    3
    1 Votes
    3 Posts
    1k Views
    @eeeee said in restarting nodebb on boot: can I just run nodebb under nodemon for auto restarts? It’s a better method. Nodemon just looks for file system changes and would effectively die if the server was rebooted meaning you’d have to start it again anyway. Systemd is the defacto standard which is how the operating system interacts in terms of services, scheduled tasks etc.
  • NodeBB v3

    Announcements nodebb v3 nodebb
    2
    3 Votes
    2 Posts
    902 Views
    @cagatay JS will work fine - no changes there, and there are no plans to drop support for jQuery. More of an issue is the CSS - for which there are quite a few breaking changes. Keep an eye on sudonix.dev (my development site) where you can see progress in relation to how I am tackling the compatibility issues.
  • [NODEBB] Reply Button/arrow answer

    Solved Customisation css nodebb
    25
    4
    4 Votes
    25 Posts
    8k Views
    Topic open https://sudonix.com/topic/207/nodebb-help-for-my-custom-css
  • Social icon (Nodebb)

    Solved Customisation nodebb social
    7
    0 Votes
    7 Posts
    2k Views
    @phenomlab said in Social icon (Nodebb): @jac I just tested my theory around using the OG image, and according to the Twitter card validator, it works fine [image: 1638880098289-73e805e1-997b-41bf-9259-51c5052ca8fc-image.png] fixed
  • [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