Multiple link on one ico non Navbar

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💗

  • 2 Votes
    1 Posts
    101 Views

    I wanted a way to draw attention to the recent cards on the categories page to make them stand out more - and what better way to do this than with some CSS. Here’s a short video of the outcome of that very exercise. Watch the recent cards closely as I cycle through the themes.

    There’s a gradient being set there which is essentially two of the core colours in each theme.

    For example, in swatch “Anthracite”, it’s easy to see how this effect works

    1981b09d-671d-42c7-89ae-555f30916669-image.png

    Essentially, we are setting the border-color and color variables to match the color set by the category itself. Essentially, this is an extension of this thread
    https://sudonix.com/topic/256/recent-cards-plugin-customization

    The minor change here is just one line

    $(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", "border-color: " + color); $('[data-cid="' + dataId + '"] .recent-card h4 a').attr("style", "color: " + color); }); }); });

    The line in question is

    $('[data-cid="' + dataId + '"] .recent-card h4 a').attr("style", "color: " + color);

    By adding this line, we change both the border color, and the text color to match. I also chose to thicken the border by 1px to give it a bit more depth, which works very well. I did consider a box-shadow but I think that may look somewhat “overdone” and odd when coupled with other elements. The jury is still out on that one 🙂

  • chat list navbar

    Solved Customisation
    30
    3 Votes
    30 Posts
    352 Views

    No no it’s ok @phenomlab
    I just comment the 2 lines mentionned aboves 😉

  • Link Text Colour.

    Solved Customisation
    5
    2 Votes
    5 Posts
    162 Views

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

  • Link vs Refresh

    Solved Customisation
    20
    8 Votes
    20 Posts
    495 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

  • 0 Votes
    7 Posts
    253 Views

    @downpw ooops. Forgot that. Thanks for adding.

  • 24 Votes
    112 Posts
    2k Views

    @DownPW as discussed in PM

    Seems to have been solved with the new JS code that you added allowing the version CSS file change!!

    Cache problem therefore with the JS of the Switcher theme

    Based on this, I will close this thread and reference
    https://sudonix.com/topic/207/nodebb-help-for-my-custom-css/27

  • NodeBB Design help

    Solved Customisation
    8
    2 Votes
    8 Posts
    315 Views

    @riekmedia I’ve applied some new CSS to your site. Can you reload the page and try again ?

    For the record, this is what I added

    #footer { background: #2d343e; border-top: 4px solid #2d343e; font-size: 0.9em; margin-top: 70px; padding: 80px 0 0; position: relative; clear: both; bottom: 0; left: 0; right: 0; z-index: 1000; margin-left: -15px; margin-right: -338px; }

    The /categories page seems a bit messed up, so looking at that currently

    EDIT - issued some override CSS in the CATEGORIES widget

    <!--- CSS fix for overspill on /categories page - DO NOT DELETE --> <style> #footer { margin-right: -45px; } </style>

    That should resolve the /categories issue.

  • CSS Help on my Flarum

    Solved Customisation
    5
    2 Votes
    5 Posts
    283 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.