Skip to content

Post Style View

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

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

    @phenomlab css side;

    @media (min-width: 1200px) {
    li.topic-owner-post .content, li.topic-response-post .content {
        background: PowderBlue;
        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 PowderBlue;
        top: 66px;
        content: "";
        position: absolute;
        left: 70px;
    }
    li.self-post .content:not(.isSolved [component="post/content"])[itemprop="text"] {
        background: CadetBlue;
        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 CadetBlue;
        top: 58px;
        content: "";
        position: absolute;
        right: 95px;
        left: unset !important;
        border-bottom: none !important;
        bottom: unset !important;
    }
    }
    li.self-post.topic-response-post:before {
        display: none;
    }
    
    

    JS side;

    $(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');
    
            }
        });
    });
    // 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');
            }
        });
    });
    
  • @phenomlab css side;

    @media (min-width: 1200px) {
    li.topic-owner-post .content, li.topic-response-post .content {
        background: PowderBlue;
        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 PowderBlue;
        top: 66px;
        content: "";
        position: absolute;
        left: 70px;
    }
    li.self-post .content:not(.isSolved [component="post/content"])[itemprop="text"] {
        background: CadetBlue;
        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 CadetBlue;
        top: 58px;
        content: "";
        position: absolute;
        right: 95px;
        left: unset !important;
        border-bottom: none !important;
        bottom: unset !important;
    }
    }
    li.self-post.topic-response-post:before {
        display: none;
    }
    
    

    JS side;

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

    @cagatay Let me have a look

    EDIT - I see it. Find class

    [data-index="0"] .content[component="post/content"]:before, .topic-owner-post:before, .topic-response-post:before
    

    change it to

    .topic-owner-post:before, .topic-response-post:before
    

    So basically, just remove

    [data-index="0"] .content[component="post/content"]:before, 
    

    That should do it

  • @cagatay Let me have a look

    EDIT - I see it. Find class

    [data-index="0"] .content[component="post/content"]:before, .topic-owner-post:before, .topic-response-post:before
    

    change it to

    .topic-owner-post:before, .topic-response-post:before
    

    So basically, just remove

    [data-index="0"] .content[component="post/content"]:before, 
    

    That should do it

    @phenomlab said in Post Style View:

    [data-index=“0”] .content[component=“post/content”]:before, .topic-owner-post:before, .topic-response-post:before

    I did, everything looks like well 🙂 thank you.

    See you again when i see minor problem 🙂

  • @phenomlab said in Post Style View:

    [data-index=“0”] .content[component=“post/content”]:before, .topic-owner-post:before, .topic-response-post:before

    I did, everything looks like well 🙂 thank you.

    See you again when i see minor problem 🙂

    @cagatay said in Post Style View:

    See you again when i see minor problem

    🙂 Looking forward !

  • phenomlabundefined phenomlab referenced this topic on
  • @cagatay said in Post Style View:

    See you again when i see minor problem

    🙂 Looking forward !

    @phenomlab When I post something to the thread, my avatar can be seen on the left side of the post. However, when I refresh the page, avatar goes to the right side.

    before f5;
    15b01a72-dbd3-48c0-8ace-ff195c793455-image.png
    after f5;
    4afb6140-1338-4038-b0b4-a8c68f2ac6cd-image.png

  • That’s odd. It looks like the specific class that controls they isn’t being loaded until you perform a hard refresh. I’ll need to have a look at your site to determine why that is.

  • That’s odd. It looks like the specific class that controls they isn’t being loaded until you perform a hard refresh. I’ll need to have a look at your site to determine why that is.

    @phenomlab the problem still persist, did you have a look?

  • @phenomlab the problem still persist, did you have a look?

    @cagatay Not yet 🙂 Will do so today

  • @cagatay Not yet 🙂 Will do so today

    @phenomlab Sorry for waste one’s your time.

  • @cagatay Not yet 🙂 Will do so today

    @phenomlab new miror problem is when i created new topic the codes are figure out not working. After F5 also…

    8ba2daf6-ea20-4e53-92f1-7aee3051a63f-image.png

    Maybe we can change the codes just for different color for user not right side avatar etc.

  • cagatayundefined cagatay has marked this topic as unsolved on
  • @phenomlab new miror problem is when i created new topic the codes are figure out not working. After F5 also…

    8ba2daf6-ea20-4e53-92f1-7aee3051a63f-image.png

    Maybe we can change the codes just for different color for user not right side avatar etc.

    @cagatay I’ll have a look at this tomorrow. However, this is the reason why I said to do this in a DEV environment 👍

  • @cagatay I’ll have a look at this tomorrow. However, this is the reason why I said to do this in a DEV environment 👍

    @phenomlab users dont feel anything hope so 🙂 but i think this way which i m saying easy then current one which you are using in sudonix.

    my suggest that; just change color type without changing side metod mean right side…

  • @phenomlab users dont feel anything hope so 🙂 but i think this way which i m saying easy then current one which you are using in sudonix.

    my suggest that; just change color type without changing side metod mean right side…

    @cagatay yep, I’ll take a look at this tomorrow and we’ll get it resolved.

  • @cagatay yep, I’ll take a look at this tomorrow and we’ll get it resolved.

    @phenomlab thank you waiting your free time 😊 👍

  • @phenomlab thank you waiting your free time 😊 👍

    @cagatay Should look a bit better now - just finishing up the jQuery code as that is not firing properly. Let me know

  • @cagatay Should look a bit better now - just finishing up the jQuery code as that is not firing properly. Let me know

    @phenomlab yes i entered new topic and new post, seems everything is working great. thanks Mark…

  • @phenomlab yes i entered new topic and new post, seems everything is working great. thanks Mark…

    @cagatay Thanks for confirming. Just finishing up the jQuery functions so if you are logged in as admin, the page might reload a few times, but this is expected

  • @cagatay Thanks for confirming. Just finishing up the jQuery functions so if you are logged in as admin, the page might reload a few times, but this is expected


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
  • Test World Of Sudonix

    World test tester world sudonix
    1
    0 Votes
    1 Posts
    288 Views
    No one has replied
  • Nodebb design

    Solved General nodebb
    2
    1 Votes
    2 Posts
    982 Views
    @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
    930 Views
    No one has replied
  • 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.
  • Plugin reaction Bug

    Solved Customisation plugin nodebb reaction
    15
    1
    0 Votes
    15 Posts
    3k Views
    @DownPW That was going to be my next suggestion
  • 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] CSS Style Sheets SelectBox

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

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