Hello people. Today i would like to tell you something about sidebar categories addon. This tutorial is suitable especially for people who would like to have
many categories and they want to have them in sidebar.
Basically there are 2 problems:
- too many categories = too much worthspace in sidebar, despite the fact user can scroll categories down it is still not good
- if you use background in categories sidebar (default=yes), then you have to resize this background when you use many categories
My solution is simple to understand and resolve both problems above. Every root category (which is category that has at least one subcategory) has a button (next to the rss button). With this button is possible to show and to hide subcategories. All right, stop talking, there is an example:
As you can see in the picture, there are some categories level1. When we click on the button on the right side (the button with arrow) on category level1_b, subcategories will show.
Subcategory can be also root category - if you like to have more-level subcategories.
Summary features:
- hiding subcategories as a default, possibility quickly show them just with mouse click on button
- multi subcategories supported
- possibility to change icon of hiding button (come on guys, be a little creative
)
- EASY implementation
Requirements:
- Notepad++ or any good app to edit smarty (tpl) file in it
- Pligg v97 or v98.
- yget template (but it may be possible to implement with a little customization into another).
Downloads:
There are the neccessary icons, you can copy them in your yget/images folder:
http://vselink.org/downloads/scroll_down.ico http://vselink.org/downloads/scroll_down_hover.ico http://vselink.org/downloads/scroll_up.ico http://vselink.org/downloads/scroll_up_hover.ico
You are also welcome to change them if you like.
Steps to do:
1) Please backup and open file
categories.tpl in your ../templates/yget/sidebar_modules/ folder. Replace
ALL code with this:
[Version 0.97]
There is a
difference between version 0.98 and 0.97. I use 0.97 (but i added some pictures descriptions as in v 0.98,this definitely will not appear in functionality changes) so there is code for version 0.97 of Pligg:
PHP Code:
{php}
//********************************************************************************************
// This file is for VERSION 0.97 ONLY!. (categories.tpl)
//Customized by AnAlienHolakres3 for Pligg Comunity. No warranty,Free of charge
//********************************************************************************************
function set_root_smart() {
global $main_smarty;
$root_id=Array();
$array = tree_to_array(0, table_categories);
//get array of categories
foreach ($array as $cat) {
$cat_id[]=$cat['auto_id'];
}
//get array of subcategories
foreach ($array as $subcat) {
$cat_parent[]=$subcat['parent'];
}
//compare and set root ids
foreach ($cat_id as $category_id){
foreach ($cat_parent as $category_parent){
if ($category_id && $category_parent) {
if ($category_id==$category_parent) {
if(!in_array($category_id,$root_id)) {
$root_id[] = $category_id;
}
}
}
}
}
$main_smarty->assign('root_id',$root_id);
return $root_id;
}
set_root_smart();
{/php}
<div class="tlb">
{php}
echo "<span><a onclick=\"new Effect.toggle('cats','blind', {queue: 'end'}); \"> <img src=\"".my_pligg_base."/templates/".The_Template."/images/expand.png\"></a></span>";
{/php}
<a href="#">{#PLIGG_Visual_Category_Title#}</a>
</div>
<div id="cats" style="padding-bottom:1px">
<ul class="nav-secondary">
{section name=thecat loop=$cat_array start=1}
{if $cat_array[thecat].spacercount lt $lastspacer}{$cat_array[thecat].spacerdiff|repeat_count:'</ul>''</div>'}{/if}
{if $cat_array[thecat].spacercount gt $lastspacer}<ul>{/if}
<a href="{$URL_rsscategory, $cat_array[thecat].auto_id}" target="_blank" style="border:none;">
<img src="{$my_pligg_base}/templates/{$the_template}/images/rss.gif" border="0" style="float:right;padding-right:7px;"></a>
{section name=root2 loop=$root_id start=0}
{if $cat_array[thecat].auto_id eq $root_id[root2]}
<img id="picroot{$cat_array[thecat].auto_id}"style="float:right;padding-right:7px;margin-top:1px;width:18px;height:14px" src="../templates/yget/images/scroll_down.ico" width="18" height="14"
onmouseover="this.src='../templates/yget/images/scroll_down_hover.ico';this.width='18';this.height='14'" onmouseout="this.src='../templates/yget/images/scroll_down.ico';this.width='18';this.height='14'" onmousedown="document.getElementById('subcat{$cat_array[thecat].auto_id}').style.display='';document.getElementById('picrootU{$cat_array[thecat].auto_id}').style.display='';this.style.display='none'">
<img id="picrootU{$cat_array[thecat].auto_id}"style="float:right;padding-right:7px;margin-top:1px;display:none;width:18px;height:14px" src="../templates/yget/images/scroll_up.ico" width="18" height="14"
onmouseover="this.src='../templates/yget/images/scroll_up_hover.ico';this.width='18';this.height='14'" onmouseout="this.src='../templates/yget/images/scroll_up.ico';this.width='18';this.height='14'" onmousedown="document.getElementById('subcat{$cat_array[thecat].auto_id}').style.display='none';document.getElementById('picroot{$cat_array[thecat].auto_id}').style.display='';this.style.display='none'">
{/if}
{/section}
{if $pagename eq "published"}
{section name=root loop=$root_id start=0}
{if $cat_array[thecat].auto_id eq $root_id[root]}
<a href="{$URL_maincategory, $cat_array[thecat].safename}" style="padding-bottom:5px;">{$cat_array[thecat].name}</a>
<div id="subcat{$cat_array[thecat].auto_id}" style="display:none">
{assign var=root_category value=$cat_array[thecat].auto_id}
{/if}
{/section}
{if $cat_array[thecat].auto_id neq $root_category}
<a href="{$URL_maincategory, $cat_array[thecat].safename}" style="padding-bottom:5px">{$cat_array[thecat].name}</a>
{/if}
{else}
{section name=root loop=$root_id start=0}
{if $cat_array[thecat].auto_id eq $root_id[root]}
<a href="{$URL_queuedcategory, $cat_array[thecat].safename}" style="padding-bottom:5px;">{$cat_array[thecat].name}</a>
<div id="subcat{$cat_array[thecat].auto_id}" style="display:none">
{assign var=root_category value=$cat_array[thecat].auto_id}
{/if}
{/section}
{if $cat_array[thecat].auto_id neq $root_category}
<a href="{$URL_queuedcategory, $cat_array[thecat].safename}" style="padding-bottom:5px">{$cat_array[thecat].name}</a>
{/if}
{/if}
</li>
{assign var=lastspacer value=$cat_array[thecat].spacercount}
{/section}
</ul>
</div>
[PART 2 OF THIS TUTORIAL IN NEXT POST]