Since there's been some renewed interest in this, rather than delay any further I thought I'd share the latest work on Bootstrap for Moodle instead of waiting until I get it all neat and tidy.
For those that speak github it's the bootstrap branch here:
https://github.com/ds125v/moodle-bootstrap
For those that don't there's a zip of the bootstrap theme here:
https://github.com/ds125v/moodle-bootstrap/downloads
Which should just work (well, to an extent) if you drop it into the theme directory as per usual.
There's quite a bit of explaining necessary as to how this all fits together, what I'm trying to achieve and plans for the future etc. but I didn't want to make anyone wait while I get around to writing that and finishing off various bits and bobs.
So, it's not (yet) ready for production use, it's currently evolving quickly but feel free to have a dig about in the code or try the theme to see what you think. There's various things that are broken, missing, unsupported at the moment e.g. it inherits the standard Bootstrap width, which is probably too thin for Moodle and though that's very easy to fix, I just haven't done it yet, but there's also plenty of good bits that can be easily lifted and re-used in your own themes if you kind of know what you're doing.
I'm not sure I'm ready for bug reports at the moment (though I'm hoping I will be soon), but an extra pair of eyes on the code and fixes and contributions are very welcome if anyone wants to build their theme on top.
Thanks David, this is great!
I would just like to point out to those 'newbie' types who might like to have a bash at this, and try and explain that when David says:
here is a zip file...
and then goes on to say
just drop it into the 'theme' directory as normal
he did not mean drop the zip file itself, but the extracted Moodle theme.
Yeah!
OK...I have added the bootstrap theme to my Moodle 2.3.1 setup.
Here is what I found:
- The 'home' menu item does not take you anywhere, I think this is something to do with the way you have used new Moodle_url.
- None of the blocks work either. I can see them but they appear collapsed and there is no way to make them expand to see their content.
Here are my fixes:
- 1. the 'home' link works correctly if you add echo...
<?php echo new moodle_url("/")?>"> - 2. to get the blocks to work as expected I had to change the way you had the $hasblock1 and $hasblock2 this method only works for custom blocks not for side-pre and side-post, these need to use their own predefined settings like so...
$hassidepre = $PAGE->blocks->region_has_content('side-pre', $OUTPUT);
<?php if ($hassidepre) { ?>
<div id="blocks1" class="yui3-u"><div class="region-content"> <?php echo $OUTPUT->blocks_for_region('side-pre') ?></div></div>
<?php } ?>
I hope this helps and not hinders!
Cheers
Mary
I've fixed the first issue, thanks.
For the second, is this some javascript that's looking for specific HTML? I'd perhaps like to change the code that looks for those ids if so (I've tripped over a few of these issues). I'm guessing this is because we have block hiding and docking switched off, so I should probably install a new Moodle and get things working with whatever the defaults are.
It's certainly this kind of help that I'm looking for but I think I'll add a second post to explain myself better, as to why some things are broken like this and how people can help.
For the second, is this some javascript that's looking for specific HTML? I'd perhaps like to change the code that looks for those ids if so (I've tripped over a few of these issues). I'm guessing this is because we have block hiding and docking switched off, so I should probably install a new Moodle and get things working with whatever the defaults are.
It's certainly this kind of help that I'm looking for but I think I'll add a second post to explain myself better, as to why some things are broken like this and how people can help.
I'd love it if I could collaborate with you on this! My question though is, is this a full moodle overwrite or just a theme - since your github has a full moodle install I was curious. I'd prefer to not touch core code.
I went for the bootstrap.zip as I too was confused by the full moodle install.
The zip is just the theme/bootstrap folder from the full repository. The best way to keep up with latest developments without installing git etc. is to download the full thing as a zip file then grab that folder and throw the rest away.
On this page:
https://github.com/ds125v/moodle-bootstrap/downloads
the big pale blue buttons near the top labelled "dowload as zip" gives you all the very latest code from which you can grab the theme folder. It'll save me having to manually update the zip, which I'll probably remove once the code moves on slightly.
On this page:
https://github.com/ds125v/moodle-bootstrap/downloads
the big pale blue buttons near the top labelled "dowload as zip" gives you all the very latest code from which you can grab the theme folder. It'll save me having to manually update the zip, which I'll probably remove once the code moves on slightly.
Hi Dave,
The done thing is to create a new github repo with *just* the theme code in it.
Welcome to Git Submodules ......evil laughter......
Yep, looks like https://github.com/stuartlamour/moodle_bootstrap/tree/master/bootstrap might be the main source for future collaboration.
Hi All,
I took a look at the github repository Stuart and I created and saw it was a mess!
So I have spend a couple of hours today fixing the errors and getting a new version of the bootstrap work done.
I have also added Some really cool CSS & Renderers David Scotson created. The renders for the Icons and the css for the blocks he has created are awesome.
My new Git repository for the theme can be found here:
https://github.com/bmbrands/theme_bootstrap
A preview of this theme can be found here:
http://theming.sonsbeekmedia.nl
I have added my work to the moodle plugin database and hope it will be approved
Hi Bas,
I've also been having a digital spring clean and decomposed my work into some separate github repositories. This is basically how I would have started the first time, if I knew then what I know now. The first of them is:
https://github.com/ds125v/bootstrap
This is a clone of Twitter's Bootstrap project, with some very minor changes (i.e. image links changed to [[pix:theme]]). It's mostly separate to make it easier to keep up to date with changes to Twitter's Bootstrap. The main output is the Bootstrap.css file which I then copy over to:
https://github.com/ds125v/moodle-theme_bootstrap_renderers
This is a theme for developers working on bootstrap renderers. It removes various things, like all the Moodle base CSS and the various CSS hacks I've used to finish the theme off, and lets you focus on changes to renderers.php and layout. I found that I spent half my time fighting with old Moodle CSS or hacky workarounds that I'd only put in place the day before, so I went back to basics with the intent to do all the renderers stuff first as a foundation.
I've started rewritting my renderers and I've done a first pass at most of lib/outputrenderers and am about to start on the various other renderer.php files throughout Moodle. If anyone wants to help please do, this is a fairly well constrained bit of work. You find a function in a renderer.php file, copy it, find the bit of Bootstrap that does the same thing and tweak it till the output HTML matches. Mostly quite straightforward.
I think almost everything else can wait till I see how far the renderers can take me. The only other thing that I'm working on is the layout php files. If you could offer any help with the layout it would be welcome. I trashed mine and started again with Stuart's but it was too fancy for my needs. I basically want the absolute closest you can get to a standard Moodle install, but with Bootstrap classes holding it together. I've been trying to strip back his stuff but this is a combination of two weak points for me, as I don't know much about the structural parts of Bootstrap or of Moodle's pages and themeing system. As I said, any help here would be appreciated,
I'll probably create another repository, called moodle-theme_bootstrap_renderers_plus which will use every dirty trick in the book to fill in the gaps left after I've made full use of Moodle's renderers system. But I'll leave that for later as otherwise I'll need to spend time backing out hacks that I don't need anymore due to fixing the problem at source in the renderers.
I've also been having a digital spring clean and decomposed my work into some separate github repositories. This is basically how I would have started the first time, if I knew then what I know now. The first of them is:
https://github.com/ds125v/bootstrap
This is a clone of Twitter's Bootstrap project, with some very minor changes (i.e. image links changed to [[pix:theme]]). It's mostly separate to make it easier to keep up to date with changes to Twitter's Bootstrap. The main output is the Bootstrap.css file which I then copy over to:
https://github.com/ds125v/moodle-theme_bootstrap_renderers
This is a theme for developers working on bootstrap renderers. It removes various things, like all the Moodle base CSS and the various CSS hacks I've used to finish the theme off, and lets you focus on changes to renderers.php and layout. I found that I spent half my time fighting with old Moodle CSS or hacky workarounds that I'd only put in place the day before, so I went back to basics with the intent to do all the renderers stuff first as a foundation.
I've started rewritting my renderers and I've done a first pass at most of lib/outputrenderers and am about to start on the various other renderer.php files throughout Moodle. If anyone wants to help please do, this is a fairly well constrained bit of work. You find a function in a renderer.php file, copy it, find the bit of Bootstrap that does the same thing and tweak it till the output HTML matches. Mostly quite straightforward.
I think almost everything else can wait till I see how far the renderers can take me. The only other thing that I'm working on is the layout php files. If you could offer any help with the layout it would be welcome. I trashed mine and started again with Stuart's but it was too fancy for my needs. I basically want the absolute closest you can get to a standard Moodle install, but with Bootstrap classes holding it together. I've been trying to strip back his stuff but this is a combination of two weak points for me, as I don't know much about the structural parts of Bootstrap or of Moodle's pages and themeing system. As I said, any help here would be appreciated,
I'll probably create another repository, called moodle-theme_bootstrap_renderers_plus which will use every dirty trick in the book to fill in the gaps left after I've made full use of Moodle's renderers system. But I'll leave that for later as otherwise I'll need to spend time backing out hacks that I don't need anymore due to fixing the problem at source in the renderers.
I'd be happy to take the page layouts, my question is this:
html5 doctype or stick with the XHTML strict default? I'd prefer html5.
My second question is this: any desire to do a child theme with settings so we can do stuff like: bootswatches, 2/3 column layouts, fixed/static navbar, custom logo, etc...?
I'll also keep plugging away at renderers if you want to pull them in ;) (
For the layout I was thinking of something like this:
http://twitter.github.com/bootstrap/examples/fluid.html
or
http://twitter.github.com/bootstrap/examples/hero.html
But with two columns, one on each side, each fixed width at say 180px and the centre fluid (though maybe a max-width to give some extra padding on *very* wide screens). I've found that if you try to get any fancier than that e.g. fixed width, 2 column, then you soon run up against things in Moodle that were hard-coded with different expectations. And rather than fight with those issues as well, I'd rather focus on the renderers right now.
I've been coding on the assumption of HTML5 and think that's the best idea.
Medium term I think fixed/static navbars, white/black navbar, custom logo, bootswatches and 2/3 columns are all fairly do-able just by reacting to variables in the layout that are set in the theme preferences (actually I've never done this before, all my themes have been hard-coded for one look, so maybe someone else can take the lead on that). With Bootstrap these things are often a case of just switching one class name so it shouldn't be too intrusive. Long term I'd like to integrate LESS compilation to allow for more sophisticated choices of color and font etc. by giving the user control over everything in variables.less and recompiling the CSS from that.
http://twitter.github.com/bootstrap/examples/fluid.html
or
http://twitter.github.com/bootstrap/examples/hero.html
But with two columns, one on each side, each fixed width at say 180px and the centre fluid (though maybe a max-width to give some extra padding on *very* wide screens). I've found that if you try to get any fancier than that e.g. fixed width, 2 column, then you soon run up against things in Moodle that were hard-coded with different expectations. And rather than fight with those issues as well, I'd rather focus on the renderers right now.
I've been coding on the assumption of HTML5 and think that's the best idea.
Medium term I think fixed/static navbars, white/black navbar, custom logo, bootswatches and 2/3 columns are all fairly do-able just by reacting to variables in the layout that are set in the theme preferences (actually I've never done this before, all my themes have been hard-coded for one look, so maybe someone else can take the lead on that). With Bootstrap these things are often a case of just switching one class name so it shouldn't be too intrusive. Long term I'd like to integrate LESS compilation to allow for more sophisticated choices of color and font etc. by giving the user control over everything in variables.less and recompiling the CSS from that.
I've been playing with David's work which, from my basic theme knowledge, seems to be taking a solid approah.
From what I can see at: http://moodle.org/mod/forum/discuss.php?d=208162, http://moodle.org/mod/forum/discuss.php?d=212222 there seems to be almost duplicate discussion going on.
To assist in moving this along i've created a wiki page on moodle docs that outlines this work (or my understanding of it).
Please go and change and add to it! - I realise i've come to this quite late but would really like to help push this over the line and quite excited about how this could improve the moodle user experience.
Link to docs is: http://docs.moodle.org/23/en/bootstrap-Theme
sounds good I'll start looking at something like the first one. Should be simple with semantic HTML5.
Just FYI the reason I specifically mentioned child themes is because unlike other aspects of inheritance, theme settings are NOT inheritable.
So if 'bootstrap' is a parent theme and it has a navbar setting (fixed/floating) and a child theme has it's own settings (custom logo, colors, etc..) the parent theme settings don't work. So you have to either do all or nothing.
What are these csspostprocessors used for, just swapping out variables like colours and image paths? Or can you do any crazy thing you want to? What do people actually use it for? It looks like it might be somewhere you could plug PHP LESS into: http://leafo.net/lessphp/docs/#php_interface
I actually saw that variable the other day in someone's theme config and assumed it was to to hook up external css compression tools.
I actually saw that variable the other day in someone's theme config and assumed it was to to hook up external css compression tools.
I have used them for changing CSS values based upon the configuration in your theme's settings. For instance: have a selectable colour set in your theme settings page that is processed using the csspostprocessors, or have a textarea in your theme's settings page that allows you to add some custom CSS.
It would be interesting to try some advanced compiling / cleaning there
css postprocessors are a way to enable the settings+lib to generate any conditional CSS on load and then print that into the stylesheet.
there's no real limitation (you don't even have to use the setting:settingname format)
But it's not just postprocessors that are hit by that "bug" - it's any parent theme lib functions and settings. So for example if you had a setting that was columns : 2 or 3 - that wouldn't work either (even thought it's not a postprocessor but a lib function).
Wow David,
Your renderers file looks very nice ! You have really done some excellent programming. I guess using the renderers before changing the CSS is a really good approach.
I have used the minimized versions of the bootstrap css and added another css file that overwrites any bootstrap css that conflicts with moodle's css . That way I can keep updating the bootstrap css too.
I will definately use your work on my version of the bootstrap theme and hope my work will help you get some stuff done too. I have updated my github projects and cleaned the one that stuart created. A ready to use community version is available too: http://moodle.org/plugins/view.php?plugin=theme_bootstrap
For the layouts I used the bootstrap fluid grid, I did not separate the head and footer but use just one layout file. The part that renders the blocks and main content is:
<!-- BOOTSTRAP RESPONSIVE -->
<div id="page-content-wrapper" class="wrapper clearfix">
<div id="page-content" class="row-fluid">
<?php if ($hassidepre) { ?>
<div class="span3">
<?php echo $OUTPUT->blocks_for_region('side-pre') ?>
</div>
<?php } ?>
<?php if ($hassidepre && $hassidepost) { ?>
<div class="span6">
<?php } elseif ($hassidepre || $hassidepost) { ?>
<div class="span9">
<?php } else { ?>
<div class="span12">
<?php };?>
<?php echo $OUTPUT->main_content() ?>
</div>
<?php if ($hassidepost) { ?>
<div class="span3">
<?php echo $OUTPUT->blocks_for_region('side-post') ?>
</div>
<?php }; ?>
</div>
<!-- END BOOTSTRAP RESPONSIVE -->
I had to keep the first 2 divs in, without them the 2.3 new activity popup does not work properly (because of some YUI stuff). There's some other stuff that should not be removed from your layout file too like the footer (embedded content needs it).
There is still some experimenting that can be done with this grid system, like having a fixed grid instead of fluid + smaller block regions. It might even be a good idea to have the grid system used configurable in the theme settings page what do you think?
Docking seems to be one of the things that does not have a nice ready to use bootstrap solution. Do you have any suggestions on doing this in a nice way?
I've added a file called undo.css to my theme for tracking things that need reset because of class-name clashes, though I'm hopeful that more of them can be avoided by using renderers.
I've also got a (currently empty) file called javascript.css that's for tracking javascript that breaks when you start renaming stuff. I figured out a way to fix the embedded PDFs etc. from disappearing just with CSS, so I'll work around these issues where possible, but so far all the one's I've looked at could be fixed better in core.
My theme's more for developers and documenting and tracking the pitfalls and workarounds of Moodle themeing so please contribute any you stumble over.
The grid system is the bit of Bootstrap I have least knowledge of because I learned it by theming Moodle from the inside out. I think it could be very powerful but don't have any big ideas yet.
We don't use docking at our institution so I know next-to-nothing about it. My bootstrap theme used to be called simple because one of the sub-goals of my initial project was to simplify Moodle so that e.g. you'd only need one theme for desktop and iphone and ipad (possibly responsive, but possibly not). One target of that simplification was to pretend docking didn't exist. Though that opinion was developed without ever using it, maybe it's really useful. (edit: what about docking them into the navbar, with a javascript drop-down, similar to the one called "dropdown" here)
One other aspect of the 'simple' plan was to reduce the number of layout.php files down to one. It seemed like having different php layouts for each type of page was a PHP solution to a CSS problem. I've only got one such file for my own institutional theme. But I'm happy to go with whatever makes most sense to other themers for now.
I've been playing with the Twitter Bootstrap and created my own theme starting off as one of the example html files. I love the icons and all the lovely things you can do with them with just a simple set of css markup.
I liked the way the hero.html had a login form in the navbar, so tried to use that and almost succeeded using a hacked copy of the code from Aardvark Postit but couldnlt quite get it to allow you to login. It logs out ok.
The navbar and the responsive css works a treat. as does the dropdown. The blocks are playing up though...I think it's perhaps the jquery-1.8.2.min that probably causing that, I have had problems with it before. I am really impressed with the bootstrap plugins.
If only they could implement all this in Moodle it would be fantastic!
I'll add my theme to my GITHUB and add a link to it later today.
Cheers
Mary
Copying the login in the header is something I'd like to do as well. I've currently just got the non-functional text fields there for show, so if you get it working it would be great to add that to my code.
The updated files are in my GITHUB HERE
The login is just a simple btn-primary for now with an icon and text but the code for the login is also included with the layout files too if you want ot copy it.
I'm having problems with JS confict somewhere. The blocks vanish, I thought I had fixed it but it's come back. Which makes me wonder is it my WAMP server? Although Standard theme works OK so it probably bootstrap-min.js or jquery.
It's all exciting stuff all the same.
Changing the way Moodle looks via the renderers is the way to go. Why all the buttosm use different code in Moodle baffles me, and yet so simple with Bootstrap.
Cheers
Mary
Here's an update a re-work that really does work!
<?php
function get_content () {
global $USER, $CFG, $SESSION, $COURSE;
$wwwroot = '';
$signup = '';
}
if (empty($CFG->loginhttps)) {
$wwwroot = $CFG->wwwroot;
} else {
$wwwroot = str_replace('http://', 'https://', $CFG->wwwroot);
}
if (!isloggedin() or isguestuser()) {
echo '<form id="login" class="navbar-form pull-right" method="post" action="'.$wwwroot.'/login/index.php?authldap_skipntlmsso=1">';
echo '<input class="loginform span2" type="text" name="username" id="login_username" value="" placeholder="'.get_string('username').'" />';
echo '<input class="loginform span2" type="password" name="password" id="login_password" value="" placeholder="'.get_string('password').'" />';
echo '<button type="submit" class="btn">'.get_string('login').'</button>';
echo '</form>';
} else {
echo '<a href="'.$CFG->wwwroot.'/login/logout.php?sesskey='. sesskey().'"><button type="submit" class="btn btn-small btn-primary pull-right">'.get_string('logout').' <i class="icon-hand-left icon-white"></i></button></a>';
} ?>
It's both. In the short-term I'm keeping everything in the theme, but everytime I find something that's an outright bug, or could be done much easier if core Moodle was changed, I'm filing an issue on Moodle's Tracker and recording the bug number in the relevant section of the theme. This means that as those bugs get fixed, I can go back and remove the workarounds and make the theme simpler and cleaner.
The primary aim isn't to produce a nice theme, but to make theming Moodle easier (which in turn attracts developers, which in turn generates themes, which in turn produces lots of nice themes). To achieve that long term goal then there's going to have to be changes to core. I think of renderers.php as a staging area for wider testing of code. Some of it is just stylistic choices which belongs in a theme, but some of it is usability or front-end design choices that I'd quite like to see absorbed back into Moodle core, it's just easier to start a discusson to achieve that with working code and wide use via a theme.
The primary aim isn't to produce a nice theme, but to make theming Moodle easier (which in turn attracts developers, which in turn generates themes, which in turn produces lots of nice themes). To achieve that long term goal then there's going to have to be changes to core. I think of renderers.php as a staging area for wider testing of code. Some of it is just stylistic choices which belongs in a theme, but some of it is usability or front-end design choices that I'd quite like to see absorbed back into Moodle core, it's just easier to start a discusson to achieve that with working code and wide use via a theme.
So, to better manage expectations:
THIS IS NOT A FINISHED THEME, DO NOT USE IT ON A PRODUCTION SITE.
So if it's not a finished theme, what is it? Well, currently it's basically a byproduct of the theme I built for my institution. The key result of this is that if you don't have your Moodle set up the same way as we do, then lots of things will be missing or broken.
For example, we've got our own, institution specific banner as a header. The one in this theme is just something I quickly nicked from one of the Bootstrap examples. I intended to wire up the custom menu (using some code from Stuart Lamour and Bas Brands) before re-announcing it, but I thought getting it out and building some buzz might be a better idea.
Other examples include, docking blocks (we don't use them), hiding blocks (again, we don't use it. I think this might actually be overriden in the renderer with code that does nothing currently), our login screen is only for existing users so if you have your Moodle set up to let people sign up it might look odd. And so on.
Basically if it's horribly broken, I probably already know about it. The reason I'm making it public anyway is I'm hoping that someone who uses those features (and therefore understands them and can test them) will fix them for their own use. I'll maybe set up the bug tracking in github so that people can track progress on these things and find other interested parties to fix the code or do some testing.
I need to focus on the stuff that our institution uses, but I'm hoping that what's there acts as enough of a proof of concept to get others on board to fill out the empty spaces, and that we can work together to advance faster than we could individually. I'm happy to help out with any aspect, but in particular if I don't use and/or understand part of Moodle, and therefore can't test any changes I make properly, then I'd be looking for some outside assistance to help tackle those areas.
THIS IS NOT A FINISHED THEME, DO NOT USE IT ON A PRODUCTION SITE.
So if it's not a finished theme, what is it? Well, currently it's basically a byproduct of the theme I built for my institution. The key result of this is that if you don't have your Moodle set up the same way as we do, then lots of things will be missing or broken.
For example, we've got our own, institution specific banner as a header. The one in this theme is just something I quickly nicked from one of the Bootstrap examples. I intended to wire up the custom menu (using some code from Stuart Lamour and Bas Brands) before re-announcing it, but I thought getting it out and building some buzz might be a better idea.
Other examples include, docking blocks (we don't use them), hiding blocks (again, we don't use it. I think this might actually be overriden in the renderer with code that does nothing currently), our login screen is only for existing users so if you have your Moodle set up to let people sign up it might look odd. And so on.
Basically if it's horribly broken, I probably already know about it. The reason I'm making it public anyway is I'm hoping that someone who uses those features (and therefore understands them and can test them) will fix them for their own use. I'll maybe set up the bug tracking in github so that people can track progress on these things and find other interested parties to fix the code or do some testing.
I need to focus on the stuff that our institution uses, but I'm hoping that what's there acts as enough of a proof of concept to get others on board to fill out the empty spaces, and that we can work together to advance faster than we could individually. I'm happy to help out with any aspect, but in particular if I don't use and/or understand part of Moodle, and therefore can't test any changes I make properly, then I'd be looking for some outside assistance to help tackle those areas.
I've been doing some work on the responsive layout using bootstrap-responsive breakpoints and have some pretty good success. I'd call the "responsive" part done.
Now it's a matter of what the actual layout needs to look like (e.g. what goes in the navbar, etc...)
Here's the branch if you want to play with it: https://github.com/thedannywahl/moodle-theme_bootstrap_renderers/tree/responsive-layout
Hi Danny,
I'm finding this Bootstrap theme design pretty addictive at the moment.
I've been changing the custom Menu renderer quite a bit and got it looking like this when in responsive design mode.
I'm still working on it but will upload the latest version to my GITHUB later today.
Here is the Tiny-Navbar (Custom menu) at the top of the page
And this is what it looks like after floating the screen and resizing to its min width.
The black button allows the whole of the menu to dropdown
Thus allowing access to the menu when viewing with Mobile device.
I think this is one of the coolest features, and cannot wait to get this implemented into Moodle Themes.
Cheers
Mary
wow that looks great! I'm glad I haven't touched custommenu yet
no point in doing the work twice!
The problem I find with the custommenu is that it only really works well for the first sub-menu all the others fail to open with the bootstrap dropdoen toggle, so this needs fixing.
Another point about this top navbar is that it you need to be able to have the lang menu visible, so I hide mine in a dropdown. I supose it could go in at the bottom of the username dropdown. I'll have to experiment.
One of the biggest problems I have come accross is that the responsive css only seems to work if you have three columns if it is a 3 coll theme, because it appears to break if it is side-pre-only or side-post-only.
I'm going to see if I can fix this today.
Cheers
Mary
I got around it by using bootstrap-responsive - but NOT using bootstrap for the layout (e.g. not using the responsive grid)
this also solved the problem for me in region-pre and region-post getting too narrow (I think they need to be min 200px wide)