Skip to content
Sudonix

Fontawesome 5

Unsolved Customisation

  • dave1904undefined

    How to style tool tip of nodebb-plugin-user-level

    Solved Customisation
    4
    5 Votes
    4 Posts
    496 Views
    phenomlabundefined

    @DownPW thanks. I forgot about that.

  • Salaundefined

    The best css to customize our logo?

    Solved Customisation
    2
    1 Votes
    2 Posts
    272 Views
    phenomlabundefined

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

  • crazycellsundefined

    Custom badges

    Solved Customisation
    103
    49 Votes
    103 Posts
    9k Views
    DownPWundefined

    Perfect 😉

  • DownPWundefined

    hover link effect

    Solved Customisation
    18
    6 Votes
    18 Posts
    614 Views
    phenomlabundefined

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

  • cagatayundefined

    Changing Background on NodeBB

    Solved Customisation
    4
    0 Votes
    4 Posts
    526 Views
    phenomlabundefined

    @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

  • Pandaundefined

    Adding fileWrite to nodebb code

    Solved Configure
    16
    5 Votes
    16 Posts
    591 Views
    phenomlabundefined

    @eveh this might be a question for the NodeBB Devs themselves. In all honesty, I’m not entirely sure without having to research this myself.

  • crazycellsundefined

    Recent Cards plugin customization

    Solved Customisation
    21
    13 Votes
    21 Posts
    2k Views
    phenomlabundefined

    @pobojmoks that’s easily done by modifying the code provided here so that it targets background rather than border

    In essence, the below should work

    $(document).ready(function() { $(window).on('action:ajaxify.end', function(data) { $('.recent-card-container').each(function(i) { var dataId = $(this).attr("data-cid"); var color = $('[role="presentation"]', this).css("background-color"); console.log("data-cid " + dataId + " is " + color); $('[data-cid="' + dataId + '"] .recent-card').attr("style", "background-color: " + color); }); }); });
  • kurulumuNetundefined

    nodebb dropdown menu

    Solved Configure
    5
    0 Votes
    5 Posts
    428 Views
    JACundefined

    @phenomlab said in nodebb dropdown menu:

    @kurulumu-net You set it like the below example taken from this site

    aae36790-3257-4bb2-ad5a-0d744309876a-image.png

    Which presents this

    77f47260-2941-4afe-9614-8e17dcfc8c19-image.png

    Very interesting…

    I actually thought this wasn’t possible, as I remember it being asked in the NodeBB forum.

    Is this something new that’s been implemented? I’ll 100% be doing that when I’m on the laptop over the weekend.