Skip to content
Sudonix

Switch between list and card view function

Moved Let's Build It
107 4 24.6k 1
Log in to reply

Related Topics
  • phenomlabundefined

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

    Announcements themes layout
    16
    2
    15 Votes
    16 Posts
    2k 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.
  • DownPWundefined

    Material View Support for Stock NodeBB

    Unsolved Let's Build It material view javascript css
    51
    4
    15 Votes
    51 Posts
    11k Views
    DownPWundefined
    Oh yes, that’s what’s super cool, I learn something every day. Afterwards I start from so low in JS
  • phenomlabundefined

    Create a dynamic category list

    Moved Let's Build It dynamic categories api
    16
    3
    14 Votes
    16 Posts
    4k Views
    phenomlabundefined
    Hmm - seems I never committed this code. I’ll do that now… EDIT - here it is https://github.com/phenomlab/category-list/tree/main
  • DownPWundefined

    Footer bar add center text

    Solved Customisation css
    41
    1
    8 Votes
    41 Posts
    9k Views
    DownPWundefined
    @phenomlab said in Footer bar add center text: div#console-nav-tab Ah ok test with bottom: 0px !important; idem
  • Salaundefined

    The best css to customize our logo?

    Solved Customisation css
    2
    1 Votes
    2 Posts
    1k Views
    phenomlabundefined
    @Sala This should look better .sidenav .navbar-brand { padding-top: 0.5rem; padding-bottom: 0.5rem; } [image: 1669026666905-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 css link hover
    18
    1
    6 Votes
    18 Posts
    3k 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] Scroll Button

    Solved Customisation css javascript html scroll button
    7
    1
    0 Votes
    7 Posts
    2k Views
    phenomlabundefined
    @downpw ooops. Forgot that. Thanks for adding.
  • RiekMediaundefined

    Discourse Design Change

    Customisation design change css html
    25
    7 Votes
    25 Posts
    5k Views
    RiekMediaundefined
    @phenomlab okay