Page 1 of 1
Category tree displaying current branch
Posted: Sat Jan 03, 2009 10:20 pm
by baden32
In order to get a better view of the location when a page is displayed, I would like the category plugin (inseted in the leftsidebar) to displayed the current category in a different color (using css of course):
Cat1
-Cat 1.1
Cat 2
-Cat2.1
-Cat2.2.1
-Cat2.2.2
-Cat2.2
Cat 3
In my sample, all the "path" to Cat2.2.2 should be displayed in "orange" and all the resting links should be displayed in black.
What/where should I change something in order to get this result?
Thank you in advance for your help.
Joel
Re: Category tree displaying current branch
Posted: Sat Jan 03, 2009 10:55 pm
by garvinhicking
Hi!
You can enable the smarty templating of the sidebar plugin, then you're able to change the output by editing the plugin_categories.tpl template file. In there, you can use Smarty checks to see if {$category} is equal to the current categoryid of the {foreach} loop, and then emit appropriate CSS classes to indicate active categories.
Regards,
Garvin
Posted: Sat Jan 03, 2009 11:24 pm
by baden32
Hi Garvin,
Thanks a lot for your reply. I already found some issues involving the plugin_categories.tpl template file but I cannot figure out how it works and what I'm supposed to do:
1. enable the smarty templating
2. add a plugin_categories.tpl file in my template directory
3. ???
Do you have a sample/tutorial available?
Regards,
Joel
Posted: Sun Jan 04, 2009 12:45 am
by Don Chambers
Joel,
Try this as your plugin_categories.tpl as I think it is what Garvin meant:
Code: Select all
{if $is_form}
<form id="serendipity_category_form" action="{$form_url}" method="post">
<div id="serendipity_category_form_content">
{/if}
<ul id="serendipity_categories_list" style="list-style: none; margin: 0px; padding: 0px">
{foreach from=$categories item="plugin_category"}
<li class="category_depth{$plugin_category.catdepth} category_{$plugin_category.categoryid}" style="display: block;">
{if $is_form}
<input style="width: 15px" type="checkbox" name="serendipity[multiCat][]" value="{$plugin_category.categoryid}" />
{/if}
{if !empty($category_image)}
<a class="serendipity_xml_icon" href="{$plugin_category.feedCategoryURL}"><img src="{$category_image}" alt="XML" style="border: 0px" /></a>
{/if}
<a {if $category == $plugin_category.categoryid}class="current_category" {/if}href="{$plugin_category.categoryURL}" title="{$plugin_category.category_description|escape}" style="{if $category == $plugin_category.categoryid}color: orange; {/if}padding-left: {$plugin_category.paddingPx}px">{$plugin_category.category_name|escape}</a>
</li>
{/foreach}
</ul>
{if $is_form}
<div class="category_submit"><input type="submit" name="serendipity[isMultiCat]" value="{$CONST.GO}" /></div>
{/if}
<div class="category_link_all"><a href="{$form_url}?frontpage" title="{$CONST.ALL_CATEGORIES}">{$CONST.ALL_CATEGORIES}</a></div>
{if $is_form}
</div>
</form>
{/if}
Just decide how you want to handle the color. I did 2 things here.... First, I assigned a class to the <a>nchor if it matches a category view. You can do all your styling in a stylesheet simply by creating a new class as follows: .current_category {blah, blah} The class name can be whatever you want it to be.
I also demonstrated how you could simply do it inline since the default tpl already has an inline style for padding. In this case, I set the font color to orange.
Use whichever works for you. I did test it, and it does seem to work in my sandbox.
The categories plugin is stackable, so more than a single instance of this plugin COULD exist. It should not use unique IDs, it should use classes. I did not change those in this example.
Posted: Sun Jan 04, 2009 11:50 pm
by baden32
Hi Garvin and Don,
Thanks for your replies. I put the suggested content in the plugin_categories.tpl file and can see the changes, it's a first step.
Now, has mentionned in my initial post, I would like to get the whole "path" (I have 3 level of navigation) in a special color and not only the current page/category.
What info is available in order to get the expected result?
Regards,
Joel
Posted: Sun Jan 04, 2009 11:58 pm
by Don Chambers
Joel - can you post a URL to your site? I might have a better understanding of your intent if I can actually see what you are doing.
Posted: Mon Jan 05, 2009 12:13 am
by baden32
Of course. If you load the page
http://www.cantonales2009.ch/index.php? ... 2-Le-Locle I would like to get the words/menus "GRAND CONSEIL", "Les candidats" and finally "Le Locle" in orange (and not only the last one).
Cheers,
Joel
Posted: Mon Jan 05, 2009 12:50 am
by Don Chambers
Changing your {if} expression to this:
Code: Select all
{if $category == $plugin_category.categoryid or $category_info.parentid==$plugin_category.categoryid}
... will get you this:
Parent
+Child
I cannot figure out a way to do this:
Grandparent
+Parent
++Child
The reason is that the categories know their parent, but that's it... they do not really know their grandparent, meaning the "grandparent" information is not stored with the child category.
Maybe someone more experienced has a better idea, but I really do not.
Posted: Mon Jan 05, 2009 11:30 am
by garvinhicking
Hi!
That cannot be done then with the default plugin. you would need to create your own plugin and use the serendipity_fetchCategories() API function, iterate through the array, remember/mark parents and their childs, much like the serendipity_walkRecursive() function does.
This is some advanced stuff, though...
Regards,
Garvin