Could anyone provided step-by-step instructions for recreating this on my own machine? I don't really know anything about Conditional Activities, so it'll have to be at a pretty basic level.
David Scotson
Posts made by David Scotson
Ah, got you now.
The icons img tags are still there in the HTML, they're just set to display: none.
This is partly a preference thing, I hide those icons in all my themes as I don't think they're very helpful (and prior to 2.3 the default ones were very dated looking) and presumably Bas came to the same conclusion as I don't remember hiding them in this particular theme, which he started off.
It probably also has to do with a slight clash with Bootstrap. Bootstrap (before version 3) provides icons that are black and white and it'll switch between them on hover states via CSS. Moodle's icons in 2.3 are a mid-gray and are embedded in the HTML, not controlled via CSS. This makes them look a bit out of place particularly when something is highlighted in the menu.
There's a bug filed about moving to a icon font in Moodle in future (Bootstrap has adopted one for v3) which would make this possible again (as well as allowing themes to easily change the icon color to match the text). We tried this via renderers but they don't have enough coverage for it to work everywhere, and some of the javascript gets confused if it doesn't find img tags for icons that activate ajax calls.
And there were some earlier Bootstrap-based themes that either included a renderer that rewrote that HTML so the unused img tags weren't written out at all and/or inserted the appropriate Bootstrap Glyphicon in it's place and/or used the Font Awesome icon font. Those are all avenues for themers that want to do something interesting with the icons.
edit: and for 1, to be 100% exact you can inherit from it and override it with CSS, (or soon, include your own CSS in the settings). In some ways this should be easier in fact as the base css has been cleaned up an simplified, but yes you can't exclude specific CSS files from the parent theme using the traditional config.php which makes some other things harder.
If it wasn't for the fact that the PHP port of LESS and Bootstrap seem to be having issues with each other at the moment, I'd be putting more time into demo-ing on-the-fly generation of CSS from LESS. Hopefully they'll sort that out amongst themselves soon (or I'll have to figure out a way to generate it with javascript and save the result to the server).
The icons img tags are still there in the HTML, they're just set to display: none.
This is partly a preference thing, I hide those icons in all my themes as I don't think they're very helpful (and prior to 2.3 the default ones were very dated looking) and presumably Bas came to the same conclusion as I don't remember hiding them in this particular theme, which he started off.
It probably also has to do with a slight clash with Bootstrap. Bootstrap (before version 3) provides icons that are black and white and it'll switch between them on hover states via CSS. Moodle's icons in 2.3 are a mid-gray and are embedded in the HTML, not controlled via CSS. This makes them look a bit out of place particularly when something is highlighted in the menu.
There's a bug filed about moving to a icon font in Moodle in future (Bootstrap has adopted one for v3) which would make this possible again (as well as allowing themes to easily change the icon color to match the text). We tried this via renderers but they don't have enough coverage for it to work everywhere, and some of the javascript gets confused if it doesn't find img tags for icons that activate ajax calls.
And there were some earlier Bootstrap-based themes that either included a renderer that rewrote that HTML so the unused img tags weren't written out at all and/or inserted the appropriate Bootstrap Glyphicon in it's place and/or used the Font Awesome icon font. Those are all avenues for themers that want to do something interesting with the icons.
edit: and for 1, to be 100% exact you can inherit from it and override it with CSS, (or soon, include your own CSS in the settings). In some ways this should be easier in fact as the base css has been cleaned up an simplified, but yes you can't exclude specific CSS files from the parent theme using the traditional config.php which makes some other things harder.
If it wasn't for the fact that the PHP port of LESS and Bootstrap seem to be having issues with each other at the moment, I'd be putting more time into demo-ing on-the-fly generation of CSS from LESS. Hopefully they'll sort that out amongst themselves soon (or I'll have to figure out a way to generate it with javascript and save the result to the server).
Sorry I missed the first part of the question 2.
The default break points for responsiveness in Bootstrap happens at 767 pixels, 1 pixel less than a portrait iPad. So in most Bootstrap designs you get the standard desktop look (though with less padding between columns and at the sides) on your iPad. (Conversely this means you need to design your main layout to work well at those sizes). One pixel smaller than this and it changes to the simpler, linear, vertical look that you'd expect on an iPhone.
Moodle generally has a 3 column design which starts to look a bit cramped at iPad portrait sizes. So we've altered Moodle Bootstrap trigger point to activate at exactly 768, so you'll see the "phone" layout if you hold your iPad vertically.
There's a few other breakpoints in the responsive.less file which are required because Moodle doesn't currently use a lot of Bootstrap HTML or the Bootstrap grid (apart from for the main three columns). Some are just repeats of core Bootstrap, others are tweaks to suit Moodle's existing HTML.
There were some earlier Bootstrap-based themes that automatically stepped down to 2 columns at this kind of width but this started to get complicated when content-first layouts were introduced.
I believe there's various Moodle Themes that enforce only two columns (though the last time I looked at that it wasn't exactly possible to do this perfectly, but you could get it most of the way there). They would probably be able to use the standard Boostrap 767px break-point. (And themes that put both block columns on the same side should be able to scale down to one, I think)
The default break points for responsiveness in Bootstrap happens at 767 pixels, 1 pixel less than a portrait iPad. So in most Bootstrap designs you get the standard desktop look (though with less padding between columns and at the sides) on your iPad. (Conversely this means you need to design your main layout to work well at those sizes). One pixel smaller than this and it changes to the simpler, linear, vertical look that you'd expect on an iPhone.
Moodle generally has a 3 column design which starts to look a bit cramped at iPad portrait sizes. So we've altered Moodle Bootstrap trigger point to activate at exactly 768, so you'll see the "phone" layout if you hold your iPad vertically.
There's a few other breakpoints in the responsive.less file which are required because Moodle doesn't currently use a lot of Bootstrap HTML or the Bootstrap grid (apart from for the main three columns). Some are just repeats of core Bootstrap, others are tweaks to suit Moodle's existing HTML.
There were some earlier Bootstrap-based themes that automatically stepped down to 2 columns at this kind of width but this started to get complicated when content-first layouts were introduced.
I believe there's various Moodle Themes that enforce only two columns (though the last time I looked at that it wasn't exactly possible to do this perfectly, but you could get it most of the way there). They would probably be able to use the standard Boostrap 767px break-point. (And themes that put both block columns on the same side should be able to scale down to one, I think)
1. There's currently no way to do this via Moodle's existing CSS processing pipeline and use Bootstrap's Less compilation at the same time.
The same concept is possible in Bootstrap though. If you go to the main Bootstrap site they have a customization page (http://twitter.github.io/bootstrap/customize.html) which lets you switch off the stuff you don't want. In many Bootstrap use-cases you would just do this and then replace the standard CSS with the altered version. This unfortunately doesn't work for Moodle as we require a LESS compilation step in order to match up the Bootstrap CSS with the current Moodle HTML.
The same kind of thing could be added to Moodle's CSS processing pipeline relatively easily in a future Moodle though, where the theme config.php contains a list of the stuff you want to inherit from the parent theme. But so far 99% of the work on Bootstrap has been done within the theme itself, and this particlar function is something that needs to sit outside of the theme and in Moodle core in order to work. (I do have some code that does the LESS compilation transparently in PHP via the CSS preprocessor, but that's all within a single theme so it not exactly an answer to this particular issue.)
You can currently do it directly if you're happy with manual LESS compilation. If you look at the bootstrap/less/moodle.less file you should see that it's effectively a long list of stylesheet files that are compiled to produce the single output file. You would need to regenerate the CSS from the (modified) LESS and use that output in your theme. I intend to write some documentation on how to create child themes in this manner, I think it's the current best way for more dedicated themers (i.e. do more than add a logo and change some colors) to bring their work on top of Bootstrap. And the lessons learned from that should inform how that process gets built into Moodle.
2. That could either be an oversight or a design preference that someone put in. If most Moodle theme's have (the potential for) two columns on the front page then I'd say it's probably a bug and should be changed. I think someone may have already reported it, or possibly just commented in one of bug threads.
3. I'm not sure I understand this question. I think(?) you should be able to add icons to the pix folder and they'll just get picked up because all that is done in PHP code. As you say Base/Standard/Canvas don't have any images here (with the exception of the file-picker images in Base/pix, which should be there in Bootstrap/pix too since like Base it doesn't inherit from anywhere).
The same concept is possible in Bootstrap though. If you go to the main Bootstrap site they have a customization page (http://twitter.github.io/bootstrap/customize.html) which lets you switch off the stuff you don't want. In many Bootstrap use-cases you would just do this and then replace the standard CSS with the altered version. This unfortunately doesn't work for Moodle as we require a LESS compilation step in order to match up the Bootstrap CSS with the current Moodle HTML.
The same kind of thing could be added to Moodle's CSS processing pipeline relatively easily in a future Moodle though, where the theme config.php contains a list of the stuff you want to inherit from the parent theme. But so far 99% of the work on Bootstrap has been done within the theme itself, and this particlar function is something that needs to sit outside of the theme and in Moodle core in order to work. (I do have some code that does the LESS compilation transparently in PHP via the CSS preprocessor, but that's all within a single theme so it not exactly an answer to this particular issue.)
You can currently do it directly if you're happy with manual LESS compilation. If you look at the bootstrap/less/moodle.less file you should see that it's effectively a long list of stylesheet files that are compiled to produce the single output file. You would need to regenerate the CSS from the (modified) LESS and use that output in your theme. I intend to write some documentation on how to create child themes in this manner, I think it's the current best way for more dedicated themers (i.e. do more than add a logo and change some colors) to bring their work on top of Bootstrap. And the lessons learned from that should inform how that process gets built into Moodle.
2. That could either be an oversight or a design preference that someone put in. If most Moodle theme's have (the potential for) two columns on the front page then I'd say it's probably a bug and should be changed. I think someone may have already reported it, or possibly just commented in one of bug threads.
3. I'm not sure I understand this question. I think(?) you should be able to add icons to the pix folder and they'll just get picked up because all that is done in PHP code. As you say Base/Standard/Canvas don't have any images here (with the exception of the file-picker images in Base/pix, which should be there in Bootstrap/pix too since like Base it doesn't inherit from anywhere).
Are you adding that code in a .less file that comes with bootstrap or in a .css file? And what does the actually CSS you end up with look like, is the line just entirely missing or is it mangled in some strange way?
If it's in a .less file try:
background: #fff url(~"[[pix:theme|core/bground]]") repeat-x fixed;
The ~"abcdef" stuff tells the .less compiler to leave whatever is inside the quotes alone and simply output it. Moodle needs to deal with those square bracketed bits so you want to preserve them.
Also, does this not work on any part of Moodle or is it some specific div that you're trying to add a background to?
If it's in a .less file try:
background: #fff url(~"[[pix:theme|core/bground]]") repeat-x fixed;
The ~"abcdef" stuff tells the .less compiler to leave whatever is inside the quotes alone and simply output it. Moodle needs to deal with those square bracketed bits so you want to preserve them.
Also, does this not work on any part of Moodle or is it some specific div that you're trying to add a background to?