You are here:  » Box Html

Active Forum Topics


Box Html

Submitted by Tobix on Sun, 2020-06-14 20:14 in

Hi, David,
I wanted to create a box where to insert the site and create a background like this site: how can I do it?
{link saved}

Submitted by support on Mon, 2020-06-15 08:54

Hello Tobix,

Foundation 5 has an Orbit (carousel) component that creates sliding content units like that;

https://get.foundation/sites/docs-v5/components/orbit.html

I just tried it quickly but it appears there is some CSS conflict with the default Price Tapestry template so I am going to check this out further in conjunction with the Multiple Featured Products Sections mod and once I've got it working nicely i'll post an update here...

Cheers,
David.
--
PriceTapestry.com

Submitted by support on Mon, 2020-06-15 15:36

Hi Tobix,

This works quite nicely! If you'd like to experiment with Orbit to show multiple Featured Products sections with left / right (or swipe if supported), fist download and set-up Multiple Featured Products Sections with each page of products you would like on each slide.

I would suggest testing that each page works as expected before integration with orbit by adding the following HTML section to your index.php - you may need to come out of PHP mode to insert this if your home page is currently entirely PHP:

Featured Blue Widgets

<?php
  $featuredSection
["section"] = "blue";
  require(
"featuredSection.php");
?>

Featured Red Widgets
<?php
  $featuredSection
["section"] = "red";
  require(
"featuredSection.php");
?>

So then to combine with Orbit, first download from the CDN foundation.orbit.js and upload to your site as html/vendor/foundation.orbit.js

Next, edit html/header.php and look for the following code at line 32:

      <script src='<?php print $config_baseHREF?>html/vendor/foundation.topbar.js'></script>

...and REPLACE with:

      <script src='<?php print $config_baseHREF?>html/vendor/foundation.topbar.js'></script>
      <script src='<?php print $config_baseHREF?>html/vendor/foundation.orbit.js'></script>

Edit html/default.css and look for the Featured Products image class definition beginning at line 35:

  .pt_fp_image {
    border: 0;
    height:100px;
    max-width:none;
  }

...and REPLACE with:

  .pt_fp_image {
    border: 0;
    height:100px;
    max-width:none;
    margin: auto !important;
  }

Also, add the following NEW code to html/default.css

.orbit-container .orbit-next > span {
  border-left-color: #f4f4f4 !important;
}
.orbit-container .orbit-prev > span {
  border-right-color: #f4f4f4 !important;
}
.orbit-container .orbit-next:hover > span {
  border-left-color: #c4c4c4 !important;
}
.orbit-container .orbit-prev:hover > span {
  border-right-color: #c4c4c4 !important;
}
.orbit-container .orbit-next:hover {
  background-color: white !important;
}
.orbit-container .orbit-prev:hover {
  background-color: white !important;
}
.orbit-timer {
  display: none;
}

Finally, in place of the above HTML section in index.php use for example;

<div class='row'>
  <div class='small-12 columns'>
    <ul data-orbit data-options="animation:slide;bullets:false;slide_number:false;">
      <li>
        <div>
          <?php
            $featuredSection["section"] = "blue";
            require("featuredSection.php");
          ?>
        </div>
      </li>
      <li>
        <div>
          <?php
            $featuredSection["section"] = "red";
            require("featuredSection.php");
          ?>
        </div>
      </li>
    </ul>
  </div>
</div>

(don't forget to do a hard refresh after modifying CSS - normally CTRL+F5 - to ensure that it is reloaded by the brwoser)

Hope this helps!

Cheers,
David.
--
PriceTapestry.com