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 💗

Related Topics
  • phenomlabundefined

    Target the posts counter in categories using CSS and jQuery

    Let's Build It
    2
    3 Votes
    2 Posts
    117 Views
    DownPWundefined

    Very great 😉

  • JACundefined

    NodeBB recent cards customisation

    Solved Customisation
    3
    2 Votes
    3 Posts
    114 Views
    JACundefined

    @phenomlab thank you very much for the assistance Mark, massively appreciated as always.

    The great thing about this is it’s all documented for other NodeBB users that come looking for solutions 😃.

    Looks far better 🤝👍🏻.

  • crazycellsundefined

    navigation menu panel on mobile

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

  • dave1904undefined

    How to style tool tip of nodebb-plugin-user-level

    Solved Customisation
    4
    5 Votes
    4 Posts
    721 Views
    phenomlabundefined

    @DownPW thanks. I forgot about that.

  • phenomlabundefined

    Targeting a disappearing element for its CSS

    Moved Let's Build It
    2
    +0
    5 Votes
    2 Posts
    425 Views
    DownPWundefined

    Nice. Very good tips Mark 😁

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

  • pwsincdundefined

    Fontawesome 5

    Unsolved Customisation
    14
    1 Votes
    14 Posts
    900 Views
    phenomlabundefined

    @pwsincd hi. Just following up on this thread (I know it’s old) but was curious to understand if it’s still an issue or not ?

  • JACundefined

    Social icon (Nodebb)

    Solved Customisation
    7
    0 Votes
    7 Posts
    1k Views
    JACundefined

    @phenomlab said in Social icon (Nodebb):

    @jac I just tested my theory around using the OG image, and according to the Twitter card validator, it works fine

    73e805e1-997b-41bf-9259-51c5052ca8fc-image.png

    fixed 🙂