Remove some category links from header bar

The 'br' tag does indeed move the cat_tag to the next line, but it also has the second header right next to it. . . and so on like steps.

Well ... I am not a designer type ...

But another way to do this is to store the $cat_tag to its own variable:

  $links_list[] = '<a class="' . $new_style . '" href="' . zen_href_link(FILENAME_DEFAULT, 'cPath=' . (int)$categories_tab->fields['categories_id']) . '">' . $categories_tab_current . '</a> ';
  $links_list2[] = $cat_tag;

Then, you need to figure out ... and no, I don't know the solution ... how to customize the template:
tpl_modules_categories_tabs.php

so that you have the links_list draw in a row and then the link_list2 draw on the next row ... and look all pretty on the display ... :smile:

Unfortunately, I am not too good at the designer stuff so perhaps someone can jump in here with a better solution from these code changes ... :cool:

I was able to make the Category headers look just like I want them to with your last suggestion.

It's not the perfect solution because I had to line up the second line with the first using css padding and the right number of characters. It would've worked perfectly if I could've figured out how to add a class to the individual tabs, but because the tabs are an inline <ul>, I just didn't know a solution.

Anyway here is how it did it:

In tpl_modules_categories_tabs.php I changed this code:

TO:

In Category_tabs.php I changed this code from:

// create link to top level category

$links_list[] = '<a class="' . $new_style . '" href="' . zen_href_link(FILENAME_DEFAULT, 'cPath=' . (int)$categories_tab->fields['categories_id']) . '">' . $categories_tab_current . '</a> ';

TO:

if ($categories_tab->fields['categories_id'] == '85' || $categories_tab->fields['categories_id'] == '21' || $categories_tab->fields['categories_id'] == '73') {
// skip it
} else {
// create link to top level category

$links_list[] = '<a class="' . $new_style . '" href="' . zen_href_link(FILENAME_DEFAULT, 'cPath=' . (int)$categories_tab->fields['categories_id']) . '">' . $categories_tab_current . '</a> ';

// bof: add tag line to categories
switch((int)$categories_tab->fields['categories_id']) {
case (67):
$cat_tag = '<span class="cat_tag">' . 'Make Your Own Design' . '</span>';
break;
case (65):
$cat_tag = '<span class="cat_tag">' . 'made by us for you' . '</span>';
break;
case (71):
$cat_tag = '<span class="cat_tag">' . 'Everything but walls...' . '</span>';
break;
case (69):
$cat_tag = '<span class="cat_tag">' . 'Add Embellishments.' . '</span>';
break;
case (70):
$cat_tag = '<span class="cat_tag">' . 'fun Vehicle Graphics' . '</span>';
break;
default:
$cat_tag = '<span class="cat_tag">' . 'Other Stuff ' . (int)$categories_tab->fields['categories_id'] . '</span>';
break;
}

$links_list2[] = $cat_tag;

// eof: add tag line to categories
}

$categories_tab->MoveNext();

}
?>

(The first part ($categories_tab->fields['categories_id'] == '85' || ) leaves out categories I didn't want showing in the header).

Then in the stylesheet I created these:

#navCatTabs ul { /Red Category Tabs/ /*top, right, bottom, left */
margin: 0px 0px -14px 0px;
padding-top: 12px;
list-style-type: none;
font-size: 20px;
text-align: left;

}

#navCatTabs span.cat_tag{
color: #ffffff;
text-align: left;
list-style-type: none;
text-transform: lowercase;
font-weight:bold;
font-family: Century Gothic, sans-serif;
font-size: 13px;
padding: 0px 32px 0px 10px; /*top, right, bottom, left */
}

#navMain ul li, #navSupp ul li, #navCatTabs ul li {
display: inline;

}

#navCatTabs ul li a, #navCatTabs ul li a:active { /Red Category Tabs/
text-decoration: none;
padding: 0px 30px 0px 10px; /*top, right, bottom, left */
margin: 0;
color: #ffffff;
white-space: nowrap;
}

Thank you Ajeh, for all your help on this "opportunity". I greatly appreciate it. Hope you like the donuts!

Kim :)

Thank you again!

Note: ids are supposed to be unique on a page, so two <div id="navCatTabs"> is improper CSS/HTML.
One of them should be <div id="navCatTabs2">.

On a more fundamental level (now that you have this working:), you don't need the two <ul> lists; the <li> displayed inline could be changed to regular list-item which is like block display, and floated left so they stay on the same line.

It's a bit complex to work out in this post, but less complex than what you did, and more robust if you ever change any categories.

Thank you for the info, gjh42. I updated the css and it actually fixed a situation where I wanted to disable my cufon for the smaller text, but couldn't because it was in the same ID as the larger text.

Yes, I am dreading any changes to my categories. I would love to make it work correctly, but I would need more guidance to get it done.

Thanks for the update that you were able to get this working and for posting your solution to this situation ...

Let us know if you get everything perfected for it with the id as gjh42 is suggesting ... :smile:

Revert tpl_modules_categories_tabs.php back to the original (delete it from your template folder if you have no other changes to it).
Edit a fresh copy of category_tabs.php like this```php
} else {
// bof: add tag line to categories
switch((int)$categories_tab->fields['categories_id']) {
case (67):
$cat_tag = '<span class="cat_tag">' . 'Make Your Own Design' . '</span>';
break;
case (65):
$cat_tag = '<span class="cat_tag">' . 'made by us for you' . '</span>';
break;
case (71):
$cat_tag = '<span class="cat_tag">' . 'Everything but walls...' . '</span>';
break;
case (69):
$cat_tag = '<span class="cat_tag">' . 'Add Embellishments.' . '</span>';
break;
case (70):
$cat_tag = '<span class="cat_tag">' . 'fun Vehicle Graphics' . '</span>';
break;
default:
$cat_tag = '<span class="cat_tag">' . 'Other Stuff ' . (int)$categories_tab->fields['categories_id'] . '</span>';
break;
}
// eof: add tag line to categories

// create link to top level category

$links_list[] = '<a class="' . $new_style . '" href="' . zen_href_link(FILENAME_DEFAULT, 'cPath=' . (int)$categories_tab->fields['categories_id']) . '">' . $categories_tab_current . '<br />' . $cat_tag '</a> ';
}

$categories_tab->MoveNext();

}
?>

Change the styles above like this```
#navCatTabs ul { /*Red Category Tabs*/ /*top, right, bottom, left */
    margin: 0px 0px -14px 0px;
    padding-top: 12px;
    list-style-type: none;
    font-size: 20px;
    text-align: left;
    }

#navCatTabs span.cat_tag{
    color: #ffffff;
    text-align: left;
    text-transform: lowercase;
    font-weight:bold;
    font-family: Century Gothic, sans-serif;
    font-size: 13px;
    padding: 0px 32px 0px 10px; /*top, right, bottom, left */
    }

#navMain ul li, #navSupp ul li {
    display: inline;
    }

#navCatTabs ul li {/*let it be a standard li display*/
    float: left;
    }

#navCatTabs ul li a, #navCatTabs ul li a:active { /*Red Category Tabs*/
    text-decoration: none;
    padding: 0px 30px 0px 10px; /*top, right, bottom, left */
    margin: 0;
    color: #ffffff;
    white-space: nowrap;
    }
```You will want to adjust or eliminate paddings on some of these elements - I can't test and give the right adjustments until I can see the restructured output live.

This will give you a good start on layout - post when you have something to see.

Hi Glenn,

Thank you for the css fix. It's such a better solution than the one I came up with.

The only code I had to change to make it work properly was from this:

. '<br />' . $cat_tag . '</a> ';

to this:

. '<br />' . $cat_tag . '</a>';

I then tweaked the padding until I liked it.

The cufon which finally disabled by your previous suggestion, is now, unfortunately, back on. I know there is a way to disable it for certain text stuck inside another div/span, but I'm not too worried about it. I'm very happy with the way it looks now.

(For anyone who doesn't know what a cufon is, take a look at Scott's post here: http://www.zen-cart.com/forum/showthread.php?t=154480&highlight=cufon. Cufon's give you on-the-fly image-based headers that are very easy to set up.)

Thank you, Glenn!

Good catch on the $cat_tag . '</a>'; typo. Cufons sound like a nice way to spice up text, as long as you don't depend on it functioning for site readability - anyone with javascript turned off will not get the effect.

I'm loving the way my custom header bar has turned out. Thank you everyone for your help. Now I'm wondering if I can add a custom non-product link to the header bar in addition to the categories? Here is my current code in Category_tabs.php:

if ($categories_tab->fields['categories_id'] == '85' || $categories_tab->fields['categories_id'] == '21' || $categories_tab->fields['categories_id'] == '73') {
// skip it
} else {
// create link to top level category

$links_list[] = '<a class="' . $new_style . '" href="' . zen_href_link(FILENAME_DEFAULT, 'cPath=' . (int)$categories_tab->fields['categories_id']) . '">' . $categories_tab_current . '</a> ';

Would it be possible to add a new category tab pointing to designs/designcenter.php? I am considering making my custom design center (the first tab) outside my product pages.

Here is my link for a visual: http://www.wallvinyldecal.com/designs/

Thank you in advance for all your hard work! I am using 1.39f.

Kim

Perhaps something like this (for example, to put the new link just before the category #23 link):```php
} else {
if ($categories_tab->fields['categories_id'] == '23') {
// create custom link
$links_list[] = '<a class="customLink" href="yourlinkpath">' . 'Your Link Text' . '</a> ';
}

// create link to top level category
$links_list[] = '<a class="' . $new_style . '" href="' . zen_href_link(FILENAME_DEFAULT, 'cPath=' . (int)$categories_tab->fields['categories_id']) . '">' . $categories_tab_current . '</a> ';

Since output is based on sizeof($links_list), the extra link will not bump the last regular link from the output.

Hi Glenn,

Thank you so much for the reply on my question. It ended up that I decided to add some other regular page links to my submenu, so I had to end up hardcoding it. But it ended up exactly how I wanted. I will have to manually update it, which is bummer, but I have the links I wanted where I wanted them. Check it out at wallvinyldecal.com/designs

Thank you!!!!

Does anyone know if this works for the latest version of zencart I have tries to remove some catergory links as per this post

Ajeh:

To skip categories_id 13 and 47, change the IF to read:

if ($categories_tab->fields['categories_id'] == '13' || $categories_tab->fields['categories_id'] == '47') {

However when I try it makes all of my site disappear apart from the background image any advice greatly appreciated

Exactly what did you try? A single letter or character out of place can be fatal, so we need to know what you did in order to suggest a fix.