Bradford Pure Template Support Thread

[picaflor-azul]

Hello ;-) Announcing our 22nd free zen cart template release to the community.



See the live demo here:

Bradford Pure Free Zen Cart Template Live Demo

Template Features:

• Super flexible design perfect for all types of ecommerce stores--the possibilites are endless!

• Fixed width 2 or 3 column display

• Matching button set included

• Matching icons

• Custom header with header search box, shopping cart total number of items, and dollar amount.

• Fully customizable header drop down mega menu with quick links, shop, brands, info (includes admin configurable ez pages), connect with us, and service (with customizable text and images).

• Home Page slideshow included

• Tabbed home page centerbox content for New Products, Featured Products, and Specials

• Add This social bookmarking added to all product pages (includes Facebook like button, Twitter Tweet Button, Pinterest and 300+ Sharing Services)

• Custom footer featuring a footer menu with contact information (telephone and link to contact us page), information, customer support, and useful links (ez pages), integrated, optional links to your Facebook, Twitter, Youtube, Pinterest, Google Plus, and blog, and optional, customizable links to payment options.

• Cross Browser tested using Firefox, IE9, IE8, IE7, Google Chrome, Opera, and Safari.

• W3C Valid XHTML and CSS

• Comes with the following modules installed: Column Layout Grid, About Us Page, Footer Menu , Column Divider Pro, Designer Monthly Boxes, Pure CSS Mega Menu

• No changes to core files

• Detailed html readme file with written tutorials and screen shots and links to videos of the installation and customization steps

• Fully compatible with versions 1.3.8, 1.3.9, 1.5, 1.5.1. Would probably work with lower versions although it has not been tested.

Please post any questions or bugs here.

Thanks,

Anne

[countrycharm]

Hello ;-) Announcing our 22nd free zen cart template release to the community.



See the live demo here:

Bradford Pure Free Zen Cart Template Live Demo

Template Features:

• Super flexible design perfect for all types of ecommerce stores--the possibilites are endless!

• Fixed width 2 or 3 column display

• Matching button set included

• Matching icons

• Custom header with header search box, shopping cart total number of items, and dollar amount.

• Fully customizable header drop down mega menu with quick links, shop, brands, info (includes admin configurable ez pages), connect with us, and service (with customizable text and images).

• Home Page slideshow included

• Tabbed home page centerbox content for New Products, Featured Products, and Specials

• Add This social bookmarking added to all product pages (includes Facebook like button, Twitter Tweet Button, Pinterest and 300+ Sharing Services)

• Custom footer featuring a footer menu with contact information (telephone and link to contact us page), information, customer support, and useful links (ez pages), integrated, optional links to your Facebook, Twitter, Youtube, Pinterest, Google Plus, and blog, and optional, customizable links to payment options.

• Cross Browser tested using Firefox, IE9, IE8, IE7, Google Chrome, Opera, and Safari.

• W3C Valid XHTML and CSS

• Comes with the following modules installed: Column Layout Grid, About Us Page, Footer Menu , Column Divider Pro, Designer Monthly Boxes, Pure CSS Mega Menu

• No changes to core files

• Detailed html readme file with written tutorials and screen shots and links to videos of the installation and customization steps

• Fully compatible with versions 1.3.8, 1.3.9, 1.5, 1.5.1. Would probably work with lower versions although it has not been tested.

Please post any questions or bugs here.

Thanks,

Anne

Nice template Anne............... :)

[picaflor-azul]

Nice template Anne............... :)

Thank you :-) I hope that you find it useful.



Thanks,

Anne

[SPH]

I'm really liking this one: http://www.prommart.com/

Thanks!

Steve

[lhungil]

Does look very nice *two thumbs up* :)

You may want to move your javascript slider (jQuery plugin) into an external script to avoid some validation errors and / or minify the jQuery plugin. If you leave the script inline, you may want to change the lines with '</div>' to use '<\/div>'.

The width attribute is deprecated on elements including 'td' elements. You should consider replacing these with CSS.

Phone number for contact is in an 'a' element, but the 'a' element does not have an href. Were you planning to link this?

[SPH]

Hi Anne,

I ran the template through http://gtmetrix.com/reports/www.prommart.com/8E4jxMhI to check speed and issues. Not the fastest template I've had, but working on it.

In order to get rid of the Specify Image Dimensions warning and score a green 100%, I had to include image width and height for all images in the drop-down menu as well as my slider and all footer images. Before I do the same for my sister's Picaflor sites I'd like to confirm I did it correctly. Here is one of her sites indicating to specify image dimensions; the second one down:

http://gtmetrix.com/reports/www.prom...l.com/E5KRKHdE

Here is part of what I did; I am hoping you can let me know if this is correct or wrong - including a width and height of the social images in the tpl_footer.php:

 <div id="social-media">
<a href="<?php echo FACEBOOK; ?>" target="_blank"><img src="<?php  echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.FACEBOOK_ICON ?>"  alt="facebook link" class="smi facebook" width="32px" height="32px" /></a>
<a href="<?php echo TWITTER; ?>" target="_blank"><img src="<?php  echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.TWITTER_ICON ?>"  alt="twitter link" class="smi twitter" width="32px" height="32px" /></a>
<a href="<?php echo YOUTUBE; ?>" target="_blank"><img src="<?php  echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.YOUTUBE_ICON ?>"  alt="youtube link" class="smi youtube" width="32px" height="32px" /></a>
<a href="<?php echo PINTEREST; ?>" target="_blank"><img src="<?php  echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.PINTEREST_ICON ?>"  alt="pinterest link" class="smi pinterest" width="32px" height="32px" /></a>
<a href="<?php echo GOOGLE; ?>" target="_blank"><img src="<?php  echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.GOOGLE_ICON ?>"  alt="google link" class="smi google" width="32px" height="32px" /></a>
<a href="<?php echo BLOG; ?>" target="_blank"><img src="<?php  echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.BLOG_ICON ?>"  alt="blog link" class="smi blog" width="32px" height="32px" /></a>
</div>

Thanks.

Steve

[picaflor-azul]

I'm really liking this one: http://www.prommart.com/

Thanks!

Steve

I am happy that you like it ;-)

Thanks,

Anne

[picaflor-azul]

Does look very nice *two thumbs up* :)

You may want to move your javascript slider (jQuery plugin) into an external script to avoid some validation errors and / or minify the jQuery plugin. If you leave the script inline, you may want to change the lines with '</div>' to use '<\/div>'.

The width attribute is deprecated on elements including 'td' elements. You should consider replacing these with CSS.

Phone number for contact is in an 'a' element, but the 'a' element does not have an href. Were you planning to link this?

Thank you so much ;-)

I am not sure where you are seeing td's with widths, but it is probably coming from zen cart core code and not template specific code.

No, there is no link for phone number, it is empty on purpose ;-)

Thanks,

Anne

[picaflor-azul]

Hi Anne,

I ran the template through http://gtmetrix.com/reports/www.prommart.com/8E4jxMhI to check speed and issues. Not the fastest template I've had, but working on it.

In order to get rid of the Specify Image Dimensions warning and score a green 100%, I had to include image width and height for all images in the drop-down menu as well as my slider and all footer images. Before I do the same for my sister's Picaflor sites I'd like to confirm I did it correctly. Here is one of her sites indicating to specify image dimensions; the second one down:

http://gtmetrix.com/reports/www.prom...l.com/E5KRKHdE

Here is part of what I did; I am hoping you can let me know if this is correct or wrong - including a width and height of the social images in the tpl_footer.php:

 <div id="social-media">
<a href="<?php echo FACEBOOK; ?>" target="_blank"><img src="<?php  echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.FACEBOOK_ICON ?>"  alt="facebook link" class="smi facebook" width="32px" height="32px" /></a>
<a href="<?php echo TWITTER; ?>" target="_blank"><img src="<?php  echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.TWITTER_ICON ?>"  alt="twitter link" class="smi twitter" width="32px" height="32px" /></a>
<a href="<?php echo YOUTUBE; ?>" target="_blank"><img src="<?php  echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.YOUTUBE_ICON ?>"  alt="youtube link" class="smi youtube" width="32px" height="32px" /></a>
<a href="<?php echo PINTEREST; ?>" target="_blank"><img src="<?php  echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.PINTEREST_ICON ?>"  alt="pinterest link" class="smi pinterest" width="32px" height="32px" /></a>
<a href="<?php echo GOOGLE; ?>" target="_blank"><img src="<?php  echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.GOOGLE_ICON ?>"  alt="google link" class="smi google" width="32px" height="32px" /></a>
<a href="<?php echo BLOG; ?>" target="_blank"><img src="<?php  echo $template->get_template_dir('',DIR_WS_TEMPLATE, $current_page_base,'images').'/'.BLOG_ICON ?>"  alt="blog link" class="smi blog" width="32px" height="32px" /></a>
</div>

Thanks.

Steve

Yes, that looks correct ;-) These dimensions are not hard coded into the templates to make it easier for people to customize the images or add different dimension images.

Thanks,

Anne

[lhungil]

The template performed well on a site with compression, expires, and ETags configured. Some minification and merging of the various CSS files would also give a small boost, but at the expense of readability.

I am not sure where you are seeing td's with widths, but it is probably coming from zen cart core code and not template specific code.

Probably from "includes/modules/product_listing.php". If it is you can provide "includes/modules/template_name/product_listing.php" with changes to generate 'style="width: 35%"' instead of 'width="35%"'. This would not require overwriting any core files and would make the template more W3C compliant (the width attribute on a 'td' has been depreciated since HTML 4.01 - and using this attribute generates a validation warning in XHTML).

No, there is no link for phone number, it is empty on purpose ;-)

I just am not understanding what point an empty href attribute serves (note this generates a validation warning in XHTML). If you want it to call a number on mobile you can use <a href="tel:555555555">555-555-5555</a>. You can attach hover and javascript effects on just about any element (with some workarounds on old version of IE). If you need a wrapper element, you can always use a 'span'. If the link will attach to a script opening an online chat feature you could just have the link to call. Maybe you could educate me on why you have the phone number inside an 'a' attribute with an empty href?

... including a width and height of the social images in the tpl_footer.php

Makes sense to me. I believe this is what the Zen Cart code for creating html images does automatically. Not related to this template, but good to note: Adding width and height to the img will make sure the browser knows how much space the image will take up before it loads the image. This becomes very useful when dynamically positioning html snippets loaded by AJAX.

EDIT: Looks like Anne answered the image question while I was typing :)