Skip to content
Sudonix

CSS code customization for the link preview plugin

Solved Customisation
  • crazycellsundefined

    Hi @phenomlab ,

    I am working on CSS codes to customize the link-preview plugin for some time, but I was unsuccessful 😄 so, I wanted to consult you in case I am missing an important line…

    Unfortunately, normal previews of this plugin are too big for our taste, just like how iframely used to be…

    https://sudonix.org/post/4083

    I ended up something like this:

    .post-container .content .card {
    display: contents !important;  
}

.link-preview {
    
    .card-img-top {
        height:120px !important;
        width: auto !important;
        overflow: hidden !important;        
        float: left !important;
        padding: 0 5px 0 0 !important;      
    }
    
    .card-body {
        padding: 1px 1px 1px 1px !important;
    }
    
    .card-footer {
        position: relative !important;    
    }
}

    But this is nowhere near close to what I was aiming…

    This is how it used to be with iframely and what we are aiming:
    Screenshot 2024-04-02 at 22.04.41.png

    This is how ugly it looks right now 😄

    Screenshot 2024-04-02 at 22.02.51.png

    I hope you can help with this transformation 😄
    Thanks,

    1
  • phenomlabundefined

    @crazycells technically possible, yes - I can get somewhere near the desired layout as below

    7b646096-5c21-44a1-b283-54d6f94e579b-image.png

    However, this isn’t great from the CSS perspective as it’s something of a hack, and will not look good on mobile devices. Here’s the CSS for that if you want to use it.

    .post-container .content .card {
    display: contents !important;  
}
.link-preview .card-title {
    margin-left: -238px;
    float: left;
}
.link-preview .card-img-top {
    height: 120px !important;
    width: auto !important;
    overflow: hidden !important;
    float: left !important;
    padding: 0 5px 0 0 !important;
    margin-top: 35px;
}
.link-preview .card-text {
    margin-top: 20px;
    padding-left: 15px;
}
.link-preview .card-footer {
    position: relative !important;
    margin-top: 70px;
}
.link-preview .card-body {
    padding: 1px 1px 1px 1px !important;
}
.link-preview .card-text {
    margin-top: 35px;
    padding-left: 15px;
}

    The real issue with nodebb-plugin-link-preview is that it has no flexibility in terms of HTML layout meaning you have to get clever with CSS (and even then, it’s not clever at all).

    Using my OGProxy function, it would look like this by default

    https://community.nodebb.org/topic/17109/manual-build-a-night-mode-for-harmony

    However, because you have control over the HTML, you can simply rearrange it to suit your own needs.

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

    👍
    1
  • phenomlabundefined phenomlab has marked this topic as solved on
  • crazycellsundefined

    @phenomlab does OGProxy show the pdf previews as well?

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

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

    1

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 💗

  • dave1904undefined

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

    Solved Customisation
    4
    5 Votes
    4 Posts
    496 Views
    phenomlabundefined

    @DownPW thanks. I forgot about that.

  • Pandaundefined

    Composer options on nodebb

    Solved Configure
    8
    3 Votes
    8 Posts
    293 Views
    phenomlabundefined

    @Panda You should be able to expose the CSS for these using F12 to get into console

    3591518c-e3a3-4ada-a43c-6b32a5e0359c-image.png

    a2b8ed46-4157-4ff2-85f0-576543380107-image.png

    That should then expose the element once selected

    89d9c545-a47a-40d1-98f4-80cf3b958e8f-image.png

    Here’s the below CSS you need based on the screenshot provided.

    .composer .formatting-bar .formatting-group li[data-format="picture-o"], .composer .formatting-bar .formatting-group li[data-format="spoiler"] { display: none; }
  • Salaundefined

    The best css to customize our logo?

    Solved Customisation
    2
    1 Votes
    2 Posts
    272 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
    614 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.

  • cagatayundefined

    Request Sudonix css/js and full analysis info

    Customisation
    2
    1 Votes
    2 Posts
    193 Views
    phenomlabundefined

    Closing this in favour of https://sudonix.com/topic/357/post-style-view/28

  • Pandaundefined

    Adding fileWrite to nodebb code

    Solved Configure
    16
    5 Votes
    16 Posts
    591 Views
    phenomlabundefined

    @eveh this might be a question for the NodeBB Devs themselves. In all honesty, I’m not entirely sure without having to research this myself.

  • DownPWundefined

    [NODEBB] Help for my custom CSS

    Solved Customisation
    193
    38 Votes
    193 Posts
    30k Views
    DownPWundefined

    OMG make sense

    Thanks dude 🙂

  • crazycellsundefined

    [NodeBB] First post customization

    Solved Customisation
    5
    4 Votes
    5 Posts
    642 Views
    crazycellsundefined

    @phenomlab thanks 🙏