Featured ribbon need to be clear

[Sami]

I like the concept of the featured ribbon, and the color. But i think it must be bigger font size..

i hope you can consider that in the next release...

 

[Bob]

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)

 

[Bob]

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

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

 

[Sami]

Amazing.. Thank you very much

 

[Edwin]

Is it possible to change the ribbon text if yes where can I make the adjustment.

 

[Bob]

Is it possible to change the ribbon text if yes where can I make the adjustment.

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.

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

 

[Edwin]

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.

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

Yes that's what I mean.
But I missing one ribbon

 

[Bob]

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

This will do the trick

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

 

[Edwin]

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

This will do the trick

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

Awesome
Bob is it an option to add this in the sc options even with a option to choose the color?

 

[Bob]

Bob is it an option to add this in the sc options

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.

 

[Edwin]

Looks great.

 

[Edwin]

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.

I have a free 24-hour doubler lol I know that feeling.

 

[Bob]

Its MUCH better than the old image.

 

[Edwin]

Its MUCH better than the old image.

Yes this is perfect, thanks