BUZZ- the most beautiful database template, how it works?

BUZZ- the most beautiful database template, how it works?

by William Lu -
Number of replies: 11
Picture of Particularly helpful Moodlers

BUZZ- the most beautiful database template, how it works?

I got the BUZZ database preset from Moodle.org, imported it into my course and it displays the ‘List view’ beautifully and magically:

  1. Each new row has an alternative colour
  2. When mouse over a row, colour changed
  3. Table border got shade
  4. All cell has a border 

BUZZ

I tried to understand how Martin did it, found that in ‘List template’, there is a table in ‘Header’, but no any table in ‘Repeated entry’, nor in ‘Footer’.

There are some codes in CSS template, if you clean the CSS template, make no much different to list view.

This frustrated me: whenever I want to add or remove or modify a field, the Beauty disappeared, the rows muddled together, not inside a table anymore, only leave header in table.

My questions are:

  1. How did Martin layouts the ‘Repeated entry’ without put them into table?
  2. How the header and rows got shade without any code in CSS template? Is it from current theme’s CSS?
  3. How did Martin define the row’s alternative colour?

I’ve been wondering this BUZZ preset for years; need help to the know-how. It is so beautiful; I love it and want to get it.

Thanks

Average of ratings: -
In reply to William Lu

Re: BUZZ- the most beautiful database template, how it works?

by Helen Foster -
Picture of Core developers Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

Hi William, nice to read that you like the Buzz database template. smile The secret to understanding how it works is to always disable the editor when you view the list template. You have to do it every time you look at the list template page and never enable it, otherwise when you save the template it ends up broken.

With the editor disabled you'll notice that that the repeated entry field contains table rows, and there is actually something in the footer! Hopefully you can figure out the answers to all your questions now, otherwise let me know if you'd like more explanation of how the template works.

Average of ratings:Useful (1)
In reply to Helen Foster

Re: BUZZ- the most beautiful database template, how it works?

by William Lu -
Picture of Particularly helpful Moodlers

Dear Helen,

Yes, Yes, I can see it! Thanks. This is the first time I use the 'disable editor' button. 

The Table/DHTML code/Class explained most of my questions. 

But please help me to understand my last question:

How does a new row automatically change to an alternative colour?  

I guess the class 'generaltable'; 'c1' c0' 'c2' are from my  theme CSS, is it right? Do they helped to make the auto alternative rows?

Thank you again for your quick answer.

 

William

Average of ratings: -
In reply to William Lu

Re: BUZZ- the most beautiful database template, how it works?

by Itamar Tzadok -

The actual css definition depends on the theme you are using and possibly also the Moodle version.

If you're not concerned with IE8 or earlier, one definition that sets the background-color of the odd rows in tables with class 'generaltable' (no need for c1, c2 etc.) is the following:

.generaltable tbody>tr:nth-child(odd)>td{
    background-color:#f9f9f9
}

If you want to set the background-color of the even rows, replace odd with even or add another definition for the even rows.

You can add these definitions in your theme for site global effect, or in the css tab of the Database activity for activity local effect.

hth smile

Average of ratings:Useful (1)
In reply to Itamar Tzadok

Re: BUZZ- the most beautiful database template, how it works?

by William Lu -
Picture of Particularly helpful Moodlers

Dear Itamar, thank you for your instruction, I found it now. It is in: moodle/theme/bootstrapbase/style/moodle.css

I also removed the c0,c1, c2, c3 in the BUZZ, make no diffrecnece, don't know why the style sheet has the c0, c1,c2 etc difined.

Thanks to you and Helen, you have answered all of my questions.

I can apply what I learned from you to my database templates now.

Love Database, love Moodle.

Average of ratings: -
In reply to William Lu

Re: BUZZ- the most beautiful database template, how it works?

by Margaret Richards -

I've just found this BUZZ DB template to be quite useful as it's been a few years since I've had to set one up from scratch. I have already tweaked it quite a bit to fix some problems which I assume come from this being a 2 year old download (I'm in Moodle 3.0 - I downloaded William's zip in this thread). 

My biggest problem now seems to be that in list view all of my rows are green; the CSS included in the pre-set should make the rows white (and alternately gray according to William's comments) and I even tried setting the HTML color to white. I assume this is all over-ridden by some code in my theme since it's the same green color as my blocks. 

Any advice? I'm not a skilled programmer by any means and I'm the sole admin / creator / teacher of this course so the more detailed you can be in explaining where to go and what to change, the better! Thanks.

Attachment DB_CSS.JPG
Attachment html_DB_list.JPG
Average of ratings: -
In reply to Margaret Richards

Re: BUZZ- the most beautiful database template, how it works?

by William Lu -
Picture of Particularly helpful Moodlers

Hi Margaret,

Have you tried on a different theme? If any other theme displays the Table layout as expected?

I tried to use you attached file, but it is not a Database Preset, not a Course Backup file sad.



Average of ratings: -
In reply to William Lu

Re: BUZZ- the most beautiful database template, how it works?

by Margaret Richards -

I tried 2 other themes and it still uses some theme color for the rows. Attached is the preset file this time (I think!). Thanks!

Average of ratings: -
In reply to Margaret Richards

Re: BUZZ- the most beautiful database template, how it works?

by William Lu -
Picture of Particularly helpful Moodlers

Hi Margaret,

tried 2 other themes and it still uses some theme color for the rows. 

Oh, not good, you might have to try it on other Moodle Sites sad.

You can try anything on Moodle Demo Sites: https://moodle.org/demo/

You are welcome to try on my Moodle Cloud site as well: https://william.moodlecloud.com

And I have modified your preset, please have a test here: https://william.moodlecloud.com/mod/data/view.php?id=89

layout

Attached is the preset file for you.

Average of ratings: -
In reply to William Lu

Re: BUZZ- the most beautiful database template, how it works?

by Margaret Richards -

[I posted what is below, then scrolled back up through this threat and saw Helen's comment about disabling the editor for list view. Could this be the answer to my problem? If so, how do I disable the editor and how do I actually make edits to the List View??]

Thank you! But I found a very strange problem now. The template you sent looked great but I wanted to add a new field. 

Changing the Add template was fine, the View Single was fine, but when I changed View List I ended up with the repeated entries being just a string of text (the header was fine - see screenshot). I checked and checked, used code compare, compared the repeated code against the original listtemplate.html in the zip preset file you sent and everything looked fine, just like I'd added 1 more row with a field that was correctly added. I tried this on my own site and on the Moodle test site with the same result.

Then I experimented: on the Moodle test site I created a new DB activity, used your preset, added 2 entries and viewed the list. Everything looked fine. Then I went into the templates, opened the list view template, made no changes but clicked Save Template, went back to list view: everything looked fine.

THEN I went back into templates, opened the list view template, clicked the "See more buttons" option in the WYSIWYG bar, made NO changes, didn't even click inside the editor, clicked save, went back to list view and now the entry was a string of text! Again, this happened on my site AND in the moodle test site. 

So all I can conclude is that there must be some bug within the DB activity itself? Perhaps new for Moodle 3.0? The exported template attached is the result of the last step of my experiment - I made no changes to your template at all so it should look identical and I suspect, if you open it once and test it will look fine but if you open the View List editor and make any changes (or just pretend to make changes by expanding the WYSIWYG bar or viewing the HTML) then the List view gets wonky inexplicably (though I'm hoping you can explain it)!

A work around for now might be to just edit the preset html files directly, then zip & upload and never edit them within Moodle but this is obviously a pain, especially since I'm still in development, might need to make multiple changes and will ultimately be using 3-4 copies of the same DB in my course. But if you can solve the problem that would be spectacular!

THANKS!

Attachment DBentries_string.JPG
Attachment showmorebuttons.JPG
Average of ratings: -
In reply to Margaret Richards

Re: BUZZ- the most beautiful database template, how it works?

by Margaret Richards -

Ok I'm going to answer my own question after spending all morning on this in the hopes it helps someone else! The problem I noted in my last post is solved by disabling the editor when editing the List view template (I had looked 100 times and not seen the button - see screenshot), which just disables the WYSIWYG editor, allowing for direct HTML edits. 

It's a strange quirk but seems to have solved the problem. Thanks Helen & William!

Attachment disableeditor.JPG
Average of ratings:Useful (1)
In reply to Margaret Richards

Re: BUZZ- the most beautiful database template, how it works? [Solved]

by Helen Foster -
Picture of Core developers Picture of Documentation writers Picture of Moodle HQ Picture of Particularly helpful Moodlers Picture of Plugin developers Picture of Testers Picture of Translators

Thanks Margaret for letting us know how you solved your problem, also for the screenshot which will certainly help others, as the disable editor button is easy to miss!

Average of ratings: -