Your Moodle version

Themes: Easy

theme_easy
Maintained by Picture of Frédéric Massart Frédéric Massart
A very basic theme, made easy for new themers.
2k
165
1

Easy Moodle Theme

A very basic theme, made easy for new themers.

Introduction

In Moodle 2.5 was introduced the theme 'Clean', which purpose was (but not only) to make it easier to start off a new theme. While it is definitely a lot easier than before, there are still a few concepts that might confuse some of the new themers out there. This theme trimmed out all the unnecessary things to leave a cleaner 'Clean'.

  • No more settings, and so, no more use of the settings
  • No more specific confusing functions
  • Cleaned up config file
  • Added of lot inline documentation
  • Specific renderer to add layout elements
  • Extracted common elements from layout pages
  • Quick method to customize Bootstrap using LESS

Requirements

  • Moodle 2.5

Start off your theme

Easy download

Download the content of this repository into the theme/ directory of Moodle. For the purpose of this walkthrough, we will assume that the directory you downloaded this theme into is batman.

So you should now have this directory:

yourmoodle/theme/batman

In which there should be:

lang/
layout/
pix/
style/
config.php
etc...

Easy renaming

A mandatory step is to rename all the references to Easy.

  • Rename the file lang/en/theme_easy.php to lang/en/theme_batman.php.
  • Open the file lang/en/theme_batman.php and write Batman instead of Easy next to pluginname.
  • Open the file config.php and rename easy to batman next to $THEME->name.
  • Open the file renderers.php and rename theme_easy_core_renderer to theme_batman_core_renderer.
  • Open the file version.php and rename theme_easy to theme_batman next to $plugin->component.

Easy install

Now, login as an administrator, and visit the "Notifications" page. You should be prompt to install the theme Batman. And done!

Let the theming begin

There are 2 easy ways to style this theme, either using pure CSS, or using LESS.

CSS

Simply edit the custom.css file, then purge your caches and voilà. This is extremely easy, but less flexible than it would be if you were using LESS. Customizing in pure CSS is usually recommended for minimal tweaks, or patient designers.

LESS

The advantage of using LESS is that you do not need to override every single rule to style a large amount of places. You can easily customize Bootstrap shipped with Moodle, and all other places in Moodle re-using Bootstrap variables. To make use of this you need to be familiar with LESS, and know how to compile a LESS file to CSS.

Assuming that you will be compiling the LESS file less/mybootstrap.less to css/mybootstrap.css, you will need to change the configuration of the theme to include this new CSS file. This is done by changing the value of $THEME->sheets in config.php. Simply add mybootstrap to get something like this:

$THEME->sheets = array('mybootstrap', 'custom');

That's about it! Read more about this in the file less/mybootstrap.less.

Since Moodle 2.7 you can also compile LESS on the fly, you will find more information about this in less/mybootstrapless.less and in the documentation of $THEME->lessfile in config.php.

License

Licensed under the GNU GPL License

Screenshots

Screenshot #0

Contributors

Picture of Frédéric Massart
Frédéric Massart (Lead maintainer)
Please login to view contributors details and/or to contact them

Comments RSS

Show comments
  • Anthony Borrow
    Tue, Sep 10, 2013, 10:31 AM
    Frédéric - Many thanks for sharing this plugin with the Moodle community. I installed the theme and hope everyone finds it easy to use and to build other themes based off of it. Keep up the great work! Peace - Anthony
  • Julian Ridden
    Fri, Sep 13, 2013, 10:04 AM
    Thanks for sharing this Fred. A great initiative and a simple start for those entering this field for the first time. Ill be sharing this one around.

    Julian
  • Picture of David Stacey
    Thu, May 7, 2015, 3:45 AM
    I have been trying to alter the text colour of titles within the heading blocks, which has the class name of 'title' with out much luck. I have entered the following css in the custom.cad file:
    .title {
    color: #000000;
    }

    Any help would be appreciated, I have added other css which has taken effect. I have also purged cache and enabled development mode.

    Kind Regards.
    Dave.
  • Picture of David Stacey
    Thu, May 7, 2015, 3:48 AM
    Sorry but in my last comment, autocorrect altered css to cad, the line should read, custom.css file.

    Kind Regards
    Dave.
  • Picture of Frédéric Massart
    Thu, May 7, 2015, 10:14 AM
    Hi David,

    I'm pretty sure that you will have to be more specific than just defining .title. I advise you to inspect the HTML using Webdeveloper Tools (built-in Firefox and Chrome). You will notice what CSS rules are taking precedence over the other ones, including yours.

    Cheers,
    Fred
  • Picture of David Stacey
    Sat, May 9, 2015, 10:00 PM
    Thanks for the response, I discovered that to alert the text colour of the headings of the blocks such as calender etc, what I needed was:

    .block .header h2 {
    color: #000000;
    }

    I hope this helps others
    Kind Regards
    Dave.
  • Picture of David Stacey
    Sat, May 9, 2015, 10:34 PM
    Hi, I am also trying to customise the footer, and from what I can tell the elements in the footer are generated by the functions:

    login_info()
    home_link()
    standard_footer_html()

    Is this a correct assumption, and if so where can I find them or how can I customise the footer?
    is there a tutorial available to edit / customise the footer (and possibly the header to).

    My next task after the footer is to customise the header.
    I have a website at www.disabledfriends.com and I am trying to customise the theme to replicate the design of the website (as closely as possible).

    Kind Regards
    Dave.
  • Picture of Frédéric Massart
    Mon, May 11, 2015, 10:40 AM
    Hi Dave,

    I think you are correct, you found the renderers which were in control of the footer display. I am afraid I cannot guide you through how to override those here, but have a look at https://docs.moodle.org/dev/Overriding_a_renderer , then I would suggest to seek more help on the forums dedicated to themers.

    Cheers,
    Fred
Please login to post comments