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 🙂
