SUpporting Clean theme while using Bootstrap 4 templates

SUpporting Clean theme while using Bootstrap 4 templates

by Richard Jones -
Number of replies: 20
Picture of Plugin developers Picture of Testers

Hi Theme experts

Moodle 3.4, 3.5 themes Boost vs Clean.  Somewhat related to the previous post.

I'm finishing up a plugin and am using a mustache template to control button bar layouts.  

Example context (json):
        {
         "class": "mod_simplelesson_page_links",
         "linkdata": {"link": "#" "text": "click me"},
         "buttonclass": "btn btn-primary"
        }


<div class = "{{class}}">
      <ul class="list-inline">
        {{#linkdata}}
          <li class="list-inline-item">
             <a class="{{buttonclass}}" href="{{{link}}}">{{text}}</a>
          </li>
        {{/linkdata}}
      </ul>
</div>

Looks great in Boost but comes out as a bulleted list of buttons in Clean, ugh.

In former days I would have used css in the plugin's styles.css to achieve the same effect.  Can these two systems co-exist?  Or should I re-write the template to not use Bootstrap 4?

Attachment clean_thing.jpg
Average of ratings: -
In reply to Richard Jones

Re: SUpporting Clean theme while using Bootstrap 4 templates

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

Write suitable parent theme detection code in PHP then transpose the result to the Mustache template to apply the appropriate classes.

Average of ratings: -
In reply to Gareth J Barnard

Re: SUpporting Clean theme while using Bootstrap 4 templates

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Or if they dont clash, just add both sets of classes - if the theme used is BS2 (Clean) then it will apply that css, if its BS4 (Boost) it will apply that css.

The issue comes if there are classes which are the same, but the css style has changed.

Average of ratings: -
In reply to Richard Oelmann

Re: SUpporting Clean theme while using Bootstrap 4 templates

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

However, bear in mind its not the button classes that are the issue there (they are actually working fine in your image), its the list-inline and list-inline-item you need to add the relevant classes to. Perhaps by realising that not putting them in a list in the first place will put them along the row from right to left anyway.

Average of ratings:Useful (1)
In reply to Richard Oelmann

Re: SUpporting Clean theme while using Bootstrap 4 templates

by Richard Jones -
Picture of Plugin developers Picture of Testers

Blinded by my own "cleverness", of course, you are right.  Simple.

Average of ratings: -
In reply to Richard Oelmann

Re: SUpporting Clean theme while using Bootstrap 4 templates

by Richard Jones -
Picture of Plugin developers Picture of Testers

Hi Richard, thanks.  It troubles me though that I didn't really understand this idea.  Are you saying multiple classes in the template or in the styles.css?  Would you explain a bit more, if you don't mind, it would be appreciated.

Average of ratings: -
In reply to Richard Jones

Re: SUpporting Clean theme while using Bootstrap 4 templates

by Richard Oelmann -
Picture of Core developers Picture of Plugin developers Picture of Testers

Multiple classes in the html - so in this case in the template.

If they dont exist in the theme css (eg BS2 classes not existing in Boost and BS4 classes not existing in Clean) they would effectively be ignored as there is no css to apply, so each family of themes would apply the relevant css 'automatically'.

This is exactly what I did a few years ago when moving between BS2 and 3 and changing a bootstrap grid text-filter I had.


The complication comes if the same classes are used, but the styles applied are different. Then you would need to add your own class and extract the relevant css into your plugin styles.css independent from any BS version. I don't think that's an issue here in your example, just something to be aware of when adding multiple version class names.

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

Re: SUpporting Clean theme while using Bootstrap 4 templates

by Richard Jones -
Picture of Plugin developers Picture of Testers

Thanks Gareth, seems like an interesting idea but could get a bit cumbersome if you wanted to support many legacy themes (which I don't).

Average of ratings: -
In reply to Richard Jones

Re: SUpporting Clean theme while using Bootstrap 4 templates

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

You only have to detect 'two' themes Richard J smile Or given that is a binary concept, one theme for the logic to work.

Average of ratings:Useful (1)
In reply to Richard Jones

Re: SUpporting Clean theme while using Bootstrap 4 templates

by Mary Evans -

Oh come on...you must be kidding...

If you know how to do any of that Mustache stuff, then you are bright enough to find out what the classes are to do the sane for the clean theme.

What I am saying is please have the decency to add the correct CSS classes that will style the Clean theme’s Template.

cheers

Mary

Average of ratings: -
In reply to Mary Evans

Re: SUpporting Clean theme while using Bootstrap 4 templates

by Richard Jones -
Picture of Plugin developers Picture of Testers

Thanks Mary. I'm completely new to "this mustache stuff" and  I was curious to know the implications for Moodle theming.

Yes, I guess I am bright enough, even though I haven't yet reached your level of wisdom wink 

Average of ratings: -
In reply to Richard Jones

Re: SUpporting Clean theme while using Bootstrap 4 templates

by Mary Evans -

ROFL

You are a card...thanks for making me laugh!

Well for a newbie you have done pretty well.

You can add  CSS class selectors to your html in a Mustache Template if you want it to work in Clean as well as Boost themes.

You might like to try looking at the  LOOK & LEARN post I added some time ago and pinned to the top of this Forum page, which explains how to customise your Moodle site by using the Text Editor in the Frontpage and other course pages. There used to be a list of Bootstrap 2.3 examples of how to style the buttons, but it looks to be missing from the list.

Hope that helps?

Cheers

Mary

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

Re: SUpporting Clean theme while using Bootstrap 4 templates

by Richard Jones -
Picture of Plugin developers Picture of Testers

Hi Mary

Actually mustache is just html with fancy bits isn't it?  The links were useful thanks.  Richard's suggestion of leaving out the list styling seems to be the easiest.

Cheers

Richard

Average of ratings: -
In reply to Richard Jones

Re: SUpporting Clean theme while using Bootstrap 4 templates

by Mary Evans -

Mustache is a bit of all sorts of stuff really, but it allows HTML but not PHP which is what we are used to when creating themes for Moodle.

As for what Richard has suggested...Yes...I guess that is best...however I was hoping to find the inline list styles classes for Bootstrap 2,3.2.

Cheers

M

Average of ratings: -
In reply to Mary Evans

Re: SUpporting Clean theme while using Bootstrap 4 templates

by Richard Jones -
Picture of Plugin developers Picture of Testers

I'm finding a few advantages:

  • It's neater than using html_writer because you are closer to the page layout you want in html.
  • It reduces the need (or temptation) to put logic in the renderer (I'm finding it useful to tuck those data preparation tasks away in classes as well so they don't clutter up page logic).
  • It reduces the need for styles.css classes (which are always a bit irritating to debug because of the sluggish theme developer mode). 

What I did find was that the developer documentation on Moodle (same one you link to) makes it seem more complicated than it really is.  I know, I could fix that and maybe I will write a page or a blog article somewhere, sometime. Promises, promises.

Anyway now I'm happy that my naive post has morphed into a useful discussion wink

Cheers

Richard

Average of ratings: -
In reply to Richard Jones

Re: SUpporting Clean theme while using Bootstrap 4 templates

by Mary Evans -

Check this out HERE

It;'s my website that I use to test ideas in.

As you will see the following  button coding works OK in Clean theme using Boostrap 2.3.2

Here is what I added to the Frontpage.

<div class="btn-toolbar" style="margin: 0;">
    <div class="btn-group ">
        <button class="btn  btn-primary">Left</button>
    </div>
    <div class="btn-group">
         <button class="btn  btn-primary">Middle</button>
    </div>
    <div class="btn-group">
        <button class="btn  btn-primary">Right</button>
    </div>
</div>

And this is what it looks like in Boost theme...

http://visible-expression.co.uk/vle/?theme=boost


Hope this helps also?

Cheers

Mary

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

Re: SUpporting Clean theme while using Bootstrap 4 templates

by Richard Jones -
Picture of Plugin developers Picture of Testers

Thanks Mary

That looks good.

You could actually make a simple mustache template with that data that you could use to display as many buttons as you like, perhaps with different classes. Like so:

button template'

Cheers

Richard

Average of ratings:Useful (1)
In reply to Richard Jones

Re: SUpporting Clean theme while using Bootstrap 4 templates

by Mary Evans -

Cool!!!

What a great idea! That would work lovely in a Quiz.

Thanks

Mary

Average of ratings: -