Recently a colleague asked me if we could increase the font size of the text in Moodle Book and change the font face to Calibri. She felt that these changes would make our content more visually attractive and readable, which is important for us as our content is largely text-based. The goal was to change the default font face and font size, so we wouldn't have to change them on every page using the text editor's settings. CSS to the rescue!
I had to include some custom CSS in the Clean theme. If you use this theme, you (or your site admin) can find the settings at <your Moodle site>/admin/settings.php?section=themesettingclean
I put in the following lines in the custom CSS section:
.box.generalbox.book_content {font-family: Calibri; font-size: 1.3em; color: #474747; line-height:1.2em;}
This is to make the content in Moodle Book appear with a font size of 1.3em. And I've increased the line spacing slightly (1.2em instead of 1em), which makes for better readability. If you're not sure what "em" means, read about it here. As you can see I've also changed the font face to Calibri, and the color code I've used is for dark grey. Large black font is overpowering!
.box.generalbox.book_content li {line-height: 1.2em; height: auto;}
If you're going to use lists in your content, the line spacing in the lists will revert to 1em. You want it at 1.2em and you need to put in a line to define this.
.book_toc_none.clearfix {font-size:1em}
I had to include some custom CSS in the Clean theme. If you use this theme, you (or your site admin) can find the settings at <your Moodle site>/admin/settings.php?section=themesettingclean
I put in the following lines in the custom CSS section:
.box.generalbox.book_content {font-family: Calibri; font-size: 1.3em; color: #474747; line-height:1.2em;}
This is to make the content in Moodle Book appear with a font size of 1.3em. And I've increased the line spacing slightly (1.2em instead of 1em), which makes for better readability. If you're not sure what "em" means, read about it here. As you can see I've also changed the font face to Calibri, and the color code I've used is for dark grey. Large black font is overpowering!
.box.generalbox.book_content li {line-height: 1.2em; height: auto;}
If you're going to use lists in your content, the line spacing in the lists will revert to 1em. You want it at 1.2em and you need to put in a line to define this.
.book_toc_none.clearfix {font-size:1em}
This defines the font size for the table of contents on the left. The default font size is a bit small and 1em looks better. As the font size of the main content is 1.3em (defined above), that's more visually prominent than the table of contents, which is a good thing.
.book_toc_indented.clearfix {font-size:1em}
This defines the font size of indented items in the table of contents (that is, sub-pages or sub-chapters).
Try it and play around with the font attributes until you're happy!
Want to change the default font attributes in other Moodle resources or activities, such as Page or Lesson? You can pick out the relevant HTML class elements using Inspect Element in Firefox and change their attributes through custom CSS.
good post
ReplyDelete