Moodle in English: Making a contribution

Hello, I'm a little shy and I don't know what the procedure is for sharing stuff, so what I'm really looking for is advice on the proper place to post this and guidance on how I need to test it before I do.

I have developed a renderer that will display category names as either the default list, or as buttons (if an image named after the category number is posted to the correct folder).

I'd like to share it, as I think it makes category pages much more attractive, but I'm conscious it isn't flawless (long category names can prevent the buttons from stacking properly, for instance). This is fine on my own site as I can control it, but if I share it, how rigorously should it have been tested first?

I've had an awful lot from this community and this is the first thing I've done that I think might give something back, so I hope you can help

Alicia

PS: I've attached the renderers.php for anyone interested. It's based on a Sky_high theme, haven't tested it with any others. The category button images need to be uploaded to pix/catimg and the CSS is contained in catimg.css

If you want to see it in operation: https://moodle.hartpury.ac.uk/moodle

catimg.css

renderers.php

評比平均分數：Useful (1)

Re: Making a contribution

由Frankie Kam發表於2013年 08月 17日(週六) 12:08

Hi Alicia.

This is really great! I like the consistency it brings to the front page. and it works also for subcategories! Your site is nice with the buttons laid out nicely as per your theme and renderer settings. I noticed that "Learning and Teaching" and "Work Placement" categories do not have buttons, rather they are shown as default links. Is this because those two categories do not have their corresponding PNG files inside the pix/catimg folder?

What version of Moodle are you using?

BTW, I have a feeling your post is better served if moved to the themes forum, as that's where the bulk of developers and users of themes are...

Frankie Kam

評比平均分數： -

Re: Making a contribution

由Alicia Wallace發表於2013年 08月 19日(週一) 16:43

Thank you

Yes, if there is no image uploaded it lists the names as text. There is a limitation - the renderer doesn't shuffle the display so that categories with buttons are grouped and categories without are displayed beneath/ above, so you do have to arrange your categories carefully.

This is Moodle 2.5 - I tried a similar thing with an earlier version, but there was no way of doing it without making changes to the core code until the renderers were added in 2.5.

評比平均分數： -

Re: Making a contribution

由Frankie Kam發表於2013年 08月 17日(週六) 12:59

I've blogged about it.

http://moodurian.blogspot.com/2013/08/spice-up-your-moodle-2-frontpage-by.html

評比平均分數： -

Re: Making a contribution

由Alicia Wallace發表於2013年 08月 19日(週一) 16:49

Gosh, thank you! That's incredibly flattering (and an amazing perk for a Monday morning!)

Alicia

評比平均分數： -

Re: Making a contribution

由Sam Thing發表於2013年 08月 17日(週六) 16:32

Nice clean theme.

You're talking about the renderer in your post so I may be a bit off the mark here but I notice your footer is cut short, at least on my android and ipad. I've attached a screen cap in case it's relevant.

sam.

評比平均分數： -

Re: Making a contribution

由Frankie Kam發表於2013年 08月 18日(週日) 09:59

Actually it views just fine on my Google Chrome Version 28.0.1500.95 m.

Which browser/version are you using Sam?

Frankie

評比平均分數： -

Re: Making a contribution

由Sam Thing發表於2013年 08月 19日(週一) 20:15

Ipad4, Safari and Firefox 23 on a 4.0.4 android.

評比平均分數： -

Re: Making a contribution

由Alicia Wallace發表於2013年 08月 19日(週一) 16:44

Thanks for the heads up - I haven't been able to test on many tablet devices so I'll go and investigate.

Alicia

評比平均分數： -

Re: Making a contribution

由Mary Evans發表於2013年 08月 19日(週一) 00:47

Hi Alice,

Thanks for posting and welcome to the Themes forum.

Like Frankie, I think this is really exciting stuff. Thanks for your contribution to Moodle I am sure it will be appreciated by the Theme designers here.

Cheers

Mary

評比平均分數： -

Re: Making a contribution

由Gareth J Barnard發表於2013年 08月 19日(週一) 01:51

Hi Alicia,

Thank you for sharing your code

As you've called the theme 'hartpurynew' rather than just adding code to Sky High, would you consider hosting the theme on GitHub? Then others could see the code in it's entirety and contribute to it. You would also have version control for it .

Cheers,

Gareth

評比平均分數： -

Re: Making a contribution

由Alicia Wallace發表於2013年 08月 19日(週一) 16:46

Sounds great - I'll try. As I said, I'm new to this so that hadn't even occurred to me

Alicia

評比平均分數： -

Re: Making a contribution

由Alicia Wallace發表於2013年 08月 19日(週一) 20:48

Renamed the theme to Buttons and posted to Github. I've never used Git before, so I'm hopeful I've done it right.

https://github.com/awelearning/Buttons

Alicia

評比平均分數：Useful (3)

Re: Making a contribution

由Frankie Kam發表於2014年 10月 1日(週三) 16:46

Hi Alicia

I've only just noticed a problem with the "use of Renderers.php to display category names as buttons".
it slows down my site! Here's a snapshot of the waterfall anaysis of http://www.cambridgekids.org/cefl :-

slow1

In short, my web browser waits 10.7 seconds before loading the page elements...!

I've also run the test on your college's Moodle site: https://moodle.hartpury.ac.uk/moodle/
Here's the result:

slow2

Hartpury College's Moodle site also experiences a slowdown, albeit just 3.47 seconds. I've experimented by renaming or removing the /theme/MyThemeName/renderers.php and the site speeds up immediately.

remove

In the example above, I've renamed renderers.php to _renderers.php. Here's the resulting web analysis which shows a much faster website:

nomore

I'm not sure how to solve the cause of the slowdown. I have attached the renderers.php file to this post.

Any help would be appreciated.
Regards
Frankie Kam

renderers.php

評比平均分數： -

Re: Making a contribution

由Alicia Wallace發表於2014年 10月 13日(週一) 17:18

Hi Frankie,

Thanks for this - I'll try running it on a separate server at home (I left my previous employer some time back so I don't have access to the Hartpury system any more) and see what I can find.

What version of Moodle are you running? And can you tell me your OS, etc?

Thanks Alicia

評比平均分數： -

תשובה ל: Making a contribution

由Irith Herman發表於2014年 12月 7日(週日) 05:33

Maybe someone can advise me how you can use this exelent idea with theme essential which has already renderes file.
Thanks
Irith

評比平均分數： -

Re: תשובה ל: Making a contribution

由Gareth J Barnard發表於2014年 12月 7日(週日) 08:40

Hi Irith,

Removing or renaming 'renderers.php' from Essential will break it and have the same effect as adding:

html {
  display: none !important;
}

To your Custom CSS box.

If the file is taking time then either the server is running slowly, network contention or investigations need to be made on where the code is slow and why.

Cheers,

Gareth

評比平均分數： -

תשובה ל: Re: תשובה ל: Making a contribution

由Irith Herman發表於2014年 12月 7日(週日) 14:44

If I remove the essetial renderers.php the theme does"t work

I tried to add the code from one to another but it doesn"t work

評比平均分數： -

Re: תשובה ל: Re: תשובה ל: Making a contribution

由Mary Evans發表於2014年 12月 8日(週一) 02:34

It's not that simple...you need to understand how these things work.

The renderer you are wanting to use is not directly compatible with the Essential theme as it is now, but did have that renderer in it in an older version.

I am not quite sure if that older version exists now or not.

You would be better making your own theme and adding that renderer to it.

Checkout the tutorials HERE

Cheers

Mary

評比平均分數： -

תשובה ל: Re: תשובה ל: Re: תשובה ל: Making a contribution

由Irith Herman發表於2014年 12月 8日(週一) 03:04

the moodle is already designed with the Essential theme, I don"t want to change the Theme

評比平均分數： -

Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Making a contribution

由Gareth J Barnard發表於2014年 12月 8日(週一) 03:06

So what are you trying to actually achieve Irith?

評比平均分數： -

תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Making a contribution

由Irith Herman發表於2014年 12月 8日(週一) 03:09

I want a category page with pictures

Like this

http://moodurian.blogspot.co.il/2013/08/spice-up-your-moodle-2-frontpage-by.html

評比平均分數： -

Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Making a contribution

由Gareth J Barnard發表於2014年 12月 8日(週一) 03:19

In that case look at how the code in the Hartpury renderers.php file with the CSS works and add it to the core_renderer.php file in the renderers folder and call it from the frontpage.php file in the layout folder.

評比平均分數： -

תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Making a contribution

由Irith Herman發表於2014年 12月 8日(週一) 03:41

i saw that in the renderes.php in Essential

there ia a list:

require_once('renderers/core_renderer.php');

require_once('renderers/format_topics_renderer.php');

..........

all are in a renderers folder.

I copied the code to a page I called: core_category_renderer.php

put it in the same folder.

then added a line in the renderes.php

require_once('renderers/core_category_renderer.php');

does it mean anything?

評比平均分數： -

Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Making a contribution

由Mary Evans發表於2014年 12月 8日(週一) 03:58

Irith,

If Gareth took the time to look at the render that you are talking about which can be found here...

https://github.com/awelearning/Buttons/blob/master/renderers.php#L21

he would see that it is not the core_renderer you need to over ride but one that is in core_course_renderer.php.

The fact is Irith that renderer already exist in Essential, but is written differently.

If, however, you were to remove this section ...

https://github.com/gjb2048/moodle-theme_essential/blob/MOODLE_27/renderers/core_course_renderer.php#L43-L127

and replace it with this section from the renderer you have...

https://github.com/awelearning/Buttons/blob/master/renderers.php#L21-L87

Then it may work...the emphasis in this statement is on the MAY...that is to say it MAY NOT work either!.

EDIT:

You also need these to understand how it all works...meaning you need to read the README.txt , you also need to copy the images to the image folder inside the pix directory of your essential theme add the catimg.css filename to your essential config.php and also add that file to your essential/style directory.

README
https://github.com/awelearning/Buttons/blob/master/README.txt

PIX/IMAGES
https://github.com/awelearning/Buttons/tree/master/pix/catimg

CSS
https://github.com/awelearning/Buttons/blob/master/style/catimg.css

Cheers

Mary

評比平均分數： -

תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Making a contribution

由Irith Herman發表於2014年 12月 8日(週一) 04:31

Great!!!! It is working!!!

Thank you !

irith

評比平均分數： -

תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Making a contribution

由Irith Herman發表於2014年 12月 8日(週一) 06:36

i WAS HAPPY TO EARLY

I add pictures but only the first 3 appears

評比平均分數： -

Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Making a contribution

由Mary Evans發表於2014年 12月 8日(週一) 08:12

Ah...but did you make sure they are named with the number of the category they represent?

For example:

Art = Category 12 -> pix/ catimg / 12.jpg

History = Category 22 -> pix/ catimg / 22.jpg

Geograpy = Category 32 -> pix / catimg / 32.jpg

Meaning of Life = Category 42 -> pix / catimg / 42.jpg

Like these which Alice added to the original theme?

https://github.com/awelearning/Buttons/tree/master/pix/catimg

評比平均分數： -

תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Making a contribution

由Irith Herman發表於2014年 12月 8日(週一) 18:51

It is o.k , it was something in the css file

thank again

Irith

評比平均分數： -

תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Making a contribution

由Irith Herman發表於2014年 12月 9日(週二) 13:46

a problems

in the essential theme there is a posibiliiy to add 3 marketing-spots marketing-spot

After i made the changes to the core_course_renderer.php

in the 3 markting spots in the Ettential theme appears a button that makes a gape

<div class="button" id="yui_3_15_0_2_1418078206063_1219">

<div class="button" id="yui_3_15_0_2_1418078206063_1172">

<a href="http://hila.tik-tak.co.il/course/index.php?categoryid=4" target="_self" class="marketing-button responsive">

למקצועות הלימוד - לחצו כאן </a>

</div>

if i write in the custon css

;{div.button:nth-child(5){display:none

It hides the button and the link that i have under the button doesn"t shows

評比平均分數： -

Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Re: תשובה ל: Making a contribution

由Mary Evans發表於2014年 12月 9日(週二) 18:34

What gap?

Can you post a picture of the problem rather than the result of your CSS changes.

Thanks

Mary

評比平均分數： -