Pioneer – A theme for Moodle

Pioneer is about exploring new possibilities.  Imagine a teacher uploading a photo to customize the course’s cover photo within the theme.  Imagine with the click of a button your students could show and hide their grades right in the course.  Pioneer incorporates these features and more.  Clean, stylish, and focused on enhancing the learning experience.  Pioneer is a responsive theme that looks amazing on any screen size.

Evolve-D (our previous theme) for Moodle 2.7 had innovative features focused on style to give your Moodle site a visual makeover.  With the long term support for Moodle 2.7 about to expire we thought it would be an ideal time to begin our next long term support for a new theme.  We decided to take inspiration from the styling of our evolve-D theme and break new ground in Pioneer to take things to the next level.

Downloads and More Information

Find Pioneer on

Find Pioneer on Github

Getting to Know Pioneer

About the Theme

Pioneer is a two column theme with blocks located on the right.  Learning material and interaction are more important than course blocks and Pioneer puts these blocks out of the way for you.  It sports a super nice custom login on the frontpage with a large and impressive header image that is fully customizable.  Speaking of the frontpage, we got you covered with “featured courses”, a custom html text box, special alerts, and three amazing marketing spots.  Moving off the frontpage each course can upload their own custom header image in course summary files.  Pioneer utilizes this image right in the theme!  The “My Courses” drop-down menu allows users to quickly jump from course to course.  Pioneer also has a unique icon navigation at the top of the page.  These icons have tooltip roll-over effect that displays text to let the user know where the link will take them.   Up to 8 custom icons can be used in the navigation at the very top of each page for logged in users.  When it comes to personalization Pioneer has you covered with color options and Google fonts galore.  Some of us are more social than others.  Pioneer has 8 different social networking icons and all you need to do is provide a link for them to appear at the bottom of the page.

Amazing Use of Images

header1The first thing you will notice about Pioneer is that it uses images on every page in the header area.  On the frontpage for logged-out users this image is rather large!  Once logged in you can control the size of normal header images via a drop down in the theme admin.  Default size on normal pages is 300px of padding applied to the header area.  Once you are into an activity or working on an assignment the header image shrinks to allow the learner to focus on the material and not the theme.  The in-course image height is also adjustable on the backend using padding.

Header Course Activity

Teachers can upload images into their individual course summary files setting.  The Pioneer theme will recognize this image and use it for the header image.  This small innovative feature provides a visual cue for learners that they are in another course.  It provides a feeling of place for the learner and separates courses visually.

Quick View of Grades in Courses

At the bottom of the course header image is a button “Student Grades”.  This button activates a sliding drawer that shows a list of all gradable items in the course and that student’s grade for each item.  You don’t have to leave the course to see your grades.  The button toggles showing and hiding of the grades quickly and easily.

Moodle Block Styling

BlocksSometimes subtle cues make a big difference.  We think that the block styling implemented in Pioneer makes a big difference.  The block titles are shifted vertically and have a large solid background color.  This creates separation in the course and further focuses the learner on the course material and less on the blocks.  It’s kinda like visually putting up a wall to separate the course content from the course blocks.

Socialwall Course Format Integration

Course SocialWallAs one of the people who brought the Socialwall Course format to Moodle, it only makes sense that Pioneer provides a customizable user experience that extends the easy-to-use Socialwall for Moodle.  Pioneer provides a page for custom colors and icons to creatively styled posts and interface.  Note: You must install the Socialwall Course Format which is a separate download.



Learn More…


Special Thanks

Pioneer would not be possible in it’s current form without help and code from the following:

  • Richard Oelmann for coding the Header Image functionality and Course Grade Display code
  • Mary Evans designer of More Candy theme and the super cool Block Styling and support in the theme forum
  • Eguru Theme with Featured Courses functionality
  • Gareth Barnard for support and ideas in the Moodle theme forum
  • Anupam Chugh with help on design aspects
  • forums for the wealth of information and great people

Leave a Comment