Skip to content

[NODEBB] Help for my custom CSS

Solved Customisation
  • @DownPW thanks. Can you try a theory for me and change that code so it looks like the below

    <span id="thisuserbrand" class="getUsername">,  <a href="/me"><span class="username">DownPW</span></a></span>
    

    I expect this to return nothing, which will prove my theory around the Ajax calls.

  • Nope @phenomlab

    Same things, same problem

  • @DownPW then the problem isn’t the existing function. That ID I provided doesn’t exist anywhere and isn’t tied to any elements so should never trigger.

  • oups don’t know why I have used this code, replace by :

    <div class="getUsername">, <a href="/me"><span class="username"></span></a></div>
    

    But same problem

  • @DownPW did you remove the original line from the footer before placing it in the brand header?

  • remove no, but commented like this

    <!-- <span id="thisuser" class="getUsername">,  <a href="/me"><span class="username">DownPW</span></a></span> -->
    

    EDIT: test with remove = same

  • @DownPW can you send me the footer function your are using. I’m 100% certain this is being caused by the ajax call.

  • @DownPW can you change the top line of this function from

    $(window).on('action:ajaxify.end', function (data) {
    

    To

    $(document).ready() {
    

    Save and let me know if this changes anything. The theory here is that the Ajax call in the top line causes the prepend to be executed multiple times

  • the code doesn’t work with this

  • @DownPW it should work once at least on site reload, no? Or does it crash?

  • no, doesn’t work and break theme and swatch applet

    image.png

  • @DownPW that shouldn’t cause the error you are seeing there. It looks like that is from the previous function.

  • 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) {

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

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

  • @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;
    }
    
  • @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 🙂

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

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

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


Did this solution help you?
Did you find the suggested solution useful? Why not buy me a coffee? It's a nice gesture, and a great way to show your appreciation 💗

Related Topics
  • Nodebb design

    Solved General
    2
    1 Votes
    2 Posts
    282 Views

    @Panda said in Nodebb design:

    One negative is not being so good for SEO as more Server side rendered forums, if web crawlers dont run the JS to read the forum.

    From recollection, Google and Bing have the capability to read and process JS, although it’s not in the same manner as a physical person will consume content on a page. It will be seen as plain text, but will be indexed. However, it’s important to note that Yandex and Baidu will not render JS, although seeing as Google has a 90% share of the content available on the web in terms of indexing, this isn’t something you’ll likely lose sleep over.

    @Panda said in Nodebb design:

    The “write api” is preferred for server-to-server interactions.

    This is mostly based around overall security - you won’t typically want a client machine changing database elements or altering data. This is why you have “client-side” which could be DOM manipulation etc, and “server-side” which performs more complex operations as it can communicate directly with the database whereas the client cannot (and if it can, then you have a serious security flaw). Reading from the API is perfectly acceptable on the client-side, but not being able to write.

    A paradigm here would be something like SNMP. This protocol exists as a UDP (UDP is very efficient, as it is “fire and forget” and does not wait for a response like TCP does) based service which reads performance data from a remote source, thus enabling an application to parse that data for use in a monitoring application. In all cases, SNMP access should be “RO” (Read Only) and not RW (Read Write). It is completely feasible to assume complete control over a firewall for example by having RW access to SNMP and then exposing it to the entire internet with a weak passphrase.

    You wouldn’t do it (at least, I hope you wouldn’t) and the same ethic applies to server-side rendering and the execution of commands.

  • Want to use Sudonix themes ?

    Chitchat
    75
    33 Votes
    75 Posts
    2k Views

    @cagatay Not to my knowledge.

  • who is read NodeBB

    Customisation
    6
    0 Votes
    6 Posts
    632 Views

    @cagatay You should ask in the NodeBB forums. Perhaps reference this post

    https://discuss.flarum.org/d/23066-who-read

  • NodeBB v3

    Announcements
    2
    3 Votes
    2 Posts
    221 Views

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

  • Changing Background on NodeBB

    Solved Customisation
    4
    0 Votes
    4 Posts
    628 Views

    @cagatay You’d target the body tag and use the below line of CSS

    background: url(/assets/customcss/backgrounds/default/default.png) no-repeat center center fixed;

    Obviously, you need to change the path to suit where your image is being stored.

    More info around the background property can be found here

    https://www.w3schools.com/cssref/css3_pr_background.php

  • [NodeBB] First post customization

    Solved Customisation
    5
    4 Votes
    5 Posts
    711 Views

    @phenomlab thanks 🙏

  • [NodeBB] custom Gravatar image not showing

    Solved Customisation
    6
    1 Votes
    6 Posts
    1k Views

    @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

  • Customising NodeBB

    Locked Customisation
    3
    0 Votes
    3 Posts
    742 Views

    Closing this thread as a duplicate of https://sudonix.com/topic/12/nodebb-customisation