Starting off a new theme from Clean

Starting off a new theme from Clean

by Frédéric Massart ⭐ -
Number of replies: 24
Picture of Core developers Picture of Plugin developers Picture of Testers

Hi everyone,

I am not a themer, nor a designer, but I was recently helping someone making its first steps into the theme code, and I realised that it wasn't as straightforward as it could be. Even though, I am pretty sure that Clean/Bootstrapbase (Moodle 2.5) make it a lot easier by defining easier layout files, etc... it still is a bit tricky.

I attempted an experiment of making a new theme as straightforward as possible, with some inline documentation, and other stuff. I would appreciate if you could try it out and comment on it.

https://github.com/FMCorz/moodle-theme_easy

For now, this contains:

  • A cleaned up config.php with only the necessary, with focus on what is relevant to a new theme
  • No more functions specific to the theme, this extra logic was rather confusing
  • Not a single setting, this is not necessary if you're making your own theme
  • An 'ready-to-use' renderer class, to prevent common pitfall
  • A new renderer method element() to allow for inclusion of portions of HTML

In the future, I would like to make it easier to customise Bootstrap inherited from bootstrapbase.

Thanks for your feedbacks.

Average of ratings: Useful (1)
In reply to Frédéric Massart ⭐

Re: Starting off a new theme from Clean

by David Scotson -
Good idea.

You might want to lay out the renderers so that it works with the autoloading stuff that Tim Hunt's doing, so the core renderer would be a file inside the renderers/ folder and have a specific name. Though I can't remember if that's actually working yet in 2.5 or if it's due for 2.6
Average of ratings: -
In reply to Frédéric Massart ⭐

Re: Starting off a new theme from Clean

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

Hi Fred,

Two points I noticed that may cause conflicts.

  1. theme/easy/config.php contains $THEME->layouts for 'frontpage' using file 'awesome.php' yet this file does not exist in the layouts.
  2. lang/en/theme_easy.php still needs $strings for 'Left' and 'Right'

What David said about the renderers is working, as it is adopted in Bootstrapbase already, so following that pattern would be preferable to how you have it in the Easy theme. This preferred way makes it easier to manage your individual renderers.

Average of ratings: -
In reply to Mary Evans

Re: Starting off a new theme from Clean

by Frédéric Massart ⭐ -
Picture of Core developers Picture of Plugin developers Picture of Testers

Thanks for your feedbacks!

I did miss the 2 strings in the language file indeed, I had no idea that they were used. This is now fixed, and with some comments in the code to make them less obscure.

There is no definition of a frontpage layout file, this is an example on how to do it. And as it is commented out the awesome.php file doesn't need to be present.

I am not sure about the autloading. The goal of this theme is really to be as easy as possible, and I am not sure if having autoloaded classes, in files that need to follow a very strict naming convention would make it easy. Not mentioning that they would still have to extend the right class, which is why I already included the renderers.php file in the first place.

I have added a way of compiling the LESS files from bootstrapbase straight into the new theme. This allows for the Bootstrap variables to be used and customised at wish. Along with that I added a walkthrough that explains how to do it, and how to prevent the loading of the moodle.css file from bootstrapbase as it should be ignored.

Next step, filling the config.php will all the possible config variables, along with some inline documentation to explain what they do, and what format they accept.

Average of ratings: -
In reply to Frédéric Massart ⭐

Re: Starting off a new theme from Clean

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

Why ignore moodle.css?  I don't follow where you are taking this idea of an Easy theme, as it is already sounding complicated, especially when you start to talk about compiling LESS and ignoring parent theme CSS.

Average of ratings: -
In reply to Frédéric Massart ⭐

Re: Starting off a new theme from Clean

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Dear Frédéric

Really interesting idea smile - I think you need

@import"../../bootstrapbase/less/editor";

too as that uses 'varaibles.less'.

And Mary, moodle.css is ignored from Bootstrapbase because the theme generates it's own.  Because LESS is the CSS smile - just like Shoelace.

Cheers,

Gareth

Average of ratings: -
In reply to Gareth J Barnard

Re: Starting off a new theme from Clean

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

In that case shouldn't the @import point to bootstrapbase/less/moodle.less and not bootstrapbase/less/moodle/ as it looks now?

Average of ratings: -
In reply to Mary Evans

Re: Starting off a new theme from Clean

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

No because it appears that a LESS processed import command does not always need the '.less' file extension.

Average of ratings: -
In reply to Gareth J Barnard

Re: Starting off a new theme from Clean

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

So I read...interesting.

Have you tested this as a working theme, because I'm getting a Coding error which I posted in this thread before you wrote your comment here.

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Starting off a new theme from Clean

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Dear Mary,

Not yet, only in terms of reading the code.

Cheers,

Gareth

Average of ratings: -
In reply to Gareth J Barnard

Re: Starting off a new theme from Clean

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

OK...well I tested the theme in Moodle 2.6 Alpha and got an Coding ERROR.

Could be just a slow server as it cleared up after I logged out and went back to it a little while later.

A similar thing happens on the QA site ... error one minute and then gone the next!

Very odd!

Average of ratings: -
In reply to Frédéric Massart ⭐

Re: Starting off a new theme from Clean

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

That's OK I'm just asking the sort of questions we get asked, I am sure I will find more.

Average of ratings: -
In reply to Frédéric Massart ⭐

Re: Starting off a new theme from Clean

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

OK...some testing proved dissapointing as Easy failed on the first hurdle.

Any thoughts? Here is a the coding error and stack trace...

Coding error detected, it must be fixed by a programmer: block_manager has not yet loaded the blocks, to it is too soon to request the information you asked for.

Debug info:
Error code: codingerror
Stack trace:
  • line 860 of \lib\blocklib.php: coding_exception thrown
  • line 352 of \lib\blocklib.php: call to block_manager->check_is_loaded()
  • line 3074 of \lib\outputrenderers.php: call to block_manager->region_has_content()
  • line 3110 of \lib\outputrenderers.php: call to core_renderer->body_css_classes()
  • line 36 of \theme\easy\layout\elements\head.php: call to core_renderer->body_attributes()
  • line 90 of \theme\easy\renderers.php: call to include()
  • line 40 of \theme\easy\layout\columns2.php: call to theme_easy_core_renderer->element()
  • line 847 of \lib\outputrenderers.php: call to include()
  • line 777 of \lib\outputrenderers.php: call to core_renderer->render_page_layout()
  • line 68 of \theme\index.php: call to core_renderer->header()
Average of ratings: -
In reply to Mary Evans

Re: Starting off a new theme from Clean

by Frédéric Massart ⭐ -
Picture of Core developers Picture of Plugin developers Picture of Testers

I really don't understand where this error could come from. I am not sure it comes from the theme itself as I have been using it. Also, it is really much based on Clean, except that is has been 'cleaned'.

I have thought about the editor.css, but I am unsure about it as I don't want to make the LESS process more complicated than it is. The issue with the editor.css is that it cannot be ignored from the parent, the second one is that it needs to be compiled in a different file, and the third is that it needs to be added to $THEME->editor_sheets, yet another variable to configure. Though I will keep it in mind.

To clarify a bit, this theme DOES NOT use LESS. This theme's purpose is to be really straightforward in the way you are going to create a new theme. The need to know the internals of a theme is reduced and the walkthrough pretty quick.

Also, I do not exclude moodle.css from bootstrapbase by default, and I do not include mybootstrap.css by default. Those are part of the semi-advanced use of the theme which is customising Bootstrap itself.

I would very much appreciate that you do not blame the plugin, just yet. This is an experiment in a very early stage of development, there can be bugs, and there can illogical things, but my inline comments are trying to make everything clear, please do not ignore them.

Average of ratings: -
In reply to Frédéric Massart ⭐

Re: Starting off a new theme from Clean

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

Got another error:

The page layout file did not call $OUTPUT->doctype()

  • line 795 of \lib\outputrenderers.php: call to debugging()
  • line ? of unknownfile: call to core_renderer->header()
  • line 234 of \lib\outputrenderers.php: call to call_user_func_array()
  • line 351 of \admin\renderer.php: call to plugin_renderer_base->__call()
  • line 351 of \admin\renderer.php: call to core_admin_renderer->header()
  • line 175 of \admin\plugins.php: call to core_admin_renderer->plugin_management_page()
Average of ratings: -
In reply to Mary Evans

Re: Starting off a new theme from Clean

by Frédéric Massart ⭐ -
Picture of Core developers Picture of Plugin developers Picture of Testers

Hi Mary,

could you tell me what page you were visiting when that happened?

Edit: It seems to happen on admin/index.php page.

Thanks!

Fred

Average of ratings: -
In reply to Mary Evans

Re: Starting off a new theme from Clean

by Frédéric Massart ⭐ -
Picture of Core developers Picture of Plugin developers Picture of Testers

I found the problem, crazy Moodle logic down there wink. Fixed, thanks!

Average of ratings: -
In reply to Frédéric Massart ⭐

Re: Starting off a new theme from Clean

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

cheers

Cool! I'll go pull new updated files via GitBash git bash

Cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: Starting off a new theme from Clean

by Gopal Sharma -
Picture of Plugin developers Picture of Testers

Hi Mary,

I'm getting the same error as you had.

The page layout file did not call $OUTPUT->doctype()

  • line 964 of /lib/outputrenderers.php: call to debugging()
  • line ? of unknownfile: call to core_renderer->header()
  • line 353 of /lib/outputrenderers.php: call to call_user_func_array()
  • line 287 of /admin/renderer.php: call to plugin_renderer_base->__call()
  • line 287 of /admin/renderer.php: call to theme_remui_core_admin_renderer->header()
  • line 853 of /admin/index.php: call to core_admin_renderer->admin_notifications_page()
Can you help me solve this issue?
Thanks

-Gopal

Average of ratings: -
In reply to Gopal Sharma

Re: Starting off a new theme from Clean

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

Hi, this is an old thread, so if you are attempting to work with some old code then you are heading for disaster. Indeed it very much looks like you have struck it already!

Mary

Average of ratings: -
In reply to Frédéric Massart ⭐

Re: Starting off a new theme from Clean

by Hartmut Scherer -

Hi Frédéric,

 I enjoyed reading the details and considerations about your theme and how you developed it. Just a few minutes ago I downloaded your theme (version 2013080100) and installed it in a Moodle test site. This is what I saw after logging in:

Easy theme (screenshot)

Somehow, I expected the blocks in a different location. I use Moodle 2.5.1 (Build: 20130708). Again, I like your ideas. 

With kind regards,

Hartmut

Average of ratings: -
In reply to Hartmut Scherer

Re: Starting off a new theme from Clean

by Frédéric Massart ⭐ -
Picture of Core developers Picture of Plugin developers Picture of Testers

Hi Hartmut,

Have you tried the theme Clean? This theme is somewhat similar to it, nothing should have changed in the design itself or the position of the blocks. I have trimmed down some stuff, but I don't think this should have any impact on the look and feel of the theme (though I have changed the background color of the blocks).

What exactly were you expecting?

Thanks!

Fred

Average of ratings: -
In reply to Frédéric Massart ⭐

Re: Starting off a new theme from Clean

by Hartmut Scherer -

Hi Frédéric,

I expected the blocks as icons at the top of any page. Last night I read something about your experience in HQ and how you try to redesign navigation in Moodle. Somehow I expected this to happen in your theme. Other than this there is nothing wrong at all with your theme.

With kind regards,

Hartmut

Average of ratings: -
In reply to Hartmut Scherer

Re: Starting off a new theme from Clean

by Frédéric Massart ⭐ -
Picture of Core developers Picture of Plugin developers Picture of Testers

Oh, so you read my post on the General Developer Forum (https://moodle.org/mod/forum/discuss.php?d=233520), but I'm afraid that this post has not much to do with it.

It is a bit trickier for you to try out my experiment, unfortunately it cannot be as simple as installing a theme. I have indicated the 'branch' that you should 'checkout' in order to try it out in the other forum. I hope this Git jargon make some sense. In any case, I would be happy to help you out and read your comments about it.

The purpose of Easy theme (in this topic) is to provide a theme for designers to use as a theme base. I tried to simplify the code as much as I could as I understood how daunting it can be for beginners.

Average of ratings: -