Featured ribbon need to be clear

Pretty sure that is being replaced in SC 2.4.0 favor of CSS to give Admins much better control over things like shape, size, color, font type, font size etc (I say, pretty sure as I am not in my office at the moment and can't verify whether its in SC 2.4.0 or SC 2.5.0)

 

The "Featured" Icon on the Grid View and Modular View Layouts is now a ribbon and is 100% CSS (which means you can modify it to your liking via extra.css).

Here are a couple quick screen shots showing one of many simple things that can be done via Extra.css (changing the background color and text color).

This is default (blue and white)


Here I simply added a slight Extra.css tweak to make the ribbon yellow with black text...

HTML:

.amsGridItem .thumbnailContainer span.featured:after {
    background-color: yellow;
    color: black;
}

In this example, you can see that there is a slight opacity (0.7) when in inactive (not moused over) mode.


When you mouse over, the opacity is (1.0). The opacity values can be overriden by Extra.css as well (its all CSS, so anything about it can be adjusted).


You can use other CSS Classes (like the Category ID) to make Featured Ribbons different colors for different category's now.

 

Change "Featured" to what you want it to say. If the text is to large, you are going to have to make a bunch of adjustments.

HTML:

.canTransform .showcaseItemThumb span.featured:after
{
    content: "Featured" !important;
}

 

Oops.... keep forgetting that the Modular Block CSS is slightly different than Grid View..

This will do the trick

HTML:

.canTransform .showcaseItemThumb span.featured:after,
.canTransform .thumbnailContainer span.featured:after
{
    content: "Featured" !important;
}

 

I MAY (if someone figures out how to give me 48 hours in a day) add some style properties, but something like this will never be in the "Options". Style Properties are for CSS.

 

Its MUCH better than the old image.