Categories Dressing

**abs007** · 20 Mar 2009, 04:53 PM

Hi
I dont think i have understood it correctly. So do i add this code to the cat dressing css or the template css? If cat dressing css i presume i add it in the same place as the other catbg#.gif codes but if its in the template css where about would i add it?

cheers and thank you ever so much for all the help

**abs007** · 21 Mar 2009, 01:31 PM

Ok i have managed to sort it. But it only worked when i saved the catbg#active.gif image in the images folder. Even when i had the image location set to /my_template/buttons/english the images would not work. So i changed the place of the images to the /my_template/images directory without changing the css code and it worked. So i went and changed the css code to match so i dont get confused when i go over it again.
cheers

**newagekat** · 24 Mar 2009, 06:58 PM

Hello Glenn:

First my thanks for creating this mod, by the looks of this thread, it is very popular.

Second, I appreciate the speed and patience you have demonstrated throughout the thread. I've spent a lot of time trying to read through all these posts.

Here's my questions:
I'm using zc v1.3.8a. I've installed the relevant bugs for this site. I'm trying to keep the design clean and free of sideboxes so I'm using the default category tabs.

Before I make the decision to install Categories Dressing, I'm wondering if your mod can do what I need.

in essence, I want

the 1st level categories, currently using tabs, to maintain their rollover state of white bg when navigating within that category - see image
the 2nd level categories to be dynamic but plain text (not linked) and placed in Content area - see image
list 3rd level categories as links below 2nd level.
if possible, I'd also like to have the What's new and Specials added to the list of 1st level categories as it would naturally appear in a sidebox.
lastly, and not at all related, but someone might know the answer to this question. I'm using wholesale (read brand) filter for the first time. i'm noticing that when one selections a brand option, it takes the user back to the home page. it seems the index.php part of the URL is missing. where can this be fixed?

I have never used category tabs before or a sidebox free layout, and I'm finding it a little disconcerting. My skills are decent, as you can see from the site, this is my design and I did all the work in creating this template. Although I can move code and modify somewhat, I'm NO PHP coder

Attached image.

**newagekat** · 25 Mar 2009, 04:23 PM

Hi:

can anyone help with my questions? i posted 2 days ago and have not heard back. anyone?

**gjh42** · 25 Mar 2009, 04:55 PM

Two days ago? I think less than 24 hours ago. I've been working on answers for you.

First, Categories Dressing by default does not affect the categories-tabs menu at all. Many of its styling rules could be applied by adding the cat-tabs selectors to the Cat Dressing rules.

The tricky part may be getting the categories sidebox (which is what Cat Dressing controls) to display without having a visible side column. It may work to set (Configuration > Layout Settings) Column Width Left and Column Width Boxes Left to 0. Then make #categoriesHeading {display: none;} and eliminate any border or bg color in #categories {} and #categoriesContent {}.

You can make the cat-tabs work as you want right now by changing your stylesheet like this (add parts in red):

Code:

div#navCatTabs { height: 2.5em; position: relative; bottom: -0.3em;}

#navCatTabs ul
{
	margin: 0;
	padding: 0;
	z-index: 10;
	height: 2.5em;
}

#navCatTabs ul li
{
	display: inline;
	font-size: 1.1em;
	float: left;
	list-style: none;
	color: #7597A6;
	background-color: white;
	margin-right: .25em;
}

#navCatTabs ul li a:link, #navCatTabs ul li a:visited
{
	padding: .5em .75em;
	color: #fff;
	background-color: #7597A6;
	border-color: #8FBAC9 #8FBAC9 white #8FBAC9;
	border-width: 1px;
	border-style: solid;
	text-transform: uppercase;
	display: block;
}

#navCatTabs ul li a:hover
{
	color: #7597A6;
	background-color: #fff;
	text-decoration: none;
}

#navCatTabs a.category-top .category-subs-selected {
    display: block;
    padding: 0.5em 0.7em;
    margin: -0.5em -0.8em -0.5em -0.7em;
    color: #7597A6;
    background-color: #fff;
    text-decoration: none;
    }

You will be able to hide top categories in the sidebox, and position the sidebox content, using the controls available with Cat Dressing. I don't think it will be possible to disable the first level subcat links without some code modification; there may be a workaround, but I would have to experiment to find it.

**newagekat** · 25 Mar 2009, 05:06 PM

Glenn:

First, my apologies. I sometimes get impatient and forget that I'm not the center of the universe ;)

Second, I'll try your suggestions. I've been able to move some sidebox functionality into the content area, so I'll first move the categories sidebox where I want it, then I'll install and apply your mod. Adding mods can sometimes be overwhelming if you don't understand their full impact / purpose.

I'll keep you posted on my progress. if I make this work, i will share my solution.

thanks for taking the time to formulate an answer.

**gjh42** · 25 Mar 2009, 05:35 PM

For the What's New and Specials, you would need to copy some code from tpl_categories.php to the cat-tabs code area. There are tests involved in making the correct display, so it's not just a matter of pasting in a couple of links.

**newagekat** · 25 Mar 2009, 06:17 PM

Hi Glenn:

the css for tabs looks great! thank you.

as to adding the What's New and specials tabs, here's what I did:

I copied lines 63 to 83 inclusive from includes/templates/deault/sideboxes/tpl_categories.php and pasted it into includes/templates/custom/templates/tpl_module_categories_tabs.php

As mentioned, i'm no PHP coder, so I'm know my syntax and / or placement are the reasons it's not working.

So, for tabs the original code was:

Code:

  include(DIR_WS_MODULES . zen_get_module_directory(FILENAME_CATEGORIES_TABS));
?>
<?php if (CATEGORIES_TABS_STATUS == '1' && sizeof($links_list) >= 1) { ?>
<div id="navCatTabsWrapper">
<div id="navCatTabs">
<ul>
<?php for ($i=0, $n=sizeof($links_list); $i<$n; $i++) { ?>
  <li><?php echo $links_list[$i];?></li>
<?php } ?>
</ul>
</div>
</div>
<?php } ?>

the new code is:

Code:

  include(DIR_WS_MODULES . zen_get_module_directory(FILENAME_CATEGORIES_TABS));
?>
<?php if (CATEGORIES_TABS_STATUS == '1' && sizeof($links_list) >= 1) { ?>
<div id="navCatTabsWrapper">
<div id="navCatTabs">
<ul>
<?php for ($i=0, $n=sizeof($links_list); $i<$n; $i++) { ?>
  <li><?php echo $links_list[$i];?></li>
<?php } 
 if (SHOW_CATEGORIES_BOX_SPECIALS == 'true') {
      $show_this = $db->Execute("select s.products_id from " . TABLE_SPECIALS . " s where s.status= 1 limit 1");
      if ($show_this->RecordCount() > 0) { ?>
  <li><?php $content .= '<a href="' . zen_href_link(FILENAME_SPECIALS) . '">' . CATEGORIES_BOX_HEADING_SPECIALS . '</a>';?></li>
<?php  }
    } 
    if (SHOW_CATEGORIES_BOX_PRODUCTS_NEW == 'true') {
      // display limits
//      $display_limit = zen_get_products_new_timelimit();
      $display_limit = zen_get_new_date_range();

      $show_this = $db->Execute("select p.products_id
                                 from " . TABLE_PRODUCTS . " p
                                 where p.products_status = 1 " . $display_limit . " limit 1");
      if ($show_this->RecordCount() > 0) { ?>
      <li><?php $content .= '<a href="' . zen_href_link(FILENAME_PRODUCTS_NEW) . '">' . CATEGORIES_BOX_HEADING_WHATS_NEW . '</a>';?></li>
<?php      }
    } ?>
</ul>
</div>
</div>
<?php } ?>

is this something you can help me with or should I be posting elsewhere for this?

thanks again

**newagekat** · 25 Mar 2009, 07:22 PM

Originally Posted by gjh42

The tricky part may be getting the categories sidebox (which is what Cat Dressing controls) to display without having a visible side column. It may work to set (Configuration > Layout Settings) Column Width Left and Column Width Boxes Left to 0. Then make #categoriesHeading {display: none;} and eliminate any border or bg color in #categories {} and #categoriesContent {}.

You will be able to hide top categories in the sidebox, and position the sidebox content, using the controls available with Cat Dressing. I don't think it will be possible to disable the first level subcat links without some code modification; there may be a workaround, but I would have to experiment to find it.

Glenn:
Thank you for taking the time to work with me. Sometimes I take on more than I can chew. I've installed your Mod and will attempt to make some sense of it.

in Configuration > Layout settings, i have the following:
Column Width - Left Boxes 130px
Column Left Status - Global 1 - my left column is being used for the binder rings image.
Column Width - Left 130px

Column Width - Right Boxes 0
Column Right Status - Global 0
Column Width - Right 0

so I only changed the following:
Column Right Status - Global 1

in Tool > Layout box controller, I don't currently have the categories turned on. if I turn on single column, it does nothing. So I turn on right column.

I have set
#categoriesHeading {display: none;)
#categories {} and #categoriesContent {}

The categories are now showing outside the centerContent area, but are not properly listing the sub categories.

I had created the level 3 categories before the level 2 for Books and Patterns, and then moved the level 3 under level 2. so the ID may be mixed up?

I'm not usually dense, but the instruction on grouping in your readme, well, is confusing.

I take it that there is no interface for the settings, they have to be manually coded into categories_dressing_defines.php?

**gjh42** · 25 Mar 2009, 07:54 PM

PHP Code:


  <li><?php $content .= '<a href="' . zen_href_link(FILENAME_SPECIALS) . '">' . CATEGORIES_BOX_HEADING_SPECIALS . '</a>';?></li>

The $content .= part is used in tpl_categories.php, where content is accumulated before being output. Here it is output directly, so you would want to change
$content .=
to
echo

PHP Code:


  <li><?php echo '<a href="' . zen_href_link(FILENAME_SPECIALS) . '">' . CATEGORIES_BOX_HEADING_SPECIALS . '</a>';?></li>

Do the same for the other link.

For the sidebar, I didn't check to find that you were using the left sidebar already. That makes it easier; you can just enable the categories box in the left column, set its width and a negative margin-right if needed (it may well not be needed), and move the box to the right with position: relative; .

The category ids can't cause any problems. Just use the cPath if needed to specify a category. Your case is actually very simple, and you don't need to mess with groups at all. Setting the top cats to be hidden in categories_dressing_defines.php means that you will want to move the entire remaining content of the box to the right-side position.
You will also want to disable or hide the subcategory links on pages that are not subcat listings.