Component - Hotgrid - Item Title color

[bryan-franey]

The Hotgrid component renders trigger images as button tags, formatted as <button class="base hotgrid-grid-item hotgrid-item-states-css " data-index="0">...</button>. Text can be added below the image in the button using the Item Title field in the Hotgrid item editor. The two style rules described below result in the Item Title text being rendered as white text over a white background. Please see the screenshot below for an example.

1. Line 7 in less/core/buttons.less specifies that button element text color is white.
2. Line 25 is the same file specifies that buttons with the class base will have a transparent background. Hotgrid buttons are rendered in component regions with a white background, which means that the white button text will not be visible.

There is currently only one rule in the theme pertaining to this plugin (line 766 in less/custom/theme-extras.less). Suggest creating the overrides listed below in a new file: less/plugins/adapt-contrib-hotgrid/hotgrid.less.

• button.hotgrid-grid-item .hotgrid-item-title needs a dark text color, such as color: #333
• button.hotgrid-grid-item.visited .hotgrid-item-title, needs a dark text color to appear over a grey background (#b2b2b2), so probably black color: #000

[falcochip]

button.hotgrid-grid-item .hotgrid-item-title{ color: #333; }

visited style not required as item does not have grey background when visited

[LIT-EIA-OWNER]

button.hotgrid-grid-item .hotgrid-item-title{ color: #333; }

visited style not required as item does not have grey background when visited

Hmm I thought they did have a grey background when visited - I believe it's when you don't specify a visited image, then it defaults to a grey but if you put the same image in visited as the normal state then it won't change - to look into, we might have to darken the text on that too.

[falcochip]

// Hot grid item title style - issue #45 button.hotgrid-grid-item .hotgrid-item-title{ color: #333; font-weight: 500; } .hotgrid-component .visited:after { background-color: rgba(172,172,172,0.2); button.hotgrid-grid-item .hotgrid-item-title{ color: #000; } }