gjb2048 / moodle-theme_essential

The Essential Moodle Theme

The "Essential" Moodle Theme

With 2.5 now released Julian thought it time to take the opportunity to build a new theme that would push the new theme engine to it's limits a bit. With that in mind he introduced the new "Essential" theme. Now Julian has left us for Canvassian adventures, David and Gareth took over development and maintenance. And now David has left for pastures new, Gareth continues to maintain and make improvements.

The idea of this theme is to make the site look as little like Moodle as possible. In this specific instance, it would be used on sites where Moodle would potentially serve as a company homepage rather than just a course list.

Cool things to know about the theme.

• It attempts to load as many as possible icons from a font
• Most of what you think are "graphics" are actually the Awesome font
• The slider on the front page is completely customisable through theme settings.
• I am really trying to push what Bootstrap Grids can do. As such the theme is fully responsive.
• The footer is all custom Moodle regions. This means blocks can be added.
• The theme can use Google web fonts to give it that extra bit of shazam!
• Social network icons appear at the top of the page dynamically based on theme settings.
• The entire colour scheme can be modified with theme settings.

Developed and maintained by

Gareth J Barnard MSc. BSc(Hons)(Sndw). MBCS. CEng. CITP. PGCE. Moodle profile: moodle.org/user/profile.php?id=442195 Web profile: about.me/gjbarnard

Original Developer

Julian Ridden Moodle profile: moodle.org/user/profile.php?id=39680 Web profile: au.linkedin.com/in/eduridden/

Previous Developer

David Bezemer Moodle profile: moodle.org/user/profile.php?id=1416592 Web profile: www.davidbezemer.nl

Free Software

The Essential theme is 'free' software under the terms of the GNU GPLv3 License, please see 'COPYING.txt'.

It can be obtained for free from: moodle.org/plugins/view.php?plugin=theme_essential and github.com/gjb2048/moodle-theme_essential/releases

You have all the rights granted to you by the GPLv3 license. If you are unsure about anything, then the FAQ - www.gnu.org/licenses/gpl-faq.html - is a good place to look.

If you reuse any of the code then I kindly ask that you make reference to the theme.

If you make improvements or bug fixes then I would appreciate if you would send them back to me by forking from github.com/gjb2048/moodle-theme_essential and doing a 'Pull Request' so that the rest of the Moodle community benefits.

Support

As Essential is licensed under the GNU GPLv3 License it comes with NO support. If you would like support from me (Gareth) then I'm happy to provide it for a fee. Please contact me via my 'Moodle profile' in 'Developed and maintained by' above. Otherwise, the 'Themes' forum: moodle.org/mod/forum/view.php?id=46 is an alternative.

Sponsorships

This theme is provided to you for free, and if you want to express your gratitude for using this theme, please consider sponsoring by:

PayPal - Please contact me (Gareth) via my 'Moodle profile' in 'Developed and maintained by' above for details.

Sponsorships help to facilitate maintenance and allow me to provide you with more and better features. Without your support the theme cannot be maintained.

Sponsors

Sponsorships gratefully received with thanks from: Mihai Bojonca, TCM International Institute. Guido Hornig, actXcellence http://actxcellence.de Delvon Forrester, Esparanza co uk iZone Anis Jradah Ute Hlasek, https://hlasek-it.de Amigos Library Services

Essential for Moodle 3.3 kindly sponsored by

ClassroomRevolution, LLC -- Moodle Partner Daniel Méthot - e-learning-facile.com/formations/ Floyd Saner, Learning Contexts, LLC Gemma Lesterhuis Mihai Bojonca, TCM International Institute

If you are a valued sponsor and have not already told me, please could you state if you would like a credit here and if so what would you like. Please contact via my 'Moodle profile' above.

Customisation

If you like this theme and would like me to customise it, transpose functionality to another theme, build a new theme from scratch or create a child theme then I offer competitive rates. Please contact me via my 'Moodle profile' in 'Developed and maintained by' above to discuss your requirements.

Required version of Moodle

This version works with Moodle 3.6.1 version 2018120301.00 (Build: 20181205) and above within the 3.6 branch until the next release.

Please ensure that your hardware and software complies with 'Requirements' in 'Installing Moodle' on 'docs.moodle.org/36/en/Installing_Moodle'.

Installation

1. Ensure you have the version of Moodle as stated above in 'Required version of Moodle'. This is essential as the theme relies on underlying core code that is out of my control.
2. Login as an administrator and put Moodle in 'Maintenance Mode' so that there are no users using it bar you as the administrator.
3. Copy the extracted 'essential' folder to the '/theme/' folder.
4. Go to 'Site administration' -> 'Notifications' and follow standard the 'plugin' update notification.
5. Select as the theme for the site.
6. Put Moodle out of Maintenance Mode.

Upgrading

1. Ensure you have the version of Moodle as stated above in 'Required version of Moodle'. This is essential as the theme relies on underlying core code that is out of my control.
2. Login as an administrator and put Moodle in 'Maintenance Mode' so that there are no users using it bar you as the administrator.
3. Make a backup of your old 'essential' folder in '/theme/' and then delete the folder.
4. Copy the replacement extracted 'essential' folder to the '/theme/' folder.
5. Go to 'Site administration' -> 'Notifications' and follow standard the 'plugin' update notification.
6. If automatic 'Purge all caches' appears not to work by lack of display etc. then perform a manual 'Purge all caches' under 'Home -> Site administration -> Development -> Purge all caches'.
7. Put Moodle out of Maintenance Mode.

Uninstallation

1. Put Moodle in 'Maintenance Mode' so that there are no users using it bar you as the administrator.
2. Change the theme to another theme of your choice.
3. In '/theme/' remove the folder 'essential'.
4. Put Moodle out of Maintenance Mode.

Downgrading

If for any reason you wish to downgrade to a previous version of the theme (unsupported) then this procedure will inform you of how to do so:

1. Ensure that you have a copy of the existing and older replacement theme files.
2. Put Moodle into 'Maintenance mode' under 'Home -> Administration -> Site administration -> Server -> Maintenance mode', so that there are no users using it bar you as the administrator.
3. Switch to a core theme, 'Clean' for example, under 'Home -> Administration -> Site administration -> Appearance -> Themes -> Theme selector -> Default'.
4. In '/theme/' remove the folder 'essential' i.e. ALL of the contents - this is VITAL.
5. Put in the replacement 'essential' folder into '/theme/'.
6. In the database, remove the row with the 'plugin' of 'theme_essential' and 'name' of 'version' in the 'config_plugins' table, then in the 'config' table find the 'name' with the value 'allversionhash' and clear its 'value' field. Perform a 'Purge all caches' under 'Home -> Site administration -> Development -> Purge all caches'.
7. Go back in as an administrator and follow standard the 'plugin' update notification. If needed, go to 'Site administration' -> 'Notifications' if this does not happen.
8. Switch the theme back to 'Essential' under 'Home -> Administration -> Site administration -> Appearance -> Themes -> Theme selector -> Default'.
9. Put Moodle out of 'Maintenance mode' under 'Home -> Administration -> Site administration -> Server -> Maintenance mode'.

CSlider

The original version of Essential used 'CSlider' - tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/.

It has been removed because of licencing issues: github.com//issues/61

Please do not request that it be put back. The licence that CSlider has is incompatible with GPLv3 and therefore cannot be a part of or redistributed with the theme.

Videos and FitVids

Essential uses FitVids.js - fitvidsjs.com - to make embedded videos responsive. If you do not want this feature for a particular video, then please add the class 'fitvidsignore' to the video element.

Category course title image in a course

If you wish to override the category course title image in a course when this is enabled, then edit the course summary in the course settings and add an image. Then edit in HTML mode, remove the surrounding 'p' tags and 'br' tag, then remove the 'style', 'width' and 'height' attributes and any 'classes' added by the text editor on the 'img' tag. Then add the class 'categorycti'. To specifiy the height (px) and the contained title text colour, background colour and opacity, use the following attributes: 'ctih', 'ctit', 'ctib' and ctio respectively, for example:

This image will not be shown in the summary itself when viewing the list of courses.

Reporting issues

Before reporting an issue, please ensure that you are running the latest version for your release of Moodle. It is essential that you are operating the required version of Moodle as stated at the top - this is because the theme relies on core functionality that is out of its control.

When reporting an issue you can post in the theme's forum on Moodle.org (currently 'moodle.org/mod/forum/view.php?id=46') or check the issue list github.com/gjb2048/moodle-theme_essential/issues and if the problem does not exist, create an issue.

It is essential that you provide as much information as possible, the critical information being the contents of the theme's 'version.php' file. Other version information such as specific Moodle version, theme name and version also helps. A screen shot can be really useful in visualising the issue along with any files you consider to be relevant.

History

Please look in CHANGES.txt.

See the theme in Action

A video showing many of the core features is available for viewing at www.youtube.com/watch?v=grhmR5PmWtA

Documentation

As always, documentation is a work in progress. Available documentation is available at docs.moodle.org/36/en/Essential_theme If you have questions you can post them in the issue tracker at github.com/gjb2048/moodle-theme_essential/issues

moodle-theme_essential's Issues

Frontpage Content displayed after Marketing Spots

Transferred from: https://tracker.moodle.org/browse/CONTRIB-4877 - where the modified file can be found. Info:

I appeared to me that the Frontpage Content, if enabled, is displayed after the Marketing Spots and not in between the Slideshow and the Marketing spots.
I changed this behaviour by movig the Fronptage Content section in front of the Marketing Spots section in frontpage.php.

Convert layout/includes/fonts.php to use PHP switch case

Site icon uses fa-icon but category icons use icon

Also update instructions, suggest to use the entire thing including fa-

rewrite includes/fonts.php using html_writer

I was getting some errors connected to the includes/fonts.php, so I tidied it up and rewrote it using html_writer. If it is still being included then I'll send as an improvement, as soon as I fathom how to do this.

Centre logo in essential header

From: eduridden#112

I think there is a 'spanX' not adding up to 12 in header.php, see: https://moodle.org/mod/forum/discuss.php?d=253279.

Just checked and still an issue.

Site Icon disappears on Variable Width

Old Navbar location background missing / Slideshow heading not transparent

When using the option for the old navbar location, the heading background is missing and is instead white. Using the new location the heading background showing as should be.

Also, the slideshow headings are not transparent so when setting a slideshow background color to anything other than white, the heading is outlined white.

Remove blocks of any kind from Base layout in essential/config.php

In theme/essential/config.php under $THEME->layouts = array(..., ... ,...);
you will find the "base" layout. This layout should have no block regions at all for a specific reason, and this is that some page_layouts require 100% width. The fact that Essential has the footer block regions listed is wrong, as this can also cause some pages to fail. So please remove them.
// Most backwards compatible layout without the blocks - this is the layout used by default.
'base' => array(
'file' => 'columns1.php',
'regions' => array(),
),

Add User Dropdown to header

Similar to https://tracker.moodle.org/browse/MDL-45893 and elegance theme

FontAwesome CDN

Need to remove: https://github.com/DBezemer/moodle-theme_essential/blob/master/lib.php#L37-L56 as now using non-CDN mechanism for FontAwesome delivery. However, need to also improve such that CDN delivery of the font is possible. I have some code for this in Shoehorn - need to separate out the font-face in the CSS and possibly other places.

Refs:
https://github.com/amygroshek/moodle-theme_essential/commit/8b5837a1a97c0a565b9851762b4a620068347254

eduridden#124

Slideshow back button and circles cause image to be mis-formatted

If you have the slideshow set to "Large Background Image" and a 300x1200 image displayed, clicking the forward button on the slideshow works fine. Clicking back or one of the page selector circles causes the image to be resized as if "small image on right" had been selected. Clicking forward again clears the issue.

Page needs to become better responsive

Some major rework required for this as Moodle CSS from bootstrapbase and Moodle core breaks some essential styles from bootstrap.

Category Icons broken

Category icons are broken, and need major rework to be usable.

Add multiple breadcrumb styles

Update all opacity css to cross-browser valid css

Reminder to self, update all opacity declarations to corss browser declarations:
-moz-opacity:.70;
-ms-filter:”alpha(opacity=70)”;
filter:alpha(opacity=70);
opacity:.70;

Essential 2.7.2a: Undefined variable: theme in C:\wamp\www\moodle26\theme\essential\lib.php on line 120

( ! ) Notice: Undefined variable: theme in C:\wamp\www\moodle26\theme\essential\lib.php on line 120
Call Stack

Time Memory Function Location

1 0.0013 316936 {main}( ) ..\index.php:0
2 1.9871 53878176 theme_essential_core_renderer->footer( ) ..\index.php:74
3 1.9881 53886032 essential_performance_output( ) ..\core_renderer.php:71

( ! ) Notice: Trying to get property of non-object in C:\wamp\www\moodle26\theme\essential\lib.php on line 120
Call Stack

Time Memory Function Location

1 0.0013 316936 {main}( ) ..\index.php:0
2 1.9871 53878176 theme_essential_core_renderer->footer( ) ..\index.php:74
3 1.9881 53886032 essential_performance_output( ) ..\core_renderer.php:71

( ! ) Notice: Trying to get property of non-object in C:\wamp\www\moodle26\theme\essential\lib.php on line 120
Call Stack

Time Memory Function Location

1 0.0013 316936 {main}( ) ..\index.php:0
2 1.9871 53878176 theme_essential_core_renderer->footer( ) ..\index.php:74
3 1.9881 53886032 essential_performance_output( ) ..\core_renderer.php:71

Cannot change slider caption color

I just installed the latest version and notice you cannot change the color of the caption for the slider and is the default blue color. This should be an option so that it can blend with color changes made.

Upgraded to 2.7.3 caused major problems

I just upgraded to the newest version of the theme and it caused lots of issues. Initially I could not get it to work and I could not go back. I finally got it to load but still have some issues. The slider seems to be messed up and the categories on the course page don't display properly. I have attached screen shots of what I have found. I will add others if I find them.

Quiz navigation block is not shown in quiz attempt while using secure window/pop-up windows

Dear all,
Quiz navigation block is not shown in quiz attempt while using secure window/pop-up windows.

Please advise.
Best,
Anis

Release Candidate Bug

The option to choose category icons doesn't seem to be showing up even if the box is checked.

Footer Block Issues

Unable to drag and drop block's into middle position within the footer.
When editing is turned on 'teachers' are able to change the footer within their course, add amend delete blocks
HR Above Copyright does not fill div it is within.
CSS of edit drop down menu for editing blocks within footer needs changing

Recent changes to layout/includes/fonts.php is missing the value for $fontselect

The recent changes to layout/includes/fonts.php is missing a vital element in the form of:
$fontselect = (!empty($PAGE->theme->settings->fontselect));

Deal with Julian's outstanding issues.

I would like to complete this by 20th July 2014.

Update to Bootstrap 3

Issue for the milestone

Problem when converting old assignment types

See: https://tracker.moodle.org/browse/CONTRIB-4640

Incorrect slideshow image position

Hi,

thanks for the update of this wonderful theme.

However, this is a severe bug:
The image position in the slideshow is very wrong. By about 800px too many to the right, and 10px to the bottom.

Tested with 1200 x 300 pics as large background images as per theme instructions.
Configuration: Moodle 2.7+ (Build: 20140703). FF 30 and Chrome. My display is 1920x1080 but bug remains with lower res.

Please fix!

Thanks in advance

Essential theme should not have languages besides English within its Lang folder

Details from: https://tracker.moodle.org/browse/CONTRIB-4769....

Contributed plugins nowadays should not have language strings besides English within their Lang folder.
Please read http://lang.moodle.org/mod/forum/discuss.php?d=2485
Please remove all languages different from English from plugin Lang folder.

Convert all css to less

If anyone feels like taking this task upon him/herself it would greatly help with development and reduce output size of the essential css

Put Save button on top of page as well

When editing on Settings pages it would be awesome to have the save button on the right top, same location as the "turn editing on" button.

Slideshow Image not centered horizontally

When uploading an image to the slideshow using "Small Image on Right", the image is not centered horizontally in the slideshow. This leaves a big gap towards the bottom of the image and is really not appealing. Can the image be centered horizontally?

Update slideshow to use htmlwriter

SOLVED: lost password button has no 'unlock' icon

Moodle 2.6.4
Essential 2.7.2 (build: 20140708)

Updating the theme to 2.7.2 version has got me this only one issue. As you can see in the screenshot, the Lost Password button now doesn't show the 'unlock' icon.
Is there a solution to this problem?

Thanks in advance.

Add thirdpartylibs.xml

Add thirdpartylibs.xml and make sure it gets updated when third party code is added.

Update slider to Bootstrap Carousel

The current slider has multiple issues as demonstrated by the issues open for it. Therefore, remove it in favour of the Bootstrap Carousel.

Compatibility problem with Multi-language content filter

Essential theme is not presently compatible with the multi-language content filter.

CSS needed to cover pagelayout when block regions exist but are not used

This is one of the things that needs lots of patience, as you need to look at each possibilities of how the page is laid out, when blocks are moved into custom regions and leave side-pre and/or side-post empty. At the moment these areas are still showing up when empty, so the page has lots of white space.

Add "Turn on Icons" option for Categories

Add a "Turn on icons" option for categories, as they've done with the Elegance theme (theme_elegance | enablecategoryicon ), so that the icons can be on or off by Admin without editing code.

Essential 2.7.2a: Footer blocks not working as expected

There is still a lot of inflexibility going on as you cannot easily add blocks to the left side, in fact I never got any blocks to land on the left, they always ended up in the middle. Dragging them out of footer-middle was OK but you can only drag them to footer-right, whilst footer-left is ignored completely.
I personally feel that manipulating the blocks in the way they have been, that of being all lumped together isn't the way that blocks work. It would have been easier to treat theme as individual block regions and nothing to do with essentialblocks. so a simple line for each block region is all that is needed...and let moodle do the rest.

blocks('footer-left', 'span4 pull-left'); ?> blocks('footer-middle', 'span4 center'); ?> blocks('footer-right', 'span4 pull-right'); ?>

Update performance info to htmlwriter in core_renderer

Rework branches - docs

master branch - bleeding edge development
MOODLE_25 - supported but semi-abandoned Moodle 2.5 version
MOODLE_26 - stable branch for Moodle 2.6 and Moodle 2.7
MOODLE_27 - stable branch for Moodle 2.7

Custom branches can be created for major rewrites/reworks. For a release please follow these steps:

• bump version number in version.php (in master)
• sync to branch from master
• update README.txt with new version + changelog
• tag release with version number + 1 (github tag)
• release on moodle.org

any further suggestions / improvements are welcome!

Syntax Error

Hey guys,

I'm getting a syntax error when I click the site administration link using version 2.7.3 of the theme. And yes, I did wait for the page to load.

Update MOODLE_25 branch with changes from MOODLE_26

If possible I would like to make 2.5 and 2.6 fully cross-version compatible and only start a new branch/version for Moodle 2.7 and onwards. This might require removing dependency on bootstrap, and including the bootstrap renderers in the theme itself, which I think is a good thing.

Slideshow width should fit "content" width not window width

Hi DBezemer,

Sorry to bother you again and again with a slideshow issue. I have read your proposed fix for my previous request: #11

However I did install the latest 2.7.2 version beforehand.
It does not fix what I consider a bad graphical layout, ie. a 1200px stretched to 1920px.
See screenshot:

Why stretch the background image to the window width? It does not make sense. The images - as in the previous slideshow version - should fit the "content" width of the Moodle platform.

[I could consider having 1920 x 300 px as background images, but the height/width ratio is way out of proportion and would make most images not suitable (apart from landscape images, sky, etc.).]

I am definitely considering reverting to the previous theme version, since the slideshow I had was ok then but has become most unaesthetic. It is currently disabled.

Please make the slideshow width only the width of the content, not width of the window!
[as was the case in moodleman's version http://vimeo.com/69683774]

Rest assure that I really appreciate your work and reactivity, but I really think you should fix this, as this is inconvenient.

Thanks in advance for your help,

Dan

Docking causes content scroll bar

When blocks are docked, the content area moves a little to the right (in LTR) causing a scroll bar to appear. Need to reduce this area by 42px or something.

Missaligned grade table

So here is the before and after picture of what I did to fix the issue. I changed the padding-top of class="left-scroller" from 20px to 5px resulting in the grade table being properly aligned again. There are other potential fixes. This is just how I fixed it.

Background image is not fixed

Move navbar below banner

Hi David,

Please see: https://moodle.org/mod/forum/discuss.php?d=263506.

Cheers,

Gareth

Replace bootstrap with All in One version

Reducing the number of http requests on page load with 8.
By default bootstrap has the plugins inside the javascript file.

Slideshow image scale problem; background showing; overlay

Sorry for multiple problem reporting. I use 1200 x 300 pics as large background images in the slideshow. The problem is the picture width and height scaling. For 1920 x 1080, the image width is stretched to window edges. Weird.
Besides the slideshow background color (container?) is visible above and below the image. Why doesn't it fit?
Why do we have a semi-transparent overlay on the pictures? They look blueish/greysih. Can we not remove it?

Thank you for your help.

Add setting to control front page category tiles.

CSS in categories.less needs setting to control its application bar a header layout added body class reacting to the setting.

See: #45