Change bullet color in Rise

5 years on and customers are still asking for this - surely it can't be that hard?  It would make my life so much easier.  *sigh*

Is there any work around by adding custom HTML/CSS somewhere ?

was this ever resolved? 

Hi Donna,

Articulate doesn't support modification of Rise output files.  But if you are familiar with editing HTML/CSS, you can do the following:

1. Extract your LMS or Web zipped file and open the main.bundle.css file found in lib folder using a text editor (e.g., Notepad, Notepad++, etc.).

2. Locate the following text: fr-view ul.  Then add the following CSS property: color: white.  After adding this property, it should look like the example below:

For reference, here is the CSS element again with its properties:

.fr-view ul {

list-style-type: disc;

color: white

}

Make sure to add the semi-colon (;) at the end of disc (as shown above) to make the syntax correct.

 

3.  Upload the package to your web or LMS host.

 

With the above change, here is how the bullets look like in my sample course:

 

Note that the above should work if you added the bullets in a Text Paragraph block.  The colors for a Bulleted List block are controlled differently and thus will not be affected by the above changes.

Donna, the important thing to note about Christopher's solution, above, is that it will make ALL of your bullets white that appear within a text block anywhere in your course. So be careful if you are using bullets in text blocks with a white background somewhere else in the course, as those will appear hidden or broken to the user.

The 'workaround' would be to use Christopher's approach, but to be careful to always use bullet blocks on light backgrounds, and to only use text blocks with bulleted lists on darker backgrounds.

I haven't had time to really dig in, but there are a bunch of examples of using CSS to adjust colors conditionally based on the background against which they are displaying. If there's a decent coder lurking in this thread, feel free to dive in!

https://codepen.io/ashraftoobler/pen/VeoVPL

https://css-tricks.com/reverse-text-color-mix-blend-mode/

https://stackoverflow.com/questions/50986688/invert-text-color-based-on-background-in-css

I'm still having success with this method:

https://community.articulate.com/discussions/rise-360/change-bullet-color?page=8#reply-744475

It's a lot more work, and consider using version control software to track your changes revision-to-revision, but it allows you to target individual unordered lists for different color backgrounds.

Thanks for these ideas ...

I'm not sure how it will work because I share module with client who adds it to other mods in their course. so post-processing editing might get messy. But I'll keep it in mnd for future projects. Thanks

Whoa, Christopher -- thank you! I hadn't seen your earlier post, but I've been wondering for literal ages if there was a way to decode the encrypted web content from Rise. That opens so many doors! 

That's nice for those of you who know how to code, but it sure would be simpler if Articulate addressed the issue and gave us the option to do it easily.

Come on Brandy, just give them some time. The request has just sent in...

What is 5.5 years In a lifetime?...

Oh..wait 🙃

Just saw this is 5 years old - surely formatting bullet points isn't that hard even in Rise. Is there any news on when we'll be able to change the colours? I've got white text on a dark background and the black dotpoints just aren't showing up at all.

Articulate updates please? 

In some cases, I've had to start using the Alt+7 shortcut to add a bullet character so the color can be changed. The problem with that is it doesn't align indent to subsequent lines.

Lol

My vote for this 'feature' to change the color of bulletpoints

It seems that we are still waiting for this update?  Is this likely to be resolved at anypoint?

It's been 5 years..how is it that this issue has not been addressed yet?

+10000 Votes

I've found a way to change the color within Rise! I love these requests that are several years old, the solution might be easier than you'd think. Explained in this screen recording, I can't wait to tell Rose.

https://youtu.be/I4yN-3A6-LA

forgot to provide the code from the recording- you'll need to add this inline style inside the ul or ol tag

style="color:white"

so the final tag would look like

<ul style="color:white">

I can make the edits - but it doesn't seem to save it.

I did this - but it doesn't "save " it ?

btw, I'm not sure if the video shows this, after making the edit, you need to click outside of the element you just edited to apply that edit- for instance click once on the parent div. Otherwise it will disregard that edit. I was using Chrome on a mac.

THANK YOU PHIL. And Rose. I was feeling very tired after trying a million things and this has given me renewed energy 😁  I know no coding but your instructions were super helpful and it worked. THANK YOU AGAIN.