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 💗

Related Topics
  • crazycellsundefined

    CSS codes to prevent votes to disappear

    Solved Customisation
    3
    1 Votes
    3 Posts
    272 Views
    crazycellsundefined

    @phenomlab yes, it is 🙂 thanks a lot…

  • Pandaundefined

    Interesting Widget code, but can't fetch API

    Solved Customisation
    26
    2 Votes
    26 Posts
    2k Views
    phenomlabundefined

    @Panda said in Interesting Widget code, but can’t fetch API:

    How did you drop that widget into the post there?
    I hadnt seen this BSgenerator anywhere on sudonix site, do you use it somewhere already?

    Yes, here

    https://sudonix.org/topic/414/corporate-bullshit-generator?_=1687774393044

    It’s not a “post” or “topic” in the common sense. It is actually a page in it’s own right and leverages nodebb-plugin-custom-pages. This in turn creates a new “route” which behaves like a page, meaning it is then exposed for widgets.

    @Panda said in Interesting Widget code, but can’t fetch API:

    Also can you explain more what you mean by calling the code externally. In my API call example, how would I go about doing that?

    By this, I mean create all the required code in an external JS file that is reachable by the NodeBB instance - so, in “public” for example - or in my case /public/js. The widget then “calls” that file and because it runs outside of the scope of NodeBB, you just need to return the values to the widget.

    Hope this makes sense?

  • Pandaundefined

    Difficult to move posts now, on mobile.

    Bugs
    16
    5 Votes
    16 Posts
    756 Views
    phenomlabundefined

    @DownPW Yes, it is. It’s set far too low meaning other elements with a higher preference will sit over the top of it.

  • Pandaundefined

    Title on homepage of nodebb forum

    Solved Customisation
    2
    1 Votes
    2 Posts
    665 Views
    phenomlabundefined

    @eveh Welcome board 🙂

    The code you are referring to is custom written as no such functionality exists under NodeBB. However, adding the functionality is relatively trivial. Below are the required steps

    Navigate to /admin/appearance/customise#custom-header Add the below code to your header, and save once completed <ol id="mainbanner" class="breadcrumb"><li id="addtext">Your Title Goes Here</li></ol> Navigate to /admin/appearance/customise#custom-js and add the below code, then save $(document).ready(function() { $(window).on('action:ajaxify.end', function(data) { // Initialise mainbanner ID, but hide it from view $('#mainbanner').hide(); var pathname = window.location.pathname; if (pathname === "/") { $("#addtext").text("Your Title"); $('#mainbanner').show(); } else {} // If we want to add a title to a sub page, uncomment the below and adjust accordingly //if (pathname === "/yourpath") { //$("#addtext").text("Your Title"); //$('#mainbanner').show(); //} }); }); Navigate to /admin/appearance/customise#custom-css and add the below CSS block .breadcrumb { right: 0; margin-right: auto; text-align: center; background: #0086c4; color: #ffffff; width: 100vw; position: relative; margin-left: -50vw; left: 50%; top: 50px; position: fixed; z-index: 1020; }

    Note, that you will need to adjust your CSS code to suit your own site / requirements.

  • Sampo2910undefined

    Link Text Colour.

    Solved Customisation
    5
    2 Votes
    5 Posts
    417 Views
    Sampo2910undefined

    @phenomlab Thx again for the reply.

    Well I am sure that it will be well worth the wait. 🙂 I will watch with anticipation. For now it is OK. Just small minor irritations I fell in a lot of NodeBB ‘default’ things.

  • pwsincdundefined

    [NodeBB] Custom fields plugin

    Unsolved Customisation
    5
    0 Votes
    5 Posts
    908 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 ?

  • pwsincdundefined

    [NodeBB] greeting message

    Solved Customisation
    2
    3 Votes
    2 Posts
    628 Views
    phenomlabundefined

    @pwsincd welcome to sudonix, and thanks for the comments. What your looking for is here

    https://sudonix.com/topic/195/nodebb-welcome-message/3?_=1648295651358

  • DownPWundefined

    [NODEBB] Help for my custom CSS

    Solved Customisation
    193
    38 Votes
    193 Posts
    32k Views
    DownPWundefined

    OMG make sense

    Thanks dude 🙂