Nested Categories

Nested Categories

per Jez H -
Nombre de respostes: 14
Hello All,

I would like to style the nested categories on the front page, in the category list.
There seems to be a problem in doing this in that there are no separate styles for nested categories.

I can mod course / lib.php to add the depth to styles, to create new classes... but I am struggling to see where the corresponding classes would go in the style sheets.

For example, I see 
class="category name
In the html output form Moodle, but cannot find that class in any of the stylesheets... can anyone tell me where that element is?

Is it feasible to add the depth as a sub class of name, and then create a stuyle for

name.depth a

It seems odd to me that there are not styles within Moodle to style nested categories...

Any advice appreciated...

Mitjana de qualificacions: -
En resposta a Jez H

Re: Nested Categories

per Patrick Malley -
Do not feel limited by styles that are missing from the stylesheets. The theme developer who created the theme you're using obviously didn't see a need to style that element. Go ahead and add the style that you would like.

If you have a case for nested categories, please share your argument (with screenshots, please) and post the idea to the Moodle Tracker as improvements such as this need attention in this community.
Mitjana de qualificacions: -
En resposta a Patrick Malley

Re: Nested Categories

per Jez H -
It is not that the style is missing from the stylesheets, there is no reference to that style in the Moodle code that generates the category list, i.e. the depth of category is not recorded in the classes.

Within Moodle code, the depth of indentation is calculated, so front page categories already "nest". All I want to do is make the child category fonts smaller than the parent categories.

Currently all categories, though nested by use of indentation are the same size.

I think I must be missing something here... I cannot believe I am the only person who has wanted to make the child categories appear with a smaller font?

Again, I am talking about the front page view where categories are displayed in front page settings...

Thanks, Jeremy
Mitjana de qualificacions: -
En resposta a Jez H

Re: Nested Categories

per Jez H -
bump smile
Mitjana de qualificacions: -
En resposta a Jez H

Re: Nested Categories

per Frank Ralf -
Have you tried using cascaded CSS like so:

.category .sub-category {
font-size: smaller;
}

That way you don't need to change any PHP code.

BTW Which theme do you use?

hth
Frank
Mitjana de qualificacions: -
En resposta a Frank Ralf

Re: Nested Categories

per Jez H -
Thanks Frank,

The problem seems to be that there is nothing to hand that category .sub-category off.

All the categories appear as:

class="category name"

As far as I can tell that is coming out of the core PHP files, not the template.
To get category sub-category I think I would need to edit the core php files, and track the depth for the categories.

I can see how to do this, but it means re-applying the hack each time I upgrade Moodle... and I would have thought there would be some way to track the depth of categories in the tree on the front page without having to modify the core php files in this way.

I am using a modified version of the standard theme, it is pretty close to standard (1.9.1).

Thanks,

Mitjana de qualificacions: -
En resposta a Jez H

Re: Nested Categories

per Frank Ralf -

The sub-categories are indented using some really ugly HMTL code:

<td class="category indentation" valign="top">
 <img class="spacer" src="http://localhost/moodle_cvs/moodle/pix/spacer.gif" alt="" width="20" height="10">
 <br>
</td>

But you can use that to your avail with the following CSS:

td.indentation + td a {
 background-color: yellow;
 color: red !important; 
 font-size: 80%;
}

(Colors only added for demonstration purpose.)

The + selector selects the adjacent sibling (http://www.w3.org/TR/CSS2/selector.html#adjacent-selectors).

The effect should be similar as in the attached screenshot.

hth Frank

Fitxer adjunt nested_categories.png
Mitjana de qualificacions:Useful (1)
En resposta a Frank Ralf

Re: Nested Categories

per Frank Ralf -
Created an issue in the Tracker: MDL-19085
Mitjana de qualificacions: -
En resposta a Frank Ralf

Re: Nested Categories

per Joseph Rézeau -
Imatge Core developers Imatge Particularly helpful Moodlers Imatge Plugin developers Imatge Testers Imatge Translators
Hi Frank, I'd never heard of that adjacent sibling selector. Thanks for bringing it to our attention. approve
Joseph
Mitjana de qualificacions: -
En resposta a Joseph Rézeau

Re: Nested Categories

per Thomas Hanley -

Joseph,

This is a useful selector, a couple of minor things to bear in mind:

1) Not supported in IE6. Although perhaps for most people now this is not an issue.

2) Small bug in IE7 that can cause adjacent sibling selectors to fail:

http://reference.sitepoint.com/css/adjacentsiblingselector

~thomas

Mitjana de qualificacions: -
En resposta a Thomas Hanley

Re: Nested Categories

per Frank Ralf -
Hi Thomas,

Thanks for the hints and the SitePoint link. That's an even better reference than the one from W3C.

There's even a Firefox plugin for integrating the reference in the browser:

CodeBurner
https://addons.mozilla.org/en-US/firefox/addon/10273
see also Development:Firebug#CodeBurner

I also added those links to CSS_FAQ#CSS references.

Cheers,
Frank





Mitjana de qualificacions: -
En resposta a Jez H

Re: Nested Categories

per Simon Hanmer -
it's not a very tidy fix (especially since it means a change to core code), but I've been using this code in course/lib.php

Find the following piece of code (which is repeated twice):

if ($depth) {
$indent = $depth*30;
$rows = count($courses) + 1;
echo '<td class="category indentation" rowspan="'.$rows.'" valign="top">';
print_spacer(10, $indent);
echo '</td>';
}

echo '<td valign="top" class="category image">'.$catimage.'</td>';
echo '<td valign="top" class="category name">';

and replace the last line with

if ($depth) {
echo '<td valign="top" class="category indented_'.$depth.' name">';
} else {
echo '<td valign="top" class="category name">';
}



This introduces a new set of css classes for the categories where td.indented_1 will refer to the first level of indented categories, td.indented_2 to the second level and so on.


Not a particularly stylish fix, but it works.
Mitjana de qualificacions: -
En resposta a Simon Hanmer

Re: Nested Categories

per Mihir J -

Hi Simon,

I have tries using your fix..but looks like i am doing something worng, as it is not working.

What I am doing is, I have found the particular line in lib.php

echo '<td valign="top" class="category name">

and for both instances, I have replaced them with

if ($depth) {
echo '<td valign="top" class="category indented_'.$depth.' name">';
} else {
echo '<td valign="top" class="category name">';
}

could you please let me know where I am going wrong?

Also, what would be changes (do you have any sample output)

I have 3 nested categories.. i mean upto level 3

Thanks for your help!

Mitjana de qualificacions: -