injecting style

27 views
Skip to first unread message

Kathleen Schmidt

unread,
Apr 30, 2021, 1:30:16 AMApr 30
to Minno.js
Hey!

I'm trying to change all the colors from blue to purple in the for the 'quest' tasks in my study.

By adding the below code to my manager file, I can get inject style to work for the submit button color, but not for the any of the other parts.

API.addSettings('injectStyle', '[pi-quest] .page-buttons .page-submit {background-color: #9D009D; border:#700070;}','[pi-quest] .btn-select .btn-select.active {background-color: #9D009D;}', '[pi-quest] {border-color: #000000;}');

Can you let me know how to change the border color of the page and the selected buttons?

I also would love to figure out how to center EVERYTHING (question stem and horizontal button choices), but that's less important.

Thanks!
Kathleen

Kathleen Schmidt

unread,
Apr 30, 2021, 12:42:32 PMApr 30
to Minno.js
Figured out the centering thing by looking through old conversations--still need restyling help, though. Thanks!

Elad Zlotnick

unread,
May 3, 2021, 3:48:10 AMMay 3
to Minno.js
Hi Kathleen,

I think this is the solution that you want:

    API.addSettings('injectStyle',[ 
        '[piq-page] {border-color: #9D009D}', // frame color
        '[pi-quest] .page-buttons .page-submit, [piq-page] h3 {background-color: #9D009D; border:#700070; color: white;}', // header and submit button
        '[pi-quest] label {width:100%; text-align:center;}', // center stem
        '[quest-select-one] button {text-align: center;}'
    ].join(''));

I'd note two things:
First, API.addSettings takes only two arguments, so only the first strings of css that you passed was processed (I used [].join() in order to use multiple strings.
Second, if you are using minno 0.3, the injectStyle setting is deprecated in favor of the inject style task https://minnojs.github.io/docs/manager/tasks/injectstyle/

best,
Elad

Kathleen Schmidt

unread,
May 3, 2021, 2:01:18 PMMay 3
to Minno.js
Hi Elad,

This is great!  The only thing left is changing the color of the active buttons once they're selected. What would that line look like? I played around with a few options but couldn't figure it out.

Thanks so very much!
Kathleen

Elad Zlotnick

unread,
May 3, 2021, 11:50:44 PMMay 3
to Minno.js
    API.addSettings('injectStyle',[

        '[piq-page] {border-color: #9D009D}', // frame color
        '[pi-quest] .page-buttons .page-submit, [piq-page] h3 {background-color: #9D009D; border:#700070; color: white;}', // header and submit button
        '[pi-quest] label {width:100%; text-align:center;}', // center stem
        '[quest-select-one] button {text-align: center;}',
        '.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {background-color:purple;border-color:purple;}'
    ].join(''));

Kathleen Schmidt

unread,
May 4, 2021, 12:31:36 PMMay 4
to Minno.js
THANKS!
Reply all
Reply to author
Forward
0 new messages