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💗

  • 5 Votes
    12 Posts
    298 Views

    @phenomlab hi Mark, no worries. I will definitely write my experience here… 🙂

    Unfortunately, I could not find time to try it yet.

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

  • 3 Votes
    5 Posts
    490 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?

  • What is this bar called?

    Solved Customisation
    92
    36 Votes
    92 Posts
    6k Views

    This is good 👍

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

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

  • fading in /tags page

    Solved Customisation
    32
    30 Votes
    32 Posts
    2k Views

    Fix working perfectly 👍 🙂

  • 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