Moodle in English: New theme using flexbox layout model

New theme using flexbox layout model

by Richard Oelmann - Saturday, 17 August 2013, 5:11 AM

Hi All,

I've recently been playing with the flexbox layout model and a moodle theme, but I need some help testing as I don't have access to all varieties of browsers. As such the theme is strictly to be considered as Alpha maturity and NOT for use on production systems.

The theme can be downloaded from https://github.com/roelmann/Seahorse

So far I have tested it on Firefox and Chrome on both Linux and Windows (latest versions are needed), an Android tablet and Android smartphone again both using latest FF and Chrome.

I have also tested on IE10 and used the browser setting in IE10 (pressing f12) to test against IE9 and IE8, but I don't currently have access to these older browsers, or to Apple mobile devices, so I would appreciate any help that can be given in testing.

The theme itself has a frontpage with a 'marketing' block with content which can be set in the theme settings while the single 'sidebar' is actually below the main content, a MyCourses pagelayout which has the 'side-pre' as a horizontal row of blocks above the main content (you can also add blocks to the main content area - but thats actually true of all themes) and the theme settings allow the admin to choose between 3column holygrail, 2 side columns left blog layout or 2 side columns right blog layout.

Any constructive comments/bugs/development suggestions etc welcome

Richard

Edit: I am aware already that there is a discrepancy in the responsiveness of the menu that causes the full menu to display for a few pixels after the Menu toggle button appears and I'm currently trying to pick up where that discrepancy is.

Average of ratings: -

Re: New theme using flexbox layout model

by Mary Evans - Saturday, 17 August 2013, 7:50 AM

Just cloning into my localhost moodle2.6/theme directory using GIT

git clone https://github.com/roelmann/Seahorse seahorse

it's that easy!

Will let you know how I get on.

Cheers

Mary

Average of ratings: -

Re: New theme using flexbox layout model

by Mary Evans - Saturday, 17 August 2013, 9:44 PM

Hi Richard,

I only tested Seahorse for a short while last night but what I see I like, especially the tab effect menu and the marketing sections. My only criticism, if you want to call it such, is to do with font size in the block header title h2, as the title 'Administration' jumps out and down and looks odd is relation to the the other blocks in view and so spoils the effect for me.

I'll look at it more closely over the weekend.

Cheers

Mary

Average of ratings: -

Re: New theme using flexbox layout model

by Richard Oelmann - Sunday, 18 August 2013, 4:50 PM

Hi Mary,

Thanks for taking a look

The larger font-size for the block headers was actually in response to a request from a colleague in work, but I can see what you mean with the longer block titles like 'Administration' - it just doesn't give room for them on most screens (it does fit on my larger screen, but not as soon as I start to shrink the window ) I think I'll reduce it back down for the final published theme and then I can always boost it back up through customcss if I want it larger for my own use

Average of ratings: -

Re: New theme using flexbox layout model

by Richard Oelmann - Sunday, 18 August 2013, 9:30 PM

Some Seahorse screenshots

Home page 2left narrow

Average of ratings: -

Re: New theme using flexbox layout model

by Mary Evans - Sunday, 18 August 2013, 11:06 PM

For some unknown reason Richard, the images you posted, which I as a Moderator can see in Edit mode, are not showing up in the forum. How very odd!

Average of ratings: -

Re: New theme using flexbox layout model

by Richard Oelmann - Sunday, 18 August 2013, 11:14 PM

hmm - strange - I could see them as well, but then I'm also Moderator.

I'll redo them as attachments instead of in the editor

Average of ratings: -

Re: New theme using flexbox layout model

by Richard Oelmann - Sunday, 18 August 2013, 11:20 PM

Screenshots as attachments

Home page

Average of ratings: -

Re: New theme using flexbox layout model

by Richard Oelmann - Sunday, 18 August 2013, 11:22 PM

Screenshots as attachments

My page

Average of ratings: -

Re: New theme using flexbox layout model

by Richard Oelmann - Sunday, 18 August 2013, 11:25 PM

Screenshots as attachments

Home page - Narrow

Average of ratings: -

Re: New theme using flexbox layout model

by Richard Oelmann - Sunday, 18 August 2013, 11:27 PM

Screenshots as attachments

Course page - 2columns left

2columns right and 'holygrail' layouts are also available through the settings page and as layout files

Average of ratings: -

Re: New theme using flexbox layout model

by Frankie Kam - Sunday, 18 August 2013, 5:44 PM

Hi Richard
I've installed seahorse theme, but I can't seem to select it from the "preferrred them" dropdown box. I can't see it on

Home
/ > Site administration
/ > Appearance
/ > Themes
/ > Theme selector

Frankie Kam

Average of ratings: -

Re: New theme using flexbox layout model

by Richard Oelmann - Sunday, 18 August 2013, 9:05 PM

Hi Frankie - Have you gone to the notifications page to make sure it is installed correctly? Did you get any error messages?

The screenshot itself will look different to the one in the attachment as I have only just been redoing that and haven't yet sent todays changes up to github (I'm still going!)

Average of ratings: -

Re: New theme using flexbox layout model

by Hartmut Scherer - Sunday, 18 August 2013, 10:45 PM

Hi Richard,

I tried to select your new theme, but I couldn't see it in themes (similar to Frankie). Going to the notifications page didn't help either nor did I get an error message. Then I went to plugins overview page. I see the theme with the version 2013051400. Is this the right version?

With kind regards,

Hartmut

Average of ratings: -

Re: New theme using flexbox layout model

by Mary Evans - Sunday, 18 August 2013, 10:54 PM

@Frankie and Hartmut,

Just incase you added a capital letter to the theme name and called it 'Seahorse' when in actually it needs to be 'seahorse' all in lowercase. Moodle policy.

Cheers

Mary

Average of ratings: -

Re: New theme using flexbox layout model

by Richard Oelmann - Sunday, 18 August 2013, 11:17 PM

Thanks Mary - I think the contents of the theme are all OK, but I've just renamed the github repository without the capital incase that was the issue when people were downloading it

Average of ratings: -

Re: New theme using flexbox layout model

by Hartmut Scherer - Sunday, 18 August 2013, 11:52 PM

@Richard and Mary,

Thanks for your reply. The theme name was in lowercase. When I deleted the theme in the plugins overview page and installed it again, I saw the notification, but I cannot select it. I only see the settings page for seahorse.

With kind regards,

Hartmut

Average of ratings: -

Re: New theme using flexbox layout model

by Mary Evans - Sunday, 18 August 2013, 11:59 PM

I just do not understand this as I never had any problems.

Average of ratings: -

Re: New theme using flexbox layout model

by Hartmut Scherer - Monday, 19 August 2013, 3:01 AM

@Mary and Richard,

In phpMyAdmin I changed the theme in mdl_config to seahorse. Then, I could use it. The theme "seahorse" still doesn't show up in "Theme Selector."

With kind regards,

Hartmut

Average of ratings: -

Re: New theme using flexbox layout model

by Mary Evans - Monday, 19 August 2013, 7:30 AM

OK..if you changed the name to seahorse what was it before?

Average of ratings: -

Re: New theme using flexbox layout model

by Hartmut Scherer - Thursday, 22 August 2013, 12:45 AM

Essential was in the text box, the theme that I was using in the test site.

Average of ratings: -

Re: New theme using flexbox layout model

by Richard Oelmann - Monday, 19 August 2013, 2:16 AM

Like Mary, I dont understand what is happening Hartmut as I have now installed the theme on 2 other test installs and not had any problems at all.

As the settings pages are showing up I'm assuming that permissions and everything are set correctly on your folder.

Average of ratings: -

Re: New theme using flexbox layout model

by Richard Oelmann - Monday, 19 August 2013, 3:21 AM

Hi Hartmut - can you tell me what Moodle version you are using please, I'll see what I can track down, if I can.

Also, are you using the default themes folder in moodle or do you have an external theme folder configured?

Are there any other features of your installation that I might need to consider in testing to find out what the problem is?

Richard

Average of ratings: -

Re: New theme using flexbox layout model

by Hartmut Scherer - Monday, 19 August 2013, 2:39 PM

Hi Richard,

I installed Bitnami-Moodle on Windows 8, upgraded from Moodle 2.2 to 2.5.1 and installed your theme in the theme folder. I am not using a separate theme folder. Moodle version is Moodle 2.5.1 (Build: 20130708). I installed other themes like Essential, Education, Buckle, Krystle without any problems. At the moment I am installing a fresh Bitnami-Moodle version with Moodle 2.5.1 in addition and will try to add your theme.

With kind regards,

Hartmut

Average of ratings: -

Re: New theme using flexbox layout model

by Hartmut Scherer - Monday, 19 August 2013, 3:14 PM

Update to my previous post:

I added seahorse to a fresh Bitnami-Moodle installation on Windows 8 (Moodle 2.5.1 (Build: 20130708)). I am using Google Chrome. Although I can access and change the settings of seahorse, I am unable to see it in theme selector.

Average of ratings: -

Re: New theme using flexbox layout model

by Richard Oelmann - Monday, 19 August 2013, 4:51 PM

Hartmut - when you download the zip from github rather than cloning it, it comes as 'seahorse-master' and needs to be renamed. Is this what is happening for you?

Beyond that I am lost as I have just installed it in work again on both a Windows and a Linux host test system with no difficulties at all (I dont have a bitnami-moodle to try on)

Average of ratings: -

Re: New theme using flexbox layout model

by Hartmut Scherer - Monday, 19 August 2013, 5:51 PM

Hi Richard,

I downloaded the theme, renamed 'seahorse-master' to 'seahorse', got the notification, but still cannot select it. No error message either. Did Frankie manage to select 'seahorse' in the meantime?

With kind regards,

Hartmut

Average of ratings: -

Re: New theme using flexbox layout model

by Richard Oelmann - Monday, 19 August 2013, 6:43 PM

I haven't heard back from Frankie, but I know Mary has installed it no problem and I have on a variety of systems now and I'm not able to replicate the issue I'll keep trying and if we can narrow it down to a reason, or a specific set of circumstances we can see what we can do about it -in the meantime, I will hope that a few of the other frequent Themes forum visitors can give it a try and let me know if they succeed (or fail) to install it so we can see if the problem is with the theme or somewhere else.

Richard

Average of ratings: -

Re: New theme using flexbox layout model

by Richard Oelmann - Wednesday, 21 August 2013, 10:49 PM

Hartmut

MEA CULPA!!! D'OH

In the seahorse config.php you will find the line

$THEME->hidefromselector = true;

change it to false!

The theme was showing up for me and Mary presumably because we had Theme Designer enabled and you (I presume) don't.

I'll get it changed on the github as soon as I get chance! (Done)

Richard

Average of ratings: -

Re: New theme using flexbox layout model

by Hartmut Scherer - Thursday, 22 August 2013, 1:50 AM

Hi Richard,

I changed the line in config.php and it worked as expected. You are right that I had not enabled Theme Designer in my test site.

With kind regards,

Hartmut

Average of ratings: -

Re: New theme using flexbox layout model

by Richard Oelmann - Monday, 19 August 2013, 4:43 AM

Seahorse testing theme updated to add theme settings options for single sidebar layouts.

Admin can now choose on the settings page:

3 Column 'HolyGrail'
2 Sidebars Pre
1 Sidebar Pre
2 Sidebars Post
1 Sidebar Post

Separate layout files which do not take from the settings page are also included for each of these layouts, but these are NOT used by default in the theme, they are there if an admin wants to target specific layouts to specific page types in the config.php, bypassing the general theme setting. E.g. You may want 2 sidebars to the right of the content on most pages and set that as the option in the theme settings, but choose to have the single left sidebar layout for the admin pages.

Average of ratings: -

Re: New theme using flexbox layout model

by Richard Oelmann - Saturday, 24 August 2013, 4:56 AM

GitHub updated with IE<10 fixed width fallbacks and html5shiv as IE8&9 do not recognise flexbox and IE8 doesn't recognise HTML5 - still testing this and Safari (7 recognises flexbox, 6 doesn't)

Average of ratings: -