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}
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");
?>
<?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
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