Skip to content

Changing the look of recent cards

Announcements
  • 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 🙂


Related Topics