Results 1 to 5 of 5
  1. #1
    Join Date
    Aug 2010
    Location
    Cebu, Philippines
    Posts
    21
    Plugin Contributions
    0

    Default 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?
    Last edited by JayMot; 31 Aug 2010 at 04:46 AM. Reason: added thread subscription

  2. #2
    Join Date
    Nov 2005
    Location
    Colorado Springs, CO USA
    Posts
    7,033
    Plugin Contributions
    31

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

    Quote Originally Posted by JayMot View Post
    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/

  3. #3
    Join Date
    Aug 2010
    Location
    Cebu, Philippines
    Posts
    21
    Plugin Contributions
    0

    Default 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! :)

  4. #4
    Join Date
    Nov 2005
    Location
    Colorado Springs, CO USA
    Posts
    7,033
    Plugin Contributions
    31

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

    Quote Originally Posted by JayMot View Post
    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;}

  5. #5
    Join Date
    Aug 2010
    Location
    Cebu, Philippines
    Posts
    21
    Plugin Contributions
    0

    Default 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:
    Code:
    #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)

 

 

Similar Threads

  1. Add an image between categories
    By Halollet in forum Templates, Stylesheets, Page Layout
    Replies: 1
    Last Post: 27 Jul 2010, 12:26 AM
  2. Replies: 3
    Last Post: 19 Feb 2010, 05:51 AM
  3. Missing image file in my template - Rustic
    By cowinger in forum Addon Templates
    Replies: 6
    Last Post: 26 Dec 2008, 07:15 PM
  4. Creating breaks between category names in navCatTabs
    By Joseph M in forum General Questions
    Replies: 4
    Last Post: 12 May 2008, 04:33 PM
  5. Increase space between navCatTabs in top navigation bar?
    By efghijk in forum Templates, Stylesheets, Page Layout
    Replies: 2
    Last Post: 11 Jul 2007, 03:01 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
disjunctive-egg
Zen-Cart, Internet Selling Services, Klamath Falls, OR