Skip to content

Post Style View

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

    @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

    wrote on last edited by
    #27

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

    wrote on last edited by
    #28

    @cagatay said in Post Style View:

    See you again when i see minor problem

    🙂 Looking forward !

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

    See you again when i see minor problem

    🙂 Looking forward !

    wrote on last edited by cagatay
    #29

    @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

  • wrote on last edited by
    #30

    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.

    wrote on last edited by
    #31

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

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

    wrote on last edited by
    #32

    @cagatay Not yet 🙂 Will do so today

  • @cagatay Not yet 🙂 Will do so today

    wrote on last edited by
    #33

    @phenomlab Sorry for waste one’s your time.

  • @cagatay Not yet 🙂 Will do so today

    wrote on last edited by cagatay
    #34

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

    wrote on last edited by
    #35

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

    wrote on last edited by
    #36

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

    wrote on last edited by
    #37

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

    wrote on last edited by
    #38

    @phenomlab thank you waiting your free time 😊 👍

  • @phenomlab thank you waiting your free time 😊 👍

    wrote on last edited by
    #39

    @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

    wrote on last edited by
    #40

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

    wrote on last edited by
    #41

    @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

    wrote on last edited by cagatay
    #42
  • wrote on last edited by
    #43

    @cagatay Seems fine to me ?

    25678c08-ae90-4da6-95a5-c3b1229e7e08-image.png

  • @cagatay Seems fine to me ?

    25678c08-ae90-4da6-95a5-c3b1229e7e08-image.png

    wrote on last edited by
    #44

    @phenomlab pls refresh?

  • @phenomlab pls refresh?

    wrote on last edited by
    #45

    @cagatay I have. No issues on my side


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
  • Nodebb vs Wordpress vs Other

    General wordpress nodebb woocomerce business
    4
    5 Votes
    4 Posts
    2k Views
    DownPW
    PrestaShop + modules IA https://www.prestashop.com Magento https://developer.adobe.com/open/magento
  • 1 Votes
    1 Posts
    2k Views
    No one has replied
  • Composer options on nodebb

    Solved Configure nodebb
    8
    1
    3 Votes
    8 Posts
    3k Views
    phenomlab
    @Panda You should be able to expose the CSS for these using F12 to get into console [image: 3591518c-e3a3-4ada-a43c-6b32a5e0359c-image.png] [image: a2b8ed46-4157-4ff2-85f0-576543380107-image.png] That should then expose the element once selected [image: 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
    2k Views
    phenomlab
    @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.
  • [NODEBB] Welcome Message

    Solved Customisation css html nodebb
    20
    2
    13 Votes
    20 Posts
    9k Views
    phenomlab
    @DownPW the ‘js’ code for the banner takes the time from the client, so what it displays really depends on the regional settings for the operating system. I’ve not seen this issue myself but would like to see some examples of screenshots if possible.
  • [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] custom Gravatar image not showing

    Solved Customisation
    6
    1 Votes
    6 Posts
    3k Views
    JAC
    @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
  • [NodeBB] Creating new user to auto post content

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