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

    Plugin to show images in teasers

    General
    6
    2 Votes
    6 Posts
    384 Views
    phenomlabundefined

    @dave1904 I’d start by adding a console.log function to hookData so you can see what is being returned

    return hookData; console.log(hookData):
  • dave1904undefined

    Embedding external URLs

    Solved General
    3
    3 Votes
    3 Posts
    206 Views
    dave1904undefined

    Many thanks! I’ll use your walkthrough and go for the self-hosted solution.

  • 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

    Blinking text Effect

    Customisation
    3
    5 Votes
    3 Posts
    470 Views
    DownPWundefined

    @phenomlab

    I love it too

    @phenomlab said in Blinking text Effect:

    Has that “broken neon light” look that you see in films.

    It’s exactly that, kind of old neon signs of bar or pubs a bit cyberpunk too 😉

  • elhana fineundefined

    Editing a reputation for a user in a nodeBB based forum

    Solved Customisation
    9
    5 Votes
    9 Posts
    1k Views
    crazycellsundefined

    is there any way to see whose reputation is changed by this plugin?

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

  • JACundefined

    Forum customisation

    Customisation
    17
    3 Votes
    17 Posts
    1k Views
    JACundefined

    @jac said in Forum customisation:

    @phenomlab said in Forum customisation:

    @jac 100%. Just setting up some free time. I’m on annual leave from work offer the coming 2 weeks so hopefully will have a bit more time then.

    Not a problem Mark, I don’t wish for you to use all your spare time doing that, just do it when you can, no issues 🙂

    I know you’re busy doing other things but when you get a chance mate I’m happy for this to go ahead along with the RSS script.

    👍🏻

  • JACundefined

    Customising NodeBB

    Locked Customisation
    3
    0 Votes
    3 Posts
    754 Views
    phenomlabundefined

    Closing this thread as a duplicate of https://sudonix.com/topic/12/nodebb-customisation