Zen Cart Logo
Forums / Addon Templates / Nifty Zen Template - Rounded Corners without images!

Nifty Zen Template - Rounded Corners without images!

Locked

Views: 82,376

Results 1 to 20 of 231
This thread is locked. New replies are disabled.
6 Sep 2006, 6:11 PM
#1
jettrue avatar

jettrue

Totally Zenned

Join Date:
Jan 2005
Location:
USA, St. Louis
Posts:
3,651
Plugin Contributions:
5

Nifty Zen Template - Rounded Corners without images!

Coming soon to the download section. I'm just starting the support thread now.

If you want to see what it looks like, check it out here.
http://www.niftyzen.sagefish.com/

It uses the Nifty Corners (more info here) method, designed by Alessandro Fulciniti.

It will allow you to have rounded corners for your site, but at the same time be able to change the colors for the site without having to make rounded corner images every time. Even the Home, Login tabs are using the rounded corners function.

Another cool thing about this template... since I've set the width of the site in em's, when someone enlarges their font, the website enlarges too... so you don't get weird issues with larger fonts.

I think its very Nifty! What do you think? :blush:

6 Sep 2006, 6:21 PM
#2
Kim avatar

Kim

Obaa-san

Join Date:
Jun 2003
Location:
West Coast, North America
Posts:
26,627
Plugin Contributions:
0

Re: Nifty Zen Template - Rounded Corners without images!

Jade-

Nifty Idea- I would suggest using a percentage for the main page width, then you won't have to scroll horizontally if using the largest text size. :thumbsup:

6 Sep 2006, 6:38 PM
#3
jettrue avatar

jettrue

Totally Zenned

Join Date:
Jan 2005
Location:
USA, St. Louis
Posts:
3,651
Plugin Contributions:
5

Re: Nifty Zen Template - Rounded Corners without images!

Kim:

Jade-

Nifty Idea- I would suggest using a percentage for the main page width, then you won't have to scroll horizontally if using the largest text size. :thumbsup:

Thanks for the suggestion, but that won't do what I want.

Say I set the page at 80%... then it will fill the browser window 80% no matter the users font size. Say someone has a really wide browser window... then the site will be REALLY wide, and it won't look the way I want it. I know there is a lot of merit to the % use, and there are negatives to this method, but I'm just going for this method this time. And it's easy for anyone who uses this template to switch to %'s. :smartass:

10 Sep 2006, 6:11 PM
#5
knuckle_101 avatar

knuckle_101

Totally Zenned

Join Date:
Dec 2005
Location:
Cincinnati Ohio
Posts:
1,034
Plugin Contributions:
3

Re: Nifty Zen Template - Rounded Corners without images!

Why is everything based left? Anyway to center it?

10 Sep 2006, 10:08 PM
#6
jettrue avatar

jettrue

Totally Zenned

Join Date:
Jan 2005
Location:
USA, St. Louis
Posts:
3,651
Plugin Contributions:
5

Re: Nifty Zen Template - Rounded Corners without images!

knuckle-101:

Why is everything based left? Anyway to center it?

Cause I designed it that way. Cause I like left-based sites. Cause there's no law saying every site has to be centered. :smartass: :P

Anyway, I had been planning on posting centering instructions, it's easy to do. Here are the instructions for centering Nifty_Zen.

Step 1.

Open includes/templates/nifty_zen/css/stylesheet_new.css.

Find #outermainWrapper

add these tags to it:

	text-align: center;
	margin:0 auto;

and also in #outermainWrapper change

	padding:8px 8px 8px 0; 

to

	padding:8px; 

Step 2.

Add this to stylesheet_new.css

#logo {
	margin-left:5px;
	}

(that moves the logo out of the way for the left rounded corners that we'll do next)

Step 3.

Open includes/templates/nifty_zen/jscript/jscript_niftyalayout.js

change

Nifty("div#mainWrapper", "big right");
Nifty("div#outermainWrapper", "big right");

to

Nifty("div#mainWrapper", "big");
Nifty("div#outermainWrapper", "big");
10 Sep 2006, 10:12 PM
#7
knuckle_101 avatar

knuckle_101

Totally Zenned

Join Date:
Dec 2005
Location:
Cincinnati Ohio
Posts:
1,034
Plugin Contributions:
3

Re: Nifty Zen Template - Rounded Corners without images!

thanks for the reply, I be sure to edit the way you said.

13 Sep 2006, 9:33 AM
#8
mobilehound avatar

mobilehound

Zen Follower

Join Date:
Sep 2005
Location:
Reading, England
Posts:
212
Plugin Contributions:
0

Re: Nifty Zen Template - Rounded Corners without images!

Excellent template, been trying to get nifty working in zen for ages, well done.

Is there any chance of getting or including the psd file for the buttons to change the colours?

Thanks in advance...:blush:

13 Sep 2006, 8:45 PM
#9
jettrue avatar

jettrue

Totally Zenned

Join Date:
Jan 2005
Location:
USA, St. Louis
Posts:
3,651
Plugin Contributions:
5

Re: Nifty Zen Template - Rounded Corners without images!

mobilehound:

Excellent template, been trying to get nifty working in zen for ages, well done.

Is there any chance of getting or including the psd file for the buttons to change the colours?

Thanks in advance...:blush:

You're talking about the dark grey/black buttons, right? I actually made those with a mac program, called Button Builder: http://www.apple.com/downloads/macosx/imaging_3d/buttonbuilder.html

If you happen to be on a mac, you could use that....

If not, I can either make them for you (I was planning on making a new set to upload, so whatever you want can be the next color I do), OR I can create a .psd for you pretty easily. Is there a specific color you are looking for?

21 Sep 2006, 12:47 PM
#10
areyousure avatar

areyousure

New Zenner

Join Date:
Oct 2005
Posts:
17
Plugin Contributions:
0

Re: Nifty Zen Template - Rounded Corners without images!

this is so far the best theme of zen-cart. :smile: rounded corners technique plus nice tabs, cool. :smile:
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. :wink2:
cheers.

21 Sep 2006, 11:47 PM
#11
jettrue avatar

jettrue

Totally Zenned

Join Date:
Jan 2005
Location:
USA, St. Louis
Posts:
3,651
Plugin Contributions:
5

Re: Nifty Zen Template - Rounded Corners without images!

areyousure:

this is so far the best theme of zen-cart. :smile: rounded corners technique plus nice tabs, cool. :smile:
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. :wink2:
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. :smartass:

Thanks!!

22 Sep 2006, 6:49 AM
#12
areyousure avatar

areyousure

New Zenner

Join Date:
Oct 2005
Posts:
17
Plugin Contributions:
0

Re: Nifty Zen Template - Rounded Corners without images!

jettrue:

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. :blush: 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. :smile:

jettrue:

I've added the centering instructions to the template a while back.
yeah. got it. big thanks.

22 Sep 2006, 2:21 PM
#13
jettrue avatar

jettrue

Totally Zenned

Join Date:
Jan 2005
Location:
USA, St. Louis
Posts:
3,651
Plugin Contributions:
5

Re: Nifty Zen Template - Rounded Corners without images!

areyousure:

some of these tabs are automatically added after login? woo, this sounds even better. :blush: 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. :smile:

Yep, the tabs are automagical. :wink2: :P

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!

25 Sep 2006, 5:36 AM
#14
areyousure avatar

areyousure

New Zenner

Join Date:
Oct 2005
Posts:
17
Plugin Contributions:
0

Re: Nifty Zen Template - Rounded Corners without images!

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

29 Sep 2006, 12:50 PM
#15
keystonewebworks avatar

keystonewebworks

Zen Follower

Join Date:
Oct 2005
Posts:
172
Plugin Contributions:
0

Re: Nifty Zen Template - Rounded Corners without images!

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?
30 Sep 2006, 4:15 AM
#16
jettrue avatar

jettrue

Totally Zenned

Join Date:
Jan 2005
Location:
USA, St. Louis
Posts:
3,651
Plugin Contributions:
5

Re: Nifty Zen Template - Rounded Corners without images!

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?

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. :-)

1 Oct 2006, 2:24 AM
#17
areyousure avatar

areyousure

New Zenner

Join Date:
Oct 2005
Posts:
17
Plugin Contributions:
0

Re: Nifty Zen Template - Rounded Corners without images!

jettrue:

Yep, the tabs are automagical. :wink2: :P

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 <https://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:

1 Oct 2006, 2:43 AM
#18
jettrue avatar

jettrue

Totally Zenned

Join Date:
Jan 2005
Location:
USA, St. Louis
Posts:
3,651
Plugin Contributions:
5

Re: Nifty Zen Template - Rounded Corners without images!

areyousure:

i've added a link to https://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>
1 Oct 2006, 5:37 AM
#19
areyousure avatar

areyousure

New Zenner

Join Date:
Oct 2005
Posts:
17
Plugin Contributions:
0

Re: Nifty Zen Template - Rounded Corners without images!

jettrue:

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! :thumbsup:
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?

1 Oct 2006, 1:32 PM
#20
jettrue avatar

jettrue

Totally Zenned

Join Date:
Jan 2005
Location:
USA, St. Louis
Posts:
3,651
Plugin Contributions:
5

Re: Nifty Zen Template - Rounded Corners without images!

areyousure:

woo. done! :thumbsup:
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.