injecting style

36 views
Skip to first unread message

Kathleen Schmidt

unread,
Apr 30, 2021, 1:30:16 AM4/30/21
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 PM4/30/21
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 AM5/3/21
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 PM5/3/21
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 PM5/3/21
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 PM5/4/21
to Minno.js
THANKS!
Reply all
Reply to author
Forward
0 new messages