Changing the look of recent cards
-
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
Essentially, we are setting the
border-color
andcolor
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-customizationThe 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 abox-shadow
but I think that may look somewhat “overdone” and odd when coupled with other elements. The jury is still out on that one