Themes

M2.7 - More Theme - Adding Bootstrap Tabbed content

 
 
Picture of Chris Kenniburg
M2.7 - More Theme - Adding Bootstrap Tabbed content
Group Particularly helpful Moodlers

I am trying to figure out how to add some tabbed content to the main moodle homepage Topic Section.  

I was hoping that someone might have a step sheet to just copy and paste using the More theme.  

I have looked here: http://jshirley.github.io/bootstrap/javascript.html#tabs

and here:  http://getbootstrap.com/javascript/#tabs

I guess I am missing a step and I cannot quite get it to work properly.  

 
Average of ratings: -
It's only an avatar...
Re: M2.7 - More Theme - Adding Bootstrap Tabbed content
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

You might prefer something simple like this...

http://fotis.co/projects/simpletabs/

 
Average of ratings: -
Picture of Chris Kenniburg
Re: M2.7 - More Theme - Adding Bootstrap Tabbed content
Group Particularly helpful Moodlers

Thanks Mary. 

I was hoping to find an easy solution using bootstraps built in functionality and the More theme without doing too many hacks.  Is there any info on how to do this?

 
Average of ratings: -
It's only an avatar...
Re: M2.7 - More Theme - Adding Bootstrap Tabbed content
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Not for tabs...at least not that I know of. However there are tutorials how to add JS and jQuery into Moodle along with all the other theme related issues. You will find the link to those documentation filesat the top of the this Forum page.

Cheers

Mary

 
Average of ratings: -
Picture of Hartmut Scherer
Re: M2.7 - More Theme - Adding Bootstrap Tabbed content
Group Particularly helpful Moodlers

Hi Chris,

This depends on the bootstrap version that your theme is based on. Essential is based on Bootstrap 2.3. Search for Tabbable example HERE and copy and paste the code into the topic section of your homepage. Nothing else is needed. You should see the tabs immediately.

If you switch to a theme based on Bootstrap 3, you will find the components HERE.

With kind regards,

Hartmut

 
Average of ratings: -
It's only an avatar...
Re: M2.7 - More Theme - Adding Bootstrap Tabbed content
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Duh! I forgot about that!

So easy...

I'm in Section 1.

Howdy, I'm in Section 2.

It wont work here as this is a forum but it does in a the site topic area!

This is the code I copied from the link Hartmut added...

    <div class="tabbable"> <!-- Only required for left/right tabs -->
    <ul class="nav nav-tabs">
    <li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
    <li><a href="#tab2" data-toggle="tab">Section 2</a></li>
    </ul>
    <div class="tab-content">
    <div class="tab-pane active" id="tab1">
    <p>I'm in Section 1.</p>
    </div>
    <div class="tab-pane" id="tab2">
    <p>Howdy, I'm in Section 2.</p>
    </div>
    </div>
    </div>

 
Average of ratings: -
Picture of Chris Kenniburg
Re: M2.7 - More Theme - Adding Bootstrap Tabbed content
Group Particularly helpful Moodlers

I have tried copy/pasting the code but the tabs do not toggle.  

 
Average of ratings: -
Picture of Chris Kenniburg
Re: M2.7 - More Theme - Adding Bootstrap Tabbed content
Group Particularly helpful Moodlers

Moodle 2.7 using More theme.


I was able to get tabs working but I had to paste in this code in the footer in Code View:

<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>

<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

I got the example from here:

http://www.tutorialrepublic.com/codelab.php?topic=bootstrap&file=create-dynamic-tabs-via-data-attribute

Is there an easier or better way of handling this?

 
Average of ratings: -
Gareth J Barnard
Re: M2.7 - More Theme - Adding Bootstrap Tabbed content
Group DevelopersGroup Particularly helpful Moodlers

Hi Chris,

That is the BS V3 code and More like Clean uses BS 2.3.2.  If you want to use BS3 jQuery code then that will conflict with the YUI port of the code.  So you have to exclude it in the 'config.php' file and use the full jQuery version instead.  When using jQuery with Moodle follow this: http://docs.moodle.org/dev/jQuery - as any other solution will lead to issues.  But get the V2.3.2 version of the jQuery from http://getbootstrap.com/2.3.2/index.html.

Cheers,

Gareth

 
Average of ratings: -
Picture of Chris Kenniburg
Re: M2.7 - More Theme - Adding Bootstrap Tabbed content
Group Particularly helpful Moodlers

Does Moodle or specifically the More theme come with the Bootstrap.min.js and if so how do we activate it?

Also, I did see where in lib.php I add this to load in Jquery to the theme.

function theme_sometheme_page_init(moodle_page $page) {

    $page->requires->jquery();

}


So now in order to get tabs working I am assuming I just need the final piece which is the bootstrap js and I am wondering the best way to do that.

 
Average of ratings: -
Picture of Richard Oelmann
Re: M2.7 - More Theme - Adding Bootstrap Tabbed content
Group Particularly helpful MoodlersGroup Testers

I believe Clean and More both come with the YUI ports of the javascript from Bootstrap and not the jquery verions.

If there are parts of the jquery which are not available in the yui port and you need to implement the jquery for that particular item, it may be that you will need to separate out and just download that section of the bootstrap jquery rather than the full bootstrap.min.js to avoid yui/jquery clashes - Gareth/David/Bas, any suggestions? - I haven't tried this yet, so far I've stuck with using the provided yui in Clean or the full bootstrap3 jquery, I haven't tried this kinkd of mix and match, so happy to learn from anyone who has smile

 
Average of ratings: -
Gareth J Barnard
Re: M2.7 - More Theme - Adding Bootstrap Tabbed content
Group DevelopersGroup Particularly helpful Moodlers

Pragmatically, you could run a cut down version of jQuery BS along side YUI.  But if you are going to go to the effort of implementing jQuery, then what's the point?  It's relatively easy to add the jQuery version:

1. So, get the JS from inside the 'js' folder of the archive from: http://getbootstrap.com/2.3.2/index.html.

2. Rename the '.min' version to use a middle underscore, i.e. 'bootstrap.min.js' -> 'bootstrap_min.js' as Moodle does not like periods in the middle of filenames.

3. In 'config.php' of the theme add:

$THEME->parents_exclude_javascripts = array(

    'bootstrapbase' => array(

        'moodlebootstrap'

    )

);  // Exclude YUI Boostrap code.

I know it's a YUI module, but it's actually loaded another way - long story.

4. Create a 'jquery' folder in your theme's folder and place in there the 'bootstrap.js' file.

5. Still in the 'jquery' folder, create a file called 'plugins.php' with:

$plugins = array(

    'bootstrap' => array('files' => array('bootstrap_min.js'))

);

6. At the top of your layout files add:

$PAGE->requires->jquery();

$PAGE->requires->jquery_plugin('bootstrap', 'theme_YOURTHEMENAME');

Changing 'YOURTHEMENAME' as appropriate.

Job done!

Gareth

 
Average of ratings:Useful (1)
Picture of Chris Kenniburg
Re: M2.7 - More Theme - Adding Bootstrap Tabbed content
Group Particularly helpful Moodlers

Thanks Gareth for the detailed instructions but it didn't work for me.

Maybe I should explain more about what I am trying to do and maybe an easier solution is possible.

  • Clone of M2.7's "More" theme so that we have some basic control over styling.  I just changed every reference to "more" to something else so it shows up as a different theme with it's own settings.
  • Using the new theme's config.php file I changed the default layouts to only allow 1 and 2 column layouts. We don't like three columns.
  • Using the theme's lib.php file I enabled the Jquery for Moodle as described previously.  
  • I believe More uses the layout files of Clean, so would I add the following to the Clean theme's layout files or can I just copy all those to the new themes folder??
    • $PAGE->requires->jquery();
    • $PAGE->requires->jquery_plugin('bootstrap', 'theme_YOURTHEMENAME');

My goal is to just develop a simple theme that is a slightly modified "More" clone.  WIth the Jquery and Bootstrap.js I hope to bring some UI tweaks to the Moodle homepage with tabs and accordian styled content to help our users get around better.

I am going to experiment some more tomorrow.  If you have any suggestions please add them here.

 
Average of ratings:Useful (1)
Gareth J Barnard
Re: M2.7 - More Theme - Adding Bootstrap Tabbed content
Group DevelopersGroup Particularly helpful Moodlers

Ok, ignore step 6 and change:

function theme_sometheme_page_init(moodle_page $page) {

    $page->requires->jquery();

}

to

function theme_sometheme_page_init(moodle_page $page) {

    $page->requires->jquery();

   $page->requires->jquery_plugin('bootstrap', 'theme_sometheme');

}

 
Average of ratings: -
Picture of Chris Kenniburg
Re: M2.7 - More Theme - Adding Bootstrap Tabbed content
Group Particularly helpful Moodlers

Thanks Gareth but that didn't work either.  

What ends up happening is that the plugins.php file you had me create in the jquery folder has it's text displayed above the site title.

So I guess the only thing left is to try and get the bootstrap_min.js file to load properly.

 
Average of ratings: -
Picture of Chris Kenniburg
Re: M2.7 - More Theme - Adding Bootstrap Tabbed content
Group Particularly helpful Moodlers

I was able to get the bootstrap_min.js file to load by adding this to config.php and renaming the jquery folder to javascript:

$THEME->javascripts = array( 'bootstrap_min' );


Do you think keeping your other steps to load the jquery are fine?  I also removed : 

$page->requires->jquery_plugin('bootstrap', 'theme_dps');  and the plugins.php file.


Attached is the entire theme as it is now.

 
Average of ratings: -
Gareth J Barnard
Re: M2.7 - More Theme - Adding Bootstrap Tabbed content
Group DevelopersGroup Particularly helpful Moodlers

No, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no, no!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

That is not how it is done and will only lead to more of a mess.

I suspect the 'plugins.php' file has a missing '<?php' which is why it is failing.  Please see: http://docs.moodle.org/dev/jQuery#Add_the_plugin_information_to_the_plugins.php_file and https://github.com/moodleman/moodle-theme_essential/blob/master/jquery/plugins.php type thing.

I'll have a quick look at the theme.

 
Average of ratings: -
Gareth J Barnard
Re: M2.7 - More Theme - Adding Bootstrap Tabbed content
Group DevelopersGroup Particularly helpful Moodlers

Ok, this fixes the loading of the jQuery.  'plugins.php' now working and 'init' function uses 'bootstrap' instead of 'bootstrap_min' to reference the key in the array in 'plugins.php'.  It's only the filename that has '_min'.

 
Average of ratings: -
Picture of Chris Kenniburg
Re: M2.7 - More Theme - Adding Bootstrap Tabbed content
Group Particularly helpful Moodlers

Thanks Gareth,

I was able to get this working and it was a stupid issue on my end - Folder/file permissions!  

I had copied and tried to mimic the way Essential includes the individual jquery files.  I didn't catch it right away but the jquery folder and files didn't allow access to anyone but my account on Ubuntu.  

Now that I fixed the file permissions things are working as expected.  Thanks for you help in guiding the proper inclusion of the files.

 
Average of ratings: -
It's only an avatar...
Re: M2.7 - More Theme - Adding Bootstrap Tabbed content
Group DevelopersGroup Documentation writersGroup Particularly helpful MoodlersGroup Testers

Essential use both Richard

 
Average of ratings: -
Picture of Richard Oelmann
Re: M2.7 - More Theme - Adding Bootstrap Tabbed content
Group Particularly helpful MoodlersGroup Testers

I had forgotten that Mary - It uses the individual 'bits' though, rather than the full bootstrap.min.js

So Chris - take a look at Essential and how the jquery/bootstrap_plugins/tab_2.3.2.js file has been added there. Should do exactly what you need!

 
Average of ratings: -