Categories Dressing

[Qwert302]

How do I remove the -> from the end of top level categories? Thanks.

[Boggled]

I confess I'm clueless.

I've been trying to make my headings linked and everything I've tried (from the "Relentless' posts earlier in this thread) so far kills all of the sideboxes. They either completely disappear or they all start overlapping on top of each other.

Here is a link to the site: www.nybgear.com

I want the headings to link to a category by the same name. As you can see, right now the category is showing directly under the headings. If I can get the headings linkable, I will turn those specific categories off.

I appreciate your help!

[jvanree]

Hi Glenn,

I hope you don't get annoyed by me, but I have yet another question. I have images for eacht category in my menu. They are images of words so they are not good for english or german.

Now I've made new images and placed them, the way I read in this thread, in buttons and than language.

So the path for example for category 1 would be
buttons/dutch/catimg1.gif
buttons/german/catimg1.gif
buttons/english/catimg1.gif

Now I read the part on language-specific stylsheets so I made a stylesheet for every language. What I just don't understand is what to put in it. I read something on catbackground... but I don't use those images, I just use the catimg.gif thing. So what do I add to all of the stylesheets to make it work?

Sorry if this is a stupid question. Thank you again for all your help.

Juliet

[gjh42]

Language-specific stylesheets and the /buttons/language/ subfolders are two different ways to get similar results. They don't really work together, although it probably won't hurt to use them both for their own purposes.
The stylesheets can work for background images, but not for foreground images, and background images cannot switch between subfolders within the CSS.

You should actually be able to make language subfolders in your template /images/ folder, and save the category images there.
Change this section

      // categories dressing - display image if exists for category name - with title tag
      if (file_exists(DIR_WS_TEMPLATE_IMAGES . 'catimg' . $current_path . '.gif')) {
        $cat_name_display = zen_image(DIR_WS_TEMPLATE_IMAGES . 'catimg' . $current_path . '.gif', '', '', '', 'title="' . $box_categories_array[$i]['name'] . '"'); 

to look like this

      // categories dressing - display image if exists for category name in current language - with title tag
      if (file_exists(DIR_WS_TEMPLATE_IMAGES . $_SESSION['language'] . '/catimg' . $current_path . '.gif')) {
        $cat_name_display = zen_image(DIR_WS_TEMPLATE_IMAGES . $_SESSION['language'] . '/catimg' . $current_path . '.gif', '', '', '', 'title="' . $box_categories_array[$i]['name'] . '"'); 

This approach can be adapted to other foreground image displays as well.

[gjh42]

Qwert302 -

The -> is set in admin > Configuration > Layout Settings >
Categories Separator between the Category Name and Count.

[gjh42]

Boggled -

You are making things more complicated than they need to be for your situation.
Instead of making headings that link to the first category in each section, and then hiding that category name, just make those category names look like headings. Use the built-in switch:

    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-holiday';
//        break; 

and make a case for each of categories 1-6, referencing 'category-heading':

      case ($box_categories_array[$i]['path'] == 'cPath=1'):
        $new_style = 'category-heading';
        break;
      case ($box_categories_array[$i]['path'] == 'cPath=2'):
        $new_style = 'category-heading';
        break; 

and then style a.category-heading {} the same as you have styled .catBoxHeading1.

[Boggled]

and then style a.category-heading {} the same as you have styled .catBoxHeading1.

Thank you so much Glenn! I should have known I was overthinking it.

The links are working now, but I can't get them styled. I've added the a.category-heading{} to my stylesheet, but they don't appear to be picking up any styling whatsoever. I tried commenting out the catBoxHeading1 and various other combinations, but nothing worked.

Here is what I have in my stylesheet:

	
.catBoxHeading1 { 
    font-family: "Lucida Grande", tahoma, verdana, arial, helvetica, sans-serif;
	font-size:1em;
	font-weight: bold;
	padding: 0.1em 0 0em 0;
	display: block;
    color: #ffffff;
	text-align: center;
    background-image: url(../images/red/sideboxbg.gif);  /*uncomment to use background image with or without coded text*/
    height: 20px;  /*uncomment to use background image without coded text*/
    width: 160px;
	border: 3px ridge #F9F9F9; 
	border-style: ridge;	
    margin-top: 2px;
    margin-bottom: 2px;
	margin-left: -6px;
    } 
 	

.catBoxSubtext {
    /*font-family:  'times new roman', serif;*/
    font-weight: normal;
    font-size: 1em;
    color: #000000; 
    padding: 0.1em 0.2em 0.1em 1.0em;
	background-color: transparent;
	border-top: 2px solid #E4E0D7;
	padding: 4px;
    }  

/*display all cat box links as block*/
#categories a {
    background-repeat: no-repeat;
    display: block;
	border-top: 1px solid #F3F3F3;
	border-bottom: 1px solid #A9A294;
	border-left: 1px solid #D9D9D9;
	border-right: 2px solid #A9A294;
    }

	
a.category-heading {
    font-family: "Lucida Grande", tahoma, verdana, arial, helvetica, sans-serif;
	font-size:1em;
	font-weight: bold;
	padding: 0.1em 0 0em 0;
	display: block;
    color: #ffffff;
	text-align: center;
	background: #244B86;
    background-image: url(../images/red/sideboxbg.gif);  /*uncomment to use background image with or without coded text*/
    height: 20px;  /*uncomment to use background image without coded text*/
	/*width: 157px;*/
    margin-top: 2px;
    margin-bottom: 2px;
	margin-left: -6px;
	}

	
/* example for  top category styling */
a.category-top-text {
	display: block;
	background-color: #E9E9E9;
	border-top: 2px solid #ECECEC;
	padding: 4px;
    color: #000000; 
    margin: 0.0em 0;
    padding: 0.2em 0.3em;
    } 

a.category-subs-text, a.category-products-text  {
    background-color: #ffffff;
    border-top: 1px solid #E6E6E6;
    border-bottom: 1px solid #D1D1D1;
    border-left: 1px solid #D9D9D9;
    border-right: 2px solid #D1D1D1;
    color: #000000; 
    margin: 0.0em 0;
    padding: 0.2em 0.3em;
    } 

/* uncomment for  top category hover effects (add ,  a.category-subs-text, a.category-products-text if desired) (use  background-image if desired)*/
a.category-top-text:hover {
	 color: #000000;
	 border-top: 1px solid #f5f5f5;
	 border-bottom: 1px solid #f5f5f5;
     background-color: #ffffff;
    } 
	
a.category-subs-text:hover, a.category-products-text:hover  {
	 color: #000000;
     background-color: #93C632;
    }

Site: www.nybgear.com

Do you see what I'm doing wrong? I know it's bound to be something simple that I'm overlooking.

[SITM]

Is their a way to center the images you use as category names? you can see my problem here:

http://www.optifact.com/zencart

[SITM]

Also is their a way to add a space between the images? you can see my problem here: http://www.optifact.com/zencart

[gjh42]

SITM -
Add text-align: center; and margin-top: .5em; to your #categories a{} rule:

#categories a { 
    background-repeat: no-repeat;
    display: block;
    text-align: center;
    margin-top: .5em;
    }