Changing text color on system buttons

Frederick Bergeron
By Frederick Bergeron

Hi,

Is there a way to change the font color of system buttons (aka the Divider Continue button)?  Seems to me like it would be an easy fix by just adding that to the block's setting.

I'm currently building courses and our Brand color is light green. But for an unknown reason, the system uses white font on my Continue buttons that uses the Brand color. So, we can barely see the text on those buttons and it doesn't pass the WCAG 2.1 contrast requirements.

I can't change the shade of the green color since it's our brand color. What can I do? Why the option to change the text on those system buttons (or even changing the colors of those buttons) is not available?

 

Thanks 

9 Replies
Julie Stoltz
over 1 year ago03/25/21 at 3:49 pm (UTC)

I discovered by accident while trying to change the color of the Continue button that you can change the Continue font color by doing the steps below to your exported Rise course. I would imagine the other system buttons can be changed in a similar fashion if you can figure out the name for them in the CSS file.

1. Extract your files from the zipped exported package.

2. Open the main.bundle.css file in a text editor such as Notepad. (In a Scorm package, this is located in the scormcontent/lib folder.)

3. Use CTRL + F to open Find and search for 'continue' (see continue.png attached image below).

4. Inside the curly brackets immediately following .continue-btn, you will find a color attribute followed by a hex value (circled in blue in the continue.png attached image). Change the hex value to the color you desire. 

NOTE: Be very careful to only change the hex value (shown in the image as #fff). Don't add or delete any other characters. Also make sure your hex value begins with the hash (or pound) symbol as shown. Your hex value will likely be 6 characters long, such as #123456.

5. Save the file. Rezip your package and publish.

 

I hope this helps!

LMS Epilepsy
5 months ago01/27/22 at 11:24 pm (UTC)
Julie Stoltz

I discovered by accident while trying to change the color of the Continue button that you can change the Continue font color by doing the steps below to your exported Rise course. I would imagine the other system buttons can be changed in a similar fashion if you can figure out the name for them in the CSS file.

1. Extract your files from the zipped exported package.

2. Open the main.bundle.css file in a text editor such as Notepad. (In a Scorm package, this is located in the scormcontent/lib folder.)

3. Use CTRL + F to open Find and search for 'continue' (see continue.png attached image below).

4. Inside the curly brackets immediately following .continue-btn, you will find a color attribute followed by a hex value (circled in blue in the continue.png attached image). Change the hex value to the color you desire. 

NOTE: Be very careful to only change the hex value (shown in the image as #fff). Don't add or delete any other characters. Also make sure your hex value begins with the hash (or pound) symbol as shown. Your hex value will likely be 6 characters long, such as #123456.

5. Save the file. Rezip your package and publish.

 

I hope this helps!

This is great to know, thanks so much!

Do you know if there is a way to change the colour of the numbers in a list as well?

Cheers!

Sign In to Reply