Zen Cart Logo
Forums / Templates, Stylesheets, Page Layout / Rustic theme, add image between categories in navCatTabs?

Rustic theme, add image between categories in navCatTabs?

Locked

Views: 1,176

Results 1 to 5 of 5
This thread is locked. New replies are disabled.
31 Aug 2010, 3:45 AM
#1
jaymot avatar

jaymot

New Zenner

Join Date:
Aug 2010
Location:
Cebu, Philippines
Posts:
21
Plugin Contributions:
0

Rustic theme, add image between categories in navCatTabs?

Hello. I'm just setting up a Zen Cart 1.3.9f store and am busily customizing the Rustic theme from Clydedesigns.com. I've enabled the navCatTabs feature but I would like to add a small graphic image as a separator between category names, as they're currently just separated by a single space and it's hard to tell a two-word category name from two different categories. Can anyone tell me how?

31 Aug 2010, 5:38 AM
#2
clydejones avatar

clydejones

Deceased

Join Date:
Nov 2005
Location:
Colorado Springs, CO USA
Posts:
7,017
Plugin Contributions:
12

Re: Rustic theme, add image between categories in navCatTabs?

JayMot:

Hello. I'm just setting up a Zen Cart 1.3.9f store and am busily customizing the Rustic theme from Clydedesigns.com. I've enabled the navCatTabs feature but I would like to add a small graphic image as a separator between category names, as they're currently just separated by a single space and it's hard to tell a two-word category name from two different categories. Can anyone tell me how?

You'll need to modify/edit
includes/templates/template_default/templates/tpl_modules_categories_tabs.php

at around line 21 find the following line of code: Your modification should go where indicated by the highlight

<li><?php echo $links_list[$i];?>Your modification goes here</li>

save the edited file and upload to your server to includes/templates/rustic/templates/

31 Aug 2010, 9:06 AM
#3
jaymot avatar

jaymot

New Zenner

Join Date:
Aug 2010
Location:
Cebu, Philippines
Posts:
21
Plugin Contributions:
0

Re: Rustic theme, add image between categories in navCatTabs?

That did what I wanted, more or less. It leaves a trailing separator image after the last category but I guess I'll just try to hide that by placing an instance of navbar.gif over it using absolute positioning. The only other way would be to add some "if/else" logic to tpl_modules_categories_tabs.php to not show the separator after the category name if the category is the last one (which frankly is beyond my PHP abilities, I think).

Thanks a million! As an aside, I wish I'd gone ahead and chosen Zen Cart weeks ago instead of fooling around with Magento if your rapidity and accuracy of support is typical in the ZC community. Oh, and great theme too! :)

31 Aug 2010, 1:00 PM
#4
clydejones avatar

clydejones

Deceased

Join Date:
Nov 2005
Location:
Colorado Springs, CO USA
Posts:
7,017
Plugin Contributions:
12

Re: Rustic theme, add image between categories in navCatTabs?

JayMot:

That did what I wanted, more or less. It leaves a trailing separator image after the last category but I guess I'll just try to hide that by placing an instance of navbar.gif over it using absolute positioning. The only other way would be to add some "if/else" logic to tpl_modules_categories_tabs.php to not show the separator after the category name if the category is the last one (which frankly is beyond my PHP abilities, I think).

Thanks a million! As an aside, I wish I'd gone ahead and chosen Zen Cart weeks ago instead of fooling around with Magento if your rapidity and accuracy of support is typical in the ZC community. Oh, and great theme too! :)

You could also try just using CSS styling:

open includes/templates/rustic/css/stylesheet.css

find and replace this entire section with the following:

#navCatTabsWrapper {
margin: 1em 0 0;
padding:0.2em 0 0;
background: #C6C3B5;
font-size: 1.1em;
font-weight: bold;
color: #444;
height: 24px;
width:100%;
}
#navCatTabs ul {
margin: 0;
padding: 0.5em 0.3em 0em 0.3em;
list-style-type: none;
}
#navCatTabs li {
margin: 0;
padding: 0 0.5em 0 0.5em;
text-align: left;
float:left;
display: inline;
white-space: nowrap;
border:solid #7F3218;
border-width:0 1px 0 0;
}
#navCatTabs li:last-of-type {
border:none;
}
#navCatTabs a {
text-decoration: none;
color: #444;
}
#navCatTabs a:hover {color: #7F3218;}

1 Sep 2010, 10:04 AM
#5
jaymot avatar

jaymot

New Zenner

Join Date:
Aug 2010
Location:
Cebu, Philippines
Posts:
21
Plugin Contributions:
0

Re: Rustic theme, add image between categories in navCatTabs?

Wonderful! That gave me 99% of what I wanted. I just centered the text and changed the colors a bit, thusly:

#navCatTabsWrapper {
margin: 1em 0 0;
padding:0.2em 0 0;
background: #FBEDD0;*/
font-size: 1.1em;
font-weight: bold;
color: #8E262E;
height: 24px;
width:100%;
}
#navCatTabs ul {
margin: 0;
padding: 0.5em 0.3em 0em 0.3em;
list-style-type: none;
}
#navCatTabs li {
margin: 0;
padding: 0 0.5em 0 0.5em;
text-align: center;
margin:0 auto;
display: inline;
white-space: nowrap;
border:solid #7F3218;
border-width:0 1px 0 0;
}
#navCatTabs li:last-of-type {
border:none;
}
#navCatTabs a {
text-decoration: none;
color: #444;
}
#navCatTabs a:hover {color: #7F3218;} 	

In my stylesheet.css these are lines 244-276, for other people's reference if they want to do something similar. I also decided to eliminate subcategories so as not to have to try and implement some kind of dropdown menu for each category that has subs under it- I won't have all that many products in each category anyway. No sense making customers have to click their way in and out of too many categories.

Salamat! (Thank you)