Flexibase theme | Thoughts and comments

Flexibase theme | Thoughts and comments

by Derek Chirnside -
Number of replies: 21

In the process of looking for a theme for our new 3.0.1 install (after it comes out on Monday I adopted a slightly more systematic process than previously.  I've written a few posts looking at some of the wonderful themes for 3.0.

Now I'm looking at Flexibase. Very very interesting.

caveat

I won't finish this in one post I suspect.  I often don't know what I am doing and what I regard as a bug may be a feature.  I'm not putting these in the review section of the plugins database for this reason.  

CSS

In this little learning journey I have learned a lot about hacking at the CSS.  I am also learning what I like.  So a theme that lets me do a few customising without hacking even the CSS is attractive.  Even though I did say recently I preferred not too many settings.  I may have changed my mind.

In this respect Flexibase is amazing.

Flexibase report (Part one)

Navigation between settings pages

The first theme I’ve seen with navigation between settings pages.  This is cool.  (Do any other themes have this?



Help in settings

Very impressed with the level of detail in help – comments in setting pages.  Much less wasted time in the first checkout of a theme.
See above: even tips on how to change settings and things with the CSS.


The first time I have seen this: CSS already in the customn CSS box

Custom CSS comes pre-populated with font choice.
I think the key to a good theme is to be able to fix as much as possible at the tweak level in CSS.


Different colours for different alerts

Choices of colour for various types of message. I’ve seen this once before (in snap maybe, not sure?). This I like. 

[Why not a better colout picker? - everyone uses this one and I have seen better]


Less is Customisable.  But not too complex.

management of “LESS”. This has some user friendly understandable settings. I've never seen this before either.


Layouts.  

Layouts. Five selectables. I don't understand the pre, side main region stuff, and originally I figured it was only for the cogknowski.  This however I can start to understand.


Search for Admin always there.

On the top right, every page for an admin. A search box for the Admin setting – Great. 
This is a feature of the Awesome Bar from the Decaf theme.  There is a good arguement in this becoming standard.  Decaf AB menu stays at the top.,  So to go deep into your settings takes typing a few letters and then enter.

Yes!!  At last another theme with the AB included.



  • Overall, pretty classy.  I looked at this a few months back but did not know how to drive it well.  I got my blocks all different sizes.  I had some colour problems, now solved with much more help and clarity in the settings pages.
  • Alignment of blocks is very sharp and clean.
  • I may be wrong, but I think the colouring has modernised a little: less lines and the old Moodly look.
  • This is a great theme.

Some new icons help:


What I am unsure about (and I will test) is the ability to switch from this theme at course level for some of my buddies who prefer theme clean and dislike the AB and have no problems with the menus anywhere - the nav or admin menus.  

  • I'll post a 'part two' sometime.
  • If anyone is interested, I'll post a link to a live course open to guests set to this theme.
  • As usual, push back comments and such are welcome.

-Derek



Average of ratings: Useful (2)
In reply to Derek Chirnside

Re: Flexibase theme | Thoughts and comments

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

Thanks for the feedback Derek - look forward to the second part


The warning/info/announcement alerts originally came from an early version of one of Julian's themes (can't remember if it was Elegance or Essential) and then just uses the brand colours through LESS.

Both the brand colour page and the additional LESS page (including the custom LESS box) make use of the compilation of LESS on the fly when theme designer mode is enabled. I did like the way this enabled me to give what seems to be a lot of control over colour and branding without going massively over the top with the number of separate settings, combined with the way LESS allows the 'lighten'/'darken' rules rather than using the colours.  I don't think I have seen this in any other themes, although I am always very hesitant to claim 'first' on anything and wouldn't be surprised if there is another theme out there using it.

With respect to the colours and the colour picker - that happens to be the one that's in Moodle by default. There probably are better ones out there, but I haven't tried to implement any of them in place of the default one.

I would always say that, as with most of my previous themes, there are a couple of new, unique features (using flexbox, the nav between settings pages), but large parts of the theme are credited to other hard working developers, while part of my aim is to bring the best of those themes, and the most popular features (awesomebar, course tiles, etc), into one theme and make it as easy as possible for a site administrator with little/no backend access to the files to customise the look and feel of their site.

There should be no problem with switching to another theme at course level - obviously they would lose out on the flexbox features and the layout settings and additional regions that are in flexibase, but there should be no reason I am aware of that individual teachers would experience any issues with Clean on individual courses.

R



In reply to Richard Oelmann

Re: Flexibase theme | Thoughts and comments (2)

by Derek Chirnside -

I've got much less to say than I expected - at this stage.  And there is not a lot of particularly deep or profound things here.

As Chris said, there is quite nice compartmentalization of some functions.  I think this helps with tweaking the CSS as well.

The front page: slider

I have not with this this since Moodle 2.0.  I'm not a fan of big sliders, even thought I know they are flavour of the month all over the web.  However, we need to have something sorted for our site now, I think marketing etc would like it.  I didn't get to this in Flexi.

Marketing slots

Good to have some options on when they appear.


In Flexi, you get a choice of whether to have the same width.


The look for the front page

I may prefer four of them, which is one tick in the settings.


The Course Categories: folder icons

I like this look, maybe with icons that are a little more discrete.  Maybe a little less high.  You need them wider to enable the words to look right in proportion.

I'm unsure what will happen with all 20 categories that we have in our site.

I think it is Snap that has got an option with a 'More"/"Less" link.


a COURSE HOME PAGE What Flexi looks like with Course Menu Plugin

Looks good.  Not a lot of wasted space.  One side bar in this example.  Well aligned for a lot of small alignments looking nice.

This here has NO Awesome Bar in the settings.  If you like simple, this is great.


A problem for me is the Course image.  I really need a banner for courses to enable each department to brand itself.  However, I have not really poked around here to the end of the options to see if I can get this to work.

Generico Tabs: works well

Now I know the colour choice here is not the best to go with the green of the Theme.  I am not a designer.  smile


Flexibase with One topic tabbed format

Looks good.  Again, needs a designers touch to make the one topic styling a little nicer.  easy!!


In each course, a "this course" link

I suspect this is quite a nice function.  Not something that needs help for a student to benefit from.  Will they understand 'resoueces' I wonder?  I like having an unequivocal term to use with students.  Check the "This course" link to see what assignments are due.


A long the way I discovered a few bugs that I have passed on to Richard.

Marketing Spots: I wonder if people will want to put the marketing spots lower down the page.

Course Tiles: I wonder if we want all the courses in tiles on the front page.  It would be nice to be able to choose which appear, like another theme (I forget which) where you specifiy course ID's.
I guess I'd prefer just a few links to categories Like Music, Outdoors, Ski etc.

Awesome bar.  I'm still not sure if this will be a problem or not to use at site level.  If we switch AB ON at site level, and hide the Navigation and Administration menus, there may be a problem if tutors wish to NOT use the AB at course level and choose Clean.  You then have hidden the Nav Menu and Admin Menu.  I'll check this later.
Personally, I really like the Awesome bar, and it's great to see it in this theme.

Course view.  This is critical.  Flexi is very simple, no frills.

As I said initially, not much here that is very profound.  It's taken quite a lot more time than I expected to delve into all the various options.  But I am clearer now what I think we need in a theme. 

I could use this theme.

-Derek

Average of ratings: Useful (1)
In reply to Derek Chirnside

Re: Flexibase theme | Thoughts and comments (2)

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

Thanks Derek

I'm not a huge fan of sliders either, but as you say they are the flavour of the month, so flexibase includes one - it has similar options to the marketing spots about when to show it, how many slides to show, etc. I would tend to use the slider OR the marketing spots rather than both, but some people do like having both so they are there as options smile

Selecting which course categories to show - I'll definitely add it as a development request for the next release. Its possibly another alternative use for the marketing spots though if someone only wanted to show a limited range of their categories. There have been a few comments in other themes about the size of category icons, so these are css controlled and can easily be changed ( .categoryicons .course_category_tree .fa {font-size: 140px;} ). That doesn't change the box size though, so the titles would still fit. As a development, I may also see if I can enable adding images as an alternative to the fontawesome icons currently used.

Course images - are added as Course Summary files in each course, but then a site-wide setting whether to use them as a banner or separate image. And if the Summary Files setting (main moodle admin one, not theme based) is set to allow more than one file and you add more than one image file, you can even have a different image as a banner to the one used for the front page course tiles. The course tile takes the first image, the banner takes the last.

Course image as a banner

Course image as a separate image

Course image in tile

Styling course format plugins - not done in the theme, but the availability of customLESS and customCSS tools should make this fairly straightforward smile I could probably look at some of the most widely used options and provide some styling for them, but at the moment I only looked at how the core formats would look.

'Resources' is a moodle core term - could be overridden in the language file, or language customisation if required.

Bugs - Derek has been in touch and identified a couple of minor bugs through his testing. Hope to have fixes in place by early in the week. If anyone else finds any, please report them and I will obviously fix any issues as quickly as possible!

Marketing spots position - because they are in the layout file as an 'include', this would be a matter of just moving a line of code in the frontpage.php layout. However, one caveat - it is not possible to move them in between the main frontpage content items (as selected by the site admin in the main front page settings options). They would either have to go above all those, or below them all.

Course tiles - I normally just have the 'My Courses' rather than 'All Courses' displayed, but like the categories I will see if its possible to choose a few to highlight, although this would be separate from the core 'My/All courses' options

AwesomeBar - Hiding the Admin and Navigation menus would be a theme setting and part of the theme renderer overrides, so if a course opted to use a different theme (eg Clean) then the navigation and admin blocks should be available to them.


Thanks again for the REALLY useful feedback and testing Derek. I hope I am able to use it to make flexibase even better and more user friendly to fit in with needs and wants for as many people as possible.


Note to other readers, that I have already mentioned to Derek. While bug fixes will obviously be dealt with as soon as possible, future developments may take longer due to personal commitments (writing a Masters dissertation now the taught elements of my masters are complete - already doing this part time alongside my main full time job). They will be going on a development list and at some point will get prioritised for next release or longer term, but all constructive suggestions, like Derek's, will be considered.


Richard

In reply to Derek Chirnside

Re: Flexibase theme | Thoughts and comments

by Chris Kenniburg -
Picture of Particularly helpful Moodlers Picture of Plugin developers

The coding for developers is exceptional.  Each of the features are mainly contained in separate files which makes it extremely useful when trying to learn and see how to implement certain features into a theme.

In reply to Derek Chirnside

Re: Flexibase theme | Thoughts and comments

by Elizabeth Dalton -

We have just switched to Flexibase with our Moodle 2.9 upgrade, and so far reception has been enthusiastic. I did a fair bit of tweaking of CSS, but I've tripped over a couple of points:

1 - Labels don't seem to be indenting properly when edited to "move right" and I'm not sure what CSS might be affecting this

2 - I can't get our favicon.ico to display no matter where I put it.

Any thoughts on either of these?

Thanks,

Elizabeth Dalton

(Edited by Gareth J Barnard to remove signature, since they are not allowed in the forums according to the Moodle.org site policy https://moodle.org/mod/page/view.php?id=7080 - original submission Monday, 21 December 2015, 4:41 PM)

In reply to Elizabeth Dalton

Re: Flexibase theme | Thoughts and comments

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

Hi Elizabeth, 

1. This sounds like it could be a Moodle styling bug rather than Flexibase.

2. This is probably a local cache problem. Moodle cache so do a Purge all cache as well as clear your browser cache.

Cheers

Mary

In reply to Mary Evans

Re: Flexibase theme | Thoughts and comments

by Elizabeth Dalton -

It might be a Moodle styling bug rather than Flexibase, but I just tried purging all caches, and that didn't seem to help. I have narrowed down the problem, though. The mod-indent div isn't showing at all for labels, though other kinds of course activities/resources are indented correctly. The label is indented correctly if I switch to the More theme. So I think it's a conflict either in Flexibase or in Bootstrap3....

Thanks,

Elizabeth

In reply to Elizabeth Dalton

Re: Flexibase theme | Thoughts and comments

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers
This appears to be an inherited issue from bootstrap
It can be fixed by adding to the customcss

.section .label .mod-indent-outer {display: table;}

I've fixed it on github, with a few other css issues identified by Derek in his feedback but have a few more things to look at before releasing an update to the database

Average of ratings: Useful (1)
In reply to Elizabeth Dalton

Re: Flexibase theme | Thoughts and comments

by Derek Chirnside -

Elizabeth, I have just looked around Granite to find this link: https://casprod.granite.edu/cas/login  Is there any way we can see inside to have a look at what you have done?

What is making the response "enthusiastic"?

I'm also curious: have you enabled the Awesome Bar in your install?

With regards,

-Derek

In reply to Derek Chirnside

Re: Flexibase theme | Thoughts and comments

by Elizabeth Dalton -

Hi Derek,

As you've guessed, I'm on holiday right now, but I'll be back in the office Monday. I can't give you access to our production site, but I may be able to give you limited access to our development site.

We did not enable the AwesomeBar. We felt it added clutter without much additional functionality.

Thanks, Richard, for the css fix for indent. Any thoughts about the favicon issue?

Best regards,

Elizabeth Dalton

(Edited by Gareth J Barnard to remove signature, since they are not allowed in the forums according to the Moodle.org site policy https://moodle.org/mod/page/view.php?id=7080 - original submission Sunday, 27 December 2015, 5:21 AM)

In reply to Elizabeth Dalton

Re: Flexibase theme | Thoughts and comments

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

Just tested the favicon Elizabeth - cleared cache in both browser and Moodle and it picked up the new favicon as expected, so I don't believe this is a theme issue, simply a caching one on the browser.

In reply to Richard Oelmann

Re: Flexibase theme | Thoughts and comments

by Elizabeth Dalton -

Where do you put the favicon to have the theme pick it up? We have a slightly non-standard theme setup (due to restrictions by our hosting provider) so I may need to tweak things a bit.

(Edited myself to remove my signature after seeing edit above-- that's a surprise, I think knowing someone's Moodle affiliation helps provide context to their posts, but whatever....)
In reply to Elizabeth Dalton

Re: Flexibase theme | Thoughts and comments

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

The favicon goes in the pix folder of the theme. There isn't currently a setting for it, although one could be added.

I renamed the existing one (to favicon1.ico) then used GIMP to just resize an existing logo to the same as the previous .ico file and resave it as favicon.ico. I know thats not going to give a good icon with decent visible image and resolution, but just needed a quick .ico to check and test that it was working (it is)


Re signatures and affiliations - there is plenty of opportunity in the profiles to provide information about affiliations, interests and all sorts of other details (and I for one do often make use of looking at someone's profile to see their affiliations and learn a bit about other members of the community when replying to them, or reading their posts, it can be very helpful in judging the reply and the level of experience/expertise when some information is available in the profile) - but signatures often tend to get abused and are frequently full of links which are effectively no more than spam, so having a policy to prevent them does make sense in the context of this forum.

In reply to Richard Oelmann

Re: Flexibase theme | Thoughts and comments

by Elizabeth Dalton -

I found the favicon.ico location and got that fixed for my site, thanks. smile I think for less experienced users, providing a drop area for the favicon.ico file in the General Settings page would be very helpful.

I don't have a problem with the policy about signature lines, I was just surprised. In some forum software, there's a way to include affiliation info in a sidebar to the post. Something like that might be helpful here.

In reply to Elizabeth Dalton

Re: Flexibase theme | Thoughts and comments

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

Request for a favicon setting added to theme github issues page smile

In reply to Richard Oelmann

Re: Flexibase theme | Thoughts and comments

by Derek Chirnside -

OK, Richard, just installed the latest 3.0.6

Fixed and perfect

  • Navigation Menu and Settings Menu Gone and obeying the settings in Flexibase!!!  great.
  • consequently: Clean works [as you said] in themes chosen at course level, with these two menus present at course level.  great!!
  • Header on the front page.  PERFECT.
    Can choose 
    • SITE NAME + BACKGROUND BANNER
    • JUST A BANNER which many have text on it
    • NOTHING
    • [Or of course both as below)
      All styling, padding, spacing looking  really good.
  • Maybe you fixed this or maybe it is my imagination: rollovers in Custom Menu now look better (ie readable and not so faint)  Great.



Not quite

  • Attached is a tiny MP4, that shows our existing Decaf based site.  There is no extra click in using the Site admin menu.  I cannot find my previous comment about this.  I was expecting the setting "Populate menu bar" in settings to make it work work like this, a rollover to get a dropdown.
    I know this cause a problem (if you flick your cursor up to the URL bar, it can get you a menu when you DON'T want it) but I can live with this.  smile
    However if this is not changed I can work with this.

Thanks Richard!!

-Derek


In reply to Elizabeth Dalton

Re: Flexibase theme | Thoughts and comments

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

Hi Elizabeth,

That is exactly what I was thinking. I have brought this up in the Moderators Forum, as I feel that if Signatures can be deleted as they are apparently not allowed in forums, which is news to me. But since Moodle.org Community is based totally on Forum discussions it seems very odd, which begs me to ask why Moodle introduce signatures in the first place?

Kind regards,

Mary

In reply to Mary Evans

Re: Flexibase theme | Thoughts and comments

by Derek Chirnside -

Mary (E) (and others) 

re signatures

Signatures on posts in Moodle.org are banned.  See the Site Policy here: https://moodle.org/mod/page/view.php?id=7080

I quote: "Signatures in forum posts will also be deleted as they cause clutter and distract from the information and help provided"

I cannot find out where this page is linked to on the front page of Moodle.org or anywhere else, but it was linked to in this discussion which involves some conversations about signatures by both Mary (C) and Dan: https://moodle.org/mod/forum/discuss.php?d=318006

-Derek

In reply to Derek Chirnside

Re: Flexibase theme | Scroll bar with Bootstrap

by Derek Chirnside -

Richard, here: http://roelmann.no-ip.org/moodlemaster/mod/book/view.php?id=79&chapterid=12#

Is there any way of getting rid of the horizontal scroll bar?

-Derek

In reply to Derek Chirnside

Re: Flexibase theme | Scroll bar with Bootstrap

by Derek Chirnside -

I thought I would add a little more detail to this.

I've been inspired to try out Boot strap type things in Flexibase.

I've been playing with various options from this website: http://www.w3schools.com/bootstrap/bootstrap_tabs_pills.asp

Amazing really!!  Definitely not something a regular classroom or workshop tutor will want to get into, but for the site home page, well it may be quite cool.

Here is what I get when I add a tab menu, a vertical scroll bar, much the same as on Richard's site:


I'm sure this is a bug not a feature.

-Derek

In reply to Derek Chirnside

Re: Flexibase theme | Scroll bar with Bootstrap

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

The default, example code is taken direct from bootstrap.com and there appears to be an issue with the row class inside the tab-content. If you notice on my page it doesn't happen on the tab that gives the example code - that has no grid/row structure added within the tab content.

Try adding

.tab-content .row {margin-right:0;margin-left:0;}

to customcss. I will investigate further and make the change permanently in the theme once I know that it doesn't affect anything else - or if the change to row margins needs to be extended beyond just the tab-content. OR if I need to simplify the code extract from bootstrap.com in my example so that people are not adding those additional classes by default.

Alternatively, all you actually need for the tab content area is

    <div role="tabpanel" class="tab-pane" id="yourtabid">
        <p>Your content</p>
        <p>The rest comes from the bootstrap.com code and isn't actually needed for the tab to work, just for styling what's in the tab.</p>
    </div>

Thanks for the continued feedback, it is always useful to get someone else's eyes on work I've done!

As for tutors using it, bear in mind you could set up a content area with the required tabs and dummy content for them to edit just the content of each tab as normal in the editor - although I agree, you probably wouldn't even do that for most tutors as the chances of them deleting something important are quite high smile but the facility is there if you do have teachers who are confident looking at the html.

It's not really an extra feature of the theme other than raising awareness that when a theme is built on bootstrap, that is available in the content as well - and should be true of any of the bs themes (although code may vary between themes using different bs versions). In this instance its simply I have added it to the theme documentation to demonstrate what can be done.