I am currently building my first Rise course to be utilized on an LMS. I am looking for a way to edit the font and size of the ToC on the splash page. I have already uploaded custom fonts to the course, but I am unable to edit the ToC text. Can anyone point me in the right direction? I tried to look for it in the exported file structure, but I don't know what I'm looking for. Please help!
Hi Trenton. The table of contents on the course main page is set to a default font. It's possible someone in the community has a workaround for customizing this and will chime in on this discussion. Hopefully, this reply will bump your question up to the top of the list.
For now, it sounds like you're looking for more customization options so I'm going to pass your thoughts on to our product team. You can also detail how this feature would be helpful to you with a feature request if you'd like.
I checked with our dev team and the font you're looking for is Lato. However, if you do a search for that in the CSS, you'll likely get a lot of hits since it's one of the built-in font options.
Also, if you change the font in the CSS, it may impact how your course displays or how well the text is rendered so please keep that in mind as you test your course for deployment.
To manually edit this you'll want to look in your exported module's lib folder and search within main.bundle.css.
I believe the relevant parts for you will be editing the font-size attributes of:
.overview-list__title-content
.overview-list__link
I'd suggest increasing the rem font-size of both the above by .3 and seeing how things look.
For future reference, I find Chrome's developer tools to be very useful when trying to figure out unfamiliar CSS. They might look intimidating if you're unfamiliar with them, but on a basic level you can simply right-click on the part of the page you want to alter, hit Inspect and it'll give you name of the element you want to change. You can use the tools to test any changes in real-time, too.
This is amazing! I am halfway there. I've edited the font size, but I can't figure out how to edit the font family. I see where it says "Lato" in the CSS. I tried to change it to my custom font, but when I make the change, nothing happens. I'm wondering if the name I'm typing isn't calling the custom font from the font file? Any ideas?
By the way, I'm making these changes in the CSS file within my course hierarchy. Using Chrome's dev tools helped me identify where to look. Thanks for that tip!
Thanks for the tip! Oddly enough, I was able to change the font size of the Table of Contents text, but not the font-family. I believe that the font family is inherited from an uneditable inline style sheet (although I could be wrong).
I did find a solution, though! I was able to change the font on the Table of Contents by replacing the fonts in the scormcontent > lib > fonts folder.
I knew that the page was calling for 'Lato' in the code for the Table of Contents. Since I wanted all of the Lato font changed to my custom font, I went into the fonts folder, duplicated my custom font 5 times, and renamed my custom font as all the individual states of Lato. I attached a screenshot of the folder I edited and the end result of my splash page. All of the 'Lato' fonts in the screenshot are actually my custom font duplicated and renamed as the original Lato fonts. Once I did that and reloaded the index.html, I was able to see the changes.
Thank you both, Sam and Trenton, for sharing your workaround. I'm sure others will benefit from this information.
Also, I checked with our dev team and we do have a feature request logged for customizing the start screen/table of contents in Rise so this is on our radar.
Trina--I stumbled on this old thread. Still waiting for what appears to be a simple but critically important feature. And it has been "on the radar" for a long time. The TOC page is in desperate need of customization options.
I work for a large localization company, and we are doing Vietnamese for a client.
Vietnamese use Latin, as well as a bunch of special accent latin characters.
What happens is the basic latin displays fine, but the the browser substitutes to display the others with a serif-style font, with different x and y heights and it looks messy.
Your team can see this if they past some Vietnamese text into a TOC and preview. It looks bad.
VI is the most common, but there's some other languages we see this with as well.
Hi there, Matt. We're having a look at this behavior. Can you let me know if you're using a custom font, or if you're using one of the built-in fonts in Rise 360? Thank you!
Sorry for the late reply. I was looking for if anything had moved on TOC/button fonts and found this. SO Crystal, I'll answer your question first, then update.
1) We are using custom fonts. Mostly Google's Noto Sans for the specific language needed. But we also use Arial, Arial Unicode and others we know support this languages.
2) the new: having this issue with Polish as well. There are characters the UI font (which isn't user controllable) which aren't supported. This is leading to multiple places where the text is in 2 fonts, as the browser/html tries fall-back fonts to get it to display.
Buttons/TOC/etcc... really need to pull in the same font as body text. The default font's doesn't support some pretty typical Eastern Europe and SE asian languages that use latin (like Vietnamese), but also have some custom letters of their own.
Yes it can be changed - but clearly a mismatch of font on page and the index is off as HCI and thinking a hack is a method is also 'off'. Branding guidelines matter and how in three years a workflow change - that can be described as a process - has not been adopted, speaks to issues within the development of the product as to direction. That's the reality.
Is there any update on this feature? I'm using Rise 360 to author courses for older adults and it's very hard for them to read such small fonts. At least increase the default font size if you can't provide the customization option.
Why hasn't this been resolved in the five years since Articulate was alerted to the need for it? As it stands now, the Apex theme is useless to me because it cannot and will not meet our brand standards. There is no way this is a heavy lift!
19 Replies
Hi Trenton. The table of contents on the course main page is set to a default font. It's possible someone in the community has a workaround for customizing this and will chime in on this discussion. Hopefully, this reply will bump your question up to the top of the list.
For now, it sounds like you're looking for more customization options so I'm going to pass your thoughts on to our product team. You can also detail how this feature would be helpful to you with a feature request if you'd like.
Trina,
Thanks for your response. Do you know what the default font type is called? Is it Lato? I’m trying to find it in the CSS file.
I checked with our dev team and the font you're looking for is Lato. However, if you do a search for that in the CSS, you'll likely get a lot of hits since it's one of the built-in font options.
Also, if you change the font in the CSS, it may impact how your course displays or how well the text is rendered so please keep that in mind as you test your course for deployment.
Hey Trenton,
To manually edit this you'll want to look in your exported module's lib folder and search within main.bundle.css.
I believe the relevant parts for you will be editing the font-size attributes of:
I'd suggest increasing the rem font-size of both the above by .3 and seeing how things look.
For future reference, I find Chrome's developer tools to be very useful when trying to figure out unfamiliar CSS. They might look intimidating if you're unfamiliar with them, but on a basic level you can simply right-click on the part of the page you want to alter, hit Inspect and it'll give you name of the element you want to change. You can use the tools to test any changes in real-time, too.
This is amazing! I am halfway there. I've edited the font size, but I can't figure out how to edit the font family. I see where it says "Lato" in the CSS. I tried to change it to my custom font, but when I make the change, nothing happens. I'm wondering if the name I'm typing isn't calling the custom font from the font file? Any ideas?
By the way, I'm making these changes in the CSS file within my course hierarchy. Using Chrome's dev tools helped me identify where to look. Thanks for that tip!
The only thing I can think of is that your custom font has spaces in its name meaning you need to wrap it in quote marks, like so:
p {font-family: "Times New Roman", Times, serif;
}
If that doesn't do it your best bet is probably to search the CSS for your custom font's name so you can copy how it's implemented for other elements.
Sam,
Thanks for the tip! Oddly enough, I was able to change the font size of the Table of Contents text, but not the font-family. I believe that the font family is inherited from an uneditable inline style sheet (although I could be wrong).
I did find a solution, though! I was able to change the font on the Table of Contents by replacing the fonts in the scormcontent > lib > fonts folder.
I knew that the page was calling for 'Lato' in the code for the Table of Contents. Since I wanted all of the Lato font changed to my custom font, I went into the fonts folder, duplicated my custom font 5 times, and renamed my custom font as all the individual states of Lato. I attached a screenshot of the folder I edited and the end result of my splash page. All of the 'Lato' fonts in the screenshot are actually my custom font duplicated and renamed as the original Lato fonts. Once I did that and reloaded the index.html, I was able to see the changes.
Thank you both, Sam and Trenton, for sharing your workaround. I'm sure others will benefit from this information.
Also, I checked with our dev team and we do have a feature request logged for customizing the start screen/table of contents in Rise so this is on our radar.
Great tip! Is there a way to save the changes in the work in progress course, or does this have to be done once I have a scorm-file?
Trina--I stumbled on this old thread. Still waiting for what appears to be a simple but critically important feature. And it has been "on the radar" for a long time. The TOC page is in desperate need of customization options.
Is this font changing ability still on the radar..........?
Hello, TacFac. We are still tracking requests for this ability, but it isn't on the immediate roadmap. We'll post an update here if anything changes.
It would be nice.
I work for a large localization company, and we are doing Vietnamese for a client.
Vietnamese use Latin, as well as a bunch of special accent latin characters.
What happens is the basic latin displays fine, but the the browser substitutes to display the others with a serif-style font, with different x and y heights and it looks messy.
Your team can see this if they past some Vietnamese text into a TOC and preview. It looks bad.
VI is the most common, but there's some other languages we see this with as well.
Hi there, Matt. We're having a look at this behavior. Can you let me know if you're using a custom font, or if you're using one of the built-in fonts in Rise 360? Thank you!
Sorry for the late reply. I was looking for if anything had moved on TOC/button fonts and found this. SO Crystal, I'll answer your question first, then update.
1) We are using custom fonts. Mostly Google's Noto Sans for the specific language needed. But we also use Arial, Arial Unicode and others we know support this languages.
2) the new: having this issue with Polish as well. There are characters the UI font (which isn't user controllable) which aren't supported. This is leading to multiple places where the text is in 2 fonts, as the browser/html tries fall-back fonts to get it to display.
Buttons/TOC/etcc... really need to pull in the same font as body text. The default font's doesn't support some pretty typical Eastern Europe and SE asian languages that use latin (like Vietnamese), but also have some custom letters of their own.
Yes it can be changed - but clearly a mismatch of font on page and the index is off as HCI and thinking a hack is a method is also 'off'. Branding guidelines matter and how in three years a workflow change - that can be described as a process - has not been adopted, speaks to issues within the development of the product as to direction. That's the reality.
Is there any update on this feature? I'm using Rise 360 to author courses for older adults and it's very hard for them to read such small fonts. At least increase the default font size if you can't provide the customization option.
+1 for begin able to edit the font of the contents list, but also pie chart headings.
Come on Articulate, pick up the slack!
Why hasn't this been resolved in the five years since Articulate was alerted to the need for it? As it stands now, the Apex theme is useless to me because it cannot and will not meet our brand standards. There is no way this is a heavy lift!