Can you change the font size of the module headings on the home page in Rise?

Jun 23, 2017

In relation to an Articulate Rise project, I have a client who wants two things:

1. The module headings on the homepage in Rise to be larger - is this possible? The complaint is that they "just look too small", "don't stand out enough".

2. The "Details" link in the homepage banner to link to a particular module. (or to be able to have a link to a particular module.)

Is this possible?

Any assistance greatly appreciated, thank you.

28 Replies
Alyssa Gomez

Hi Silvia!

The lesson headings on the course main page are set at a default size, but it sounds like you'd like to have more flexibility to format that text. I can pass that idea along to our Product team for you!

The Details link on the course main page directs to the introductory text just below the title. You could remove the Details text from the home screen and instead create your own Details button using a Button Block. Here's a sample of what that could look like!

Silvia  Vogel

Thanks for your help. Yes, if you could pass it on to the product team that would be great.

Thanks for your example.  To elaborate further, my clients want students to be able to navigate to either of 2 pages from the homepage:

1. an "index page" which contains details about the content of each section, together with LINKS to those sections. 

2. a support page with further information (a careers resources / support page).

3. ideally, they don't want students to see all the sections on the homepage (they say it is too confusing), rather they just want the above 2 links on the homepage.

Thanks again Alyssa!

Stuart Marshall

You can edit the published files to make the headings look however you like. Ideally you'd do this in a new css file (and import that into your index.html file) but to keep it simple you can add the following code straight into the index.html file.

.overview-list__title-content {

font-size: 1.2em;
color: #4BAAF4;

}

Add the above either to a custom CSS file or to the following section of the index.html file:

@media (max-width: 47.9375em) { /* 768px */
.brand--max768--background { background-color: #4BAAF4 !important; }
.brand--max768--border { border-color: #4BAAF4 !important; }
.brand--max768--color { color: #4BAAF4 !important; }
}
<ADD THE ABOVE CODE HERE>

</style>
<div id="app"></div>

The sample code i have provided also gives the heading a color so just remove the color line if you don't want to change that. I used the same color as my custom theme and it looks pretty good I think (you'll find the HEX value for your color scheme in the index file so just copy and paste that). You can also adjust the 1.2em size to whatever you like e.g: 0.8 will be smaller, 1.4 will be bigger and 2.1 will be bigger still.

Here's an example of how it looks:

 

Header style changes

Silvia  Vogel

Hi Stewart,

Thanks so much, your example does look much better!

I have followed your instructions (which were very clear, thank you), but I get an error message when I then try to upload the SCORM package to our LMS (Moodle) . See screenshot. 

Would you have any suggestions?

Thanks very much,

Silvia

Silvia  Vogel

Hi Alyssa,

Thanks for the suggestion, I didn't know about this! Looking through Zsolt's excellent instructions, I notice that point 8 says "Export your course (no LMS)". I need to export to SCORM as it will run on our institutions' LMS (Moodle). Would you have any suggestions on this point?

I'm thinking it might be suitable to use the combination of Stewart and Zsolt's hacks.

Heather Beaudoin

I agree that the font size of the Section Headings in the TOC and on the 1st page need to be editable in size and color. I appreciate the css hack listed below... the only limitation I have with that is asking clients to review it using Articulate Review where I can't have the css edited during their review... but I can do it elsewhere and show them a screenshot of what it will look like. That's why having it native to Rise would be most appreciated.

Ashley Terwilliger-Pollard

Hi Diane, 

Thanks for sharing your insight too! Changing the CSS is something a few other folks in the E-Learning Heroes community have started to play around with (You'll see earlier in this discussion Stuart shared some code changes).

I'd recommend connecting with those individuals either here in ELH or using the Contact me button on their profile if you'd like to try that! It's well outside my area of expertise. 😉 

Stuart Marshall

Yes - if you are just linking to the Articulate-hosted version of your course then there isn't anything that you can (currently) do to change things like header sizes etc. Do you or your IT team not have access to a web server that you could add the exported course to? You'd have more options if you did that.

Diane Galloway

Hi Stuart thanks for responding. I have managed to export the course as No LMS to my local drive and unzipped my files.  I located the index.html file and amended it in WordPad (don't know HTML at all but you screenshot was very helpful).  I resaved the file but now have no clue what to do!  I saw something above about zipping the files but don't know what i'm zipping and what happens after that, do I then unzip it back to my local drive and what launches the course?  Sorry for so many questions but I would appreciate any guidance you can offer as this will make a huge difference to how things will be received here.

Thanks

Diane 

Stuart Marshall

You would only need to re-zip the files if you had exported for LMS as you need to upload a zip file on a Learning Management System.

If you have access to a web server you would now just add/ftp the whole folder onto it. You would then need the link to the index.html file which you can then place on your Intranet or wherever else you want people to access it from.

You should be able to see if the edit you made has done what you want by opening the course locally on your machine. Just open the index.html file with your browser of choice.