Skip to content

Post Style View

Solved Customisation
67 3 25.5k 2
  • @cagatay in case you’re still following this thread, I found a far more efficient way of adding the classes using jQuery. To this end, you can change this block above with this code

    // Target those elements already loaded in the DOM
    $(document).ready(function() {
        $(window).on('action:ajaxify.end', function(data) {
            $('li[component="post"]').each(function(i, obj) {
                if (!$(this).hasClass('self-post') || (!$(this).hasClass('self-post'))) {
                    console.log("Adding required classes for messenger type view");
                    $(this).addClass('topic-response-post');
                }
    
            });
        });
    });
    // Target elements dynamically added to the DOM on post load
    $(document).ready(function() {
        $(window).on('action:ajaxify.loaded', function(data) {
            $('li[component="post"]').each(function(i, obj) {
                if (!$(this).hasClass('self-post') || (!$(this).hasClass('self-post'))) {
                    console.log("Adding required classes for messenger type view");
                    $(this).addClass('topic-response-post');
                }
    
            });
        });
    });
    

    @phenomlab said in Post Style View:

    // Target those elements already loaded in the DOM
    $(document).ready(function() {
    $(window).on(‘action:ajaxify.end’, function(data) {
    $(‘li[component=“post”]’).each(function(i, obj) {
    if (!$(this).hasClass(‘self-post’) || (!$(this).hasClass(‘self-post’))) {
    console.log(“Adding required classes for messenger type view”);
    $(this).addClass(‘topic-response-post’);
    }

        });
    });
    

    });
    // Target elements dynamically added to the DOM on post load
    $(document).ready(function() {
    $(window).on(‘action:ajaxify.loaded’, function(data) {
    $(‘li[component=“post”]’).each(function(i, obj) {
    if (!$(this).hasClass(‘self-post’) || (!$(this).hasClass(‘self-post’))) {
    console.log(“Adding required classes for messenger type view”);
    $(this).addClass(‘topic-response-post’);
    }

        });
    });
    

    });

    thank you Mark.
    changed it.

  • @cagatay in case you’re still following this thread, I found a far more efficient way of adding the classes using jQuery. To this end, you can change this block above with this code

    // Target those elements already loaded in the DOM
    $(document).ready(function() {
        $(window).on('action:ajaxify.end', function(data) {
            $('li[component="post"]').each(function(i, obj) {
                if (!$(this).hasClass('self-post') || (!$(this).hasClass('self-post'))) {
                    console.log("Adding required classes for messenger type view");
                    $(this).addClass('topic-response-post');
                }
    
            });
        });
    });
    // Target elements dynamically added to the DOM on post load
    $(document).ready(function() {
        $(window).on('action:ajaxify.loaded', function(data) {
            $('li[component="post"]').each(function(i, obj) {
                if (!$(this).hasClass('self-post') || (!$(this).hasClass('self-post'))) {
                    console.log("Adding required classes for messenger type view");
                    $(this).addClass('topic-response-post');
                }
    
            });
        });
    });
    

    @phenomlab there is small problem after revised codes which you shared.
    problem is shown below; answered nick and labels nested.

    8cb60812-c40c-4834-bdb2-bd8ef6271340-image.png

  • @phenomlab there is small problem after revised codes which you shared.
    problem is shown below; answered nick and labels nested.

    8cb60812-c40c-4834-bdb2-bd8ef6271340-image.png

    @cagatay that’s just a margin missing. The code I provided won’t be causing that. If you look for the element in the developers console and add a margin-left value to it, that should resolve it.

  • @cagatay that’s just a margin missing. The code I provided won’t be causing that. If you look for the element in the developers console and add a margin-left value to it, that should resolve it.

    @phenomlab may i use this code?

    .topic-owner-post [itemprop="author"] {
        float: left;
    }
    // Add these to (or edit) the existing classes you have
    .user-level-topic {
        float: none;
    }
    .group-label {
        margin-top: -1px;
    }
    .topic-owner-post [itemprop="author"]:after {
        margin-top: 1px;
        height: 18px;
    }
    
  • @phenomlab may i use this code?

    .topic-owner-post [itemprop="author"] {
        float: left;
    }
    // Add these to (or edit) the existing classes you have
    .user-level-topic {
        float: none;
    }
    .group-label {
        margin-top: -1px;
    }
    .topic-owner-post [itemprop="author"]:after {
        margin-top: 1px;
        height: 18px;
    }
    

    @cagatay from the screenshot you provided, it looks like you’ve used them. They are fine to use, but you are missing a couple of styles.

    I’ll have a look at this tomorrow and give you the remainder of the code you need.

  • @cagatay from the screenshot you provided, it looks like you’ve used them. They are fine to use, but you are missing a couple of styles.

    I’ll have a look at this tomorrow and give you the remainder of the code you need.

    @phenomlab i cant fix it 😞

    0ec83f76-a140-46dc-9a9f-b4f6f3d98b9c-image.png

  • @phenomlab i cant fix it 😞

    0ec83f76-a140-46dc-9a9f-b4f6f3d98b9c-image.png

    @cagatay

    Just add margin-left on the element like @phenomlab said to you :

    topic [component="post/parent"] {
        margin-left: 10px;
    }
    

    aa08c62b-4223-4cba-8c0f-c73d50474c0d-image.png

    Maybe @phenomlab have a better way


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
  • Bug Report

    Solved Bugs nodebb bugs
    47
    1
    26 Votes
    47 Posts
    14k 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?)
  • 1 Votes
    1 Posts
    1k Views
    No one has replied
  • 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; }
  • NodeBB upgrade now cant post

    Solved Bugs nodebb
    5
    2 Votes
    5 Posts
    1k Views
    @Panda yes, for some reason, that is the case. If you need an urgent response, it’s probably better to post here because of the time difference.
  • 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.
  • creating topic specific widgets

    Solved Customisation nodebb
    16
    10 Votes
    16 Posts
    5k Views
    @crazycells said in creating topic specific widgets: Additionally if hide class exists, why are we re-defining it? We’re not 🤭 I misspelled it - it should be hidden
  • Adjusting the size of boxes in posts-list class

    Solved Customisation nodebb
    3
    3 Votes
    3 Posts
    2k 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
    47k 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