2-column bootstrap theme

2-column bootstrap theme

by Jean-Luc Delghust -
Number of replies: 7
Hi all,

apologies if this has already been asked, haven't been able to find the answer (might not have looked well enough -_-) but I need some help from the wonderful Moodle community smile

We're upgrading to 2.7 and we would like to move away from our custom fusion theme and use bootstrap

For our upgrade to 2.7, I'm looking for
  • a 2-column bootstrap theme
  • blocks on the right
  • dockable blocks

I am well aware that normally blocks are dockable on 2.7. Now, the moodle.org theme has the layout I'm looking for: if I'm not mistaken there are no blocks on the left, and it's dockable. I quite like the overall look & feel, of course I'd need to change some CSS (colours and titles) but where should I start? Is it a customised version of Clean?

I'm currently trying out some things with Elegance but it seems like this theme doesn't stretch over the whole screen when on a large screen...

TIA
Average of ratings: -
In reply to Jean-Luc Delghust

Re: 2-column bootstrap theme

by Mary Evans -

Hello and welcome,

The really easiest thing to do is copy and paste these lines into your customised theme's config.php.

Than change all those places where you find 'columns2.php' to 'columns3.php' except Admin and Report, this will force Moodle to use the 3 column layout that has the side post blocks code in it.

When you have done this make all those places where your users will only see a side-post only page such as the Frontpage...course page and incourse page, change the default region from 'side-pre' to 'side-post' as shown below.

  // The site home page.
    'frontpage' => array(
        'file' => 'columns3.php',
        'regions' => array('side-pre', 'side-post'),
        'defaultregion' => 'side-post',
        'options' => array('nonavbar' => true),
    ),

All you then need to do is to make sure the Report layout and the Admin layout still retain the colums2.php setting with the default region at side-pre, otherwise this will require lots of recoding and is a pain.

The major thing now left to do is making sure ALL your site blocks are on the RIGHT other than the Admin and Report pages.

Hope this helps?

Mary

Average of ratings:Useful (2)
In reply to Mary Evans

Re: 2-column bootstrap theme

by Jean-Luc Delghust -

Thanks Mary, will be trying this out!

So I clone the Clean theme, and follow your instructions...

Just so I'm sure: Moodle.org theme is based on the clean theme, right? Cause here it seems admin & navigation are on the right.

Bonus question (tongueout): when upgrading to future versions later, I guess I'll have to start the cloning & customising over again to make sure updates to the theme are included, right?

In reply to Mary Evans

Re: 2-column bootstrap theme

by Jean-Luc Delghust -

OK Tried this out, but either I'm doing something wrong, or it's still possible to move blocks to the left inside a course... 

Will look further into this

In reply to Mary Evans

Re: 2-column bootstrap theme

by Jean-Luc Delghust -

So.. I have something working, with all blocks to the right - I understand you'd rather I had kept navigation and admin on the left, but with docking enabled, it's manageable - I still need to finetune it and test it out on actual courses (working on a local copy now)

One foreseeable problem though: it seems users can still select "left" when they go in a block's settings. I would like to prevent that, but can't find a setting for that... any suggestions?


Many thanks!

In reply to Jean-Luc Delghust

EDITED! Re: 2-column bootstrap theme

by Mary Evans -

I'm sorry, I have not had time to answer you earlier, but you have totally misunderstood me.

I did not say anything about Admin and Navigation Blocks, I was meaning the Admin and Report Layouts, which are a totally different thing.

Admin layout look like this 

Report layout look like this

However, if you want to change the theme fully into a side-post (right side)  only theme you can make the following changes in $THEME->layouts = arrary() in your version of theme/clean/config.php so it looks like this.

$THEME->layouts = array(
    // Most backwards compatible layout without the blocks - this is the layout used by default.
    'base' => array(
        'file' => 'columns1.php',
        'regions' => array(),
    ),
    // Standard layout with blocks, this is recommended for most pages with general information.
    'standard' => array(
        'file' => 'columns3.php',
        'regions' => array('side-post'),
        'defaultregion' => 'side-post',
    ),
    // Main course page.
    'course' => array(
        'file' => 'columns3.php',
        'regions' => array('side-post'),
        'defaultregion' => 'side-post',
        'options' => array('langmenu' => true),
    ),
    'coursecategory' => array(
        'file' => 'columns3.php',
        'regions' => array('side-post'),
        'defaultregion' => 'side-post',
    ),
    // Part of course, typical for modules - default page layout if $cm specified in require_login().
    'incourse' => array(
        'file' => 'columns3.php',
        'regions' => array('side-post'),
        'defaultregion' => 'side-post',
    ),
    // The site home page.
    'frontpage' => array(
        'file' => 'columns3.php',
        'regions' => array('side-post'),
        'defaultregion' => 'side-post',
        'options' => array('nonavbar' => true),
    ),
    // Server administration scripts.
    'admin' => array(
        'file' => 'columns3.php',
        'regions' => array('side-post'),
        'defaultregion' => 'side-post',
    ),
    // My dashboard page.
    'mydashboard' => array(
        'file' => 'columns3.php',
        'regions' => array('side-post'),
        'defaultregion' => 'side-post',
        'options' => array('langmenu' => true),
    ),
    // My public page.
    'mypublic' => array(
        'file' => 'columns3.php',
        'regions' => array('side-post'),
        'defaultregion' => 'side-post',
    ),
    'login' => array(
        'file' => 'columns1.php',
        'regions' => array(),
        'options' => array('langmenu' => true),
    ),
    // 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(),
        '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()
    ),
    // 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(),
    ),
    // Should display the content and basic headers only.
    'print' => array(
        'file' => 'columns1.php',
        'regions' => array(),
        'options' => array('nofooter' => true, 'nonavbar' => false),
    ),
    // The pagelayout used when a redirection is occuring.
    'redirect' => array(
        'file' => 'embedded.php',
        'regions' => array(),
    ),
    // The pagelayout used for reports.
    'report' => array(
        'file' => 'columns3.php',
        'regions' => array('side-post'),
        'defaultregion' => 'side-post',
    ),
    // The pagelayout used for safebrowser and securewindow.
    'secure' => array(
        'file' => 'secure.php',
        'regions' => array('side-post'),
        'defaultregion' => 'side-post'
    ),
);
Also few changes go into Clean theme, all the changes are made to Bootstrapbase which your cloned theme will inherit.
I hope this is clearer?
Chees
Mary
Average of ratings:Useful (1)
In reply to Mary Evans

Re: EDITED! Re: 2-column bootstrap theme

by Jean-Luc Delghust -

Many thanks, Mary, (no worries for the delay, I'm extremely grateful for the help! ) I had indeed completely misunderstood it, thanks for your patience. I'll dive into it again, this is pretty new to me.


Cheers