Skip to content
Sudonix

Switch between list and card view function

Moved Let's Build It

Related Topics
  • phenomlabundefined

    Ch..ch..ch..ch..changes!

    Announcements
    16
    15 Votes
    16 Posts
    174 Views
    JACundefined

    @phenomlab of course, to be recognised is fantastic.

    @phenomlab said in Ch..ch..ch..ch..changes!:

    Sadly, no. Web crawlers and scrapers are often JS based and read text only, so styles don’t have any bearing.

    I’ve read mixed things about this, but no that does make sense, it was something I read a many years back when using Wordpress.

  • phenomlabundefined

    Extended functions for Q&A NodeBB plugin

    Let's Build It
    3
    5 Votes
    3 Posts
    1k Views
    DownPWundefined

    Very good like always 😉

  • Salaundefined

    The theme came with space on left side

    Solved WordPress
    7
    3 Votes
    7 Posts
    563 Views
    Salaundefined

    @phenomlab yes it’s a different theme. The other one was not offering much on editable sidebar. It was like flarum hahah

  • dave1904undefined

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

    Solved Customisation
    4
    5 Votes
    4 Posts
    702 Views
    phenomlabundefined

    @DownPW thanks. I forgot about that.

  • DownPWundefined

    nodebb-user-level customisation : popover element

    Solved Customisation
    15
    6 Votes
    15 Posts
    1k Views
    DownPWundefined

    No no, I said that in the sense that he told me it was simple ^^
    I was able to see that this was not the case by targeting the elements he had advised me.

  • Salaundefined

    The best css to customize our logo?

    Solved Customisation
    2
    1 Votes
    2 Posts
    448 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.

  • DownPWundefined

    hover link effect

    Solved Customisation
    18
    6 Votes
    18 Posts
    1k 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.

  • DownPWundefined

    [NodeBB] Import custom Font

    Solved Customisation
    12
    3 Votes
    12 Posts
    1k Views
    phenomlabundefined

    @cagatay you’ll need to define this in the body tag (or another element if you want greater or more granular targets) - for example

    body { font-family: "Poppins"; font-size: 16px; }

    Essentially, you use the font-size CSS directive.