Skip to content
Sudonix

[NODEBB] Help for my custom CSS

Solved Customisation
  • DownPWundefined

    @phenomlab said in [NODEBB] Help for my custom CSS:

    I just don’t like static variables

    It doesn’t bother me too much personally because I’m not ready to modify the themes in depth, especially the main colors, but what you say makes sense.
    It’s always better to automate when you can.

    I’ll see what you can do ha ha 🙂

    In any case, I’m happy to bring my stone to the building 🙂

    PW and WS Spirit alive

    😊
    1
  • DownPWundefined

    Hello @phenomlab

    I have a dropdown menu with manu different left icons and I want to align vertically the <a> text
    I don’t know why I can’t do it. Fatigue maybe? 🙂

    Here the code of my menu :

    <li><a id="menubrand" class="dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx"><i id="menubrand" class="fa-solid fa-lg fa-scroll text-primary"></i>&nbsp; Règlements</a></li> 
<li><a id="menubrand" class="dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx"><i id="menubrand" class="fa-solid fa-lg fa-newspaper"></i>&nbsp; Annonces</a></li> 
<li><a id="menubrand" class="dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx"><i id="menubrand" class="fa-solid fa-lg fa-people text-primary"></i> &nbsp; Team</a></li> 
<li><a id="menubrand" class="dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx""><i id="menubrand" class="fa-solid fa-lg fa-database text-primary"></i> &nbsp; Tutoriels</a></li> 
<li><a id="menubrand" class="dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx"><i id="menubrand" class="fa-solid fa-lg fa-bug text-primary"></i> &nbsp; Bug Report</a></li> 
<li><a id="menubrand" class="dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx"><i id="menubrand" class="fa-solid fa-lg fa-brands fa-wikipedia-w text-primary"></i> &nbsp; Wiki</a></li>

    Resut :

    4d2f109a-fd23-406f-af70-3bc0b5bbc5b4-image.png

    Many thanks 😉

    PW and WS Spirit alive

    0
  • phenomlabundefined

    @DownPW You’ll need to restructure the HTML first - don’t use nbsp; - you should always use margin or padding 🙂 Also, you are using the same ID multiple times which will cause you problems with markup as it is not unique.

    Try this

    <li><a class="menubrand dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx"><i class="fa-solid fa-lg fa-scroll text-primary menubrand"></i>Règlements</a></li> 
<li><a class="dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx"><i class="fa-solid fa-lg fa-newspaper menubrand"></i>Annonces</a></li> 
<li><a class="dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx"><i class="fa-solid fa-lg fa-people text-primary menubrand"></i>Team</a></li> 
<li><a class="dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx""><i class="fa-solid fa-lg fa-database text-primary menubrand"></i>Tutoriels</a></li> 
<li><a class="dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx"><i class="fa-solid fa-lg fa-bug text-primary menubrand"></i>Bug Report</a></li> 
<li><a class="dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx"><i class="fa-solid fa-lg fa-brands fa-wikipedia-w text-primary menubrand"></i>Wiki</a></li>

    Then use this CSS

    i.menubrand {
    max-width: 25px;
    width: 25px;
    margin-right: 10px;
    text-align: center;
    vertical-align: middle;
}

    Should give you this

    87b3ef71-a103-4ed8-96c9-8342bcaf07f9-image.png

    Author of OGProxy, Swatch, Threaded, Card, and most of Sudonix's bugs…

    0
  • DownPWundefined

    hmmm ok I will test asap thanks 😉
    Why have you the second icon with no colors : odd no ?

    PW and WS Spirit alive

    0
  • DownPWundefined

    Edit :

    Ok, find the problem, second line have no text-primary and the first line have a different a class.

    – Better like this I think :

    <li><a class="dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx"><i class="fa-solid fa-lg fa-scroll text-primary menubrand"></i>Règlements</a></li> 
<li><a class="dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx"><i class="fa-solid fa-lg fa-newspaper text-primary menubrand"></i>Annonces</a></li> 
<li><a class="dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx"><i class="fa-solid fa-lg fa-people text-primary menubrand"></i>Team</a></li> 
<li><a class="dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx""><i class="fa-solid fa-lg fa-database text-primary menubrand"></i>Tutoriels</a></li> 
<li><a class="dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx"><i class="fa-solid fa-lg fa-bug text-primary menubrand"></i>Bug Report</a></li> 
<li><a class="dropdown-item rounded-1" href="https://xxxxxxxxxxxxxxxx"><i class="fa-solid fa-lg fa-brands fa-wikipedia-w text-primary menubrand"></i>Wiki</a></li>

    Thank you my friend

    PW and WS Spirit alive

    0
  • phenomlabundefined

    @DownPW I was just going to say that 🙂

    f5117dc2-a1d4-41c2-bdda-530162918873-image.png

    Author of OGProxy, Swatch, Threaded, Card, and most of Sudonix's bugs…

    1
  • DownPWundefined

    image.png

    Just this bug.

    How can I change the icon color of the active page? as you can see, the icon is not visible when we are on the selected page
    I don’t want to change background active primary color but for example change icon to white like the text or other color

    PW and WS Spirit alive

    phenomlabundefined DownPWundefined 2 Replies
    0
  • phenomlabundefined

    @DownPW I just checked this, and it looks as though you are using using a transparent colour to work around the hover issue?

    Author of OGProxy, Swatch, Threaded, Card, and most of Sudonix's bugs…

    0
  • DownPWundefined

    @phenomlab

    Not at all 🙂
    The problem occurs on the left sidebar but not in the Brand menu.

    PW and WS Spirit alive

    0
  • phenomlabundefined

    @DownPW This is what I see in the left side bar. I am using the Metallic theme?

    7c18de0d-dda1-45a4-9380-a84cdc080818-image.png

    Author of OGProxy, Swatch, Threaded, Card, and most of Sudonix's bugs…

    0
  • DownPWundefined

    You must have a cache problem because the CSS is not even active on your image 😉

    The problem appears on the current page and not the hover

    For example, use the menu to go to the Rules page. Once on the rules page, reuse the menu to see the bug

    PW and WS Spirit alive

    0
  • phenomlabundefined

    @DownPW Cache cleared, but…

    521b3bec-7fa2-4baf-b94d-53494d92c10e-image.png

    Author of OGProxy, Swatch, Threaded, Card, and most of Sudonix's bugs…

    0
  • DownPWundefined

    re test and click on a link ?

    PW and WS Spirit alive

    0
  • DownPWundefined

    image.png

    PW and WS Spirit alive

    0
  • phenomlabundefined

    @DownPW I see it in an incognito session - looks like I’ve got some browser related issues 😕

    00df3417-3292-40d9-b030-231d63982c24-image.png

    So it’s not hover, but :active

    I’d ne inclined to use transparency here as it’s much less effort

    .dropdown-item.active, .dropdown-item:active {
    --bs-dropdown-link-active-bg: #b9babe38;
}

    That will give you (for this swatch at least)

    eb4040fc-7b5a-4cae-b77e-9cf37570b14b-image.png

    Author of OGProxy, Swatch, Threaded, Card, and most of Sudonix's bugs…

    0
  • DownPWundefined

    @DownPW said in [NODEBB] Help for my custom CSS:

    Just this bug.

    How can I change the icon color of the active page

    PW and WS Spirit alive

    0
  • DownPWundefined

    Yes thnaks it’s a solution but is there another way? Like targeting icons when the dropdown is active rather than changing the background because I already use --bs-dropdown-link-active-bg elsewhere

    Otherwise we can cheat by changing the color of the icons at any time but I find it less good.

    maybe change html for add specific class

    It’s just a question, I can eventually satisfy myself with this solution

    PW and WS Spirit alive

    0
  • phenomlabundefined

    @DownPW Try this

    a.active i {
    color: #ffffff!important;
}

    Author of OGProxy, Swatch, Threaded, Card, and most of Sudonix's bugs…

    👍
    1
  • DownPWundefined

    Seems to be definitevely better. Hope have no other effect 🙂
    Thank you Mark !

    PW and WS Spirit alive

    1
  • phenomlabundefined

    @DownPW there shouldn’t be - it’s a fairly specific target, but if you do experience odd behaviour, let me know.

    Author of OGProxy, Swatch, Threaded, Card, and most of Sudonix's bugs…

    0

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 💗

Related Topics
  • crazycellsundefined

    CSS code customization for the link preview plugin

    Solved Customisation
    4
    3 Votes
    4 Posts
    609 Views
    phenomlabundefined

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

  • crazycellsundefined

    navigation menu panel on mobile

    Solved Customisation
    8
    7 Votes
    8 Posts
    457 Views
    phenomlabundefined

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

  • Hariundefined

    Rotating Star Effect

    Solved Let's Build It
    17
    12 Votes
    17 Posts
    855 Views
    Hariundefined

    @phenomlab thanks a lot for these, both of the below are awesome! ♥

    https://codepen.io/bennettfeely/pen/vYLmYJz

    https://codepen.io/C-L-the-selector/pen/MWZbWBo

  • DownPWundefined

    nodebb-plugin-custom-pages

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

  • phenomlabundefined

    v3 & Harmony diary / thoughts / code snippets

    Announcements
    55
    36 Votes
    55 Posts
    5k Views
    phenomlabundefined

    @DownPW I see why. The code relies on the existence of

    [component="topic/quickreply/container"]

    However, this by definition means that the below has to be enabled

    aeef638f-4188-489d-a9f2-f3a26dbca9d8-image.png

    It will then work

    7fb38631-e0f3-46ef-b652-00929d927b13-image.png

    For some unknown reason, this is hidden in Harmony, and only shows if you select it. In v2, it seems that the <section> is deleted altogether in Persona if “Quick Reply” is disabled, meaning it won’t fire as it can’t locate that specific component.

    The downside is that you might not want the quick reply function, but I think it’s a PITA to scroll up to the top of the post just to reply, so I have it on 🙂

  • Salaundefined

    The best css to customize our logo?

    Solved Customisation
    2
    1 Votes
    2 Posts
    473 Views
    phenomlabundefined

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

  • DownPWundefined

    hover link effect

    Solved Customisation
    18
    6 Votes
    18 Posts
    1k 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] Stats

    Unsolved Customisation
    20
    2 Votes
    20 Posts
    2k Views
    JACundefined

    @phenomlab said in [NODEBB] Stats:

    @jac or I land up fixing it 🙂

    I wouldn’t put it past you 😛