Hi all,
I've just converted the image sprite used by Bootstrap into the format that Moodle expects for it's icons. It turned out to be more of a faff than you might have expected so I thought I'd share the results in case anyone else would find this useful. You can get them here:
https://github.com/ds125v/moodle-theme_bootstrap_renderers/tree/master/pix
As well as the actual icons, there's also a script for generating them from the sprite image, and another script for changing the color of the icons, with a pink example set to show the effect. You'll need imagemagick installed for the script to work.
The sprite image is not totally regular so there may be some images that are 1 or 2 pixels off, if you spot any such icons I can fix it in the script (which currently just slices it into 140 equal size squares) and regenerate them quite easily. There's probably more icons that could be used, if you've any suggestions for any more icons I can convert then let me know.
I'm trying to use the sprite sheet itself wherever possible, but I needed the traditional set as well to cover any gaps until I can rewrite more of the icon stuff in renderers.
David Scotson
Oqallisissiat David Scotson-imit allatat
Hi Mary,
how are you switching between 2 columns and 3 columns depending on width? I've got it working going from 3 to 1 but I've been wanting to combine the block columns as space gets tighter. I think Danny Wahl also has something like this working?
Also, if you're testing responsive designs Firefox has a very neat Responsive Design Mode that lets you switch easily between various standard sizes/rotations e.g. landscape iPhone or portrait iPad or standard netbook. There's an intro video here, the responsive stuff starts about 1:20 but the other tools he talks about are very handy too.
how are you switching between 2 columns and 3 columns depending on width? I've got it working going from 3 to 1 but I've been wanting to combine the block columns as space gets tighter. I think Danny Wahl also has something like this working?
Also, if you're testing responsive designs Firefox has a very neat Responsive Design Mode that lets you switch easily between various standard sizes/rotations e.g. landscape iPhone or portrait iPad or standard netbook. There's an intro video here, the responsive stuff starts about 1:20 but the other tools he talks about are very handy too.
Hi Mary,
The stuff I'm working on now tries to do exactly that with renderers. It's an open question as to how far it will take us, but it's looking positive so far.
You could try integrating some of my renderers into your theme if you'd like. It should make the HTML a bit more like what Bootstrap is expecting and I'd appreciate any testing or improvements you could offer.
I've recently seperated out the stuff I think is ready for wider user/testing which is now the master branch, and the Work-In-Progress stuff which you might be interested in too is on the dev branch.
I've got instructions for testing using my developer theme and for copying the renderers into any other theme that includes a Bootstrap.css file in this file:
https://github.com/ds125v/moodle-theme_bootstrap_renderers/blob/master/testing.txt.
It's currently a bit awkward to integrate the changes just for testing purposes, I'm hoping I can streamline that process somehow but for people like yourself that have theme development and renderer experience it's merely a minor roadbump. (In fact, I think the best thing may be to get people to use these renderers in their themes and then get people to test those themes, and send the feedback upstream, but we'll see).
(Note that if you use my theme to test, it is currently stuck in random mode unless you edit the code, as I've not got around to creating a settings page yet)
The pagination stuff is probably a highlight at the moment, as it's mostly self contained and so doesn't break lots of other stuff, the rest is mostly small steps on the road to somewhere.
The stuff I'm working on now tries to do exactly that with renderers. It's an open question as to how far it will take us, but it's looking positive so far.
You could try integrating some of my renderers into your theme if you'd like. It should make the HTML a bit more like what Bootstrap is expecting and I'd appreciate any testing or improvements you could offer.
I've recently seperated out the stuff I think is ready for wider user/testing which is now the master branch, and the Work-In-Progress stuff which you might be interested in too is on the dev branch.
I've got instructions for testing using my developer theme and for copying the renderers into any other theme that includes a Bootstrap.css file in this file:
https://github.com/ds125v/moodle-theme_bootstrap_renderers/blob/master/testing.txt.
It's currently a bit awkward to integrate the changes just for testing purposes, I'm hoping I can streamline that process somehow but for people like yourself that have theme development and renderer experience it's merely a minor roadbump. (In fact, I think the best thing may be to get people to use these renderers in their themes and then get people to test those themes, and send the feedback upstream, but we'll see).
(Note that if you use my theme to test, it is currently stuck in random mode unless you edit the code, as I've not got around to creating a settings page yet)
The pagination stuff is probably a highlight at the moment, as it's mostly self contained and so doesn't break lots of other stuff, the rest is mostly small steps on the road to somewhere.
You might want to put something in your master branch, even if it's just a readme file saying that people should look in other branches. It confused me twice, once a few days ago when I went to github to see what you'd done and found (what I thought was) an empty repository. And then again just there when I did a git clone and ended up with (what looked like) an empty directory.
Do you mind if I steal the user dropdown idea? Having those links handy is a good idea, though I might try and combine it with the currently logged in and logout links that are usually in the top right.
One thing I did notice is that if you add a label to a course, it grabs the color of the default Bootstrap label (usually gray). I see you've worked around the same issue in the view profile. I'm trying to keep track off all such Moodle/Bootstrap collisions here:
https://github.com/ds125v/moodle-theme_bootstrap_renderers/blob/master/style/undo.css
So if you find any more then let me know. Actually just noticed I forgot one .container is used is the quiz to add questions and Bootstrap makes it too wide to be usable.
Do you mind if I steal the user dropdown idea? Having those links handy is a good idea, though I might try and combine it with the currently logged in and logout links that are usually in the top right.
One thing I did notice is that if you add a label to a course, it grabs the color of the default Bootstrap label (usually gray). I see you've worked around the same issue in the view profile. I'm trying to keep track off all such Moodle/Bootstrap collisions here:
https://github.com/ds125v/moodle-theme_bootstrap_renderers/blob/master/style/undo.css
So if you find any more then let me know. Actually just noticed I forgot one .container is used is the quiz to add questions and Bootstrap makes it too wide to be usable.