Skip to content

Customisation

Looking to revamp your site layout?

121 Topics 2.3k Posts
  • Page control arrows for PWA

    Solved
    27
    25 Votes
    27 Posts
    209 Views

    @crazycells it is, yes - I think I’ll leave it as there is no specific PWA CSS classes I know of. Well, you could use something like the below, but this means multiple CSS files for different operating systems.

    /** * Determine the mobile operating system. * This function returns one of 'iOS', 'Android', 'Windows Phone', or 'unknown'. * * @returns {String} */ function getMobileOperatingSystem() { var userAgent = navigator.userAgent || navigator.vendor || window.opera; // Windows Phone must come first because its UA also contains "Android" if (/windows phone/i.test(userAgent)) { return "Windows Phone"; } if (/android/i.test(userAgent)) { return "Android"; } if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) { return "iOS"; } return "unknown"; // return “Android” - one should either handle the unknown or fallback to a specific platform, let’s say Android }

    Once you’re in that rabbit hole, it’s impossible to get out of it.

  • 3 Votes
    4 Posts
    76 Views

    @crazycells said in CSS code customization for the link preview plugin:

    does OGProxy show the pdf previews as well?

    Not yet, but it could with a bit of additional code.

  • CSS codes for fa-info icon

    Solved
    9
    6 Votes
    9 Posts
    421 Views

    I have just figured it out…

    it can be targeted with text-decoration-color:

    I was mistakenly using color

  • how to hide "moved" badge with CSS?

    Solved
    12
    3 Votes
    12 Posts
    165 Views

    @crazycells ah, I see. That makes sense.

  • CSS codes to prevent votes to disappear

    Solved
    3
    1 Votes
    3 Posts
    108 Views

    @phenomlab yes, it is 🙂 thanks a lot…

  • navigation menu panel on mobile

    Solved
    8
    7 Votes
    8 Posts
    141 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.

  • Custom badges

    Solved
    103
    49 Votes
    103 Posts
    9k Views

    Perfect 😉

  • 5 Votes
    4 Posts
    476 Views

    @DownPW thanks. I forgot about that.

  • What is this bar called?

    Solved
    92
    36 Votes
    92 Posts
    7k Views

    This is good 👍

  • hover link effect

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

  • easy way to add multilanguage banner

    Unsolved
    12
    5 Votes
    12 Posts
    303 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
    2
    1 Votes
    2 Posts
    131 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
    9
    4 Votes
    9 Posts
    581 Views

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

  • Adding reputation

    Solved
    17
    4 Votes
    17 Posts
    382 Views

    @OT very odd. Shouldn’t be that complex, but glad you have it working.

  • Skins

    Solved
    4
    1 Votes
    4 Posts
    147 Views

    @OT Yes, I know. Here’s the article. I just finished it

    https://sudonix.org/topic/542/swatch-theme-changer

    Please try this in test first before you deploy to live.

  • nodebb-plugin-custom-pages

    Solved
    5
    3 Votes
    5 Posts
    497 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?

  • 2 Votes
    8 Posts
    247 Views

    @Panda you’d be surprised. If you consider that you’d need to use the API to be able to populate a WordPress widget for example (which in turn would of course be PHP), taking this route is still immensely popular.

  • [NODEBB] Help for my custom CSS

    Solved
    193
    38 Votes
    193 Posts
    29k Views

    OMG make sense

    Thanks dude 🙂

  • Whitespace fixes in Nodebb

    Solved
    18
    7 Votes
    18 Posts
    767 Views

    @Panda Just circling back here with something of an update (which I think you’ll like). I’ve completely restructured the ranking system. There are now less ranks, with a higher point threshold to reach them.

    More importantly, if you reload the site, you’ll notice that the ranks are now icons.

    I also removed the “Author” badge, and made this a single icon, which (to me) looks much better.

  • Issues with Progress Bar on v3

    Solved
    48
    14 Votes
    48 Posts
    3k Views

    @Panda You could use the below

    .page-topic .pagination-block.ready { display: none; }