nifty layout tabs for ezpages

I need help. I moved my site from osCommerce to ZenCart. I had nifty cube on my site for header tabs. I would like to reproduce it again on my ZenCart site but I am confused.

I would like my tabs to look exactly like this site http://www.html.it/articoli/niftycube/nifty4.html

the code is provided here http://www.html.it/articoli/niftycube/index.html. I know I need to update my CSS but that's where I get lost. I would like it to wrap around my ezpage links rather than hard code links.

Can someone point me in the right direction? I tried looking at nifty zen template to get ideas, but he rounds the body and I don't want to do that. I just want to create tabs for my ezpages.

Vicky

:clap::clap:

I DID IT!! After spending a long time trying to figure this out, I finally found a way to add nifty tabs for my ezpages.

If you want to learn how I did it, be forewarned. It's very messy and I'm sure there is a much, much better way... but it works.

1. first problem, how to get JS file to read and CSS file. Just found out that I needed to rename them respectfully jscript_{unique_name}.js and stylesheet_{unique_name}.css. Once I found that out, it was just tweeking the CSS to match what I want.

2. I'm using Acadame v1.2 as my main template and so the instructions from here on have to do with what you would find there. I updated template_default/tpl_ezpages_bar_header.php with the following code:

<div id="menu">
    <ul id="nav"><li>

<?php for ($i=1, $n=sizeof($var_linksList); $i<=$n; $i++) {  ?>
  <a href="<?php echo $var_linksList[$i]['link']; ?>"><?php echo $var_linksList[$i]['name']; ?></a><?php echo ($i < $n ? EZPAGES_SEPARATOR_HEADER : '') . "\n"; ?>
<?php } // end FOR loop ?></ul>
</div>

It used to have a different div id tag (navEZPagesTop & TopLinks).

3. I went into tpl_header.php and replace TopLinks div tag with menu.

4. Went into the stylesheet and commented out all reference to navEZPagesTop & TopLinks

5. I went into my admin area and reset my ezpage seperator to </li><li> (must be a better way but it works).

I than added the following to my stylesheet

div#menu{float:left;width: 100%;background: #BBD9EE}
ul#nav,ul#nav li{list-style-type:none;margin:0;padding:0}
ul#nav{margin-left: 95px;width:650px; margin-top:20px}
ul#nav li{float:left;margin-right: 3px;text-align: center}
ul#nav a{float:left;width: 12em;padding: 9px 0;background: #E7F1F8;text-decoration:none;color: #666}
ul#nav a:hover{background: #FFA826;color: #FFF}
ul#nav li.activelink a,ul#nav li.activelink a:hover{background: #FFF;color: #003}

and TADA! It worked. I have a little bug that I'm going to try and figure out. If I refresh, the menu jumps.

Like I said... it works.

Vicky

Narrowed down the jumping menu to firefox only. Works fine on IE7. Am now downloading IE6 for testing purposes.

:wacko:

Found the FireFox problem. I needed to put a closing list tag </li> to the tpl_ezpages_bar_header.php file. It now tests well in firefox and IE7 (not sure about IE6 but will test when I go to work on Tuesday). Below is the code adjustments I made to that page.

  include(DIR_WS_MODULES . zen_get_module_directory('ezpages_bar_header.php'));
?>
<?php if (sizeof($var_linksList) >= 1) { ?>
<div id="menu">
    <ul id="nav"><li>

<?php for ($i=1, $n=sizeof($var_linksList); $i<=$n; $i++) {  ?>
  <a href="<?php echo $var_linksList[$i]['link']; ?>"><?php echo $var_linksList[$i]['name']; ?></a><?php echo ($i < $n ? EZPAGES_SEPARATOR_HEADER : '') . "\n"; ?>
<?php } // end FOR loop ?>
</li></div>
<?php } ?>

Hi

This is exactly what I was looking for and I have managed to follow most of it even as a newbie - so I now have my ezpages as square tabs.

I don't know anything about jscript or css so I didn't really understand the first step of your process.

I tried following the nifty zen template and created a jscript directory under my custom template directory, but my tabs are still square - I presume I need to do something else to make my site use the js and to tell it where to find the code.

Could you tell me what files I need to put where, and what should be in them?

Any help gratefully received.

Christine

Not sure exactly what I have done but it suddenly started to work!

an explanation of how the files hang together though would be really useful - as I am not sure I did it properly.

I added the following code to my stylesheet:

/* added for tabs */

div#menu{float:left;width: 100%;background: #BBD9EE}
ul#nav,ul#nav li{list-style-type:none;margin:0;padding:0}
ul#nav{margin-left: 95px;width:650px; margin-top:20px}
ul#nav li{float:left;margin-right: 3px;text-align: center}
ul#nav a{float:left;width: 12em;padding: 9px 0;background: #E7F1F8;text-decoration:none;color: #666}
ul#nav a:hover{background: #FFA826;color: #FFF}
ul#nav li.activelink a,ul#nav li.activelink a:hover{background: #FFF;color: #003}

/*Nifty Corners Cube CSS by Alessandro Fulciniti
The following classes are added dinamically by javascript,
and their use should be avoided in the markup */

b.niftycorners,b.niftyfill{display:block}
b.niftycorners *{display:block;height: 1px;line-height:1px;font-size: 1px;
overflow:hidden;border-style:solid;border-width: 0 1px}
/normal/
b.r1{margin: 0 3px;border-width: 0 2px}
b.r2{margin: 0 2px}
b.r3{margin: 0 1px}
b.r4{height: 2px}
b.rb1{margin: 0 8px;border-width:0 2px}
b.rb2{margin: 0 6px;border-width:0 2px}
b.rb3{margin: 0 5px}
b.rb4{margin: 0 4px}
b.rb5{margin: 0 3px}
b.rb6{margin: 0 2px}
b.rb7{margin: 0 1px;height:2px}
b.rb8{margin: 0;height:2px}
b.rs1{margin: 0 1px}
/transparent inside/
b.t1{border-width: 0 5px}
b.t2{border-width: 0 3px}
b.t3{border-width: 0 2px}
b.t4{height: 2px}
b.tb1{border-width: 0 10px}
b.tb2{border-width: 0 8px}
b.tb3{border-width: 0 6px}
b.tb4{border-width: 0 5px}
b.tb5{border-width: 0 4px}
b.tb6{border-width: 0 3px}
b.tb7{border-width: 0 2px;height:2px}
b.tb8{border-width: 0 1px;height:2px}
b.ts1{border-width: 0 2px}

(I have a feeling these should be two different files??)

I then created a jscript directory and put into it niftycube.js, but called is jscript_niftycube.js and I created a file called jscript_sw.js which only has

NiftyLoad=function(){

Nifty("ul#nav a","small transparent top");
}

The problem is I don't know WHY or HOW it works so its difficult for me to amend. At one point the top banner with the shopping cart icon and all my fonts went huge and I have no idea why.

Any pointers gratefully received. Especially if you could point me in the direction of where I would change the tab and rollover colours and the font on the tabs?

Christine

:clap::clap:

Beautiful Vicky!

Christine,
The colors, rollovers, etc would be changed in this part of the code:```
div#menu{float:left;width: 100%;background: #BBD9EE}
ul#nav,ul#nav li{list-style-type:none;margin:0;padding:0}
ul#nav{margin-left: 95px;width:650px; margin-top:20px}
ul#nav li{float:left;margin-right: 3px;text-align: center}
ul#nav a{float:left;width: 12em;padding: 9px 0;background: #E7F1F8;text-decoration:none;color: #666}
ul#nav a:hover{background: #FFA826;color: #FFF}
ul#nav li.activelink a,ul#nav li.activelink a:hover{background: #FFF;color: #003}

Just play around w/ the colors, etc and you will soon figure out which are which:smartalec:

I have the square tabs now, still need to add the Java. I can't get them to align where I want, but that was a problem I had before this mod.

Thanks Vicky!
Audra 

Audra

Hi,

Got introduced to this thread from another zen cart member who found your thread useful. so its just my turn now to install this mod .

well iam a total newbie and even a basic guide is still hard for me to follow :dontgetit

So can someone please help me to say what is the step by step guide?

i got a bit baffalled when you stated that the coding had to be updated due to it not functioning in FF.

am i correct to say:

step 1: add this to stylesheet:

/* added for tabs */

div#menu{float:left;width: 100%;background: #BBD9EE}
ul#nav,ul#nav li{list-style-type:none;margin:0;padding:0}
ul#nav{margin-left: 95px;width:650px; margin-top:20px}
ul#nav li{float:left;margin-right: 3px;text-align: center}
ul#nav a{float:left;width: 12em;padding: 9px 0;background: #E7F1F8;text-decoration:none;color: #666}
ul#nav a:hover{background: #FFA826;color: #FFF}
ul#nav li.activelink a,ul#nav li.activelink a:hover{background: #FFF;color: #003}

/*Nifty Corners Cube CSS by Alessandro Fulciniti
The following classes are added dinamically by javascript,
and their use should be avoided in the markup */

b.niftycorners,b.niftyfill{display:block}
b.niftycorners *{display:block;height: 1px;line-height:1px;font-size: 1px;
overflow:hidden;border-style:solid;border-width: 0 1px}
/normal/
b.r1{margin: 0 3px;border-width: 0 2px}
b.r2{margin: 0 2px}
b.r3{margin: 0 1px}
b.r4{height: 2px}
b.rb1{margin: 0 8px;border-width:0 2px}
b.rb2{margin: 0 6px;border-width:0 2px}
b.rb3{margin: 0 5px}
b.rb4{margin: 0 4px}
b.rb5{margin: 0 3px}
b.rb6{margin: 0 2px}
b.rb7{margin: 0 1px;height:2px}
b.rb8{margin: 0;height:2px}
b.rs1{margin: 0 1px}
/transparent inside/
b.t1{border-width: 0 5px}
b.t2{border-width: 0 3px}
b.t3{border-width: 0 2px}
b.t4{height: 2px}
b.tb1{border-width: 0 10px}
b.tb2{border-width: 0 8px}
b.tb3{border-width: 0 6px}
b.tb4{border-width: 0 5px}
b.tb5{border-width: 0 4px}
b.tb6{border-width: 0 3px}
b.tb7{border-width: 0 2px;height:2px}
b.tb8{border-width: 0 1px;height:2px}
b.ts1{border-width: 0 2px}

step 2: need to update tpl_ez header page?

If so what is the complete code for this, which is fully functional?

**
step 3: create jscript files or somthing??

**How do i do this? what do i put in these files and where??

Thanks in advance guys..

https://www.splay.co.uk

hi guys...any one there to help me plzzzz...

vik007:

hi guys...any one there to help me plzzzz...

Are you still looking for help with this?

mrmeech:

Are you still looking for help with this?

Please help I have same issue as Vik007. I follow the instruction and end up with square tab :unsure: specially on step 3 I have no clue how to do it.:frusty:

Thanks Alot,

Effesus:

Please help I have same issue as Vik007. I follow the instruction and end up with square tab :unsure: specially on step 3 I have no clue how to do it.:frusty:

Thanks Alot,

If your tabs are square, but working, your problem might be with the CSS. Try checking all of the image paths for the corners of the Tabs, etc.. Maybe if you have relative links in your css to images try absolute links (where it has the full http://.... address)..

Is there someone that can give a more detailed explanation how to implement the tabs for ezpage header?
I do not get it to work with rounded corners. Do I need any image files?:dontgetit

I am trying to do this with the nifty zen template and can't get it to do what I want either.
I don't want to load all the EZ Pages, I want specific ones, and some outside links.
I tried hard coding to the existing bar and it won't add them.

<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="http://quiltcrumbs.jellybeanfabrics.com">BLOG</a></li>
	<li><a href="<?php echo zen_href_link(FILENAME_PAGE_1, '', 'SSL'); ?>"><?php echo HEADER_TITLE_PAGE_1; ?></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="http://quiltcrumbs.jellybeanfabrics.com">BLOG</a></li>
        <?php }?>
      </ul>
    </div>
    <div id="navMainSearch"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?></div>
  </div>