Forums / Addon Sideboxes / Categories Dressing

Categories Dressing

Views: 532,557

Results 61 to 80 of 2,268
15 Sep 2007, 10:13 AM
#61
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Categories Dressing

Maybe I was seeing a cached version of it when I looked just after you posted? At any rate, I see the code in stylesheet.css now, but what is there is missing the added #categories I mentioned in post #56:```
/* bullet for top categories & links:*/
a.category-top-text, a.category-not-selected, a.category-top-text, a.category-subs-selected, #categories a.category-links {
display: list-item;
list-style: disc inside url(../images/bullet1.gif);
}

Actually, on revisiting the master copy of stylesheet_categories_dressing, I discover that the problem is something else: a couple of commas found their way into your copy of the declaration, completely changing its meaning. It should read```
/* bullet for top categories & links:*/
a.category-top-text .category-not-selected, a.category-top-text .category-subs-selected, #categories a.category-links {
    display: list-item;
    list-style: disc inside url(../images/bullet1.gif);
    }
	
```which explains the two "a.category-top-text" references. They are specifying
a.category-top-text .category-not-selected
and
a.category-top-text .category-subs-selected.

P.S. - There is no point in copying the declarations that relate to features you are not going to use, as they will only serve to bloat the stylesheet. And according to the W3C validator, having multiple stylesheet files beyond the necessary actually does take longer to load (probably only milliseconds on a good connection, but every little bit helps).
15 Sep 2007, 9:20 PM
#62
rwoody avatar

rwoody

Totally Zenned

Join Date:
Aug 2004
Location:
Fountain Hills, AZ
Posts:
476
Plugin Contributions:
0

Re: Categories Dressing

Finally got it working... LOL..not sure how, but its working now.

On template monster - ARGH!!! No this is mine - When a customer comes to me with one of those templates I look at the design - and save nothing but the images if that is appropriate and throw the rest away. I don't even try to make their templates work by hacking them up.... just way to much work. No I started with the basic classic without any images as is typical and started making my modifications.

I really once again have to thank you. One last question... for some reason the customer wants the categories open all the time. I "believe" I read that the mod "Category List Box" does that. Is that correct and will it work with your modification. I want all the same just for the menu to not collapse.

Thanks again... you saved me soooooooo much work now and in the future.:clap:

Ruth

15 Sep 2007, 10:12 PM
#63
rwoody avatar

rwoody

Totally Zenned

Join Date:
Aug 2004
Location:
Fountain Hills, AZ
Posts:
476
Plugin Contributions:
0

Re: Categories Dressing

I went back through the thread and found the correct reference for this mod for un-collapsed cat tree. I'm going to install and it should work fine.

Thanks again

16 Sep 2007, 9:15 PM
#64
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Categories Dressing

If the un-collapsed cat tree mod includes changes to tpl_categories.php, it will require integrating code with the Cat Dressing copy. If it operates deeper in the process, only specifying the content fed to tpl_categories.php, it should coexist fine. Let me know either way.

18 Sep 2007, 10:19 PM
#65
davale avatar

davale

Zen Follower

Join Date:
Apr 2006
Posts:
117
Plugin Contributions:
0

Re: Categories Dressing

Just starting out experimenting with this mod and it sure offers posibilties. Working on a way to add a background image to the top categories while preserving the original categorynames in plain text.

Using the a.catBg25 tags I was succesfull in adding a background image. Lost the text though because it's meant to be used with a foreground image. Modified line 59 of the tpl_categories file to display the category name again;

$cat_name_display = $box_categories_array[$i]['name'];

Seems to work fine but somehow I'm not able to adjust the text position within the background image. Padding works fine on the left but top padding doesn't seem to work (FF). Any pointers on how to display the text lower within the background image? Might well be that I'm going at this the wrong way altogether so any feedback is appreciated.

18 Sep 2007, 10:55 PM
#66
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Categories Dressing

You're wanting individual/different backgrounds for each category? If not, just style the basic classes. If so, you're doing it right, though it would be even simpler to delete line 59 and let $cat_name_display keep the correct value it already has instead of being set to blank.

The existence of a background is irrelevant to the position of the text within its box. Maybe styling the size of the box differently (just using padding instead of a specific height) will work. My stock declarations for that situation were based on not having text to work off of. I'll play with it and see what I come up with.

19 Sep 2007, 9:54 AM
#67
davale avatar

davale

Zen Follower

Join Date:
Apr 2006
Posts:
117
Plugin Contributions:
0

Re: Categories Dressing

Thanx for the swift response. Should have mentioned I was looking for a way to add different backgrounds for each category. Tried adding padding to both the a.catBg and (seperate) .category-not-selected tag. a.catBg works but padding is applied to both the background image and text (makes sense). I'll play around with it some more to see if padding can only be applied to the text. If you come up with something it's much appreciated.

19 Sep 2007, 12:29 PM
#68
davale avatar

davale

Zen Follower

Join Date:
Apr 2006
Posts:
117
Plugin Contributions:
0

Re: Categories Dressing

Adding padding-left: 5%; and padding-top: 5%; to the individual a.catBg tag seems to do the trick in FF. Also, applying this to the #categories a tag seems to work. Not sure if this is really wise to do with IE but for now I'll work with this. If you have a better idea please let me know.

Edit: Spoke to soon. Padding like this also effects to spacing between top and subcategories. Creates a division between them I don't want there. I'll keep searching.

22 Sep 2007, 1:40 PM
#69
pglad avatar

pglad

Zen Follower

Join Date:
Jun 2007
Posts:
198
Plugin Contributions:
0

Re: Categories Dressing

Hello, I've been searching through the threads but can't seem to find an answer to this one. I'm using Categories Dressing without any problems (great mod), but would like to use the image and onHover setting for the Specials links etc which appear below the Categories. Have I overlooked something and can this be done?

Thanks

22 Sep 2007, 2:57 PM
#70
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Categories Dressing

Version 2.0 of Categories Dressing includes this functionality. There are a number of changes in the coding between 2.0 and previous versions, so you will want to be careful when upgrading. Depending on which functions you are using, you may need to rename some image files and stylesheet tags.

22 Sep 2007, 3:20 PM
#71
pglad avatar

pglad

Zen Follower

Join Date:
Jun 2007
Posts:
198
Plugin Contributions:
0

Re: Categories Dressing

Okay thanks Glenn

24 Sep 2007, 4:10 PM
#72
moff avatar

moff

New Zenner

Join Date:
Sep 2007
Location:
UK
Posts:
27
Plugin Contributions:
0

Re: Categories Dressing

Hi, I am a newbie to Zen and have used your great Dressing mod. I have it working nicely but was hoping someone could tell me how to replace the default 'Categories' text above the list of cats with an image?

Not sure whether I should be looking in the css or tpl_categories code :blink:

Thanks in advance.

25 Sep 2007, 8:13 AM
#74
moff avatar

moff

New Zenner

Join Date:
Sep 2007
Location:
UK
Posts:
27
Plugin Contributions:
0

Re: Categories Dressing

Thanks for your reply Glenn, I'll take a look over there :smile:

2 Oct 2007, 5:06 PM
#75
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Categories Dressing

A few bits of code for reference, to modify /includes/templates/your_template/sideboxes/tpl_categories.php...

First, the Image Titles mod is now available in Downloads to address the question above.

To skip a certain category (or group of categories) from displaying in the list, find this line near the top of the file:

    if (zen_get_product_types_to_category($box_categories_array[$i]['path']) == 3 or ($box_categories_array[$i]['top'] != 'true' and SHOW_CATEGORIES_SUBCATEGORIES_ALWAYS != 1)) {
      // skip if this is for the document box (==3) 
    } else { 

and add

($box_categories_array[$i]['path'] == 'cPath=23') or

to the beginning to get

    if (($box_categories_array[$i]['path'] == 'cPath=23') or zen_get_product_types_to_category($box_categories_array[$i]['path']) == 3 or ($box_categories_array[$i]['top'] != 'true' and SHOW_CATEGORIES_SUBCATEGORIES_ALWAYS != 1)) {
      // skip if this is for the document box (==3), or category 23
    } else { 

If using Cat Dressing, you can replace
($box_categories_array[$i]['path'] == 'cPath=23')
with
($current_path == '23')

Replace the 23 with the correct cPath for your category so it reads (say) 'cPath=4_37'.

To restrict the display to only certain levels of subcategories, this can be modified as desired:
To only show one level of subcategories, find```php
if (zen_get_product_types_to_category($box_categories_array[$i]['path']) == 3 or ($box_categories_array[$i]['top'] != 'true' and SHOW_CATEGORIES_SUBCATEGORIES_ALWAYS != 1)) {
// skip if this is for the document box (==3)
} else {

and add

ereg("_.*_", $box_categories_array[$i]['path']) or

to get```php
     if (ereg("_.*_", $box_categories_array[$i]['path']) or zen_get_product_types_to_category($box_categories_array[$i]['path']) == 3 or ($box_categories_array[$i]['top'] != 'true' and SHOW_CATEGORIES_SUBCATEGORIES_ALWAYS != 1)) {
        // skip if this is for the document box (==3)
      } else { 

Again, if using Cat Dressing, you can replace
ereg(".*", $box_categories_array[$i]['path'])
with
ereg(".*", $current_path)

This skips the item display if there are two or more _ in the cPath.

3 Oct 2007, 12:59 AM
#76
relentless avatar

relentless

New Zenner

Join Date:
Sep 2007
Posts:
56
Plugin Contributions:
0

Re: Categories Dressing

There are 3 files in Category Dressing Mod,
1= css, 2= images, 3= sideboxes
Can I save, and remove images from this mod, [no images in my Headings]
or are they all necessary for proper installation.
Relentless

3 Oct 2007, 7:35 AM
#77
lmw1 avatar

lmw1

Zen Follower

Join Date:
Mar 2007
Posts:
105
Plugin Contributions:
0

Re: Categories Dressing

3 things I would like to do...

This is the site: https://www.starzbodyjewelry.com

  1. Make my Top Categories 'non-linked' *(un-clickable). But you can click on the sub-categories below the category heading.

  2. Is there anyway to 'hide' the subcategories of a sub-category on the main menu?

  3. The top nav bar is not ez-pages, its cat-tabs. How can I put 'Home' on the far left, and 'Contact Us' on the far right?

Here's the code for my tpl_categories.php file.

<?php /** * Side Box Template * * @package templateSystem * @copyright Copyright 2003-2006 Zen Cart Development Team * @copyright Portions Copyright 2003 osCommerce * @license <http://www.zen-cart.com/license/2_0.txt> GNU Public License V2.0 * @version $Id: tpl_categories.php 4162 2006-08-17 03:55:02Z ajeh $ * Modified for Categories Dressing v2.0 by Glenn Herbert (gjh42) 2007-07-13 */ $disp_block = ''; $disp_block = '<br />'; //if not using display: block; in stylesheet, uncomment this line $content = ""; $content .= '<div id="' . str_replace('_', '-', $box_id . 'Content') . '" class="sideBoxContent">' . "\n"; for ($i=0;$i<sizeof($box_categories_array);$i++) { switch(true) { // to make a specific category stand out define a new class in the stylesheet example: A.category-holiday // uncomment the select below and set the cPath=3 to the cPath= your_categories_id // many variations of this can be done case ($box_categories_array[$i]['path'] == 'cPath=3'): $new_style = 'category-bodyjewelry'; break; case ($box_categories_array[$i]['path'] == 'cPath=4'): $new_style = 'category-hiphopjewelry'; break; case ($box_categories_array[$i]['path'] == 'cPath=5'): $new_style = 'category-misc.'; break; case ($box_categories_array[$i]['path'] == 'cPath=1'): $new_style = 'category-newarrivals'; break; case ($box_categories_array[$i]['path'] == 'cPath=36'): $new_style = 'category-packagedeals'; break; case ($box_categories_array[$i]['path'] == 'cPath=2'): $new_style = 'category-closeout'; break; case ($box_categories_array[$i]['top'] == 'true'): $new_style = 'category-top'; break; case ($box_categories_array[$i]['has_sub_cat']): $new_style = 'category-subs'; break; default: $new_style = 'category-products'; } $current_path = str_replace("cPath=","",$box_categories_array[$i]['path']); if (zen_get_product_types_to_category($box_categories_array[$i]['path']) == 3 or ($box_categories_array[$i]['top'] != 'true' and SHOW_CATEGORIES_SUBCATEGORIES_ALWAYS != 1)) { // skip if this is for the document box (==3) } else { // categories dressing - add divider above specified cats if(in_array($current_path, explode(",",'3,22,21_56'))) { //replace numbers with your cat ids separated by commas $content .= '<hr class="catBoxDivider" />' . "\n"; } //categories dressing - add (divider and) heading above a cat $disp_block_head = ''; //$disp_block_head = '<br />'; // for heading not block uncomment this line switch ($current_path) { case '23': //replace number with your desired cPath //$content .= '<hr class="catBoxDivider" />' . "\n"; // to add divider uncomment this line $content .= '<span class="catBoxHeading1">' . (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead' . $current_path . '.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'cathead' . $current_path . '.gif') . '</span>':'Heading 1</span>' . $disp_block_head) . "\n"; break; } // categories dressing - category name mods $cat_name_display = $box_categories_array[$i]['name']; $cat_img_bg = ''; // categories dressing - display image if exists for category name if (file_exists(DIR_WS_TEMPLATE_IMAGES . 'catimg' . $current_path . '.gif')) { $cat_name_display = zen_image(DIR_WS_TEMPLATE_IMAGES . 'catimg' . $current_path . '.gif'); // categories dressing - display background image if exists for category name } elseif (file_exists(DIR_WS_TEMPLATE_IMAGES . 'catbg' . $current_path . '.gif')) { $cat_name_display = ''; $cat_img_bg = ' catBg' . $current_path; } else { $cat_img_bg = '-text';//append to main classname } $content .= '<a class="' . $new_style . $cat_img_bg . '" href="' . zen_href_link(FILENAME_DEFAULT, $box_categories_array[$i]['path']) . '">'; if ($box_categories_array[$i]['current']) { if ($box_categories_array[$i]['has_sub_cat']) { $content .= '<span class="category-subs-parent">' . $cat_name_display . '</span>'; } else { $content .= '<span class="category-subs-selected">' . $cat_name_display . '</span>'; } } else { $content .= '<span class="category-not-selected">' . $cat_name_display . '</span>'; } // category name mods if ($box_categories_array[$i]['has_sub_cat']) { $content .= CATEGORIES_SEPARATOR; } $content .= '</a>'; if (SHOW_COUNTS == 'true') { if ((CATEGORIES_COUNT_ZERO == '1' and $box_categories_array[$i]['count'] == 0) or $box_categories_array[$i]['count'] >= 1) { $content .= CATEGORIES_COUNT_PREFIX . $box_categories_array[$i]['count'] . CATEGORIES_COUNT_SUFFIX; } } $content .= $disp_block . "\n"; // categories dressing - add subtext below a cat switch ($current_path) { case '23': //replace number with your desired cPath $content .= '<span class="catBoxSubtext">Subtext for cat 23 escape apostrophe\'s</span>' . $disp_block . "\n"; break; } // subtext } } if (SHOW_CATEGORIES_BOX_SPECIALS == 'true' or SHOW_CATEGORIES_BOX_PRODUCTS_NEW == 'true' or SHOW_CATEGORIES_BOX_FEATURED_PRODUCTS == 'true' or SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true') { // display a separator between categories and links if (SHOW_CATEGORIES_SEPARATOR_LINK == '1') { $content .= '<hr id="catBoxDivider" />' . "\n"; } if (SHOW_CATEGORIES_BOX_SPECIALS == 'true') { //$content .= '<span class="catBoxHeading1">' . (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead-specials.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'cathead-specials.gif') . '</span>':'Link Heading</span>' . $disp_block_head) . "\n";// categories dressing - uncomment this line for heading above link $show_this = $db->Execute("select s.products_id from " . TABLE_SPECIALS . " s where s.status= 1 limit 1"); if ($show_this->RecordCount() > 0) { $content .= '<a class="category-links" href="' . zen_href_link(FILENAME_SPECIALS) . '">' . CATEGORIES_BOX_HEADING_SPECIALS . '</a>' . $disp_block . "\n"; } } 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) { //$content .= '<span class="catBoxHeading1">' . (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead-new.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'cathead-new.gif') . '</span>':'Link Heading</span>' . $disp_block_head) . "\n";// categories dressing - uncomment this line for heading above link $content .= '<a class="category-links" href="' . zen_href_link(FILENAME_PRODUCTS_NEW) . '">' . CATEGORIES_BOX_HEADING_WHATS_NEW . '</a>' . $disp_block . "\n"; } } if (SHOW_CATEGORIES_BOX_FEATURED_PRODUCTS == 'true') { $show_this = $db->Execute("select products_id from " . TABLE_FEATURED . " where status= 1 limit 1"); if ($show_this->RecordCount() > 0) { //$content .= '<span class="catBoxHeading1">' . (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead-featured.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'cathead-featured.gif') . '</span>':'Link Heading</span>' . $disp_block_head) . "\n";// categories dressing - uncomment this line for heading above link $content .= '<a class="category-links" href="' . zen_href_link(FILENAME_FEATURED_PRODUCTS) . '">' . CATEGORIES_BOX_HEADING_FEATURED_PRODUCTS . '</a>' . $disp_block . "\n"; } } if (SHOW_CATEGORIES_BOX_PRODUCTS_ALL == 'true') { $content .= '<span class="catBoxHeading1">' . (file_exists(DIR_WS_TEMPLATE_IMAGES . 'cathead-all.gif') ? zen_image(DIR_WS_TEMPLATE_IMAGES . 'cathead-all.gif') . '</span>':'Link Heading</span>' . $disp_block_head) . "\n";// categories dressing - uncomment this line for heading above link $content .= '<a class="category-links" href="' . zen_href_link(FILENAME_PRODUCTS_ALL) . '">' . CATEGORIES_BOX_HEADING_PRODUCTS_ALL . '</a>' . "\n"; } } $content .= '</div>'; ?>

Thanks in Advance!
LMW1

3 Oct 2007, 7:42 AM
#78
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Categories Dressing

The images are purely examples and can be deleted, though if you want the arrows (bulletx.gif) for list markers you should keep them.

The CSS should ideally be modified as desired and the parts to be used copied into your main stylesheet. Then stylesheet_categories_dressing.css can be deleted. There are more pieces there than any one site is likely to use.

3 Oct 2007, 7:51 AM
#79
gjh42 avatar

gjh42

Black Belt

Join Date:
Jul 2005
Location:
Upstate NY
Posts:
21,876
Plugin Contributions:
8

Re: Categories Dressing

Lmw1,

  1. I already answered this question in one of your other threads.

  2. See post #75 above.

  3. You would copy the link code from tpl_header.php to the file that builds the cat-tabs menu content. The details are not relevant to this thread.

4 Oct 2007, 1:47 AM
#80
relentless avatar

relentless

New Zenner

Join Date:
Sep 2007
Posts:
56
Plugin Contributions:
0

Re: Categories Dressing

Re: Categories Dressing
Is this all the css I need,
for, text only, no images,
no display: block, for all headings in sideboxes.

Catrgory Heading.
.catBoxHeading1 {
font-family: arial,verdana,helvetica, sans-serif;
font-weight: bold;
font-size: 1em;
color: #00FF00;
background-color: #transparent;
/*background-image: url(../images/catheadbg1.gif); */ /uncomment to use background image with or without coded text/
/height: 23px; / /uncomment to use background image without coded text/
/
display: block;
/
/padding: 0.3em 0.4em;/
margin-top: 2px;
margin-bottom: 2px;
}
Thank you for the whole css, not needed tip, I missed that one.