Skip to content

Post Style View

Solved Customisation
67 3 35.2k 2
  • 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

  • @cagatay I have. No issues on my side

    wrote on last edited by
    #46

    @phenomlab maybe it depends on me or my web browser. thank you 🙂

  • @phenomlab maybe it depends on me or my web browser. thank you 🙂

    wrote on last edited by
    #47

    @cagatay No problems. I checked this in an incognito session also, with no issues

    748735c8-4141-4185-9d46-4eb3f8023744-image.png

  • @phenomlab maybe it depends on me or my web browser. thank you 🙂

    wrote on last edited by phenomlab
    #48

    @cagatay said in Post Style View:

    maybe it depends on me or my web browser. thank you

    One thing I have noticed is that there are a number of errors on your site in the console. My concern here is that the jQuery functions I added are not being executed. For example, I removed the below function from your site about 30 minutes ago because it’s malformed

    });ment).ready(function () {
        function animateTags() {
        	if (ajaxify.data.template.name === 'categories') {
        		var tags = $('.popular-tags .tag-item');
        		var bar = $('<div class="popular-tags-bar"></div>');
        		tags.append(bar);
        		
        		var max;
        		
        		setTimeout(function() {
            		tags.each(function() {
            		   var bar = $(this).find('.popular-tags-bar');
            		   var val = parseInt(bar.parents('a').find('.tag-topic-count').text(), 10);
            		   max = max > val ? max : val;
            		   
            		   bar.css({
            		       width: val / max * 100 + '%'
            		   });
            		});
        		}, 100)
        	}
        }
        animateTags();
        $(window).on('action:ajaxify.end', animateTags);
    });
    

    As you can see, this isn’t right at all. It should be

    $(document).ready(function () {
        function animateTags() {
            if (ajaxify.data.template.name === 'categories') {
                var tags = $('.popular-tags .tag-item');
                var bar = $('<div class="popular-tags-bar"></div>');
                tags.append(bar);
    
                var max;
    
                setTimeout(function () {
                    tags.each(function () {
                        var bar = $(this).find('.popular-tags-bar');
                        var val = parseInt(bar.parents('a').find('.tag-topic-count').text(), 10);
                        max = max > val ? max : val;
    
                        bar.css({
                            width: val / max * 100 + '%'
                        });
                    });
                }, 100);
            }
        }
        animateTags();
        $(window).on('action:ajaxify.end', animateTags);
    });
    

    I’ve put this back how it should be, but am curious as to where that came from.

  • @cagatay said in Post Style View:

    maybe it depends on me or my web browser. thank you

    One thing I have noticed is that there are a number of errors on your site in the console. My concern here is that the jQuery functions I added are not being executed. For example, I removed the below function from your site about 30 minutes ago because it’s malformed

    });ment).ready(function () {
        function animateTags() {
        	if (ajaxify.data.template.name === 'categories') {
        		var tags = $('.popular-tags .tag-item');
        		var bar = $('<div class="popular-tags-bar"></div>');
        		tags.append(bar);
        		
        		var max;
        		
        		setTimeout(function() {
            		tags.each(function() {
            		   var bar = $(this).find('.popular-tags-bar');
            		   var val = parseInt(bar.parents('a').find('.tag-topic-count').text(), 10);
            		   max = max > val ? max : val;
            		   
            		   bar.css({
            		       width: val / max * 100 + '%'
            		   });
            		});
        		}, 100)
        	}
        }
        animateTags();
        $(window).on('action:ajaxify.end', animateTags);
    });
    

    As you can see, this isn’t right at all. It should be

    $(document).ready(function () {
        function animateTags() {
            if (ajaxify.data.template.name === 'categories') {
                var tags = $('.popular-tags .tag-item');
                var bar = $('<div class="popular-tags-bar"></div>');
                tags.append(bar);
    
                var max;
    
                setTimeout(function () {
                    tags.each(function () {
                        var bar = $(this).find('.popular-tags-bar');
                        var val = parseInt(bar.parents('a').find('.tag-topic-count').text(), 10);
                        max = max > val ? max : val;
    
                        bar.css({
                            width: val / max * 100 + '%'
                        });
                    });
                }, 100);
            }
        }
        animateTags();
        $(window).on('action:ajaxify.end', animateTags);
    });
    

    I’ve put this back how it should be, but am curious as to where that came from.

    wrote on last edited by
    #49

    @phenomlab i can not understand how it can be, i do not touch anything js side.

    so now everything is working and code is okey hope so?

  • @phenomlab i can not understand how it can be, i do not touch anything js side.

    so now everything is working and code is okey hope so?

    wrote on last edited by
    #50

    @cagatay Not entirely. There is an ajax call I need to use called action:ajaxify.loaded but this does not seem to be firing on your site. It’s opposite, action:ajaxify.end works fine (as you’ll see if you press F5) but the former does not, and I can’t see any reason as to why.


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 error logs

    Bugs nodebb
    6
    2
    4 Votes
    6 Posts
    2k Views
    ahmed
    I just wanted to ask because I don’t have much knowledge about the new installation. Thank you for the explanatory answer.
  • Bug Report

    Solved Bugs nodebb bugs
    47
    1
    26 Votes
    47 Posts
    20k Views
    phenomlab
    @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: 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?)
  • How to style tool tip of nodebb-plugin-user-level

    Solved Customisation user level css
    4
    1
    5 Votes
    4 Posts
    3k Views
    phenomlab
    @DownPW thanks. I forgot about that.
  • Title on homepage of nodebb forum

    Solved Customisation nodebb
    2
    1 Votes
    2 Posts
    2k Views
    phenomlab
    @eveh Welcome board The code you are referring to is custom written as no such functionality exists under NodeBB. However, adding the functionality is relatively trivial. Below are the required steps Navigate to /admin/appearance/customise#custom-header Add the below code to your header, and save once completed <ol id="mainbanner" class="breadcrumb"><li id="addtext">Your Title Goes Here</li></ol> Navigate to /admin/appearance/customise#custom-js and add the below code, then save $(document).ready(function() { $(window).on('action:ajaxify.end', function(data) { // Initialise mainbanner ID, but hide it from view $('#mainbanner').hide(); var pathname = window.location.pathname; if (pathname === "/") { $("#addtext").text("Your Title"); $('#mainbanner').show(); } else {} // If we want to add a title to a sub page, uncomment the below and adjust accordingly //if (pathname === "/yourpath") { //$("#addtext").text("Your Title"); //$('#mainbanner').show(); //} }); }); Navigate to /admin/appearance/customise#custom-css and add the below CSS block .breadcrumb { right: 0; margin-right: auto; text-align: center; background: #0086c4; color: #ffffff; width: 100vw; position: relative; margin-left: -50vw; left: 50%; top: 50px; position: fixed; z-index: 1020; } Note, that you will need to adjust your CSS code to suit your own site / requirements.
  • Fontawesome 5

    Unsolved Customisation fonts css nodebb
    14
    1 Votes
    14 Posts
    6k Views
    phenomlab
    @pwsincd hi. Just following up on this thread (I know it’s old) but was curious to understand if it’s still an issue or not ?
  • Adjusting the size of boxes in posts-list class

    Solved Customisation nodebb
    3
    3 Votes
    3 Posts
    2k Views
    crazycells
    @phenomlab thanks a lot, this combination works best .posts-list .posts-list-item .content { overflow: auto; max-height: 600px; }
  • [NODEBB] Help for my custom CSS

    Solved Customisation nodebb css bugfix
    258
    49 Votes
    258 Posts
    168k Views
    cagatay
    mark hi, Refused to apply style from ‘https://efelsefe.com/assets/customfonts/FontAwesome-6-Pro/pro/css/v4-font-face.css’ because its MIME type (‘text/plain’) is not a supported stylesheet MIME type, and strict MIME checking is enabled. I keep getting this error.
  • NodeBB Footer

    Solved Customisation footer nodebb
    10
    1 Votes
    10 Posts
    4k Views
    JAC
    @phenomlab said in NodeBB Footer: @jac and you. Hope all is well and you recover quickly Thanks pal