blog / Products / Using Responsive Theme

Using a responsive theme

Responsive design focuses on creating a site that responds to what device a user is currently accessing the site from and optimizes the layout to fit the screen size and orientation. This helps users with accessing content and eases navigation. When considering a theme for your Moodle™ site consider a responsive theme.

Moodle™ 2.7 has two responsive themes available named Clean and More. Open LMS client’s also have an additional responsive theme called Snap. All of these themes are core bootstrap based themes.

Theme configuration

To select a site theme navigate to Site administration > Appearance > Themes > Theme selector. Each theme contains a variety of customizations below is a list of what is available for each responsive theme. In addition when determining a theme there are a few general settings that you will also want to note as they can affect where different themes can be set within the site.

Clean

Site administration > Appearance > Themes > Clean

A simple theme that has a few customizations.

Invert navbar: This setting swaps the colors of the text and background in the navigation bar between black and white.
Logo: This area allows for a custom logo to be added which will display in the header.
Custom CSS/Footnote: These settings allow for site customization including custom CSS and a Footnote that will display throughout the site.

Site administration > Appearance > Themes > More

A more customizable theme to assist with branding the site.

Text colour/Link colour: These colors change the text and link colors of the site.
Background colour/Background image: Either a background color or a background image maybe added to the site. Note that the background image will override the background color.
Background repeat/position/fixed: If using a background image these settings will determine how the image will display; either repeated positioned or fixed.
Main content background colour/Secondary background colour: These colors will determine the main colors of the site. The secondary background color includes blocks and the navigation bar.
Invert navbar: This setting swaps the colors of the text and background in the navigation bar between black and white.
Logo: This area allows for a custom logo to be added which will display in the header.
Custom CSS/Footnote: These settings allow for site customization including custom CSS and a Footnote that will display throughout the site.

Snap

Site administration > Appearance > Themes > Snap

A highly customizable theme to assist with branding and a unique Moodle™ layout.

Site name: The name of the site that will appear on the front page.
Site description: A short description up to 240 characters which displays on the site front page.
Brand color: Is a main color for the site that will display in links buttons and menu backgrounds.
Logo: This area allows for a custom logo to be added which will display in the header.
Favicon/Cover Image: These images give a distinct connection to the site. The favicon displays in the browser title and in bookmarks. The cover image spans the across the site front page.
Hide default Moodle™ navigation block: Enabling this setting will hide the default Moodle™ Navigation block.
Show Deadlines in personal menu/ Show Recent Feedback & Ungraded in personal menu/ Show Messages in personal menu: In the personal menu deadlines for upcoming activities feedback and messages will be shown.
Show Course Footer/Site Footer: The course footer display useful information regarding course contacts course description and recent activity. The site footer is customizable to add information such support help links to your users.
Heading font/Serif font: These fonts are used for headings h1-h6 and user generated content.
Custom CSS: This setting allows for site customization using custom CSS.

Using a responsive theme on your site will assist your end users by having a consistent experience when access their courses on varying devices. Always remember to test all changes made on your site in this case test your theme on the smallest devices first such as a smart phone or tablet.

~Janelle Gieseke, Learning Solutions

Open LMS Inc.

Carl