Moodle in English: Customisable themes

Customisable themes

by Richard Oelmann - Thursday, 3 February 2011, 8:10 AM

Following on from some of the comments in a thread here, I'm starting this new discussion for anyone with any thoughts to contribute their ideas.

How much do people want to be able to change before they consider that a different theme would be better in the first place?

What sort of things do people want to be able to change? And are they practical on a settings page?

Not necessarily looking for answers, but hoping to prompt some discussion (Although I may be back looking for answers when I meet the problems!!!)

Post copied from SkyHigh - block positioning thread

Looks like I've just found my next learning curve project

Going to see if I can pick the bones out of the various themes that have settings pages, along with Sam's great tutorial, and see just how customisable a theme can be through a settings page. My guess at a quick glance is 'very' - but at what stage does it become just too complex for the user. Perhaps cumbersome is a better word than complex!

Richard

Average of ratings: -

Re: Customisable themes

by Charlie O'Sullivan - Thursday, 3 February 2011, 9:15 AM

Thanks Richard,

I vote for header and footer banner pics, colours of all page elements, fonts for all page elements, bold italic and underline, border colour and size, column widths,

Perhaps a different project could be a way to upload and install plugins from a settings page.

Average of ratings: -

Re: Customisable themes

by Richard Oelmann - Thursday, 3 February 2011, 1:12 PM

That would definitely need to be a different project Charlie - one which involves the developers I guess, as the file upload mechanism currently is probably not able to add files onto the server outside the moodledata area (and for security purposes that's a good thing) and for the similar security reasons I would think you don't want to be running site plug ins and modules from a potentially publicly available are in moodledata!

Thanks for starting the ball rolling with your suggestions for the theme! I think this could be fun!!!

Richard

Average of ratings: -

Re: Customisable themes

by Richard Oelmann - Saturday, 5 February 2011, 8:47 AM

First draft of 'flexi' - the new theme with loads of customisable settings through the Flexi Settings page is now available.

This is very much a work in progress and being made available for comments and testing and NOT for production sites as yet - hence I have not yet submitted it to the themes database, but am making it available on here for those who said they would be interested in helping test.

From Charlie's comment above, I have so far provided settings for a header banner (logo) and a footer - although I have not given a separate footer banner, but have used Sam's html setting for a foot note, so pictures can be included in that - and colours of all page elements (or at least as many as i could identify). Fonts themselves I decided not to tackle as I think it would probably be better to have a standard font for a site/page, and to have separate settings for bold italic and underline for each text element would extend the settings page too far in my opinion - however, what I am in the process of doing is to include detailed instructions/copy and paste hints with appropriate settings which can then be used to achieve this in the custom css setting, for example the colour setting for the section headings would have instructions or copy and paste hints to change font size, weight and style using the custom css box.

As for column widths and other layout type options (William's comment in another thread about position of the menu bar for example) - well that's what I'm hoping to move onto after I've had some comments about where I've got to so far and fixed anything that needs fixing to date.

The current zip of the work in progress flexi theme can be found here

Thanks in advance for any comments and suggestions

Richard

Average of ratings: -

Re: Customisable themes

by Richard Oelmann - Saturday, 5 February 2011, 7:43 PM

My own first thought is that with the growing number of configurable settings on this page, is there a straightforward way to reset all of them back to the default values without going into each and every box to delete anything that has been put there?

Richard

Average of ratings: -

Re: Customisable themes

by Mary Evans - Saturday, 5 February 2011, 9:00 PM

Hi Richard,

I've not looked at your new theme yet but will do.

Rgarding clearing the data in this new settings page, depending on how it has been designed, and I won't know that until I take a look later today, but in simple FORM layout you can clear the 'values' before it's sent, a little like the 'cancel' does when you are first setting a course page.

You should be able to do this in PHP, not quite sure how to though! LOL

Mary

Average of ratings: -

Re: Customisable themes

by Richard Oelmann - Saturday, 5 February 2011, 10:09 PM

Hi Mary,

I've created php forms before and included reset buttons and various other things but this one has me a little stumped so far (but still working on it! ).

The php on the settings.php seems specifically targetted at creating settings sections to add to the admin->settings page, which then get processed through the lib.php for adding to css. However, I'm stuck on adding anything other than one of Sam's admin_settings types to what is actually displayed - even a simple echo . I guess this may mean a custom_renderer override??? Arghhh!!! LOL!!!

Well, I did say it was a learning project - and if you (or anyone else) can come up with a way of adding either a text block (such as the instructions on the page) and/or a Reset button... At the moment I'm thinking a drop down type box (Which Sam has a block for) with only one option - ie Reset - and then use the lib.php to set everything back to its defaults.

First things first though - need to tidy up the language file and probably sort out some extra settings for items that I've grouped together as I don't seem to be able to use the custom css box to override areas set by the settings, so some of the items I'd set to use the same colour, may need separate settings in case users want them to be different.

Looking forward to your feedback and comments Mary - you always have some great pointers and the quality of the themes you produce yourself is always an inspiration.

Richard

Average of ratings: -

Re: Customisable themes

by Mary Evans - Saturday, 5 February 2011, 10:35 PM

Hi Richard,

I've just downloaded and unzipped the theme and added it to my localhost server and just about to test it. I'll lt you have some feedback soon.

I am impressed though to see how much you had done to it so far.

Mary

Average of ratings: -

Re: Customisable themes

by Mary Evans - Sunday, 6 February 2011, 12:37 AM

Just one thing...which may or may not relate to some things not working as they should.

I notised some time ago that the theme settings in the Admin tree got duplicated, but that seems to have been sorted out for those which are in the Moodle core at least. However, you theme seetings page is duplicated. Pn further investigation I noticed a marked difference to the way the core theme settings pages are written to the way you have done in Flexi. I am just wondering if this change to the core theme settings is related to the none duplicity of these same settings pages?

Also a problem I came upon ages ago but fix in my own themes is the lack of a clearfix at the end of the base theme layout php files which stops the page flow. If the theme parants are canvas and base this is not a problem, but the fact this themes parents are standard & base (bas already is a parent of standard, and standard does not have any layout files, using those from base, the clearfix problem persists.

Also did you add this CSS to the core theme, or is it taken from standard theme?

body {margin:0 30px;padding:0;border:1px solid #333;border-width:0 10px 0 10px;} Why is there a 10px blackish border left and right?
#page {position:relative;} why position relative? What purpose does it serve?

How about the instructions for the settings page put into Moodle Help icon functionality pop-ups?

a few thoughts

Mary

Average of ratings: -

Re: Customisable themes

by Richard Oelmann - Sunday, 6 February 2011, 1:29 AM

Many thanks for the comments Mary,

The css rules you've highlighted were part of Sam's original css in the settings page tutorial and were removed at some point, but in my various edits have managed to find their way back in - they shouldn't be there!!! They've already disappeared again from the version I'm working on, so how the sneaky critters managed to find their way back into the version that went online I don't know! - Actually I probably do: I crashed the theme this morning having made too many changes without checking and went back to an older version and that must be where they crept back in!

I had also noticed the difference between the way I'd written settings.php and the way it is now in the core themes - and the duplication of the settings page. I hadn't got around to dealing with that yet, but Dietmar Wagner has kindly sent me an edited version of the file which does this and also adds column width functionality to the settings page, which i hope to look at later this evening.

With your comment about base being a parent of standard already, would that mean there is no need to declare base as a parent of this theme explicitly as it would feed through standard? (does that make it a grandparent theme?

I think putting the instructions into pop-ups would be a great idea and will see if I can find a way of achieving that within the settings page: I can't find it on any of the other theme settings pages to investigate how they have achieved it

Many thanks as always

Richard

Average of ratings: -

Re: Customisable themes

by Mary Evans - Sunday, 6 February 2011, 2:05 AM

I like standard theme alot and tried making it a parent but I found it difficult to manage, so I ended up just copying the css from standard and the layouts from base and made base the parent.

But then, I ended up creating my own layout files using a different set up to base LOL

I think having base & standard as parents is OK. It works OK for Canvas theme which has base as its parent, and then Canvas & Base are parents to other themes.I would not worry too much as it works ok.

I did see that the header looked shorter in height in the setting's page but thats' prob a CSS issu for the theme in general. I'll try and track that one down as it may be just my personal set up making that look different.

There are places in my themes where I would like to add the odd Help icon and have a pop-up but haven't figured it out where one would add this code. The main part of the code will be in the moodle core files but adding a new one to a layout needs something like <? OUTPUT->settings_help(); ?> where setting_help was a predefined function. if only it were that easy! LOL

Mary

Average of ratings: -

Re: Customisable themes

by Richard Oelmann - Monday, 7 February 2011, 4:35 AM

Hi Mary,

Haven't managed to add Moodle specific help type icons to the settings page, but have found a work around that may not be 100% ideal (not sure about accessibility etc.) but works quite well in terms of tidying up the page I think.

I've used an image with a title attribute which pops up to display as a tooltip which works in FF- although I've just been reading that some versions of IE display the 'alt' attribute rather than title as their tooltip. One day all browsers will read code the same way - maybe! .

This seems to work on the settings page where the text comes from the theme language php file and can include inline styles and html tags like <img>, although I'm sure there are better ways to achieve this on pages where the creater can control the php/html more directly, or by working with the renderer itself.

Hopefully this should be ready to submit for the database as a completed theme in the next day or so, although I'd like to develop some more of the layout type options - but that I think will have to wait for another version.

Rich

Average of ratings: -

Re: Customisable themes

by Mary Evans - Monday, 7 February 2011, 6:38 AM

ALT is for Images TITLE is for text links but FF does not display ALT on images only TITLE that's why in most cases you need to cover both, but blame FF for that boo-boo!!! LOL

It's historical Richard, as is always remembering to add css for a:link a:visited a:hover a:focus a:active when styling for IE6/IE7 or the links dont work

I'm trying to use the settings to create a simple menu of 5 links but got myself all tangled up in a knot. LOL

Mary

Average of ratings: -

Re: Customisable themes

by Richard Oelmann - Monday, 7 February 2011, 8:03 AM

Hi Mary

Superbowl giving me an excuse to stay up late and keep working on this

Am in the process of adding the same text into both ALT and TITLE for the images. Seems like a lot of extra text for a page to download the same thing twice, but then I guess its not the only aspect of cross-browser support that causes that kind of issue! At least in this case it is identical and so I can just copy and paste - it doesn't need some of the minor edits that other issues require. lol!

I've also got tangled up with the custom menu - it is perhaps the worst part of any theme to write the css for. I thought I had it working with the example menu on the theme settings page, but I've obviously just been doing the same as you have and trying a different menu with different numbers of sub-menus (or none) and it doesn't work . It's very tempting to go back to the menu style I was using in Moodle1.9 - but the point of this theme is to try and minimise the need to go into the main theme files to zero. I think the custom menu is a fantastic addition to Moodle2 when you're not trying to do too much to theme it - but I find it very confusing to write the css for.

Ah well - not going to give up, but keep going to get it sorted before I say this theme is done

Do you, or does anyone else know where I can find a complete list of the css for the custom menu? I've tried looking in standard, canvas and base and found some of it but I can't locate some of the elements that are showing up in firebug

Richard

Average of ratings: -

Re: Customisable themes

by Mary Evans - Monday, 7 February 2011, 9:09 AM

All YUI menu CSS is in moodle/lib/yui/3.2.0/build

There's various files of CSS in all those folders, too many and too much really.

My Moodle motto is keep it simples...that's why I like the decaf menu, with it's one little renderers.php and a page of CSS which is readable (see ARCTIC) and produces a nice menu.

By the way, I'm not working on the Moodle Custommenu, but a simple 'manual' version I've dreamed up where the actual values input from the settings page are passed to mymenu.php file which is a php include in the layout page.

all the strings are in theme_mytheme.php

but it's not working last time i looked there was a php error message which looks pretty but made little sense! LOL

Average of ratings: -

Re: Customisable themes

by Richard Oelmann - Monday, 7 February 2011, 3:38 PM

wow - I see what you mean: way too many and too much!

I had thought to keep the theme as basic as possible - other than the settings page. But I think to make it work I will need to do as you suggest and go back to the decaf/arctic style menu which I played with before when I integrated it with Lei's awesome bar as well. After all, if the point is that the user doesn't need to play with the theme files directly any more than necessary, then working properly is better than reducing files in the theme and the KISS principle definitely works here

Any chance I could have a look at the 'manual' version you are working on - perhaps a second pair of eyes might help you track down the php error (or at least try!)

Richard

Average of ratings: -

Re: Customisable themes

by Mary Evans - Monday, 7 February 2011, 7:34 PM

Hi Richard,

I got it to work about 2am, being the night owl I am. I ended up going back to Sam's tutorial on how to add a settings page. The beauty of this menu is that you can change the url and menu link titles in the settings page, which is great for adding simple links to a menu for admins who don't have direct access to the server.

I'll send you a copy when I have tidied it up.

Mary

Average of ratings: -

Re: Customisable themes

by William Ratto - Tuesday, 8 February 2011, 12:45 AM

Hi Richard,

You have hit a home run !!!!!!!!!!! This is exactly the type of theme I was talking about. It is easy to read and understand, the normal users are going to eat this up.

I have been testing and playing with it all weekend, (between super bowl TV).

So far it has been performing great. If I could, is there a way to add in the settings area, a place to add keywords, descriptions, and other header and footer inserts meta tags.

Wonderful work Richard, top notch

BTW is there a chance that flexi can be done for 1.9x, since 90% of users still are using 1.9x.

William

Average of ratings: -

Re: Customisable themes

by Richard Oelmann - Tuesday, 8 February 2011, 7:04 AM

Thanks for the feedback William.

I think I've now finished work on the theme ready to release it into the wild - I have followed my thoughts from Mary's post of adapting the custom menu from Arctic/Decaf rather than the built in version which is much more confusing to theme.

Rather than build the settings page to include keywords and meta tags etc. the newest builds of Moodle2 have an Additional HTML settings page which would allow these to be set independent of the theme being used. The site administrator would then be free to alter themes without losing those meta tags and so on already set.

Unfortunately, I don't think 1.9 has the same sort of ability to create a settings page so as much as I think it would be a great idea to produce something similar for the majority of users who are still (and likely to remain for a while) on 1.9 I think that might be something one of the developers would need to take on in the first instance.

You can download the theme from here and the new discussion about the completed theme is here

Average of ratings: -

Re: Customisable themes

by Mary Evans - Tuesday, 8 February 2011, 8:32 AM

Really excelent work Richard. Your Flexi theme is approved now!

@William I think the only way forward with Moodle 1.9 is to develop and build a settings page as a Plug-in. I am sure it would work identically to what Richard has produced for the Flexi theme.

Mary

Average of ratings: -

Re: Customisable themes

by William Ratto - Tuesday, 8 February 2011, 10:28 PM

I agree Mary, I have been testing Flexi on all browsers IE, Firefox, Safari, Opera and Chrome.

So far seems to be working well. I will help anyway I can if we could make a plugin for 1.9 that functions like Flexi for 2.0.

If you want to try a plugin for cafelite you sent me I will test it out and run it through the ringer to see if it's a viable addition, I think normal users out there would jump through hoops for a plugin like that.

Let me know.

BTW, think of this, a plugin like this for 2.0 themes It would set the Moodle world on fire. I bet Richard would agree.

William

Average of ratings: -

Re: Customisable themes

by Mary Evans - Tuesday, 8 February 2011, 11:01 PM

William,

Did you get the Cafelite for Moodle 2 with menu? I sent it the other day.

Also, Willima, have you ever used the Chameleon theme in Moodle 1.9? Urs Hunkler designed that theme, and it has some great features, such as drag-n-drop blocks, ablity to change colors etc.,

In fact, Urs is the man to talk to... he is very switched on to these sort of things and is constantly striving for better functionality within Moodle.

Mary

Average of ratings: -

Re: Customisable themes

by William Ratto - Wednesday, 9 February 2011, 12:34 AM

! did Mary and it's working great so far, I have been testing it on IE8, Firefox, Chrome, Safari and Opera. So far good.

I really think you should release cafelite 2.0 -wr it is fast, and looks great.

I need to know where to change the fonts in the menu bar, they are a little hard to read in some of the browsers.

Your the best...

William

Average of ratings: -

Re: Customisable themes

by Richard Oelmann - Sunday, 6 February 2011, 8:21 AM

Updated work in progress zip file now available here

css files updated and tidied up, column widths setting added (thanks Dietmar) and a few other tidying up jobs done.

ToDo - still trying to add a reset option and tidy up the instructions, possibly as Mary suggests with pop-ups

Thanks for all the helpful comments, both here and as direct messages - keep them coming

Richard

Average of ratings: -

Re: Customisable themes

by Hal Medrano - Thursday, 10 February 2011, 6:41 PM

Richard - Your work has come at a perfect time to keep me from diving into about two days' worth of PHP. I had an easy time adapting Flexi to my company's look and feel: http://languagelink.dev.synergy-learning.com/

Two small points:

The custom CSS you suggested for removing the header text did not work through your Settings window; I had to go into the core.css file to do it manually
Slight header misalignment on the home page; this misalignment disappears on the course page. Hmmm....

Anyway, this is unbelievably minor stuff, which may just as likely be a result of me mucking with the CSS file as much as anything else. I'm tremendously satisfied with your theme, and thank you for sparing me the long hours of code-jockeying.

Quick question: are updates going to be pushed out on a regular basis, or should we keep an eye out for updates and manually upload them?

Thanks again.

Average of ratings: -

Re: Customisable themes

by Richard Oelmann - Thursday, 10 February 2011, 6:58 PM

Hi Hal

I'm glad you are finding the theme useful

pt1. Mary Evans suggested an alternative css here

h1.headermain { visibility: hidden}

pt2. William pointed this out in a very useful testing session he carried out last night - the fix can be found in the discussion I started on flexi when I posted it in the themes database, here

As for regular updates - no, I have no timetable to work to for this, but I will continue to push out minor fixes as and when issues are passed on to me. These will always be made available in the discussion linked above and will as and when I'm able in an update for the download itself. That said I am working on a v1.1 with relatively minor changes (splitting some of the settings where the colour is used for several settings for example and some minor css changes - which is why the documentation on my own webpage is still missing, it keeps changing lol!) and also a v2 which I hope will have a lot more settings, including some layout options. At the moment v2 is only in my head and on paper as what I want to happen though so may be a while in coming! Whatever happens I will make sure that the community is informed through this forum.

If people are finding the theme useful, then all the more encouragement for me to continue on with my thoughts on v2

Richard

Average of ratings: -

Re: Customisable themes

by Mary Evans - Friday, 11 February 2011, 12:24 AM

Congratulations Richard for getting your Most Helpful Moodler badge!

Average of ratings: -

Re: Customisable themes

by Richard Oelmann - Friday, 11 February 2011, 2:47 AM

Thank you thank you and once again thank you... lol!!!

No seriously Mary, thank you - a lot of what I have been lucky enough to pass on to others i have first learned from you and other contributors here on this site. I get a lot of satisfaction out of both the learning side and the being able to pass that knowledge on and help others in some small way.

Richard

ps. going to take that exclamation mark key off my keyboard - I seem to be rather overusing it recently!!! hehehe

Average of ratings: -

Re: Customisable themes

by Derek Chirnside - Saturday, 19 February 2011, 7:54 AM

Richard, I missed this thread. I have come in a bit late. In a standard theme I'd like to be able to have access to:

settings to change logo (Preferably the height & background colour & display/non-display of site name as well)
settings to adjust (some) colours
Maybe background, blocks colour, menu bar colour . .
simple menu styling. (Yes I know, subjective. No quirky animation, no funny gizmos or lines or blocks in the styling)
Menu option to put in top left or under header at left. (many of the right placed menus do odd things if the code is not perfect)
L *and* R columns. (ie not 2 right columns or one L *or* one R column)
With the ability to empty any column, and to shift any blocks to any column.
No other odd stuff, like background images, columns merging into headers, extra lines and quirks in the styling of blocks etc.

Sorry for the duplicate information, this is reposted from the other thread.

I've been influenced also by the wordpress setup. Everything is available from the interface.

Average of ratings: -

Re: Customisable themes

by Richard Oelmann - Sunday, 20 February 2011, 4:02 PM

Hi Derek,

Take a look at Flexi as a starting point

Mary Evans and I are working on another theme which extends that but uses Mary's cafelite layout structure, with testing and help from William Ratto and I am working on a v2 of flexi which again extends the settings available but keeps base as a parent - the plan to be able to set much of the theme from inside moodle seems to be proving to be very popular

Out of interest, what themes have you come across with right placed menus? I haven't seen any like that other than a couple adapted specifically for websites using rtl languages

Richard

Average of ratings: -