Skip to content

Post Style View

Solved Customisation
67 3 27.4k 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
  • What’s going on with NodeBB?

    Performance nodebb script die
    20
    8 Votes
    20 Posts
    3k Views
    @cagatay The most reliable way to upgrade Node.js on Ubuntu depends on how you originally installed it. Method 1: Using NVM (Recommended) If you already use Node Version Manager (NVM), upgrading is simple. NVM allows you to keep both versions and switch between them if needed. Install Node 22: nvm install 22 Switch to Node 22: nvm use 22 Set it as your default: nvm alias default 22 Verify the change: node -v Method 2: Using NodeSource (PPA) If you installed Node.js via apt using the NodeSource repository, you need to update the repository script to point to the new version. Remove the old NodeSource list (optional but cleaner): sudo rm /etc/apt/sources.list.d/nodesource.list Download and run the NodeSource setup script for Node 22: curl -fsSL [https://deb.nodesource.com/setup_22.x](https://deb.nodesource.com/setup_22.x) | sudo -E bash - Install/Upgrade Node.js: sudo apt-get install -y nodejs Verify the installation: node -v Method 3: Using the ‘n’ Package If you have npm installed, you can use the n interactive manager. Clear the npm cache: sudo npm cache clean -f Install the ‘n’ helper: sudo npm install -g n Install Node 22: sudo n 22 Update your shell: hash -r Troubleshooting Permission Denied: If you see permission errors using Method 2 or 3, ensure you are using sudo. Path Issues: If node -v still shows version 20 after upgrading via NVM, restart your terminal or run source ~/.bashrc. Conflicts: Avoid mixing these methods. If you switch from apt to nvm, it is best to sudo apt remove nodejs first to avoid path conflicts.
  • navigation menu panel on mobile

    Solved Customisation nodebb css
    8
    1
    7 Votes
    8 Posts
    2k Views
    @crazycells hmm. That’s odd. I haven’t made any changes from recollection but I could be wrong. I’ll need to check. EDIT - very strange. I honestly don’t recall adding the below CSS block to alter the bottom bar, but you’re right… .bottombar-nav { padding: 0px !important; } I’ve removed this so it reflects stock Harmony.
  • Bug Report

    Solved Bugs nodebb bugs
    47
    1
    26 Votes
    47 Posts
    15k Views
    @crazycells Good points, thanks. I completely forgot that classes are added - makes life much simpler! EDIT - seems this is pretty straightforward, and only needs the below CSS .upvoted i { color: var(--bs-user-level) !important; } This then yields [image: 1718028529465-3f072f8a-ebfa-4910-8723-73c493b8e4eb-image.png] However, the caveat here is that the .upvoted class will only show for your upvotes, and nobody else’s. However, this does satisfy the original request however I would love to see my upvoted posts more clearly, because currently, when I upvote, nothing on the post tool is changing, it would be nicer if there is an indication that I have upvoted (like a filled or colored triangle?)
  • 5 Votes
    4 Posts
    2k Views
    @DownPW thanks. I forgot about that.
  • 1 Votes
    1 Posts
    1k Views
    No one has replied
  • Smart Widgets

    Solved Configure nodebb
    9
    3 Votes
    9 Posts
    2k Views
    @Panda said in Smart Widgets: So why is that, or conversely why would the function to expose username ever be required, as it seems app.user is already an available global object? It is, yes, but not if you are using it outside of a widget. The function I wrote is also historical and comes from the 2.x train
  • How to fix size of photos & videos NodeBB

    Solved Customisation nodebb nodebb size
    7
    3 Votes
    7 Posts
    2k Views
    @crazycells pleasure. Using percentages makes much more sense in this case. It’s the same argument with px vs pt vs em with fonts, margins, padding, etc., in the sense that em is generally preferred over px and pt https://stackoverflow.com/questions/609517/why-em-instead-of-px
  • [NodeBB] First post customization

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