You are here:  » New Template - Standalone Responsive HTML5/CSS3

Active Forum Topics


New Template - Standalone Responsive HTML5/CSS3

Submitted by support on Mon, 2017-01-16 12:39 in

Hi everyone,

New template "Classic" is now available to download.

The objective was to create a standalone, responsive template that does not rely on any 3rd party library, which will make it much easier to merge Price Tapestry with an existing website, or into any 3rd party generic template.

- Fully namespaced, with all class definitions beginning pt_ and contained with a single <div>, of class "pt".

- Separated into two style sheets:

html/layout.css

html/style.css

An integration project would potentially begin by including layout.css only, initially letting font, sizes, form elements etc. inherit their style from the parent theme. Where required, styling can then be overridden as required with a customised style.css. To this end, also included is a "blank" version of style.css - style_blank.css.

Each .css file is clearly commented and further namespaced with pt_<section>_ prefixes, where <section> exactly matches the filenames of each HTML module contained in the html/ folder. For example, to edit the layout or style of the price comparison table on the product pages, look for the comment;

/* prices */

Included is a simple responsive menu (html/menu.php, displayed horizontally on larger displays and vertically with toggle functionality for mobile), however for most integration purposes the menu system would be integrated into the existing website or template's header HTML.

Cheers,
David
--
PriceTapestry.com

Submitted by sbedigital on Sun, 2017-11-26 17:23

Hello Dave,

Would it be possible to have a barebone version of the HTML Template files without any javascript references and all class, id tags along with inline styles taken out? Personally, I would like to start with a clean slate, I am sure there are many developers out there, would love to have a clean version of the HTML templates.

Thanks.

Noor

Submitted by support on Mon, 2017-11-27 09:49

Hello Noor,

I can look at making something - do you mean without any layout at all, for example as html/searchresults.php

<div>
  <?php foreach($searchresults["products"] as $product): ?>
    <div>
      <?php if ($product["image_url"]): ?>
        <p><a href='<?php print $product["productHREF"]; ?>'><img src='<?php print htmlspecialchars($product["image_url"],ENT_QUOTES,$config_charset); ?>' /></a></p>
      <?php endif; ?>
      <p><a href='<?php print $product["productHREF"]; ?>'><?php print $product["name"]; ?></a></p>
      <?php if ($config_useInteraction): ?>
        <p><?php if ($product["rating"]) print tapestry_stars($product["rating"],""); ?></p>
      <?php endif; ?>
      <?php if ($product["description"]): ?>
        <p><?php print tapestry_substr($product["description"],250,"..."); ?></p>
      <?php endif; ?>
      <p><?php print ($product["numMerchants"]>1?translate("from")."&nbsp;":""); ?></p>
      <p><?php print tapestry_price($product["minPrice"]); ?></p>
      <p><a href='<?php print $product["productHREF"]; ?>'><button><?php print ($product["numMerchants"]>1?translate("Compare")." ".$product["numMerchants"]." ".translate("Prices"):translate("More Information")); ?></button></a></p>
    </div>
  <?php endforeach; ?>
</div>

Cheers,
David.
--
PriceTapestry.com