Essentials Theme - Child or Clone?

Essentials Theme - Child or Clone?

by Mark Roebuck -
Number of replies: 15

Hi All.

I have Moodle, working inside the IOMAD build 3.2, for those who may not know IOMAD enables the use of 'Companies' who each have access to thier own courses and each company can use a different Theme (this separate theming works very well).

I want to use the same "Essentials" theme for each company, but I will tweak things like Logo, background Image, colours etc. once they are signed in, so need the benefits of all of the menu based customisation options.  My ideal would be that when I go to Adinistration -> Appearance -> Themes I can see each Theme listed e.g. Essentials, Essentials_Co1, Essentials_Co2 etc.  This would allow me to customer each theme on the GUI and select in in the IOMAD settings for each company.

Phew...hope all of that makes sense.

My question therefore is, what would be the best approach to take?  Should I create child themes or should I clone the theme?

I believe 'Essentials' is good for child themes (hence my chosing it), so my follow up question would be how do I create a child theme?


All of this assumes that what I want to achieve is achievable.


Regards


Mark.

Average of ratings: -
In reply to Mark Roebuck

Re: Essentials Theme - Child or Clone?

by Emma Richardson -
Picture of Documentation writers Picture of Particularly helpful Moodlers Picture of Plugin developers

If you only want to change settings, then I would clone the theme.  If you want to make changes to the code of the theme, then you would create a child theme.

In reply to Mark Roebuck

Re: Essentials Theme - Child or Clone?

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi,

An alternative to what Emma suggested, would be to make a Minimalist Child Theme which would 'inherit' all the code and settings from the parent theme, in your case Essential.

There is a good tutorial CLICK HERE that explains this, but only for one of the older Moodle Themes called Decaf.
But at least you would get the idea how it works, and would be a lot easier to make a child theme of Essential rather than cloning it.

Anyway, Gareth J Barnard is the one to ask as he is the Maintainer for the Essential theme.

Cheers,

Mary

In reply to Mary Evans

Re: Essentials Theme - Child or Clone?

by Mark Roebuck -

Well, it is definately only the settings I want to change.  I find the theme is more than sufficient for my needs (thanks to Gareth).


I was having a good root around last night trying to get this done but with no success, but I had not seen the page that Mary has pointed me to (Thank You).


I will have a look at this tonight and see if I can learn enough from it and my witt to achieve my goal.


Thanks


Mark.

In reply to Mark Roebuck

Re: Essentials Theme - Child or Clone?

by Mark Roebuck -

OK, so all good in respect of the instructions work and the new Theme 'EssCo1' installs.  It also shows me the 'new features added' so clearly things are looking good.


I have an issue though because the Theme does not show up in Administration for me to change it or select it. I am trying to diagnose this now, but if anyone has seen this before then would love to save time and know the answer.


M

In reply to Mark Roebuck

Re: Essentials Theme - Child or Clone?

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

hi Mark, 

Can you copy/ paste the contents of your EssCo1 theme's config.php?

you may have missed some code off or not renamed it correctly.

Thanks

Mary

In reply to Mary Evans

Re: Essentials Theme - Child or Clone?

by Mark Roebuck -

Thanks for your time on this Mary... there is quite a bit of php her.


<?php
// This file is part of Moodle - http://moodle.org/
//
// Moodle is free software: you can redistribute it and/or modify
// it under the terms of the GNU General Public License as published by
// the Free Software Foundation, either version 3 of the License, or
// (at your option) any later version.
//
// Moodle is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with Moodle.  If not, see <http://www.gnu.org/licenses/>;.

/**
 * Essential is a clean and customizable theme.
 *
 * @package     theme_essential
 * @copyright   2016 Gareth J Barnard
 * @copyright   2015 Gareth J Barnard
 * @copyright   2014 Gareth J Barnard, David Bezemer
 * @copyright   2013 Julian Ridden
 * @license     http://www.gnu.org/copyleft/gpl.html GNU GPL v3 or later
 */

defined('MOODLE_INTERNAL') || die;

$THEME->name = 'essbist';

$THEME->doctype = 'html5';
$THEME->yuicssmodules = array();
$THEME->parents = array('bootstrapbase');
$THEME->parents_exclude_sheets = array('bootstrapbase' => array('moodle', 'editor'));

$THEME->sheets[] = 'essbist';
$THEME->sheets[] = 'bootstrap-pix';
$THEME->sheets[] = 'essential-settings';
$THEME->sheets[] = 'fontawesome';

if ((get_config('theme_essential', 'enablealternativethemecolors1')) ||
        (get_config('theme_essential', 'enablealternativethemecolors2')) ||
        (get_config('theme_essential', 'enablealternativethemecolors3')) ||
        (get_config('theme_essential', 'enablealternativethemecolors4'))
) {
    $THEME->sheets[] = 'essential-alternative';
}

if (get_config('theme_essential', 'customscrollbars')) {
    $THEME->sheets[] = 'essential-scrollbars';
}

$THEME->sheets[] = 'custom';

$THEME->supportscssoptimisation = false;

$THEME->javascripts_footer = array('essential');
$THEME->enable_dock = true;
$THEME->javascripts_footer[] = 'dock';

$THEME->editor_sheets = array('editor', 'custom');

$baseregions = array('footer-left', 'footer-middle', 'footer-right');
$fpaddregions = array();
if (get_config('theme_essential', 'frontpagemiddleblocks') > 0) {
    $fpaddregions[] = 'home';
}
if (get_config('theme_essential', 'fppagetopblocks') > 0) {
    $fpaddregions[] = 'page-top';
}
if (get_config('theme_essential', 'haveheaderblock') > 0) {
    $baseregions[] = 'header';
    $fpaddregions[] = 'header';
}
$onecolumnregions = array_merge($baseregions);
$standardregions = array_merge(array('side-pre'), $baseregions);
if (get_config('theme_essential', 'pagetopblocks')) {
    $onecolumnregions[] = 'page-top';
    $standardregions[] = 'page-top';
}

$THEME->layouts = array(
    // Most backwards compatible layout without the blocks - this is the layout used by default.
    'base' => array(
        'file' => 'columns1.php',
        'regions' => $onecolumnregions,
        'defaultregion' => 'footer-middle',
    ),
    // Front page.
    'frontpage' => array(
        'file' => 'frontpage.php',
        'regions' => array_merge(array('side-pre', 'footer-left', 'footer-middle', 'footer-right', 'hidden-dock'),
                $fpaddregions),
        'defaultregion' => 'side-pre',
    ),
    // Standard layout with blocks, this is recommended for most pages with general information.
    'standard' => array(
        'file' => 'columns2.php',
        'regions' => $standardregions,
        'defaultregion' => 'side-pre',
    ),
    // Main course page.
    'course' => array(
        'file' => 'columns3.php',
        'regions' => array_merge($standardregions, array('side-post')),
        'defaultregion' => 'side-post',
    ),
    'coursecategory' => array(
        'file' => 'columns2.php',
        'regions' => $standardregions,
        'defaultregion' => 'side-pre',
    ),
    // Part of course, typical for modules - default page layout if $cm specified in require_login().
    'incourse' => array(
        'file' => 'columns2.php',
        'regions' => $standardregions,
        'defaultregion' => 'side-pre',
    ),
    // Server administration scripts.
    'admin' => array(
        'file' => 'admin.php',
        'regions' => array_merge($baseregions, array('side-pre')),
        'defaultregion' => 'side-pre',
    ),
    // My dashboard page.
    'mydashboard' => array(
        'file' => 'columns3.php',
        'regions' => array_merge($standardregions, array('side-post')),
        'defaultregion' => 'side-post',
    ),
    // My public page.
    'mypublic' => array(
        'file' => 'columns3.php',
        'regions' => array_merge($standardregions, array('side-post')),
        'defaultregion' => 'side-post',
    ),
    'login' => array(
        'file' => 'login.php',
        'regions' => array('footer-left', 'footer-middle', 'footer-right'),
        'defaultregion' => '',
    ),
    // Pages that appear in pop-up windows - no navigation, no blocks, no header.
    'popup' => array(
        'file' => 'popup.php',
        'regions' => array(),
        'options' => array('nofooter' => true, 'nonavbar' => true),
    ),
    // No blocks and minimal footer - used for legacy frame layouts only!
    'frametop' => array(
        'file' => 'columns1.php',
        'regions' => array('footer-left', 'footer-middle', 'footer-right'),
        'defaultregion' => 'footer-right',
        'options' => array('nofooter' => true, 'nocoursefooter' => true),
    ),
    // Embeded pages, like iframe/object embeded in moodleform - it needs as much space as possible.
    'embedded' => array(
        'file' => 'embedded.php',
        'regions' => array(),
        'defaultregion' => '',
    ),
    // Used during upgrade and install, and for the 'This site is undergoing maintenance' message.
    // This must not have any blocks, links, or API calls that would lead to database or cache interaction.
    // Please be extremely careful if you are modifying this layout.
    'maintenance' => array(
        'file' => 'maintenance.php',
        'regions' => array(),
        'defaultregion' => '',
    ),
    // Should display the content and basic headers only.
    'print' => array(
        'file' => 'columns1.php',
        'regions' => $onecolumnregions,
        'defaultregion' => '',
        'options' => array('nofooter' => true),
    ),
    // The pagelayout used when a redirection is occuring.
    'redirect' => array(
        'file' => 'redirect.php',
        'regions' => array(),
        'defaultregion' => '',
    ),
    // The pagelayout used for reports.
    'report' => array(
        'file' => 'report.php',
        'regions' => array_merge($baseregions, array('side-pre')),
        'defaultregion' => 'side-pre',
    ),
    // The pagelayout used for safebrowser and securewindow.
    'secure' => array(
        'file' => 'secure.php',
        'regions' => array('side-pre', 'side-post'),
        'defaultregion' => 'side-pre'
    ),
);

$THEME->rendererfactory = 'theme_overridden_renderer_factory';
$THEME->csspostprocess = 'theme_essential_process_css';

In reply to Mark Roebuck

Re: Essentials Theme - Child or Clone?

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi, You need to change these two ...

FROM THIS

$THEME->parents = array('bootstrapbase');

$THEME->csspostprocess = 'theme_essential_process_css';

TO THIS

$THEME->parents = array('essential', 'bootstrapbase');

$THEME->csspostprocess = 'theme_essbist_process_css';
In reply to Mary Evans

Re: Essentials Theme - Child or Clone?

by Mark Roebuck -

Thanks Mary.

I have made those changes but the issue remains.

The Essbist theme installs from the Notifications message with no issues.

I can select the Essbist Theme in Themes Selector successfully

However it does not show as a theme in the Themes dropdown (see attachment), to allow me to tailor it separately to the main Essential Theme.

Regards

Mark.

In reply to Mark Roebuck

Re: Essentials Theme - Child or Clone?

by Mark Roebuck -

Regarding my last post on this subject (above), could anyone direct me to the files I might be looking at which determines how the new child theme might show in my list of themes.

Regards

Mark

In reply to Mark Roebuck

Re: Essentials Theme - Child or Clone?

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Does your theme have its own settings pages? Only the code in the config file you copied is still pointing to Essential's config

get_config('theme_essential', 'enablealternativethemecolors1'

Have you renamed all the relevant places in all files to match your theme name?

In reply to Richard Oelmann

Re: Essentials Theme - Child or Clone?

by Mark Roebuck -

Hi Richard

Thanks for the feedback.  I followed the instructions on the page link which Mary offered.  This instructs only a small number of changes, so no, I haven't changed every reference to Essential.

I would expect my 'child theme' to be as configurable as the original theme (at least that is what I am trying to achieve).

I plan on spending a few hours on it tomorrow.  The problem is your last comment "Have you renamed all the relevant places in all files"... the problem is I don't know what is 'relevant' and I don't know what files are relevant, hence my question for guidance on this bit.

Thanks for your help.

Mark.

In reply to Mark Roebuck

Re: Essentials Theme - Child or Clone?

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

OK - I think (but could be wrong) that the issue here is that Mary's original post and links quite rightly states

"make a Minimalist Child Theme which would 'inherit' all the code and settings from the parent theme" and the link to the decaf-green minimalist child theme does not have its own settings page, but inherits all settings from the parent. Which doesn't seem to match what you are requiring, if you are saying you want a settings page for your theme - which is what that theme list in the Admin menu is, links to theme settings pages which yours currently doesn't have.


I think your options right now are to

1. work on adding your own settings page and determining everything that is impacted by that and porting any relevant code sections across from Essential into your theme because you would have to start by replicating all the settings in Essential

2. not worry about settings and make any changes you need in a custom css file instead

3. go back to the beginning and do a full clone of Essential, renaming every instance throughout your theme

Personal opinion (emphasis on the personal, not saying its right, but would be the way I would work best) - I would be going for option 3 if I wanted settings pages, or 2 if I was happy to make my changes in the background code (but that doesn't give you the settings page).


Richard

In reply to Richard Oelmann

Re: Essentials Theme - Child or Clone?

by Mark Roebuck -

Thanks Richard.

I took your advice and cloned the theme completely.  There is not much advice online about how to do this, so I spent some time (using your guidence) and worked out the best way to do this.  I have included a step by step guide below to help anyone else wanting to do this.  To be honest, once you know how it is done it is very easy and takes approximately 10 to 15 minutes.

Instructions:

1. Grab a FTP programme (I used Filezilla) and copy your base theme folder from the 'theme' folder in moodle to your local drive and rename it to your new theme name on the local drive

2. Grab a copy of CodeLite from codelite.org, Install and open it.

3. Click on the Workspace tab in CodeLite

4. Drag a copy of the theme folder that you have just copied into the workspace - you should now be able to see the full folder structure in CodeLite.

5. In CodeLite go to Search-> Find in Files -> Find in Files ... (you can press Ctrl - Shift - F)

6. In 'Find What' = adaptable (or your base theme name)

7. In 'Replace With' = adapt_new (or your new theme name)

8. In 'File Mask' select the option which includes .php .js .css (it includes many more too but this is OK)

9. In 'Look In' select <Entire Workspace>

10. Ensure 'Match case' is ticked

11. Ensure 'Match whole word' is unticked - (this ensures all variable names are changed)

12. Click on the 'Replace' button

13. Wait until the software has found all Matches (this only takes a few seconds)

14. In the 'Output View' click on the 'Replace Marked' button -

 ** Steps 5 to 14 replace all instances of your old theme name with the new theme name in all of the code structure. 

15. Repeat steps 5 to 14 again but this time with capitalised search and replace strings e.g Adaptable and Adapt-new - this isn't essential, but helps you spot the new theme in the admin panel

16. Click on every folder in the workspace one by one and look for either folders or files named with the old theme name and rename them to the new theme name (I found files in 'jquery', 'lang/en', 'lang/es' and 'style' but this varies for each theme) e.g. "theme-adaptable.php" becomes "theme-adaptnew.php" - be sure that you get them all so click in all folders and subfolders.

17. Exit CodeLite (Save and Exit if asked)

18. Using your FTP programme copy the new theme folder back to your 'Theme' folder on your server

19. Once the move has completed Sign In to your moodle site as Admin

20. Click on 'Notifications' and finish installing the theme.

Once this is complete, you should now see your new theme in the Appearance -> Themes section of your Site Administration.


I hope this helps.


Mark.



In reply to Mark Roebuck

Re: Essentials Theme - Child or Clone?

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

There are instructions on how to Clone a Moodle theme, it's in the README.txt of the Clean theme directory, I know because I wrote it!

The only difference is that Clean was originally the Default theme shipped with Moodle, and so is a very basic theme, whereas Essentisl theme is anything but, that is why I thought the Decafe minimalist theme idea is a good way to learn.

There is a section of that tutorial that talks about the settings page, and renaming the code to your theme name, obviously you must have missed that line.

Cheers

Mary

In reply to Richard Oelmann

Re: Essentials Theme - Child or Clone?

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

You are very wrong Richard as the Decafe green theme DOES have its own settings page 

https://github.com/lazydaisy/moodle-theme_decaf_green/blob/master/settings.php

And as I mentioned to Mark, there is a section about the settings.php in the tutorial I had linked to.

The problem now that Mark will have, having Cloned Essential theme, are that the changes that Gareth makes in the future will need to be added again and again!

Thanks!

Mary