custom categories menu on moodle home page

custom categories menu on moodle home page

by Tomasz Woźniczka -
Number of replies: 7

I created cutom category view on my moodle home page. 

It looks like this:

As you can see it contrain course counter.

If you want some similar, here you have few steps to do smile

1. Add new function to /moodle/course/lib.php 

//course counter

function _zliczKursy($id) {

                global $DB;

                $sum = 0;           

                $result = $DB->get_records_sql("SELECT `id`, `coursecount`, `parent` FROM `mdl_course_categories` WHERE `parent`='".$id."'");

                foreach($result as $obj) {

                               $sum += $obj->coursecount;

                               if( !empty($obj->parent) ) {

                                               $sum += _zliczKursy($obj->id);

                               }

                }

                return $sum;

}

// display icons

function wyswietlIkony($category, $depth=0) {

    global $DB;

                if( $depth != 0 ) return false;

                echo '<div style="float: left; margin: 20px; padding: 5px; text-align: center; font-weight: bold; width: 130px; height: 100px;">';

                $ico = '../ikony/'.strtr( strtolower($category->id), ' ', '_' ).'.png';

                if( !file_exists($ico) ) {

                               //$ico = '#'; // missing icon

                }

                $link = '<img src="'.$ico.'" title="'.$category->name.'" height="70" width="70" >';

                $link .= '<br />'.$category->name;

                $url = new moodle_url('/course/category.php', array('id'=>$category->id));

                echo html_writer::link($url, html_writer::link($url, $link));

                $sum = 0;

                $result = $DB->get_records_sql("SELECT `coursecount` FROM `mdl_course_categories` WHERE `id`='".$category->id."'");

                foreach($result as $obj) {

                               $sum += $obj->coursecount;

                }

                $sum += _zliczKursy($category->id);

                //if( $sum ) {

                               echo ' ('.$sum.')';

                //}

               

                echo '</div>';

}

2. In course/lib.php

After lines

 if ($category->visible or

has_capability('moodle/category:viewhiddencategories',

get_context_instance(CONTEXT_SYSTEM))) {

 You have to comment line 

print_category_info($category, $depth, $showcourses);

and add new one

wyswietlIkony($category, $depth); 

3. In moodle/index.php

After lines:

echo $OUTPUT->skip_link_target();

  print_whole_category_list();

You have to add new line:

echo '<div style="clear:both"></div>';


4. You need to create new folder for category icons. In this case it's "ikony"

5. You need to copy your new category icons to moode/ikony

6. Icons names must looks like this: moode_category_ID.png, eg. 114.png

7. Now you need to turn on our custom categories view in Moodle: Site administration => Front page => front page settings => in front page frontpage or/and front page items when logged in set from list: List of categories

One BUG: You need to decide how to put your courses into categories. You can put it into main categories or under subcategories. You can't choce both becouse couner would fail.

Average of ratings: Useful (2)
In reply to Tomasz Woźniczka

Re: custom categories menu on moodle home page

by Alicia Wallace -

Firstly: this looks great, thank you smile

My php is not good, so I may have misunderstood. Can you talk me through step 3?

I cannot find the code

"echo $OUTPUT->skip_link_target();

  print_whole_category_list();"

I've found:

"case FRONTPAGECATEGORYNAMES:

echo html_writer::tag('a', get_string('skipa', 'access', textlib::strtolower(get_string('categories'))), array('href'=>'#skipcategories', 'class'=>'skip-block'));
echo $OUTPUT->heading(get_string('categories'), 2, 'headingblock header');
echo $OUTPUT->box_start('generalbox categorybox');
print_whole_category_list(NULL, NULL, NULL, -1, false);"

Am I looking in the wrong place, or do I need to alter this?

In reply to Alicia Wallace

Odp: Re: custom categories menu on moodle home page

by Tomasz Woźniczka -

I'm glad that you like it smile

You're looking in right place.

Just add

echo '<div style="clear:both"></div>';

after

echo $OUTPUT->box_start('generalbox categorybox');
print_whole_category_list(NULL, NULL, NULL, -1, false);

In reply to Tomasz Woźniczka

Re: custom categories menu on moodle home page

by Laura Rodriguez -

Hi tomas, that is just I needed. 

But now i have a problem with de step 2. Id dont find the lines:

if ($category->visible or

has_capability('moodle/category:viewhiddencategories',

get_context_instance(CONTEXT_SYSTEM))) {

this part just dont exist in my moodle. or not in this version: moodle 2.5.1

I would put this lines in the end after the lines tahat I indexed in the step 1?

 

In reply to Tomasz Woźniczka

Re: custom categories menu on moodle home page

by Franc Pombal -

Hi,

I had read this article a long time ago, but I was not convinced so much change in the code, so now I present here a way of presenting the categories in grid format only changes CSS format.

Once applied remains as follows:

All you have to do is 2 easy steps:

1.- Add some CSS properties to give the required format:

/* Set the position on the frontpage */
#frontpage-category-names,
#frontpage-category-names .course_category_tree {
clear: both; margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}

/* Create box for each category */
.course_category_tree .category {
position: relative;
float: left;
width: 180px;
height: 180px;
margin: 1px 1px 1px 1px;
padding: 0px 0px 0px 0px;
border-width: 1px 1px 1px 1px;
border-style: solid;
border-color: #007EBA;
}

/* Adjust color for disabled categories */
.course_category_tree .category.dimmed_category {
border-color: #AAAAAA;
}

/* Adjust the position of the name */
.course_category_tree .category .info .name {
padding: 0px 0px 0px 0px;
text-align: center;
}

/* Hide icon 'colapsed' because it makes no sense here */
.course_category_tree .category > .info .name {background: none;}
.dir-rtl .course_category_tree .category > .info .name {background: none;}
.course_category_tree .category.with_children > .info .name {background: none;}
.course_category_tree .category.with_children.collapsed > .info .name {background: none;}
.dir-rtl .course_category_tree .category.with_children.collapsed > .info .name {background: none;
}

/* Place image in each category */
.course_category_tree .category[data-categoryid] {
background: url([[pix:theme|cat/default]]) no-repeat center bottom;
}

/* Upload the image from each category */
.course_category_tree .category[data-categoryid="1"] {background-image: url([[pix:theme|cat/1]]);}
.course_category_tree .category[data-categoryid="2"] {background-image: url([[pix:theme|cat/2]]);}
.course_category_tree .category[data-categoryid="3"] {background-image: url([[pix:theme|cat/3]]);}
.course_category_tree .category[data-categoryid="4"] {background-image: url([[pix:theme|cat/4]]);}
.course_category_tree .category[data-categoryid="5"] {background-image: url([[pix:theme|cat/5]]);}
.course_category_tree .category[data-categoryid="6"] {background-image: url([[pix:theme|cat/6]]);}
.course_category_tree .category[data-categoryid="7"] {background-image: url([[pix:theme|cat/7]]);}
.course_category_tree .category[data-categoryid="8"] {background-image: url([[pix:theme|cat/8]]);}
.course_category_tree .category[data-categoryid="9"] {background-image: url([[pix:theme|cat/9]]);}
/* ... and so on ... */

/* Hide subcategories in the GRID model */
.course_category_tree .category .content {display: none;}

/* Hide buttons to expand and collapse */
.jsenabled .course_category_tree .controls {display: none;}

 

2.- Use an existing folder or create a new one (in this example theme \ aigne \ pix \ cat) to copy the images to be used as icons/backgrounds/images. I highly recommend that the name of the image is the 'ID' of the category to easier make updates or changes.

 

You can also apply the option to a font of symbols (fontawesome, zurb, icomoon, etc ...) using selectors: before and: after. This option has become very popular lately and has a very nice visual effect, but does not convince me at all…

I hope this information will be useful

Greetings from Galicia

Average of ratings: Useful (1)
In reply to Franc Pombal

Re: custom categories menu on moodle home page

by T K -

which line will be referencing to the source for the incons/images?

In reply to Franc Pombal

Re: custom categories menu on moodle home page

by T K -

I cant seem to make it work

what does following refer to, is 1 the name of the image?

cat/1

In reply to T K

Re: custom categories menu on moodle home page

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

2.- Use an existing folder or create a new one (in this example theme \ aigne \ pix \ cat) to copy the images to be used as icons/backgrounds/images. I highly recommend that the name of the image is the 'ID' of the category to easier make updates or changes.

So yes, in Franc's example, the images are stored in /theme/pix/cat/ and the name of each image is 1.png or 2.jpg etc with the number being the category ID as suggested.