Skip to content

[NODEBB] Help for my custom CSS

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

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

  • 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

  • @DownPW I was just going to say that 🙂

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

  • 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

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

  • @phenomlab

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


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
  • Opening links in nodebb widget

    Solved Configure
    6
    4 Votes
    6 Posts
    357 Views

    A more efficient way of including this would be to not over complicate it and leverage a standard iframe (providing the CSP headers of the remote site permit this) like below

    <iframe src="https://www.classmarker.com/online-test/start/?quiz=gag66aea7922f0a5" width="700" height="800"></iframe>

    This works first time every time on your site as intended.

  • Widget | CSS customization

    Solved WordPress
    53
    17 Votes
    53 Posts
    3k Views

    @Sala the only way you can achieve this is to use a robots.txt file and disallow access to those links.

  • NodeBB socket with CloudFlare

    Unsolved Performance
    23
    1 Votes
    23 Posts
    2k Views

    @DownPW it’s your only realistic option at this stage.

  • The best css to customize our logo?

    Solved Customisation
    2
    1 Votes
    2 Posts
    473 Views

    @Sala This should look better

    .sidenav .navbar-brand { padding-top: 0.5rem; padding-bottom: 0.5rem; }

    e5cec20e-be36-4ee8-9129-fd11ad4656ac-image.png

    You can increase the top and bottom padding by increasing the values above.

  • hover link effect

    Solved Customisation
    18
    6 Votes
    18 Posts
    1k Views

    @DownPW Looking at the underlying code, class start is being added on hover by jQuery in this function

    document.querySelectorAll(".button-gradient, .button-transparent").forEach((button) => { const style = getComputedStyle(button); const lines = document.createElement("div"); lines.classList.add("lines"); const groupTop = document.createElement("div"); const groupBottom = document.createElement("div"); const svg = createSVG( button.offsetWidth, button.offsetHeight, parseInt(style.borderRadius, 10) ); groupTop.appendChild(svg); groupTop.appendChild(svg.cloneNode(true)); groupTop.appendChild(svg.cloneNode(true)); groupTop.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); groupBottom.appendChild(svg.cloneNode(true)); lines.appendChild(groupTop); lines.appendChild(groupBottom); button.appendChild(lines); button.addEventListener("pointerenter", () => { button.classList.add("start"); }); svg.addEventListener("animationend", () => { button.classList.remove("start"); }); }); })

    The CSS for start is below

    .button-gradient.start .lines svg, .button-transparent.start .lines svg { animation: stroke 0.3s linear; }

    And this is the corresponding keyframe

    @keyframes stroke { 30%, 55% { opacity: 1; } 100% { stroke-dashoffset: 5; opacity: 0; } }

    It’s using both CSS and SVG, so might not be a simple affair to replicate without the SVG files.

  • 5 Votes
    9 Posts
    1k Views

    is there any way to see whose reputation is changed by this plugin?

  • Reading Meter Progress bar

    Locked Solved Customisation
    15
    9 Votes
    15 Posts
    1k Views

    For anyone else following this thread, please see
    https://sudonix.com/topic/467/issues-with-progress-bar-on-v3

  • WordPress & NodeBB

    Solved WordPress
    6
    0 Votes
    6 Posts
    654 Views

    @jac That won’t matter. You just redirect at nginx or apache level and it’ll work. The generally accepted standard though is to use a subdomain.