Category tree displaying current branch

Random stuff about serendipity. Discussion, Questions, Paraphernalia.
Post Reply
baden32
Regular
Posts: 18
Joined: Mon Feb 12, 2007 3:48 pm

Category tree displaying current branch

Post 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
garvinhicking
Core Developer
Posts: 30022
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Re: Category tree displaying current branch

Post 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
# 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/
baden32
Regular
Posts: 18
Joined: Mon Feb 12, 2007 3:48 pm

Post 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
Don Chambers
Regular
Posts: 3652
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post 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.
=Don=
baden32
Regular
Posts: 18
Joined: Mon Feb 12, 2007 3:48 pm

Post 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
Don Chambers
Regular
Posts: 3652
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post 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.
=Don=
baden32
Regular
Posts: 18
Joined: Mon Feb 12, 2007 3:48 pm

Post 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
Don Chambers
Regular
Posts: 3652
Joined: Mon Feb 13, 2006 2:40 am
Location: Chicago, IL, USA
Contact:

Post 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.
=Don=
garvinhicking
Core Developer
Posts: 30022
Joined: Tue Sep 16, 2003 9:45 pm
Location: Cologne, Germany
Contact:

Post 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
# 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/
Post Reply