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
Category tree displaying current branch
-
- Core Developer
- Posts: 30022
- Joined: Tue Sep 16, 2003 9:45 pm
- Location: Cologne, Germany
- Contact:
Re: Category tree displaying current branch
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
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
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/
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
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
-
- Regular
- Posts: 3652
- Joined: Mon Feb 13, 2006 2:40 am
- Location: Chicago, IL, USA
- Contact:
Joel,
Try this as your plugin_categories.tpl as I think it is what Garvin meant:
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.
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}
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.
=Don=
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
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
-
- Regular
- Posts: 3652
- Joined: Mon Feb 13, 2006 2:40 am
- Location: Chicago, IL, USA
- Contact:
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
Cheers,
Joel
-
- Regular
- Posts: 3652
- Joined: Mon Feb 13, 2006 2:40 am
- Location: Chicago, IL, USA
- Contact:
Changing your {if} expression to this:
... 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.
Code: Select all
{if $category == $plugin_category.categoryid or $category_info.parentid==$plugin_category.categoryid}
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.
=Don=
-
- Core Developer
- Posts: 30022
- Joined: Tue Sep 16, 2003 9:45 pm
- Location: Cologne, Germany
- Contact:
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
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
# Garvin Hicking (s9y Developer)
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/
# Did I help you? Consider making me happy: http://wishes.garv.in/
# or use my PayPal account "paypal {at} supergarv (dot) de"
# My "other" hobby: http://flickr.garv.in/