Main menu progress bar - styling for percentage

General Help
,
1

I’m pretty sure this is bugged, but does anyone know where/how to apply styles to the text on a menu item that says ‘XX%’ next to the progress bar (to indicate how complete that item is)? Nearest I can see in theme settings is under Menu > Item duration appearance but that is for the duration figure above.

If you look at the page HTML/CSS this XX% text seems to be set at 15px by rules for .ev-page-item-progress-indicator-text and .ev-progress-bar-text. The page tries to set the font size using the #ev-root ID (which I understand is the default font-size in Course > Body text appearance) but it is overridden by the above two styles. However, they also both use the same styling rules in the CSS so not clear why both are applied - can anyone confirm how to set this font-size or if it is a bug?

This issue was highlighted as I am trying to increase it for accessibility, where, ideally, we want to aim for a 16px minimum. I know best practice there is up for debate, but I think it should be possible to change.

1 Like
2

Hi @scamp I’m afraid you’re correct this is hard-coded, something which has been raised a couple of times before. I’ll see if we can get something on the roadmap to address that.

Interestingly if you select Box Menu as the course menu then in Settings > Box Menu > Item Layout you select Use Vertical Item Layout you do then have the option to change the font size. It uses the setting Menu Item Title Text Styles from Theme > Menu Item Title Appearance. Appreciate that might not be ideal but it is an option…

3

@Matt_Leathes Thanks for the reply and the suggestion :+1:
This one is with an external developer at the moment, so probably won’t pursue that option just now, but useful to know for the future, thanks :slight_smile: