Nested Categories

Nested Categories

- Jez H の投稿
返信数: 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...

評点平均: -
Jez H への返信

Re: Nested Categories

- 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.
評点平均: -
Patrick Malley への返信

Re: Nested Categories

- 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
評点平均: -
Jez H への返信

Re: Nested Categories

- Jez H の投稿
bump smile
評点平均: -
Jez H への返信

Re: Nested Categories

- 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
評点平均: -
Frank Ralf への返信

Re: Nested Categories

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

評点平均: -
Jez H への返信

Re: Nested Categories

- 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

添付 nested_categories.png
評点平均:Useful (1)
Frank Ralf への返信

Re: Nested Categories

- Joseph Rézeau の投稿
画像 Core developers 画像 Particularly helpful Moodlers 画像 Plugin developers 画像 Testers 画像 Translators
Hi Frank, I'd never heard of that adjacent sibling selector. Thanks for bringing it to our attention. approve
Joseph
評点平均: -
Joseph Rézeau への返信

Re: Nested Categories

- 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

評点平均: -
Thomas Hanley への返信

Re: Nested Categories

- 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





評点平均: -
Jez H への返信

Re: Nested Categories

- 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.
評点平均: -
Simon Hanmer への返信

Re: Nested Categories

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

評点平均: -