Theme based on Bootstrap. Moodle 2.9.7

Theme based on Bootstrap. Moodle 2.9.7

by Dave Emsley -
Number of replies: 16

I'm trying to work on a theme based on bootstrapbase.  I've created the theme and installed it and that all works OK but I'm struggling with the menu.

I've changed the navbar-inner class and I'm happy with it.  BUT there is a div overlaying this which appear to be container-fluid but I know this is not the case.

<header id="yui_3_17_2_2_1468503123355_202" class="navbar navbar-fixed-top moodle-has-zindex" role="banner">
<nav id="yui_3_17_2_2_1468503123355_201" class="navbar-inner" role="navigation">
<div id="yui_3_17_2_2_1468503123355_200" class="container-fluid">
<a class="brand" href="http://192.168.1.40/~learningdomain/moodle">Internal Development</a>
<a class="btn btn-navbar" data-target=".nav-collapse" data-toggle="collapse">
<div class="usermenu">....</div>
<div id="yui_3_17_2_2_1468503123355_199" class="nav-collapse collapse">
<div id="custom_menu_1" class="yui3-menu yui3-menu-horizontal custom-menu" role="menu">
<div id="yui_3_17_2_2_1468503123355_198" class="yui3-menu-content" role="presentation">
<ul class="first-of-type" role="presentation" id="yui_3_17_2_2_1468503123355_222">
</div>
</div>
<ul class="nav pull-right">....</ul>
</div>
</div>
</nav>
</header>
Can anyone shed light on this matter please?


Cheers


Dave Emsley

Attachment moodle2.png
Average of ratings: -
In reply to Dave Emsley

Re: Theme based on Bootstrap. Moodle 2.9.7

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi,

It would have helped had you also added the layout file that the header is part of. Looking at the code you posted it looks like you are using the YUI menu from the old themes we had prior to Bootstrapbase landing in Moodle 2.5.

If you want to use Bootstrapbase then you need to add the html that goes with that theme. You can find it HERE.

Hope that helps?

Mary

Average of ratings: -
In reply to Mary Evans

Re: Theme based on Bootstrap. Moodle 2.9.7

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

YUI Menu?  The ids are injected by YUI at the browser end.  Therefore the code posted is browser output.  The rest of the code is Bootstrap 2.3.2 so you already have the markup you need just with an error to detect and find where the extra starting div is.

Average of ratings: -
In reply to Gareth J Barnard

Re: Theme based on Bootstrap. Moodle 2.9.7

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

I beg to differ, discounting the YUI id, I think you will find that you are wrong Gareth, as the Bootstrap dropdown menu does not have these classes: See pink highlights.

<div id="custom_menu_1" class="yui3-menu yui3-menu-horizontal custom-menu" role="menu">
<div id="yui_3_17_2_2_1468503123355_198" class="yui3-menu-content" role="presentation">

Cheers,

Mary

EDITED:

More proof...if you are not convinced.

https://github.com/moodle/moodle/blob/MOODLE_29_STABLE/lib/outputrenderers.php#L3517-L3518

Average of ratings: -
In reply to Mary Evans

Re: Theme based on Bootstrap. Moodle 2.9.7

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Fair enough.

Average of ratings: -
In reply to Gareth J Barnard

Re: Theme based on Bootstrap. Moodle 2.9.7

by Dave Emsley -

It is a new download of Moodle I've used.  All the YUI menu stuff appear to be in there still.  I've compared the layouts in my bootstrapbase folder with the ones you linked to Mary and they are the same so I'm really confused now.

I highlighted the div causing the problem above Gareth - 

<div id="yui_3_17_2_2_1468503123355_200" class="container-fluid">



Thanks


Dave

Average of ratings: -
In reply to Dave Emsley

Re: Theme based on Bootstrap. Moodle 2.9.7

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Dave,

Yes I know YUI CSS is still used in some parts of Moodle, but NOT in the Bootstrapbase theme as it is blocked in the bootstrapbase/config.php. See here: https://github.com/lazydaisy/moodle/blob/MOODLE_31_STABLE/theme/bootstrapbase/config.php#L34

Which is perhaps what is missing off your theme?

Try adding that line to your theme's config.php and then Purge all cache before testing again and let me know how you get on.

Thanks

Mary

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

Re: Theme based on Bootstrap. Moodle 2.9.7

by Dave Emsley -

Adding that line into my theme's config file hasn't done the job as, once the custom menu - via theme settings - is present the background image with the custom menu appears.

More confused than ever.


Dave


Average of ratings: -
In reply to Dave Emsley

Re: Theme based on Bootstrap. Moodle 2.9.7

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

This:

<ul class="first-of-type" role="presentation" id="yui_3_17_2_2_1468503123355_222">

Looks soo wrong as 'first-of-type' is more commonly a pseudo selector and there is no closing 'ul' tag.

Average of ratings: Useful (1)
In reply to Gareth J Barnard

Re: Theme based on Bootstrap. Moodle 2.9.7

by Dave Emsley -

That bit appears to be rendered by the code:

                <?php echo $OUTPUT->custom_menu(); ?>


Up in the top of the rendered page is: 

<html class="yui3-js-enabled" lang="en" xml:lang="en" dir="ltr" id="yui_3_17_2_1_1469113473879_129">


Which makes me think that YUI is not being turned off by the line $THEME->yuicssmodules = array(); in my config file.


Sorry but I am at a loss here.  I appreciate your, and Mary's help.

Cheers


Dave


Average of ratings: -
In reply to Dave Emsley

Re: Theme based on Bootstrap. Moodle 2.9.7

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Dave are you using Bootstrapbase as a parent in your theme's config.php?

Average of ratings: -
In reply to Dave Emsley

Re: Theme based on Bootstrap. Moodle 2.9.7

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Dave,

I bet you forgot to add bootstrapbase as a parent in the config.php as you appear to be missing the custommenu renderer from bootstrapbase/

https://github.com/moodle/moodle/blob/master/theme/bootstrapbase/renderers/core_renderer.php#L124-L181

Which is what I was alluding to in my very first comment which Gareth thought I was taking nonsense in, and probably still does!

Average of ratings: -
In reply to Gareth J Barnard

Re: Theme based on Bootstrap. Moodle 2.9.7

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Hi Gareth, it's all part of the YUI menu, it should be there in Base theme if you switched to that theme or canvas theme and inspect the menu.

Here it is on Moodle 3.1.1 - the highlighted is all the menu note the bit in white has first-of-type...

yui

Average of ratings: -
In reply to Mary Evans

Re: Theme based on Bootstrap. Moodle 2.9.7

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Fair enough.  Still got a missing:

</ul>

though.

Average of ratings: -
In reply to Gareth J Barnard

Re: Theme based on Bootstrap. Moodle 2.9.7

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

What has a missing </ul>?

Average of ratings: -
In reply to Gareth J Barnard

Re: Theme based on Bootstrap. Moodle 2.9.7

by Mary Evans -
Picture of Core developers Picture of Documentation writers Picture of Peer reviewers Picture of Plugin developers Picture of Testers

Or did you mean Dave's YUI Menu source code copy?

<ul class="first-of-type" role="presentation" id="yui_3_17_2_2_1468503123355_222">
</div>
</div>
<ul class="nav pull-right">....</ul>

Who knows what's happening in that theme...it could be a problem with the Theme settings page for all we know, where the menu is added in the first place, plus it could be a parent of Base theme like my Tiny Bootstrap Theme...now that would be a laugh...although that does have a renderer in it for the Bootstrap Menu.

Ah well...

.

Average of ratings: -