Forum Discussion
SOLVED: How to Change Table of Contents font in Articulate Rise
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:
- .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!
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.
