Skip to content

CSS code customization for the link preview plugin

Solved Customisation
  • 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,

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

  • phenomlabundefined phenomlab has marked this topic as solved
  • @phenomlab does OGProxy show the pdf previews as well?

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


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 💗

  • NodeBB: Favicon upload issue

    Solved Configure
    12
    3 Votes
    12 Posts
    353 Views

    @phenomlab I am on a Mac, so I used the “Option + Command + I”, and then performed the steps. It loaded my favicon! I checked on Firefox which I haven’t used before, and it showed my favicon also! That’s fantastic and thank you for the help!

  • 0 Votes
    5 Posts
    192 Views

    @mventures Yes, exactly. The other icon will restart NodeBB whilst the first icon I referenced will rebuild (recompile) it.

    The huge strength of NodeBB over Flarum (for example) is that the code is precompiled, and called once at boot. PHP’s code has to repeatedly reload code from source making it much slower.

  • Chevron up before & after

    Solved Configure
    11
    4 Votes
    11 Posts
    379 Views

    @crazycells you are right 🙂 thank you.

  • New message CSS problem

    Unsolved Customisation
    11
    2 Votes
    11 Posts
    546 Views

    @DownPW hi. Sorry for digging up an old post, but I’m going through items still unresolved and was looking to get an understanding of where you are currently with this?

  • Link vs Refresh

    Solved Customisation
    20
    8 Votes
    20 Posts
    936 Views

    @pobojmoks Do you see any errors being reported in the console ? At first guess (without seeing the actual code or the site itself), I’d say that this is AJAX callback related

  • 13 Votes
    21 Posts
    2k Views

    @pobojmoks that’s easily done by modifying the code provided here so that it targets background rather than border

    In essence, the below should work

    $(document).ready(function() { $(window).on('action:ajaxify.end', function(data) { $('.recent-card-container').each(function(i) { var dataId = $(this).attr("data-cid"); var color = $('[role="presentation"]', this).css("background-color"); console.log("data-cid " + dataId + " is " + color); $('[data-cid="' + dataId + '"] .recent-card').attr("style", "background-color: " + color); }); }); });
  • [NODEBB] Welcome Message

    Solved Customisation
    18
    13 Votes
    18 Posts
    2k Views

    For anyone reviewing this post, there’s an updated version here that also includes an sunrise / sun / moon icon depending on the time of day

    https://sudonix.com/topic/233/nodebb-welcome-message-with-logo-footer-change/3?_=1645445273209

  • CSS Help on my Flarum

    Solved Customisation
    5
    2 Votes
    5 Posts
    429 Views

    @mike-jones Yes, you’ll typically see this type of behaviour if there is another style that has higher priority in the sense that yours will be overridden. Using !important will override the higher preference, but should be used sparingly rather than everywhere.