Nifty Zen Template - Rounded Corners without images!

[jettrue]

this is so far the best theme of zen-cart. rounded corners technique plus nice tabs, cool.
in addition to the two tabs: 1)home 2)login,
how about adding these sideboxes as tabs:3)shopping_cart 4)order_history 5)information 6)specials+featured+best_sellers 7)forum 8)reserved link... 9)reserved link...

and, a centered version should be as popular.
cheers.

Do you mean adding these tabs to the top of the site, after Home and Login?

If that's what you mean, that wouldn't work, as after someone logs in, there is a "My Account" tab after login, and then if they add something to their cart, there is a "Shopping Cart" and "Checkout" tab also.

I've added the centering instructions to the template a while back.

Thanks!!

[areyousure]

If that's what you mean, that wouldn't work, as after someone logs in, there is a "My Account" tab after login, and then if they add something to their cart, there is a "Shopping Cart" and "Checkout" tab also.

some of these tabs are automatically added after login? woo, this sounds even better. but i still think that a 'forum' tab should be there as well, and some site primary links like wiki, prodcast, affiliate program, and external links can look better if they are rounded-corner tabs than just mere links.

I've added the centering instructions to the template a while back.

yeah. got it. big thanks.

[jettrue]

some of these tabs are automatically added after login? woo, this sounds even better. but i still think that a 'forum' tab should be there as well, and some site primary links like wiki, prodcast, affiliate program, and external links can look better if they are rounded-corner tabs than just mere links.

Yep, the tabs are automagical.

IF you wanted other tabs instead (you'd run out of room if you added any additional - when logged in with items in cart the tabs are: Home - Log Out - My Account - Shopping Cart - Checkout) you could open up includes/templates/nifty_zen/common/tpl_header.php and find this section:

    <div id="navMain">
      <ul id="back">
        <li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a></li>
        <?php if ($_SESSION['customer_id']) { ?>
        <li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a></li>
        <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li>
        <?php
      } else {
        if (STORE_STATUS == '0') {
?>
        <li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a></li>
        <?php } } ?>
        <?php if ($_SESSION['cart']->count_contents() != 0) { ?>
        <li><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>
        <li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>
        <?php }?>
      </ul>
    </div>

and remove the ones you don't want, and add the links you do want. The tabs styles are controlled by the css, so as long as you keep the <div id="navMain"><ul id="back"> and just adjust the links, they will look like tabs, not just links.

HTH!

[areyousure]

nice. will give it a try right away. thanks.

[keystonewebworks]

great template!!!!

couple questions:

1. how do i change the blue colors
2. how do i change the colors for the tabs - hover etc...
3. how do i change the red line color under the tabs?

[jettrue]

great template!!!!

couple questions:

1. how do i change the blue colors
2. how do i change the colors for the tabs - hover etc...
3. how do i change the red line color under the tabs?

Glad you like it!

There are instructions in includes/templates/nifty_zen/css/stylesheet_new.css. I tried to make it real simple by adding hidden text with instructions on what is what.

Give that a try, and let me know how it goes. :-)

[areyousure]

Yep, the tabs are automagical.

IF you wanted other tabs instead (you'd run out of room if you added any additional - when logged in with items in cart the tabs are: Home - Log Out - My Account - Shopping Cart - Checkout) you could open up includes/templates/nifty_zen/common/tpl_header.php and find this section:

    <div id="navMain">
      <ul id="back">
        <li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a></li>
        <?php if ($_SESSION['customer_id']) { ?>
        <li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a></li>
        <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li>
        <?php
      } else {
        if (STORE_STATUS == '0') {
?>
        <li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a></li>
        <?php } } ?>
        <?php if ($_SESSION['cart']->count_contents() != 0) { ?>
        <li><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>
        <li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>
        <?php }?>
      </ul>
    </div>

and remove the ones you don't want, and add the links you do want. The tabs styles are controlled by the css, so as long as you keep the <div id="navMain"><ul id="back"> and just adjust the links, they will look like tabs, not just links.

HTH!

i've added a link to www.google.com as the underlined text.

<div id="navMainWrapper">
    <div id="navMain">
      <ul id="back">
        <li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a></li>
        <?php if ($_SESSION['customer_id']) { ?>
        <li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a></li>
        <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li>
	 <li><a href="www.google.com">google</a></li>
        <?php
      } else {
        if (STORE_STATUS == '0') {
?>
        <li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a></li>
        <?php } } ?>
        <?php if ($_SESSION['cart']->count_contents() != 0) { ?>
        <li><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>
        <li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>
	 <li><a href="www.google.com">google</a></li>
        <?php }?>
      </ul>
    </div>
    <div class="navMainSearch forward"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?></div>
  </div>

but can't create such a 'google' tab in either case(logged-in or not logged-in), scrshot:

[jettrue]

i've added a link to www.google.com as the underlined text.

<div id="navMainWrapper">
    <div id="navMain">
      <ul id="back">
        <li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a></li>
        <?php if ($_SESSION['customer_id']) { ?>
        <li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a></li>
        <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li>
	 <li><a href="www.google.com">google</a></li>
        <?php
      } else {
        if (STORE_STATUS == '0') {
?>
        <li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a></li>
        <?php } } ?>
        <?php if ($_SESSION['cart']->count_contents() != 0) { ?>
        <li><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>
        <li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>
	 <li><a href="www.google.com">google</a></li>
        <?php }?>
      </ul>
    </div>
    <div class="navMainSearch forward"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?></div>
  </div>

but can't create such a 'google' tab in either case(logged-in or not logged-in), scrshot:

Hmmm... they way you've done it above would be like this when they're logged in:
Home Log Off My Account google
and like this if they had something in their shoppping cart:
Home Log Off My Account Shopping Cart Checkout google google

I know you said it wasn't showing up when logged in.... but it should.

But to do it they way you want it, you need to do this:

<div id="navMainWrapper">
    <div id="navMain">
      <ul id="back">
        <li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a></li>
        <?php if ($_SESSION['customer_id']) { ?>
        <li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a></li>
        <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li>
        <?php
      } else {
        if (STORE_STATUS == '0') {
?>
        <li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a></li>
        <?php } } ?>
        <?php if ($_SESSION['cart']->count_contents() != 0) { ?>
        <li><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>
        <li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>
        <?php }?>
<li><a href="www.google.com">google</a></li>
      </ul>
    </div>
    <div class="navMainSearch forward"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?></div>
  </div>

[areyousure]

But to do it they way you want it, you need to do this:

<div id="navMainWrapper">
    <div id="navMain">
      <ul id="back">
        <li><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">'; ?><?php echo HEADER_TITLE_CATALOG; ?></a></li>
        <?php if ($_SESSION['customer_id']) { ?>
        <li><a href="<?php echo zen_href_link(FILENAME_LOGOFF, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGOFF; ?></a></li>
        <li><a href="<?php echo zen_href_link(FILENAME_ACCOUNT, '', 'SSL'); ?>"><?php echo HEADER_TITLE_MY_ACCOUNT; ?></a></li>
        <?php
      } else {
        if (STORE_STATUS == '0') {
?>
        <li><a href="<?php echo zen_href_link(FILENAME_LOGIN, '', 'SSL'); ?>"><?php echo HEADER_TITLE_LOGIN; ?></a></li>
        <?php } } ?>
        <?php if ($_SESSION['cart']->count_contents() != 0) { ?>
        <li><a href="<?php echo zen_href_link(FILENAME_SHOPPING_CART, '', 'NONSSL'); ?>"><?php echo HEADER_TITLE_CART_CONTENTS; ?></a></li>
        <li><a href="<?php echo zen_href_link(FILENAME_CHECKOUT_SHIPPING, '', 'SSL'); ?>"><?php echo HEADER_TITLE_CHECKOUT; ?></a></li>
        <?php }?>
<li><a href="www.google.com">google</a></li>
      </ul>
    </div>
    <div class="navMainSearch forward"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?></div>
  </div>

woo. done!
and yes you are right that creating too many tabs may run out of room there, so i'm thinking using the body's upper margin to hold all my other links(links that are plain text or images, no tabs are needed this time). and i'm gonna try this in html_header.php. now it looks like this:

is this handled better in html.php or in tpl_header.php, or in tpl_main_page.php?

[jettrue]

woo. done!
and yes you are right that creating too many tabs may run out of room there, so i'm thinking using the body's upper margin to hold all my other links(links that are plain text or images, no tabs are needed this time). and i'm gonna try this in html_header.php. now it looks like this:

is this handled better in html.php or in tpl_header.php, or in tpl_main_page.php?

I would do that in tpl_header.php, right above <div id="headerWrapper">

Another option would be to make that red strip below the tabs taller, and put links in there. If you're interested in trying that, let me know, cause that would require a little changing of a couple of things.