Vertical scroll progress bar

General Help
1

The default progress bar is horizontal:

Screen Shot 2019-12-19 at 11.03.54 AM
Screen Shot 2019-12-19 at 11.03.54 AM1334×232 4.16 KB

Wondering if there is a way to make it vertical? I don’t see anything in the options.

I can roughly simulate it by modifying the css after publishing using:

.scroll-progress-bar {
    transform: rotate(90deg);
    transform-origin: 0;
    left: 2px;
    top: 58px;
}

But obviously custom css is not allowed in the normal workflow. How else could this be achieved?

2

Hi Kim,
Try the Article Indicator extension. It gives a vertical progress indicator and the option to jump to any article in the course. Here’s a screenshot of a course with it turned on. It’s not as subtle as the header progress, but it does show the article name on hover over and click to jump.

image
image1044×872 161 KB

3

I don’t think it matches exactly what we want, but might be preferable over adding custom code.
Thanks, will give it a go!

4

I can’t figure out where to change the appearance of this extension. Do you where the settings are/what styling it uses?

5

The Article Indicator uses Theming > Default colours > UI Secondary Background for the circles and label colour, and UI Primary Text for the label text colour.

Whilst it is possible to change these colours for a Page Indicator (Theming > Extensions > Page Indicator, I cannot find anywhere where you can independently change the Article indicator colours.