Skip to content

Make logo rotate on page load and hover

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💗

  • 7 Votes
    8 Posts
    80 Views

    @crazycells hmm. That’s odd. I haven’t made any changes from recollection but I could be wrong. I’ll need to check.

    EDIT - very strange. I honestly don’t recall adding the below CSS block to alter the bottom bar, but you’re right…

    .bottombar-nav { padding: 0px !important; }

    I’ve removed this so it reflects stock Harmony.

  • Profil Photos

    Solved Customisation
    2
    1 Votes
    2 Posts
    122 Views

    @cagatay the fastest way to do this would be to modify the auto generated sitemap.xml file so that it does not index users. It might be paint to do the same thing with users in terms of guest permissions.

    Let me have a look.

    Edit - you can do this with permissions. Go to /admin/manage/privileges then look in the left where it says guests - remove the tick from the view users permission for guests then click save

    You can test this out using an incognito or non logged in session. Attempting to view users should then ask you to login.

  • Nodebb icon on google page

    Solved Customisation
    9
    4 Votes
    9 Posts
    575 Views

    @Panda It’s been raised multiple times, but only for the open source version, and not hosted.

  • 3 Votes
    5 Posts
    489 Views

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

  • 1 Votes
    2 Posts
    250 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.

  • Custom badges

    Solved Customisation
    103
    49 Votes
    103 Posts
    9k Views

    Perfect 😉

  • hover link effect

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

  • CSS codes for fa-info icon

    Solved Customisation
    9
    6 Votes
    9 Posts
    362 Views

    I have just figured it out…

    it can be targeted with text-decoration-color:

    I was mistakenly using color