Foundation - Add a right hand box

[bondimedical]

<div id="sidebar-temp">
   <div class="sidebar-title">Media</div>
  <p class="image" style="text-align: center">
	  <img src="etc etc" />
  </p>
</div> 

In cubecart 5 if we wanted to add a box of our choice in the right hand column in main.php we would simply add the above code. How can I do this in Foundation?

[bsmither]

It would be very similar, actually. In main.php, find:

            <div class="row {$SECTION_NAME}_wrapper">
               <div class="small-12 large-9 columns small-collapse">
                  {include file='templates/box.errors.php'}
                  {include file='templates/box.progress.php'}
                  {$PAGE_CONTENT}
               </div>
               <div class="large-3 columns show-for-large-up">
                  {include file='templates/box.featured.php'}
                  {include file='templates/box.popular.php'}
                  {include file='templates/box.sale_items.php'}
               </div>
               <a href="#" class="back-to-top"><i class="fa fa-angle-up"></i> {$LANG.common.top}</a>
            </div>

The second nested div block -- "large-3" -- has a series of includes. Add another:

                  {include file='templates/box.media.php'}

Create the file box.media.php, make it look like any of these other boxes (for example, see following), and have it contain the HTML you want it to have:

<div class="panel" id="box-media">
   <h3>YOUR_TITLE</h3>
   <!-- YOUR_CONTENT -->
</div>

The next trick is if you need CubeCart to populate it with dynamic data.

[bondimedical]

Thank you, that worked. Is it necessary to put the ' class="image" ' part? It seemed to work without it?

[bsmither]

Foundation already has stylings for <img> tags, and images that are links to the <a> tag. So you do not have to have any stylings for images unless you want to have something new or override existing stylings.