Skip to content
Sudonix

Threaded post support for NodeBB

Let's Build It
146 5 118.7k 1
  • DownPW
    DownPW
    DownPW
    wrote on
    #55

    sure :

    function threaded() {
    $(document).ready(function () {
        // Check if the screen width is 1200px or more
        if ($(window).width() >= 1200) {
            // Check if the dropdown already exists
            if ($('#enableThreading').length === 0) {
                var threadView = $('<div class="threads-wrapper"><i class="fa fa-fw fa-bars left"></i><form class="form"><div class="form-check form-switch sticky-tools-bar"> \
                    <input class="form-check-input" id="enableThreading" type="checkbox" data-field="enableThreading"> \
                    <label class=" d-none d-md-inline fw-semibold" for="enableThreading"><i class="fa fa-fw fa-bars-staggered right"></i></label> \
                </div></form></div>');
                $('.topic .sticky-tools ul [component="topic/browsing-users"]:last-of-type').append(threadView);
                // Check if there's a stored state for the checkbox and update it
                var storedState = localStorage.getItem('enableThreadingState');
                if (storedState === 'true') {
                    $('#enableThreading').prop('checked', true);
                }
            }
            // Toggle the class 'threaded' on or off when the checkbox changes state
            $('#enableThreading').on('change', function () {
                var isChecked = $(this).is(':checked');
                if (isChecked) {
                    console.log('Thread view is active.');
                    $('ul[component="topic"]').addClass('threaded');
                    $('.posts-container').addClass('threaded')
                    $('ul[component="topic"]').addClass('threaded')
                    $('.post-container').addClass('threaded')
                    $('.timeline-event').addClass('threaded')
                    $('[component="post/footer"]').addClass('threaded');
                    $('[component="post"]').each(function () {
                        // Add the 'threaded' class to matching elements
                        if ($(this).hasClass('pt-4') || $(this).hasClass('self-post')) {
                            $(this).addClass('threaded');
                            $('.topic .sticky-tools').addClass('threaded');
                        }
                    });
                } else {
                    console.log('Thread view is inactive.');
                    $('[component="post"]').removeClass('threaded');
                    $('ul[component="topic"]').removeClass('threaded');
                    $('.posts-container').removeClass('threaded')
                    $('ul[component="topic"]').removeClass('threaded')
                    $('.post-container').removeClass('threaded')
                    $('.timeline-event').removeClass('threaded')
                    $('[component="post/footer"]').removeClass('threaded');
                    $('.topic .sticky-tools').removeClass('threaded');
                }
                // Store the checkbox state in localStorage
                localStorage.setItem('enableThreadingState', isChecked);
            });
            // Check for changes in the checkbox state when the page loads
            $('#enableThreading').trigger('change');
        }
    });
}

function threadedChat() {
    $(document).ready(function () {
        // Check if the screen width is 1200px or more
        if ($(window).width() >= 1200) {
            // Check if the dropdown already exists
            if ($('#enableThreadingChat').length === 0) {
                var chatView = $('<div class="threads-wrapper"><i class="fa fa-fw fa-bars left"></i><form class="form"><div class="form-check form-switch sticky-tools-bar"> \
                    <input class="form-check-input" id="enableThreadingChat" type="checkbox" data-field="enableThreading"> \
                    <label class=" d-none d-md-inline fw-semibold" for="enableThreadingChat"><span class="title-tooltip top" tooltip-text="Éditer Profil"><i class="fa fa-fw fa-bars-staggered right"></i></label> \
                </div></form></div>');
                $('[component="chat/header"]').prepend(chatView);

                // Check if there's a stored state for the checkbox and update it
                var storedState = localStorage.getItem('enableThreadingStateChat');
                if (storedState === 'true') {
                    $('#enableThreadingChat').prop('checked', true);
                }
            }

            // Toggle the class 'threaded' on or off when the checkbox changes state
            $('#enableThreadingChat').on('change', function () {
                var isChecked = $(this).is(':checked');
                if (isChecked) {
                    console.log('Thread view is active.');
                    $('[component="chat/message"]').each(function () {
                        // Add the 'threaded' class to matching elements
                        if ($(this).hasClass('chat-message')) {
                            $(this).addClass('threaded');
                        }
                    });
                } else {
                    console.log('Thread view is inactive.');
                    $('[component="chat/message"]').removeClass('threaded');
                }

                // Store the checkbox state in localStorage
                localStorage.setItem('enableThreadingStateChat', isChecked);
            });

            // Check for changes in the checkbox state when the page loads
            $('#enableThreadingChat').trigger('change');
        }
    });
}


$(window).on('action:chat.loaded', function(data) {
        threadedChat();
});
$(window).on('action:chat.received', function(data) {
        threadedChat();
});
$(window).on('action:ajaxify.end', function (data) {
    threaded();
});

$(window).on('action:posts.edited', function (data) {
    threaded();
});

$(window).on('action:posts.loaded', function (data) {
    threaded();
});

    PW and WS Spirit alive

    phenomlab 2 Replies
    0
  • DownPW DownPW

    sure :

    function threaded() {
    $(document).ready(function () {
        // Check if the screen width is 1200px or more
        if ($(window).width() >= 1200) {
            // Check if the dropdown already exists
            if ($('#enableThreading').length === 0) {
                var threadView = $('<div class="threads-wrapper"><i class="fa fa-fw fa-bars left"></i><form class="form"><div class="form-check form-switch sticky-tools-bar"> \
                    <input class="form-check-input" id="enableThreading" type="checkbox" data-field="enableThreading"> \
                    <label class=" d-none d-md-inline fw-semibold" for="enableThreading"><i class="fa fa-fw fa-bars-staggered right"></i></label> \
                </div></form></div>');
                $('.topic .sticky-tools ul [component="topic/browsing-users"]:last-of-type').append(threadView);
                // Check if there's a stored state for the checkbox and update it
                var storedState = localStorage.getItem('enableThreadingState');
                if (storedState === 'true') {
                    $('#enableThreading').prop('checked', true);
                }
            }
            // Toggle the class 'threaded' on or off when the checkbox changes state
            $('#enableThreading').on('change', function () {
                var isChecked = $(this).is(':checked');
                if (isChecked) {
                    console.log('Thread view is active.');
                    $('ul[component="topic"]').addClass('threaded');
                    $('.posts-container').addClass('threaded')
                    $('ul[component="topic"]').addClass('threaded')
                    $('.post-container').addClass('threaded')
                    $('.timeline-event').addClass('threaded')
                    $('[component="post/footer"]').addClass('threaded');
                    $('[component="post"]').each(function () {
                        // Add the 'threaded' class to matching elements
                        if ($(this).hasClass('pt-4') || $(this).hasClass('self-post')) {
                            $(this).addClass('threaded');
                            $('.topic .sticky-tools').addClass('threaded');
                        }
                    });
                } else {
                    console.log('Thread view is inactive.');
                    $('[component="post"]').removeClass('threaded');
                    $('ul[component="topic"]').removeClass('threaded');
                    $('.posts-container').removeClass('threaded')
                    $('ul[component="topic"]').removeClass('threaded')
                    $('.post-container').removeClass('threaded')
                    $('.timeline-event').removeClass('threaded')
                    $('[component="post/footer"]').removeClass('threaded');
                    $('.topic .sticky-tools').removeClass('threaded');
                }
                // Store the checkbox state in localStorage
                localStorage.setItem('enableThreadingState', isChecked);
            });
            // Check for changes in the checkbox state when the page loads
            $('#enableThreading').trigger('change');
        }
    });
}

function threadedChat() {
    $(document).ready(function () {
        // Check if the screen width is 1200px or more
        if ($(window).width() >= 1200) {
            // Check if the dropdown already exists
            if ($('#enableThreadingChat').length === 0) {
                var chatView = $('<div class="threads-wrapper"><i class="fa fa-fw fa-bars left"></i><form class="form"><div class="form-check form-switch sticky-tools-bar"> \
                    <input class="form-check-input" id="enableThreadingChat" type="checkbox" data-field="enableThreading"> \
                    <label class=" d-none d-md-inline fw-semibold" for="enableThreadingChat"><span class="title-tooltip top" tooltip-text="Éditer Profil"><i class="fa fa-fw fa-bars-staggered right"></i></label> \
                </div></form></div>');
                $('[component="chat/header"]').prepend(chatView);

                // Check if there's a stored state for the checkbox and update it
                var storedState = localStorage.getItem('enableThreadingStateChat');
                if (storedState === 'true') {
                    $('#enableThreadingChat').prop('checked', true);
                }
            }

            // Toggle the class 'threaded' on or off when the checkbox changes state
            $('#enableThreadingChat').on('change', function () {
                var isChecked = $(this).is(':checked');
                if (isChecked) {
                    console.log('Thread view is active.');
                    $('[component="chat/message"]').each(function () {
                        // Add the 'threaded' class to matching elements
                        if ($(this).hasClass('chat-message')) {
                            $(this).addClass('threaded');
                        }
                    });
                } else {
                    console.log('Thread view is inactive.');
                    $('[component="chat/message"]').removeClass('threaded');
                }

                // Store the checkbox state in localStorage
                localStorage.setItem('enableThreadingStateChat', isChecked);
            });

            // Check for changes in the checkbox state when the page loads
            $('#enableThreadingChat').trigger('change');
        }
    });
}


$(window).on('action:chat.loaded', function(data) {
        threadedChat();
});
$(window).on('action:chat.received', function(data) {
        threadedChat();
});
$(window).on('action:ajaxify.end', function (data) {
    threaded();
});

$(window).on('action:posts.edited', function (data) {
    threaded();
});

$(window).on('action:posts.loaded', function (data) {
    threaded();
});
    phenomlab
    phenomlab
    phenomlab
    wrote on
    #56

    @DownPW Thanks. You should remove the threadedChat function and these lines

    $(window).on('action:chat.loaded', function(data) {
        threadedChat();
});
$(window).on('action:chat.received', function(data) {
        threadedChat();
});

    That code is not functional yet and is very experimental 🙂

    I’ll have a look at your DEV environment to make the code recommendations.

    Mark Cutting also advises organisations as a Fractional CIO, Fractional CISO and Executive Advisor, helping boards improve technology governance, cyber resilience and executive decision making. Learn more at Gratmore Ltd

    0
  • DownPW DownPW

    sure :

    function threaded() {
    $(document).ready(function () {
        // Check if the screen width is 1200px or more
        if ($(window).width() >= 1200) {
            // Check if the dropdown already exists
            if ($('#enableThreading').length === 0) {
                var threadView = $('<div class="threads-wrapper"><i class="fa fa-fw fa-bars left"></i><form class="form"><div class="form-check form-switch sticky-tools-bar"> \
                    <input class="form-check-input" id="enableThreading" type="checkbox" data-field="enableThreading"> \
                    <label class=" d-none d-md-inline fw-semibold" for="enableThreading"><i class="fa fa-fw fa-bars-staggered right"></i></label> \
                </div></form></div>');
                $('.topic .sticky-tools ul [component="topic/browsing-users"]:last-of-type').append(threadView);
                // Check if there's a stored state for the checkbox and update it
                var storedState = localStorage.getItem('enableThreadingState');
                if (storedState === 'true') {
                    $('#enableThreading').prop('checked', true);
                }
            }
            // Toggle the class 'threaded' on or off when the checkbox changes state
            $('#enableThreading').on('change', function () {
                var isChecked = $(this).is(':checked');
                if (isChecked) {
                    console.log('Thread view is active.');
                    $('ul[component="topic"]').addClass('threaded');
                    $('.posts-container').addClass('threaded')
                    $('ul[component="topic"]').addClass('threaded')
                    $('.post-container').addClass('threaded')
                    $('.timeline-event').addClass('threaded')
                    $('[component="post/footer"]').addClass('threaded');
                    $('[component="post"]').each(function () {
                        // Add the 'threaded' class to matching elements
                        if ($(this).hasClass('pt-4') || $(this).hasClass('self-post')) {
                            $(this).addClass('threaded');
                            $('.topic .sticky-tools').addClass('threaded');
                        }
                    });
                } else {
                    console.log('Thread view is inactive.');
                    $('[component="post"]').removeClass('threaded');
                    $('ul[component="topic"]').removeClass('threaded');
                    $('.posts-container').removeClass('threaded')
                    $('ul[component="topic"]').removeClass('threaded')
                    $('.post-container').removeClass('threaded')
                    $('.timeline-event').removeClass('threaded')
                    $('[component="post/footer"]').removeClass('threaded');
                    $('.topic .sticky-tools').removeClass('threaded');
                }
                // Store the checkbox state in localStorage
                localStorage.setItem('enableThreadingState', isChecked);
            });
            // Check for changes in the checkbox state when the page loads
            $('#enableThreading').trigger('change');
        }
    });
}

function threadedChat() {
    $(document).ready(function () {
        // Check if the screen width is 1200px or more
        if ($(window).width() >= 1200) {
            // Check if the dropdown already exists
            if ($('#enableThreadingChat').length === 0) {
                var chatView = $('<div class="threads-wrapper"><i class="fa fa-fw fa-bars left"></i><form class="form"><div class="form-check form-switch sticky-tools-bar"> \
                    <input class="form-check-input" id="enableThreadingChat" type="checkbox" data-field="enableThreading"> \
                    <label class=" d-none d-md-inline fw-semibold" for="enableThreadingChat"><span class="title-tooltip top" tooltip-text="Éditer Profil"><i class="fa fa-fw fa-bars-staggered right"></i></label> \
                </div></form></div>');
                $('[component="chat/header"]').prepend(chatView);

                // Check if there's a stored state for the checkbox and update it
                var storedState = localStorage.getItem('enableThreadingStateChat');
                if (storedState === 'true') {
                    $('#enableThreadingChat').prop('checked', true);
                }
            }

            // Toggle the class 'threaded' on or off when the checkbox changes state
            $('#enableThreadingChat').on('change', function () {
                var isChecked = $(this).is(':checked');
                if (isChecked) {
                    console.log('Thread view is active.');
                    $('[component="chat/message"]').each(function () {
                        // Add the 'threaded' class to matching elements
                        if ($(this).hasClass('chat-message')) {
                            $(this).addClass('threaded');
                        }
                    });
                } else {
                    console.log('Thread view is inactive.');
                    $('[component="chat/message"]').removeClass('threaded');
                }

                // Store the checkbox state in localStorage
                localStorage.setItem('enableThreadingStateChat', isChecked);
            });

            // Check for changes in the checkbox state when the page loads
            $('#enableThreadingChat').trigger('change');
        }
    });
}


$(window).on('action:chat.loaded', function(data) {
        threadedChat();
});
$(window).on('action:chat.received', function(data) {
        threadedChat();
});
$(window).on('action:ajaxify.end', function (data) {
    threaded();
});

$(window).on('action:posts.edited', function (data) {
    threaded();
});

$(window).on('action:posts.loaded', function (data) {
    threaded();
});
    phenomlab
    phenomlab
    phenomlab
    wrote on
    #57

    @DownPW I changed your CSS as it was lacking the actual .threaded class which is the target we add and remove

    .page-topic .topic .posts.timeline [component="topic/event"].timeline-event, .page-topic .topic .posts.timeline [component="topic/necro-post"].timeline-event.threaded {
    background: transparent !important;
    margin-bottom: 10px !important;
}
.page-topic .topic .posts.timeline .threaded:last-child .timeline-event:last-child,
.page-topic .topic .posts.timeline .threaded:last-child>[component="post/placeholder"]:last-child,
.page-topic .topic .posts.timeline .threaded:last-child>[component=post]:last-child {
    margin-left: 0.5rem !important;
}

    Seems to work, but can you confirm?

    Mark Cutting also advises organisations as a Fractional CIO, Fractional CISO and Executive Advisor, helping boards improve technology governance, cyber resilience and executive decision making. Learn more at Gratmore Ltd

    0
  • DownPW
    DownPW
    DownPW
    wrote on
    #58

    nope

    Sorry I was on my way back from work @phenomlab

    So in fact I’m already going to try adding .threaded to the CSS code.

    When I activate Thread mode, everything is OK however when I deactivate Thread mode, certain classes remain and are not deleted

    For example here, without Thread mode, the background is not returned to vanilla and the same thing for the border-radius :

    0a214db5-6435-49dc-b04d-52842ba0b28d-image.png

    PW and WS Spirit alive

    0
  • DownPW DownPW

    nope

    Sorry I was on my way back from work @phenomlab

    So in fact I’m already going to try adding .threaded to the CSS code.

    When I activate Thread mode, everything is OK however when I deactivate Thread mode, certain classes remain and are not deleted

    For example here, without Thread mode, the background is not returned to vanilla and the same thing for the border-radius :

    0a214db5-6435-49dc-b04d-52842ba0b28d-image.png

    phenomlab
    phenomlab
    phenomlab
    wrote on
    #59

    @DownPW For clarity, I didn’t change all of the classes - only the two you posted last

    Threading off

    fe3562db-edee-4f63-a8aa-1eb59c1279ea-image.png

    Threading on

    a92e0031-cf0c-416e-a1f7-53a6cb3a6631-image.png

    Mark Cutting also advises organisations as a Fractional CIO, Fractional CISO and Executive Advisor, helping boards improve technology governance, cyber resilience and executive decision making. Learn more at Gratmore Ltd

    0
  • DownPW
    DownPW
    DownPW
    wrote on
    #60

    yep but these 2 class have problem, on your screens, with Threading Off, background color use –bs-body-navbar and not –bs-body-bg.
    And if you seen topi event is not transparent like vanilla

    PW and WS Spirit alive

    phenomlab 2 Replies
    0
  • DownPW DownPW

    yep but these 2 class have problem, on your screens, with Threading Off, background color use –bs-body-navbar and not –bs-body-bg.
    And if you seen topi event is not transparent like vanilla

    phenomlab
    phenomlab
    phenomlab
    wrote on
    #61

    @DownPW That should make no difference?

    Just remove it from the class

    .page-topic .topic .posts.timeline .timeline-event, .page-topic .topic .posts.timeline > [component="post/placeholder"], .page-topic .topic .posts.timeline > [component=post] {
    border-left: none;
    transition: transform 0.3s ease !important;
    background: var(--bs-body-bg);
    /* background: var(--bs-body-navbar); */
    border-radius: var(--bs-border-radius);
}

    9871c5b3-1b9b-415b-b848-0f663341fc09-image.png

    Mark Cutting also advises organisations as a Fractional CIO, Fractional CISO and Executive Advisor, helping boards improve technology governance, cyber resilience and executive decision making. Learn more at Gratmore Ltd

    0
  • DownPW
    DownPW
    DownPW
    wrote on
    #62

    that makes all the difference 🙂

    Vanilla is like this:

    image.png

    PW and WS Spirit alive

    1
  • DownPW DownPW

    yep but these 2 class have problem, on your screens, with Threading Off, background color use –bs-body-navbar and not –bs-body-bg.
    And if you seen topi event is not transparent like vanilla

    phenomlab
    phenomlab
    phenomlab
    wrote on
    #63

    @DownPW said in Threading support for NodeBB:

    And if you seen topi event is not transparent like vanilla

    It is for me

    6d89cea9-6311-48d1-8eea-07b7b827eafd-image.png

    Mark Cutting also advises organisations as a Fractional CIO, Fractional CISO and Executive Advisor, helping boards improve technology governance, cyber resilience and executive decision making. Learn more at Gratmore Ltd

    0
  • DownPW
    DownPW
    DownPW
    wrote on
    #64

    nope for me

    image.png

    PW and WS Spirit alive

    0
  • DownPW
    DownPW
    DownPW
    wrote on
    #65

    no return to vanilla background

    blink2.gif

    vanilla: bs-body-bg
    thread ON: bs-body-navbar

    PW and WS Spirit alive

    phenomlab DownPW 2 Replies
    0
  • DownPW DownPW

    no return to vanilla background

    blink2.gif

    vanilla: bs-body-bg
    thread ON: bs-body-navbar

    phenomlab
    phenomlab
    phenomlab
    wrote on
    #66

    @DownPW Because your CSS has not been altered dude.

    ebe21e6c-5409-498f-a5dd-605403c52622-image.png

    Try now. It works for me?

    Mark Cutting also advises organisations as a Fractional CIO, Fractional CISO and Executive Advisor, helping boards improve technology governance, cyber resilience and executive decision making. Learn more at Gratmore Ltd

    0
  • DownPW
    DownPW
    DownPW
    wrote on
    #67

    I have not the same result :

    image.png

    I have bs-body-bg with thread ON

    PW and WS Spirit alive

    0
  • DownPW DownPW

    I have not the same result :

    image.png

    I have bs-body-bg with thread ON

    phenomlab
    phenomlab
    phenomlab
    wrote on
    #68

    @DownPW Isn’t that correct, or do you want --bs-body-navbar ?

    Mark Cutting also advises organisations as a Fractional CIO, Fractional CISO and Executive Advisor, helping boards improve technology governance, cyber resilience and executive decision making. Learn more at Gratmore Ltd

    0
  • DownPW DownPW

    no return to vanilla background

    blink2.gif

    vanilla: bs-body-bg
    thread ON: bs-body-navbar

    DownPW
    DownPW
    DownPW
    wrote on
    #69

    @DownPW said in Threading support for NodeBB:

    vanilla: bs-body-bg
    thread ON: bs-body-navbar

    PW and WS Spirit alive

    0
  • DownPW DownPW

    @DownPW said in Threading support for NodeBB:

    vanilla: bs-body-bg
    thread ON: bs-body-navbar

    phenomlab
    phenomlab
    phenomlab
    wrote on
    #70

    @DownPW Right. Hold on.

    Mark Cutting also advises organisations as a Fractional CIO, Fractional CISO and Executive Advisor, helping boards improve technology governance, cyber resilience and executive decision making. Learn more at Gratmore Ltd

    0
  • DownPW
    DownPW
    DownPW
    wrote on
    #71

    or maybe for each modification this must be specified twice ?

    THREAD OFF

    /* Start of threaded CSS rules */
.page-topic .topic .posts.timeline .timeline-event,
.page-topic .topic .posts.timeline > [component="post/placeholder"],
.page-topic .topic .posts.timeline > [component="post"] {
  border-left: none;
  transition: transform 0.3s ease !important;
  background: var(--bs-body-bg);
  /* background: var(--bs-body-navbar); */
  border-radius: var(--bs-border-radius);
}

    THREAD ON

    /* Start of threaded CSS rules */
.page-topic .topic .posts.timeline .timeline-event,
.page-topic .topic .posts.timeline > [component="post/placeholder"],
.page-topic .topic .posts.timeline > [component="post"].threaded {
  border-left: none;
  transition: transform 0.3s ease !important;
  /* background: var(--bs-body-bg); */
  background: var(--bs-body-navbar);
  border-radius: var(--bs-border-radius);
}

    Same things for other modif like border radius

    PW and WS Spirit alive

    0
  • DownPW DownPW

    or maybe for each modification this must be specified twice ?

    THREAD OFF

    /* Start of threaded CSS rules */
.page-topic .topic .posts.timeline .timeline-event,
.page-topic .topic .posts.timeline > [component="post/placeholder"],
.page-topic .topic .posts.timeline > [component="post"] {
  border-left: none;
  transition: transform 0.3s ease !important;
  background: var(--bs-body-bg);
  /* background: var(--bs-body-navbar); */
  border-radius: var(--bs-border-radius);
}

    THREAD ON

    /* Start of threaded CSS rules */
.page-topic .topic .posts.timeline .timeline-event,
.page-topic .topic .posts.timeline > [component="post/placeholder"],
.page-topic .topic .posts.timeline > [component="post"].threaded {
  border-left: none;
  transition: transform 0.3s ease !important;
  /* background: var(--bs-body-bg); */
  background: var(--bs-body-navbar);
  border-radius: var(--bs-border-radius);
}

    Same things for other modif like border radius

    phenomlab
    phenomlab
    phenomlab
    wrote on
    #72

    @DownPW Try now.

    Mark Cutting also advises organisations as a Fractional CIO, Fractional CISO and Executive Advisor, helping boards improve technology governance, cyber resilience and executive decision making. Learn more at Gratmore Ltd

    0
  • DownPW
    DownPW
    DownPW
    wrote on
    #73

    🙂

    One or 2 classes are missing in Thread ON mode but this is the logic I want.

    What have you done that I can understand and modify?

    PW and WS Spirit alive

    0
  • DownPW DownPW

    🙂

    One or 2 classes are missing in Thread ON mode but this is the logic I want.

    What have you done that I can understand and modify?

    phenomlab
    phenomlab
    phenomlab
    wrote on
    #74

    @DownPW Good…

    Added

      li.pt-4.threaded {
    background: var(--bs-body-navbar) !important;
}

    Modified

      .page-topic .topic .posts.timeline .timeline-event,
  .page-topic .topic .posts.timeline > [component="post/placeholder"],
  .page-topic .topic .posts.timeline > [component="post"] {
    border-left: none;
    transition: transform 0.3s ease !important;
    background: var(--bs-body-bg); 
    border-radius: var(--bs-border-radius);
  }

    Mark Cutting also advises organisations as a Fractional CIO, Fractional CISO and Executive Advisor, helping boards improve technology governance, cyber resilience and executive decision making. Learn more at Gratmore Ltd

    0
Log in to reply

Related Topics
  • abcabc123

    Please help me, I can't install nodebb

    Locked Solved Customisation nodebb
    7
    5 Votes
    7 Posts
    2k Views
    phenomlab
    Installation completed, verified, and tested. Correct installation methodology is below https://docs.nodebb.org/installing/os/ubuntu/
  • Norrad

    What plugins are being used here on Sudonix?

    Solved General nodebb plugins development
    6
    5 Votes
    6 Posts
    2k Views
    phenomlab
    @Roki-Antic Welcome! This site isn’t running Persona, but Harmony - a very heavily customised version at that. Do you have a URL where your site is currently located that is publicly accessible? Feel free to PM this info if you do not want to disclose here. Happy to help with any customisation needs.
  • crazycells

    CSS codes to prevent votes to disappear

    Solved Customisation nodebb
    3
    1 Votes
    3 Posts
    1k Views
    crazycells
    @phenomlab yes, it is thanks a lot…
  • Panda

    Email validation NodeBB

    Bugs nodebb
    21
    3 Votes
    21 Posts
    10k Views
    phenomlab
    @Panda said in Email validation NodeBB: Did you configure that as a custom change to the usual quote icon. How do you do that? I notice on NodeBB site its a solid blue quotes Yes, I changed it. NodeBB by default users the free font awesome library whereas I use the pro (paid) version SDK have access to a wider set of icons, and at different thicknesses etc. The change of colour is just simple CSS.
  • phenomlab

    Setting up a beta NodeBB v3 environment

    Moved Let's Build It nodebb upgrades beta1
    14
    3
    11 Votes
    14 Posts
    6k Views
    phenomlab
    @dave1904 excellent news. Thanks for the feedback
  • Panda

    Rotating homepage icons, gifs?

    Solved Configure nodebb
    2
    3 Votes
    2 Posts
    1k Views
    phenomlab
    @eveh It’s not a GIF, no. It’s actually a webp file so made much smaller, and uses keyframes to control the rotation on hover. You can easily make your own though The CSS for that is as below @keyframes rotate180 { from { transform: rotate(0deg); } to { transform: rotate(180deg); } } @keyframes rotate0 { from { transform: rotate(180deg); } to { transform: rotate(0deg); } } Your milage may vary on the CSS below, as it’s custom for Sudonix, but this is the class that is used to control the rotate .header .forum-logo, img.forum-logo.head { max-height: 50px; width: auto; height: 30px; margin-top: 9px; max-width: 150px; min-width: 32px; display: inline-block; animation-name: rotate180, rotate0; animation-duration: 1000ms; animation-delay: 0s, 1000ms; animation-iteration-count: 1; animation-timing-function: linear; transition: transform 1000ms ease-in-out; }
  • crazycells

    ineffecient use of space on mobile

    Solved Customisation nodebb
    10
    2
    7 Votes
    10 Posts
    4k Views
    crazycells
    @phenomlab Thanks
  • DownPW

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