Nested Categories

Nested Categories

de Jez H -
Número de respuestas: 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...

Promedio de valoraciones: -
En respuesta a Jez H

Re: Nested Categories

de 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.
Promedio de valoraciones: -
En respuesta a Patrick Malley

Re: Nested Categories

de 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
Promedio de valoraciones: -
En respuesta a Jez H

Re: Nested Categories

de Jez H -
bump smile
Promedio de valoraciones: -
En respuesta a Jez H

Re: Nested Categories

de 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
Promedio de valoraciones: -
En respuesta a Frank Ralf

Re: Nested Categories

de 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,

Promedio de valoraciones: -
En respuesta a Jez H

Re: Nested Categories

de 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

Adjunto nested_categories.png
Promedio de valoraciones:Useful (1)
En respuesta a Frank Ralf

Re: Nested Categories

de Frank Ralf -
Created an issue in the Tracker: MDL-19085
Promedio de valoraciones: -
En respuesta a Frank Ralf

Re: Nested Categories

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

Re: Nested Categories

de 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

Promedio de valoraciones: -
En respuesta a Thomas Hanley

Re: Nested Categories

de 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





Promedio de valoraciones: -
En respuesta a Jez H

Re: Nested Categories

de 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.
Promedio de valoraciones: -
En respuesta a Simon Hanmer

Re: Nested Categories

de 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!

Promedio de valoraciones: -