Skip to content
Sudonix

nodebb-user-level customisation : popover element

Solved Customisation
  • DownPWundefined

    hello
    How can I target the following CSS elements ?
    I have custom themes and I need to modify these elements because on dark theme, we have bug like here on Sudonix.

    image.png

    image.png

    @barisusakli said It’s a standard bootstrap popover so you can use the .popover class to target it.
    It has .popoover, .popover-header, .popover-body, popover-arrow classes but when I target these, I loose border and border-radius and arrow target seems to doesn’t work

    I need background boy, background title, border color, border-radius, arrow color, etc…

    Thanks in advance

    PW and WS Spirit alive

    0
  • phenomlabundefined

    @DownPW This isn’t as simple as it looks, because bootstrap is using inset border radius

    Here’s a workaround

    .popover-body {
    background: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    border: 1px solid var(--bs-border-color);
    border-radius: 0 0 0.375rem 0.375rem;
    margin: 0px;
}
.popover-header {
    background-color: var(--bs-alert-info-bg);
    color: var(--bs-alert-info-color);
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
    margin: 0px;
}
.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after, .bs-popover-top>.popover-arrow::after,{
    border-top-color: var(--bs-border-color);
}
.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after, .bs-popover-bottom>.popover-arrow::after,{
    border-bottom-color: var(--bs-border-color);
}
.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::after, .bs-popover-end>.popover-arrow::after {
    border-left-color: var(--bs-border-color);
}
.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after, .bs-popover-end>.popover-arrow::after {
    border-right-color: var(--bs-border-color);
}

    Then, in the widgets section - /admin/extend/widgets select the account/profile.tpl widget, and add the below HTML

    <style>
.popover-body {
    border-radius: 0.375rem;
}
</style>

    32d9fac7-67b1-4ea2-9aa5-37eba0ab776e-image.png

    Save the widget.

    This is the closest you can get unfortunately. It’s something of a hack, but a necessary evil.

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

    👍
    2
  • cagatayundefined

    Images are not seen

    phenomlabundefined 1 Reply
    0
  • DownPWundefined

    arf I can’t edit first post

    image.png

    image.png

    PW and WS Spirit alive

    phenomlabundefined 1 Reply
    0
  • phenomlabundefined

    @cagatay Initial post edited. Not sure why that is… 😕

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

    0
  • phenomlabundefined

    @DownPW You mean something like this ?

    65144ee9-4220-40f9-91e8-59efc7b31828-image.png

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

    👍
    1
  • DownPWundefined

    exactly my friend 🙂

    same things for second screenshot

    PW and WS Spirit alive

    phenomlabundefined 2 Replies
    0
  • phenomlabundefined

    @DownPW This will work - obviously, modify to suit your needs

    .popover {
    border-radius: 0.375rem;
}
.popover-body {
    background: var(--bs-body-navbar) !important;
    color: var(--bs-body-color) !important;
    border: 1px solid var(--bs-border-color);
    border-radius: 0 0 0.375rem 0.375rem;
}
.popover-header {
    background-color: var(--bs-alert-info-bg);
    color: var(--bs-alert-info-color);
}
.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after, .bs-popover-top>.popover-arrow::after {
    border-top-color: var(--bs-border-color);
}

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

    1
  • phenomlabundefined

    @DownPW Try this

    .bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after, .bs-popover-end>.popover-arrow::after {
    border-right-color: var(--bs-border-color);
}

    It’s important to remember that JS will determine the popup position and then add the arrow to suit. In this case, you’d need the below CSS to capture all of them

    .bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after, .bs-popover-top>.popover-arrow::after,{
    border-top-color: var(--bs-border-color);
}
.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after, .bs-popover-bottom>.popover-arrow::after,{
    border-bottom-color: var(--bs-border-color);
}
.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::after, .bs-popover-end>.popover-arrow::after {
    border-left-color: var(--bs-border-color);
}
.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after, .bs-popover-end>.popover-arrow::after {
    border-right-color: var(--bs-border-color);
}

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

    0
  • phenomlabundefined phenomlab has marked this topic as solved on
  • DownPWundefined

    better result than me but did you see this ?

    • The border radius is much larger than the original
    • On light theme, seems border was blurry

    image.png

    image.png

    • And in addition of blur, on dark/mid theme, we have 2 border with haven’t radius. Don’t know why

    image.png

    image.png

    –> I have the same behavior with my code when I have tested

    PW and WS Spirit alive

    0
  • phenomlabundefined

    @DownPW Ooops…

    Sorry - I forgot a class - original answer modified

    .popover {
    border-radius: 0.375rem;
}

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

    0
  • DownPWundefined

    hmmm nope it doesn’t change anything

    see it’s worse ^^

    204f26de-7ac7-4b29-bdb3-edcb9b65a73d-image.png
    205f5e14-f3f5-4cd0-b68b-e35b2d9052b4-image.png

    –> I have the same behavior with my code last night 😞

    EDIT:

    I f you play with border-radius you better seen the bug
    There missing something

    PW and WS Spirit alive

    0
  • phenomlabundefined

    @DownPW This isn’t as simple as it looks, because bootstrap is using inset border radius

    Here’s a workaround

    .popover-body {
    background: var(--bs-body-bg) !important;
    color: var(--bs-body-color) !important;
    border: 1px solid var(--bs-border-color);
    border-radius: 0 0 0.375rem 0.375rem;
    margin: 0px;
}
.popover-header {
    background-color: var(--bs-alert-info-bg);
    color: var(--bs-alert-info-color);
    border-top-left-radius: 0.375rem;
    border-top-right-radius: 0.375rem;
    margin: 0px;
}
.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after, .bs-popover-top>.popover-arrow::after,{
    border-top-color: var(--bs-border-color);
}
.bs-popover-auto[data-popper-placement^=top]>.popover-arrow::after, .bs-popover-bottom>.popover-arrow::after,{
    border-bottom-color: var(--bs-border-color);
}
.bs-popover-auto[data-popper-placement^=left]>.popover-arrow::after, .bs-popover-end>.popover-arrow::after {
    border-left-color: var(--bs-border-color);
}
.bs-popover-auto[data-popper-placement^=right]>.popover-arrow::after, .bs-popover-end>.popover-arrow::after {
    border-right-color: var(--bs-border-color);
}

    Then, in the widgets section - /admin/extend/widgets select the account/profile.tpl widget, and add the below HTML

    <style>
.popover-body {
    border-radius: 0.375rem;
}
</style>

    32d9fac7-67b1-4ea2-9aa5-37eba0ab776e-image.png

    Save the widget.

    This is the closest you can get unfortunately. It’s something of a hack, but a necessary evil.

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

    👍
    2
  • phenomlabundefined phenomlab has marked this topic as solved on
  • DownPWundefined

    @phenomlab said in nodebb-user-level customisation : popover element:

    @DownPW This isn’t as simple as it looks, because bootstrap is using inset border radius

    yes, that’s what I noticed !! 😊
    Thank you baris ^^

    Hence the need to open this topic

    This hack seems to work, thanks again. If there is anything I will come back 🙂

    PW and WS Spirit alive

    😊
    1
  • phenomlabundefined

    @DownPW said in nodebb-user-level customisation : popover element:

    Thank you baris ^^

    Not his fault really - it’s the BS library behaviour by default.

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

    0
  • DownPWundefined

    No no, I said that in the sense that he told me it was simple ^^
    I was able to see that this was not the case by targeting the elements he had advised me.

    PW and WS Spirit alive

    🤣
    1
  • phenomlabundefined phenomlab referenced this topic on

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 💗

  • cagatayundefined

    NodeBB v3 Vote Icon

    Solved Customisation
    9
    2 Votes
    9 Posts
    464 Views
    cagatayundefined

    @phenomlab forget it, look likes good with your codes.

  • DownPWundefined

    [NodeBB] Auto assign a label or group title

    Solved Customisation
    5
    1 Votes
    5 Posts
    565 Views
    phenomlabundefined

    @DownPW very useful tip. Thanks

  • DownPWundefined

    hover link effect

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

    Quote design CSS

    Solved Customisation
    15
    4 Votes
    15 Posts
    697 Views
    phenomlabundefined

    @DownPW yes, that does make sense actually. I forgot to mention the layout of Sudonix is custom so that would have an impact on the positioning.

    Good spot 🙂

  • DownPWundefined

    [NODEBB] Help for my custom CSS

    Solved Customisation
    193
    38 Votes
    193 Posts
    30k Views
    DownPWundefined

    OMG make sense

    Thanks dude 🙂

  • DownPWundefined

    [NODEBB] Stats

    Unsolved Customisation
    20
    2 Votes
    20 Posts
    1k Views
    JACundefined

    @phenomlab said in [NODEBB] Stats:

    @jac or I land up fixing it 🙂

    I wouldn’t put it past you 😛

  • JACundefined

    NodeBB Footer

    Solved Customisation
    10
    1 Votes
    10 Posts
    979 Views
    JACundefined

    @phenomlab said in NodeBB Footer:

    @jac and you. Hope all is well and you recover quickly

    Thanks pal 😁🤝🏻

  • DownPWundefined

    Reading Meter Progress bar

    Locked Solved Customisation
    15
    9 Votes
    15 Posts
    824 Views
    phenomlabundefined

    For anyone else following this thread, please see
    https://sudonix.com/topic/467/issues-with-progress-bar-on-v3