Skip to content
Sudonix

[NODEBB] Help for my custom CSS

Solved Customisation
237 5 79.9k 3
  • DownPWundefined

    the previous function is just fancybox and nothing more :

    // Fancybox Media Reader
if (top.location.pathname !== '/login') {
    $(window).on('action:posts.loaded', function(data) {
        console.log("Polling DOM for lazyLoaded images to apply Fancybox");
        $(document).ready(function() {
            $('a').not('.forum-logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() {
                $('a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"], a[href*=".webp"]').addClass("noanimate");
            });
        });
    });
}

if (top.location.pathname !== '/login') {
    $(document).ready(function() {
        $(window).on('action:ajaxify.end', function(data) {
            this.$('a').not('.forum-logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() {
                $('a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"], a[href*=".webp"]').addClass("noanimate");
                data.preventDefault()
                // Strip out the images contained inside blockquotes as this looks nasty :)
                $('blockquote img').remove();
            });
            Fancybox.bind(
                'a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"], a[href*=".webp"]', {
                    groupAll: true,
                }
            );
        });
    });
}

// Chat fancybox - fires when chat module loaded and AJAX calls new chat
$(document).ready(function() {
    $(window).on('action:chat.loaded', function(data) {
            this.$('img').not('.forum-logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() {
                var newHref = $(this).attr("src");
                $(this).wrap("<a class='fancybox' href='" + newHref + "'/>");
                $('a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"], a[href*=".webp"]').addClass("noanimate");
                data.preventDefault();
                // Strip out the images contained inside blockquotes as this looks nasty :)
                $('blockquote img').remove();
            });
            Fancybox.bind(
                'a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"], a[href*=".webp"]', {
                    groupAll: true,
                }
            );
    });
});

    the error above just appear wit hthe change of $(document).ready() {, no error with $(window).on('action:ajaxify.end', function (data) {

    PW and WS Spirit alive

    0
  • DownPWundefined DownPW

    the previous function is just fancybox and nothing more :

    // Fancybox Media Reader
if (top.location.pathname !== '/login') {
    $(window).on('action:posts.loaded', function(data) {
        console.log("Polling DOM for lazyLoaded images to apply Fancybox");
        $(document).ready(function() {
            $('a').not('.forum-logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() {
                $('a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"], a[href*=".webp"]').addClass("noanimate");
            });
        });
    });
}

if (top.location.pathname !== '/login') {
    $(document).ready(function() {
        $(window).on('action:ajaxify.end', function(data) {
            this.$('a').not('.forum-logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() {
                $('a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"], a[href*=".webp"]').addClass("noanimate");
                data.preventDefault()
                // Strip out the images contained inside blockquotes as this looks nasty :)
                $('blockquote img').remove();
            });
            Fancybox.bind(
                'a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"], a[href*=".webp"]', {
                    groupAll: true,
                }
            );
        });
    });
}

// Chat fancybox - fires when chat module loaded and AJAX calls new chat
$(document).ready(function() {
    $(window).on('action:chat.loaded', function(data) {
            this.$('img').not('.forum-logo').not(".avatar").not(".emoji").not(".bmac-noanimate").each(function() {
                var newHref = $(this).attr("src");
                $(this).wrap("<a class='fancybox' href='" + newHref + "'/>");
                $('a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"], a[href*=".webp"]').addClass("noanimate");
                data.preventDefault();
                // Strip out the images contained inside blockquotes as this looks nasty :)
                $('blockquote img').remove();
            });
            Fancybox.bind(
                'a[href*=".jpg"], a[href*=".jpeg"], a[href*=".png"], a[href*=".gif"], a[href*=".webp"]', {
                    groupAll: true,
                }
            );
    });
});

    the error above just appear wit hthe change of $(document).ready() {, no error with $(window).on('action:ajaxify.end', function (data) {

    phenomlabundefined

    @DownPW very odd. I’ll have a look at this directly on your dev site tomorrow morning to see why this is.

    EDIT - this is now fixed. I looked at the code, and I was right that it should work, and only execute once 🙂 - not sure what happened there.

    067250ba-7af1-479f-a1d0-74cb4bfd83e2-image.png

    EDIT2 - I absolutely love this design, and am stealing it 🙂 Such a clever way of depicting colour in the theme, and I’m going to make it dynamic also so that the colours change if the theme css does.

    1487e619-4cf5-4650-b7fb-0bff0893c870-image.png

    Mark
    Founder - Phenomlab Ltd

    Executive Technology & Security Leadership

    0
  • phenomlabundefined phenomlab

    @DownPW very odd. I’ll have a look at this directly on your dev site tomorrow morning to see why this is.

    EDIT - this is now fixed. I looked at the code, and I was right that it should work, and only execute once 🙂 - not sure what happened there.

    067250ba-7af1-479f-a1d0-74cb4bfd83e2-image.png

    EDIT2 - I absolutely love this design, and am stealing it 🙂 Such a clever way of depicting colour in the theme, and I’m going to make it dynamic also so that the colours change if the theme css does.

    1487e619-4cf5-4650-b7fb-0bff0893c870-image.png

    DownPWundefined

    @phenomlab said in [NODEBB] Help for my custom CSS:

    EDIT - this is now fixed. I looked at the code, and I was right that it should work, and only execute once - not sure what happened there.

    ⚠️ hmmm not, almost fixed @phenomlab !
    It’s ok for duplicate ajax problem but not fixed for the the footer image : It’s appear one time and if you go to another section (like recent or unread for example), the image on footer don’t appear
    Same in incognito mode.

    9d8d6189-8d40-423e-94c8-9d7543d3fe2c-image.png

    @phenomlab said in [NODEBB] Help for my custom CSS:

    EDIT2 - I absolutely love this design, and am stealing it Such a clever way of depicting colour in the theme, and I’m going to make it dynamic also so that the colours change if the theme css does.

    Thank you !
    –> I already told you, my code is your code 😉

    Thinking about it, I found this idea elsewhere but I don’t really know where 🙂
    I just added a rotation effect on it and adapted it to the dropdown of the brand menu widget.

    You talk about making it dynamic but I don’t really see what you mean since the theme colors represented do not change.
    Unless you want to automate it. Genre detects the 2 main color types of the theme according to 2 values/declarations present in the css file.

    PW and WS Spirit alive

    phenomlabundefined 2 Replies
    0
  • DownPWundefined DownPW

    @phenomlab said in [NODEBB] Help for my custom CSS:

    EDIT - this is now fixed. I looked at the code, and I was right that it should work, and only execute once - not sure what happened there.

    ⚠️ hmmm not, almost fixed @phenomlab !
    It’s ok for duplicate ajax problem but not fixed for the the footer image : It’s appear one time and if you go to another section (like recent or unread for example), the image on footer don’t appear
    Same in incognito mode.

    9d8d6189-8d40-423e-94c8-9d7543d3fe2c-image.png

    @phenomlab said in [NODEBB] Help for my custom CSS:

    EDIT2 - I absolutely love this design, and am stealing it Such a clever way of depicting colour in the theme, and I’m going to make it dynamic also so that the colours change if the theme css does.

    Thank you !
    –> I already told you, my code is your code 😉

    Thinking about it, I found this idea elsewhere but I don’t really know where 🙂
    I just added a rotation effect on it and adapted it to the dropdown of the brand menu widget.

    You talk about making it dynamic but I don’t really see what you mean since the theme colors represented do not change.
    Unless you want to automate it. Genre detects the 2 main color types of the theme according to 2 values/declarations present in the css file.

    phenomlabundefined

    @DownPW said in [NODEBB] Help for my custom CSS:

    It’s ok for duplicate ajax problem but not fixed for the the footer image : It’s appear one time and if you go to another section (like recent or unread for example), the image on footer don’t appear

    I kind of expected that because the footer image relies on an ajax reload to determine the time, then work out which image to display based on that. The real problem here is that the prepend is being called on each request, and because it’s an prepend, you are seeing multiple copies.

    One way to fix this is to delete the element and recreate it, but that is horribly inefficient 😕

    I’ve modified the function to include a check to see if the containing div is empty or not - if it is, we add the icon and message - if it’s already there, we skip it

        // Test to see if the DIV containing the icon and message is empty. If it is, insert icon and message
    if ($('#busername').length === 0) {
        $('.getUsername').prepend("<div id='busername'><i id='thisicon' class='" + theicon + "'></i></div>" + themessage);
    } else {
        // nothing to do here :)
    }

    (Note that this has been added to the existing function)

    And some minor css which allows us to float the new div so that it displays inline

    // Inline display fix for Welcome DIV
div#busername {
    display: inline;
}

    Mark
    Founder - Phenomlab Ltd

    Executive Technology & Security Leadership

    0
  • DownPWundefined DownPW

    @phenomlab said in [NODEBB] Help for my custom CSS:

    EDIT - this is now fixed. I looked at the code, and I was right that it should work, and only execute once - not sure what happened there.

    ⚠️ hmmm not, almost fixed @phenomlab !
    It’s ok for duplicate ajax problem but not fixed for the the footer image : It’s appear one time and if you go to another section (like recent or unread for example), the image on footer don’t appear
    Same in incognito mode.

    9d8d6189-8d40-423e-94c8-9d7543d3fe2c-image.png

    @phenomlab said in [NODEBB] Help for my custom CSS:

    EDIT2 - I absolutely love this design, and am stealing it Such a clever way of depicting colour in the theme, and I’m going to make it dynamic also so that the colours change if the theme css does.

    Thank you !
    –> I already told you, my code is your code 😉

    Thinking about it, I found this idea elsewhere but I don’t really know where 🙂
    I just added a rotation effect on it and adapted it to the dropdown of the brand menu widget.

    You talk about making it dynamic but I don’t really see what you mean since the theme colors represented do not change.
    Unless you want to automate it. Genre detects the 2 main color types of the theme according to 2 values/declarations present in the css file.

    phenomlabundefined

    @DownPW said in [NODEBB] Help for my custom CSS:

    You talk about making it dynamic but I don’t really see what you mean since the theme colors represented do not change.
    Unless you want to automate it. Genre detects the 2 main color types of the theme according to 2 values/declarations present in the css file.

    Simple enough -you just reference the variables, but admittedly, you’d need to refactor some code to make this work transiently, so it’s probably not a very good idea. I suppose it really depends on how often you decide to revamp your themes - in which case, it would make sense.

    I just don’t like static variables 🙂

    Mark
    Founder - Phenomlab Ltd

    Executive Technology & Security Leadership

    0
  • phenomlabundefined phenomlab

    @DownPW said in [NODEBB] Help for my custom CSS:

    You talk about making it dynamic but I don’t really see what you mean since the theme colors represented do not change.
    Unless you want to automate it. Genre detects the 2 main color types of the theme according to 2 values/declarations present in the css file.

    Simple enough -you just reference the variables, but admittedly, you’d need to refactor some code to make this work transiently, so it’s probably not a very good idea. I suppose it really depends on how often you decide to revamp your themes - in which case, it would make sense.

    I just don’t like static variables 🙂

    DownPWundefined

    @phenomlab said in [NODEBB] Help for my custom CSS:

    I just don’t like static variables

    It doesn’t bother me too much personally because I’m not ready to modify the themes in depth, especially the main colors, but what you say makes sense.
    It’s always better to automate when you can.

    I’ll see what you can do ha ha 🙂

    In any case, I’m happy to bring my stone to the building 🙂

    PW and WS Spirit alive

    😊
    1
  • DownPWundefined

    Hello @phenomlab

    I have a dropdown menu with manu different left icons and I want to align vertically the <a> text
    I don’t know why I can’t do it. Fatigue maybe? 🙂

    Here the code of my menu :

    <li><a id="menubrand" class="dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx"><i id="menubrand" class="fa-solid fa-lg fa-scroll text-primary"></i>&nbsp; Règlements</a></li> 
<li><a id="menubrand" class="dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx"><i id="menubrand" class="fa-solid fa-lg fa-newspaper"></i>&nbsp; Annonces</a></li> 
<li><a id="menubrand" class="dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx"><i id="menubrand" class="fa-solid fa-lg fa-people text-primary"></i> &nbsp; Team</a></li> 
<li><a id="menubrand" class="dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx""><i id="menubrand" class="fa-solid fa-lg fa-database text-primary"></i> &nbsp; Tutoriels</a></li> 
<li><a id="menubrand" class="dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx"><i id="menubrand" class="fa-solid fa-lg fa-bug text-primary"></i> &nbsp; Bug Report</a></li> 
<li><a id="menubrand" class="dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx"><i id="menubrand" class="fa-solid fa-lg fa-brands fa-wikipedia-w text-primary"></i> &nbsp; Wiki</a></li>

    Resut :

    4d2f109a-fd23-406f-af70-3bc0b5bbc5b4-image.png

    Many thanks 😉

    PW and WS Spirit alive

    0
  • DownPWundefined DownPW

    Hello @phenomlab

    I have a dropdown menu with manu different left icons and I want to align vertically the <a> text
    I don’t know why I can’t do it. Fatigue maybe? 🙂

    Here the code of my menu :

    <li><a id="menubrand" class="dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx"><i id="menubrand" class="fa-solid fa-lg fa-scroll text-primary"></i>&nbsp; Règlements</a></li> 
<li><a id="menubrand" class="dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx"><i id="menubrand" class="fa-solid fa-lg fa-newspaper"></i>&nbsp; Annonces</a></li> 
<li><a id="menubrand" class="dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx"><i id="menubrand" class="fa-solid fa-lg fa-people text-primary"></i> &nbsp; Team</a></li> 
<li><a id="menubrand" class="dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx""><i id="menubrand" class="fa-solid fa-lg fa-database text-primary"></i> &nbsp; Tutoriels</a></li> 
<li><a id="menubrand" class="dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx"><i id="menubrand" class="fa-solid fa-lg fa-bug text-primary"></i> &nbsp; Bug Report</a></li> 
<li><a id="menubrand" class="dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx"><i id="menubrand" class="fa-solid fa-lg fa-brands fa-wikipedia-w text-primary"></i> &nbsp; Wiki</a></li>

    Resut :

    4d2f109a-fd23-406f-af70-3bc0b5bbc5b4-image.png

    Many thanks 😉

    phenomlabundefined

    @DownPW You’ll need to restructure the HTML first - don’t use nbsp; - you should always use margin or padding 🙂 Also, you are using the same ID multiple times which will cause you problems with markup as it is not unique.

    Try this

    <li><a class="menubrand dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx"><i class="fa-solid fa-lg fa-scroll text-primary menubrand"></i>Règlements</a></li> 
<li><a class="dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx"><i class="fa-solid fa-lg fa-newspaper menubrand"></i>Annonces</a></li> 
<li><a class="dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx"><i class="fa-solid fa-lg fa-people text-primary menubrand"></i>Team</a></li> 
<li><a class="dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx""><i class="fa-solid fa-lg fa-database text-primary menubrand"></i>Tutoriels</a></li> 
<li><a class="dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx"><i class="fa-solid fa-lg fa-bug text-primary menubrand"></i>Bug Report</a></li> 
<li><a class="dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx"><i class="fa-solid fa-lg fa-brands fa-wikipedia-w text-primary menubrand"></i>Wiki</a></li>

    Then use this CSS

    i.menubrand {
    max-width: 25px;
    width: 25px;
    margin-right: 10px;
    text-align: center;
    vertical-align: middle;
}

    Should give you this

    87b3ef71-a103-4ed8-96c9-8342bcaf07f9-image.png

    Mark
    Founder - Phenomlab Ltd

    Executive Technology & Security Leadership

    0
  • DownPWundefined

    hmmm ok I will test asap thanks 😉
    Why have you the second icon with no colors : odd no ?

    PW and WS Spirit alive

    0
  • DownPWundefined

    Edit :

    Ok, find the problem, second line have no text-primary and the first line have a different a class.

    – Better like this I think :

    <li><a class="dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx"><i class="fa-solid fa-lg fa-scroll text-primary menubrand"></i>Règlements</a></li> 
<li><a class="dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx"><i class="fa-solid fa-lg fa-newspaper text-primary menubrand"></i>Annonces</a></li> 
<li><a class="dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx"><i class="fa-solid fa-lg fa-people text-primary menubrand"></i>Team</a></li> 
<li><a class="dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx""><i class="fa-solid fa-lg fa-database text-primary menubrand"></i>Tutoriels</a></li> 
<li><a class="dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx"><i class="fa-solid fa-lg fa-bug text-primary menubrand"></i>Bug Report</a></li> 
<li><a class="dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx"><i class="fa-solid fa-lg fa-brands fa-wikipedia-w text-primary menubrand"></i>Wiki</a></li>

    Thank you my friend

    PW and WS Spirit alive

    0
  • DownPWundefined DownPW

    Edit :

    Ok, find the problem, second line have no text-primary and the first line have a different a class.

    – Better like this I think :

    <li><a class="dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx"><i class="fa-solid fa-lg fa-scroll text-primary menubrand"></i>Règlements</a></li> 
<li><a class="dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx"><i class="fa-solid fa-lg fa-newspaper text-primary menubrand"></i>Annonces</a></li> 
<li><a class="dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx"><i class="fa-solid fa-lg fa-people text-primary menubrand"></i>Team</a></li> 
<li><a class="dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx""><i class="fa-solid fa-lg fa-database text-primary menubrand"></i>Tutoriels</a></li> 
<li><a class="dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx"><i class="fa-solid fa-lg fa-bug text-primary menubrand"></i>Bug Report</a></li> 
<li><a class="dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx"><i class="fa-solid fa-lg fa-brands fa-wikipedia-w text-primary menubrand"></i>Wiki</a></li>

    Thank you my friend

    phenomlabundefined

    @DownPW I was just going to say that 🙂

    f5117dc2-a1d4-41c2-bdda-530162918873-image.png

    Mark
    Founder - Phenomlab Ltd

    Executive Technology & Security Leadership

    1
  • DownPWundefined

    image.png

    Just this bug.

    How can I change the icon color of the active page? as you can see, the icon is not visible when we are on the selected page
    I don’t want to change background active primary color but for example change icon to white like the text or other color

    PW and WS Spirit alive

    phenomlabundefined DownPWundefined 2 Replies
    0
  • DownPWundefined DownPW

    image.png

    Just this bug.

    How can I change the icon color of the active page? as you can see, the icon is not visible when we are on the selected page
    I don’t want to change background active primary color but for example change icon to white like the text or other color

    phenomlabundefined

    @DownPW I just checked this, and it looks as though you are using using a transparent colour to work around the hover issue?

    Mark
    Founder - Phenomlab Ltd

    Executive Technology & Security Leadership

    0
  • DownPWundefined

    @phenomlab

    Not at all 🙂
    The problem occurs on the left sidebar but not in the Brand menu.

    PW and WS Spirit alive

    0
  • DownPWundefined DownPW

    @phenomlab

    Not at all 🙂
    The problem occurs on the left sidebar but not in the Brand menu.

    phenomlabundefined

    @DownPW This is what I see in the left side bar. I am using the Metallic theme?

    7c18de0d-dda1-45a4-9380-a84cdc080818-image.png

    Mark
    Founder - Phenomlab Ltd

    Executive Technology & Security Leadership

    0
  • DownPWundefined

    You must have a cache problem because the CSS is not even active on your image 😉

    The problem appears on the current page and not the hover

    For example, use the menu to go to the Rules page. Once on the rules page, reuse the menu to see the bug

    PW and WS Spirit alive

    0
  • DownPWundefined DownPW

    You must have a cache problem because the CSS is not even active on your image 😉

    The problem appears on the current page and not the hover

    For example, use the menu to go to the Rules page. Once on the rules page, reuse the menu to see the bug

    phenomlabundefined

    @DownPW Cache cleared, but…

    521b3bec-7fa2-4baf-b94d-53494d92c10e-image.png

    Mark
    Founder - Phenomlab Ltd

    Executive Technology & Security Leadership

    0
  • DownPWundefined

    re test and click on a link ?

    PW and WS Spirit alive

    0
  • DownPWundefined

    image.png

    PW and WS Spirit alive

    0
  • DownPWundefined DownPW

    image.png

    phenomlabundefined

    @DownPW I see it in an incognito session - looks like I’ve got some browser related issues 😕

    00df3417-3292-40d9-b030-231d63982c24-image.png

    So it’s not hover, but :active

    I’d ne inclined to use transparency here as it’s much less effort

    .dropdown-item.active, .dropdown-item:active {
    --bs-dropdown-link-active-bg: #b9babe38;
}

    That will give you (for this swatch at least)

    eb4040fc-7b5a-4cae-b77e-9cf37570b14b-image.png

    Mark
    Founder - Phenomlab Ltd

    Executive Technology & Security Leadership

    0
Log in to reply

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
  • JACundefined

    NodeBB recent cards customisation

    Solved Customisation nodebb recent cards
    3
    1
    2 Votes
    3 Posts
    713 Views
    JACundefined
    @phenomlab thank you very much for the assistance Mark, massively appreciated as always. The great thing about this is it’s all documented for other NodeBB users that come looking for solutions . Looks far better .
  • crazycellsundefined

    Page control arrows for PWA

    Solved Customisation nodebb
    27
    25 Votes
    27 Posts
    8k Views
    phenomlabundefined
    @crazycells it is, yes - I think I’ll leave it as there is no specific PWA CSS classes I know of. Well, you could use something like the below, but this means multiple CSS files for different operating systems. /** * Determine the mobile operating system. * This function returns one of 'iOS', 'Android', 'Windows Phone', or 'unknown'. * * @returns {String} */ function getMobileOperatingSystem() { var userAgent = navigator.userAgent || navigator.vendor || window.opera; // Windows Phone must come first because its UA also contains "Android" if (/windows phone/i.test(userAgent)) { return "Windows Phone"; } if (/android/i.test(userAgent)) { return "Android"; } if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) { return "iOS"; } return "unknown"; // return “Android” - one should either handle the unknown or fallback to a specific platform, let’s say Android } Once you’re in that rabbit hole, it’s impossible to get out of it.
  • crazycellsundefined

    Bug Report

    Solved Bugs nodebb bugs
    47
    1
    26 Votes
    47 Posts
    9k Views
    phenomlabundefined
    @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?)
  • cagatayundefined

    NodeBB v3

    Announcements nodebb v3 nodebb
    2
    3 Votes
    2 Posts
    735 Views
    phenomlabundefined
    @cagatay JS will work fine - no changes there, and there are no plans to drop support for jQuery. More of an issue is the CSS - for which there are quite a few breaking changes. Keep an eye on sudonix.dev (my development site) where you can see progress in relation to how I am tackling the compatibility issues.
  • pwsincdundefined

    [NodeBB] Custom fields plugin

    Unsolved Customisation nodebb plugins javascript custom
    5
    0 Votes
    5 Posts
    2k Views
    phenomlabundefined
    @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 ?
  • crazycellsundefined

    Dark Theme Upper Padding

    Solved Customisation nodebb
    7
    1
    6 Votes
    7 Posts
    1k Views
    crazycellsundefined
    @DownPW great! thanks a lot… this code solves my problem.
  • DownPWundefined

    [NODEBB] Stats

    Unsolved Customisation plugin stats script
    20
    1
    2 Votes
    20 Posts
    4k Views
    JACundefined
    @phenomlab said in [NODEBB] Stats: @jac or I land up fixing it I wouldn’t put it past you
  • RiekMediaundefined

    NodeBB Design help

    Solved Customisation
    8
    3
    2 Votes
    8 Posts
    2k Views
    phenomlabundefined
    @riekmedia I’ve applied some new CSS to your site. Can you reload the page and try again ? For the record, this is what I added #footer { background: #2d343e; border-top: 4px solid #2d343e; font-size: 0.9em; margin-top: 70px; padding: 80px 0 0; position: relative; clear: both; bottom: 0; left: 0; right: 0; z-index: 1000; margin-left: -15px; margin-right: -338px; } The /categories page seems a bit messed up, so looking at that currently EDIT - issued some override CSS in the CATEGORIES widget <!--- CSS fix for overspill on /categories page - DO NOT DELETE --> <style> #footer { margin-right: -45px; } </style> That should resolve the /categories issue.