Skip to content
Sudonix

[NODEBB] Help for my custom CSS

Solved Customisation

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 💗

  • DownPWundefined

    nodebb-plugin-custom-pages

    Solved Customisation
    5
    3 Votes
    5 Posts
    509 Views
    phenomlabundefined

    @DownPW it’s possible, yes, but you may inadvertently end up targeting other elements using the same class which of course isn’t desired.

    Can you provide a link in DM for me to review?

  • Pandaundefined

    Composer Zen icon?

    Solved Configure
    8
    2 Votes
    8 Posts
    214 Views
    phenomlabundefined

    @DownPW exactly. Not really a new concept, and in all honesty, not something I’ve ever used.

    If you consider the need to add links and references, or citations, you’d need to be able to see other parts of the screen!

  • Pandaundefined

    Where are widgets stored?

    Solved Configure
    3
    1 Votes
    3 Posts
    171 Views
    Pandaundefined

    @phenomlab Thanks, have DMed you

  • DownPWundefined

    hover link effect

    Solved Customisation
    18
    6 Votes
    18 Posts
    613 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

    Post Style View

    Solved Customisation
    67
    18 Votes
    67 Posts
    5k Views
    DownPWundefined

    @cagatay

    Just add margin-left on the element like @phenomlab said to you :

    topic [component="post/parent"] { margin-left: 10px; }

    aa08c62b-4223-4cba-8c0f-c73d50474c0d-image.png

    Maybe @phenomlab have a better way

  • crazycellsundefined

    [NodeBB] username cards

    Solved Customisation
    8
    5 Votes
    8 Posts
    829 Views
    Sampo2910undefined

    @phenomlab

    Aha…nice to know. As always thank you for the reply and information.

  • JACundefined

    Social icon (Nodebb)

    Solved Customisation
    7
    0 Votes
    7 Posts
    919 Views
    JACundefined

    @phenomlab said in Social icon (Nodebb):

    @jac I just tested my theory around using the OG image, and according to the Twitter card validator, it works fine

    73e805e1-997b-41bf-9259-51c5052ca8fc-image.png

    fixed 🙂

  • Hariundefined

    unable to upvote on forum

    Solved Performance
    10
    3 Votes
    10 Posts
    551 Views
    Hariundefined

    @phenomlab yes, i can understand. it is working now 🙂