Westminster New

[mr.chetanladdha]

Hi Anne,

I managed to add more tabs as you said. Now i have the number of tabs as i need. However, all show "contact us" and redirect to contact us page only.

Say, i want to make it "Festival Items" which should redirect to festival items category showing those products.



What part of code should i change to redirect it to the category url showing the description i want it to .

REgards

[picaflor-azul]

Hi Anne,

I managed to add more tabs as you said. Now i have the number of tabs as i need. However, all show "contact us" and redirect to contact us page only.

Say, i want to make it "Festival Items" which should redirect to festival items category showing those products.



What part of code should i change to redirect it to the category url showing the description i want it to .

REgards

You would just put your information in the anchor tag like in a normal link:

<li><a href="your url">Your Text</a></li>

Thanks,

Anne

[mr.chetanladdha]

Thanks a lot Anne ! It was that simple ! :)

To remove the space between the top navigation bar, I removed the below code from tpl_header.php.

<div id="top-middle">
<div class="onerow-fluid <?php echo $fluidisFixed; ?>">

<!--bof-branding display-->
<div id="logoWrapper">
    <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?>
    </div>
<?php if (HEADER_SALES_TEXT != '' || (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2))) { ?>
    <div id="taglineWrapper">
<?php
              if (HEADER_SALES_TEXT != '') {
?>
      <div id="tagline">

<?php echo HEADER_SALES_TEXT;?>

      </div>
<?php
              }
?>
<?php
              if (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2)) {
                if ($banner->RecordCount() > 0) {
?>
      <div id="bannerTwo" class="banners"><?php echo zen_display_banner('static', $banner);?></div>
<?php
                }
              }
?>
    </div>
<?php } // no HEADER_SALES_TEXT or SHOW_BANNERS_GROUP_SET2 ?>

<div id="navMainSearch"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?></div>

<div class="clearBoth"></div>
</div>

This made it look like below :



Perfect as I would like it. However, there are some minor problems that came up :

1. The search box disappeared. !!!
2. When I open it up on my iphone, there is no header links for categories / contact us / information and other links.

Huff !!!

[yaritai]

Thanks a lot Anne ! It was that simple ! :)

To remove the space between the top navigation bar, I removed the below code from tpl_header.php.

<div id="top-middle">
<div class="onerow-fluid <?php echo $fluidisFixed; ?>">

<!--bof-branding display-->
<div id="logoWrapper">
    <div id="logo"><?php echo '<a href="' . HTTP_SERVER . DIR_WS_CATALOG . '">' . zen_image($template->get_template_dir(HEADER_LOGO_IMAGE, DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . HEADER_LOGO_IMAGE, HEADER_ALT_TEXT) . '</a>'; ?>
    </div>
<?php if (HEADER_SALES_TEXT != '' || (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2))) { ?>
    <div id="taglineWrapper">
<?php
              if (HEADER_SALES_TEXT != '') {
?>
      <div id="tagline">

<?php echo HEADER_SALES_TEXT;?>

      </div>
<?php
              }
?>
<?php
              if (SHOW_BANNERS_GROUP_SET2 != '' && $banner = zen_banner_exists('dynamic', SHOW_BANNERS_GROUP_SET2)) {
                if ($banner->RecordCount() > 0) {
?>
      <div id="bannerTwo" class="banners"><?php echo zen_display_banner('static', $banner);?></div>
<?php
                }
              }
?>
    </div>
<?php } // no HEADER_SALES_TEXT or SHOW_BANNERS_GROUP_SET2 ?>

<div id="navMainSearch"><?php require(DIR_WS_MODULES . 'sideboxes/search_header.php'); ?></div>

<div class="clearBoth"></div>
</div>

This made it look like below :



Perfect as I would like it. However, there are some minor problems that came up :

1. The search box disappeared. !!!
2. When I open it up on my iphone, there is no header links for categories / contact us / information and other links.

Huff !!!

For the search box, I am going to assume it is in desktop view only. Tablet and mobile devices should be showing the search bar as it uses a separate header file. For the desktop, just look at the code you removed as it contains the search box. Your fix to delete the div to remove the space is 1 way to do it but it does not give you flexibility if you wanted to use that space again. For one, you took away control of having your logo present on your site which is important to give some sort of visual that your customers recognize you by. But if that is not important than just take the snippet of code for the search and place it where you want it.

Keep in mind that since you are now dealing with moving code out of pre-defined blocks that the developer has done, you will have to put the css calls to each instance where you want it. So you will have to put styling in both the main stylesheet and the responsive default files. The latter is not needed if you feel the search box does not interfere on minimizing the desktop view. If you wanted full confrol over the styling, just change the div of navMainSearch to something else. That way you can style it to your liking. Otherwise if you use the same id, just make sure to go through all the css files that use it and change it to your style.

As for your iphone, are you expecting the horizontal navigation to show as in your screenshot? By default, the mobile layout uses a responsive menu so look at the top right for a menu icon. Tap that and the dropdown of selections will appear including your new links you added.

[frank18]

Installed Fual Slimbox (Lightbox) on a local dev - just to see how it works with template native javascripts.

The result was completely unsatisfactory - the javascript of Fual Slimbox disabled the tabs on the product details pages, they become non-existent as tabs and all the page info is displayed in one single page instead of in tab details. The slim menu stops functioning altogether until one navigates away from the product details page. The LHS slideout disappers completely etc etc

The reason appears to be the usage of different versions of jquery, one overrides the other. The last loaded jquery dominates. Having two or more different versions of jquery on one site generally is not recommended, it always causes conflicts.

As soon as I disable Fual Slimbox, the site operates as normal.

Upon searching the forum for javascript conflicts relating to Fual Slimbox I came across numerous complaints.

My 5 cents: don't install Fual slimbox with this beautiful template - I uninstalled it.

Then I went on to install Zen Lightbox:

Much better result! Everything works fine BUT for one hiccup: the collapse menu (intended for small mobile screens) appears in the header of a desktop view (see screenshot).



After experimenting around with different versions of jquery I found that the template native googleapis script

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>

is overruled by the jquery of Zen Lightbox

<script type="text/javascript" src="includes/templates/westminster_new/jscript/jquery-1.4.4.min.js"></script>

Versions 1.10.2 and 1.4.4 are having a conflict.

Considering that Zen Lightbox is so popular, would it be possible to match the template native jquery 1.10.2 with the Zen Lightbox 1.4.4 query. IOW, get the code for the collapse menu updated?

Just a thought....

BTW - I am not a javascript guru.

Cheers / Frank

[frank18]

This link may help to prevent future jquery conflicts:

http://api.jquery.com/jQuery.noConflict/

[picaflor-azul]

Installed Fual Slimbox (Lightbox) on a local dev - just to see how it works with template native javascripts.

The result was completely unsatisfactory - the javascript of Fual Slimbox disabled the tabs on the product details pages, they become non-existent as tabs and all the page info is displayed in one single page instead of in tab details. The slim menu stops functioning altogether until one navigates away from the product details page. The LHS slideout disappers completely etc etc

The reason appears to be the usage of different versions of jquery, one overrides the other. The last loaded jquery dominates. Having two or more different versions of jquery on one site generally is not recommended, it always causes conflicts.

As soon as I disable Fual Slimbox, the site operates as normal.

Upon searching the forum for javascript conflicts relating to Fual Slimbox I came across numerous complaints.

My 5 cents: don't install Fual slimbox with this beautiful template - I uninstalled it.

Then I went on to install Zen Lightbox:

Much better result! Everything works fine BUT for one hiccup: the collapse menu (intended for small mobile screens) appears in the header of a desktop view (see screenshot).



After experimenting around with different versions of jquery I found that the template native googleapis script



is overruled by the jquery of Zen Lightbox



Versions 1.10.2 and 1.4.4 are having a conflict.

Considering that Zen Lightbox is so popular, would it be possible to match the template native jquery 1.10.2 with the Zen Lightbox 1.4.4 query. IOW, get the code for the collapse menu updated?

Just a thought....

BTW - I am not a javascript guru.

Cheers / Frank

I do recommend using zen lightbox, I like it better than the slimbox module. Since the template does use jquery, if you add modules that also use jquery you will probably need to work out various conflicts.

I believe that it is better to use the latest stable version of jquery, which at the time of the template dev was the 1.10.2. I would just remove the lower 1.4.4 zen lightbox version which is old, or maybe the module can be updated using a newer version.

http://jquery.com/download


Thanks,

Anne

[frank18]

I do recommend using zen lightbox, I like it better than the slimbox module. Since the template does use jquery, if you add modules that also use jquery you will probably need to work out various conflicts.

I believe that it is better to use the latest stable version of jquery, which at the time of the template dev was the 1.10.2. I would just remove the lower 1.4.4 zen lightbox version which is old, or maybe the module can be updated using a newer version.

http://jquery.com/download


Thanks,

Anne

Just had another play with this and (for the time being) got it all working to satisfaction.

It will need further testing though - so I might direct the developers of Zen Lightbox to this post for consideration.

I downloaded https://ajax.googleapis.com/ajax/lib.../jquery.min.js and saved the code as includes/templates/westminster_new/jscript/jquery-1.10.2.min.js

Then changed line 12 in /includes/classes/zen_lightbox/slimbox.php

from this

echo '<script type="text/javascript" src="' . $template->get_template_dir('.js', DIR_WS_TEMPLATE, $current_page_base, 'jscript') . '/jquery-1.4.4.min.js"></script>'; 

to this

echo '<script type="text/javascript" src="' . $template->get_template_dir('.js', DIR_WS_TEMPLATE, $current_page_base, 'jscript') . '/jquery-1.10.2.min.js"></script>'; 

There seem to be no further errors after this change - but, as I said previously, it will need more testing.

Hope this helps.

Cheers / Frank

[picaflor-azul]

Just had another play with this and (for the time being) got it all working to satisfaction.

It will need further testing though - so I might direct the developers of Zen Lightbox to this post for consideration.

I downloaded https://ajax.googleapis.com/ajax/lib.../jquery.min.js and saved the code as includes/templates/westminster_new/jscript/jquery-1.10.2.min.js

Then changed line 12 in /includes/classes/zen_lightbox/slimbox.php

from this

echo '<script type="text/javascript" src="' . $template->get_template_dir('.js', DIR_WS_TEMPLATE, $current_page_base, 'jscript') . '/jquery-1.4.4.min.js"></script>'; 

to this

echo '<script type="text/javascript" src="' . $template->get_template_dir('.js', DIR_WS_TEMPLATE, $current_page_base, 'jscript') . '/jquery-1.10.2.min.js"></script>'; 

There seem to be no further errors after this change - but, as I said previously, it will need more testing.

Hope this helps.

Cheers / Frank

Since the jquery library version 1.10.2 is already being called in the template, there is no need to call it twice. You should just remove the call to it in the slimbox.php. See includes/templates/westminster_new/jscript/jscript_jquery.min.php

Thanks,

Anne

[frank18]

Since the jquery library version 1.10.2 is already being called in the template, there is no need to call it twice. You should just remove the call to it in the slimbox.php. See includes/templates/westminster_new/jscript/jscript_jquery.min.php

Thanks,

Anne

Just did exactly that - shortly before reading your post! All good

Thanks Anne!