Skip to content
Sudonix

[NODEBB] Help for my custom CSS

Solved Customisation

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 code customization for the link preview plugin

    Solved Customisation
    4
    3 Votes
    4 Posts
    598 Views
    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.

  • Salaundefined

    The theme came with space on left side

    Solved WordPress
    7
    3 Votes
    7 Posts
    563 Views
    Salaundefined

    @phenomlab yes it’s a different theme. The other one was not offering much on editable sidebar. It was like flarum hahah

  • Salaundefined

    The best css to customize our logo?

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

  • Pandaundefined

    Rotating homepage icons, gifs?

    Solved Configure
    2
    3 Votes
    2 Posts
    237 Views
    phenomlabundefined

    @eveh It’s not a GIF, no. It’s actually a webp file so made much smaller, and uses keyframes to control the rotation on hover. You can easily make your own though 🙂

    The CSS for that is as below

    @keyframes rotate180 { from { transform: rotate(0deg); } to { transform: rotate(180deg); } } @keyframes rotate0 { from { transform: rotate(180deg); } to { transform: rotate(0deg); } }

    Your milage may vary on the CSS below, as it’s custom for Sudonix, but this is the class that is used to control the rotate

    .header .forum-logo, img.forum-logo.head { max-height: 50px; width: auto; height: 30px; margin-top: 9px; max-width: 150px; min-width: 32px; display: inline-block; animation-name: rotate180, rotate0; animation-duration: 1000ms; animation-delay: 0s, 1000ms; animation-iteration-count: 1; animation-timing-function: linear; transition: transform 1000ms ease-in-out; }
  • crazycellsundefined

    Recent Cards plugin customization

    Solved Customisation
    21
    13 Votes
    21 Posts
    3k Views
    phenomlabundefined

    @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); }); }); });
  • pwsincdundefined

    Detect if user is admin

    General
    2
    0 Votes
    2 Posts
    485 Views
    phenomlabundefined

    @pwsincd I think you can use userData.isAdmin = isAdmin; if I’m not mistaken - see
    https://community.nodebb.org/topic/15128/how-to-hide-whitelist-user-field-only-to-owner-or-admin?_=1648802303112 for an example

  • crazycellsundefined

    Adjusting the size of boxes in posts-list class

    Solved Customisation
    3
    3 Votes
    3 Posts
    291 Views
    crazycellsundefined

    @phenomlab thanks a lot, this combination works best 👍

    .posts-list .posts-list-item .content { overflow: auto; max-height: 600px; }
  • DownPWundefined

    [NodeBB] Import custom Font

    Solved Customisation
    12
    3 Votes
    12 Posts
    1k Views
    phenomlabundefined

    @cagatay you’ll need to define this in the body tag (or another element if you want greater or more granular targets) - for example

    body { font-family: "Poppins"; font-size: 16px; }

    Essentially, you use the font-size CSS directive.