Shape 5

Joomla Templates => Business Line - Club => : studeno February 25, 2016, 01:42:01 PM



: Top Image Boxes
: studeno February 25, 2016, 01:42:01 PM
Okay, definitely feeling slow today....

Top Image Boxes do not appear as in demo. Each takes full width and they stack on top of each other.  I have a screen shot. I've been trying to go step by step to see where it breaks down.... at the first step!
Tried publishing in a different position, makes no difference. Nothing else is published in top row 1 1 position.
Tried using different editors to post the code in.... nope.
Sigh....

Appreciate any help.

John


: Re: Top Image Boxes
: mikek February 26, 2016, 08:24:26 AM
Hello,

The code needs to be exactly how it's shown on this page:

http://www.shape5.com/demo/business_line/index.php/tutorials-menu-48/custom-code-for-this-design

Each box is set to 25% width by default, so as long as the code matches that they will show inline.

Also, please post a url to your site.


: Re: Top Image Boxes
: studeno February 26, 2016, 01:43:22 PM
Hi again

Thanks for the reply. I have used the code exactly as shown on that page.
I've published the module again on this page:
http://www.heathercurnew.ca/events/training-workshops

The image in the first box is actually the exact same size in pixils as the real estate taken up by an image in your demo. For some reason it's being stretched out to full width.

I have tried to set up the module using the default non-wysiwyg editor, using code mirror, and it doesn't make any difference. I have posted the exact same code as the demo and changed nothing except the four box titles, but they still stack down the page.
I can't see a place in the code for a width of 25% - it seems like finding that could fix the problem, 'cos it looks like it's set to 100%.

Appreciate the help.

John



: Re: Top Image Boxes
: mikek February 27, 2016, 08:09:13 AM
Hello,

The code isn't matching what is on the link I gave above. I think there is an unclosed div either in that module or in another area of the template. If you can private message me super admin access and ftp access I can debug it.


: Re: Top Image Boxes
: mikek February 27, 2016, 08:17:02 AM
Hello,

Actually, I think I found the problem. Can you try using this code instead?


<div class="image_boxes_wrap">
<div class="image_boxes_wrap_inner">

   <div class="image_boxes_row">
   
      <div class="image_box_item">
      <div class="image_box_item_inner1">
      <div class="image_box_item_inner2" style="min-height: 499px;">
         <a href="index.php/features-mainmenu-47/template-features/responsive-layout">
            <div class="image_box_image">
            <div class="image_box_image_inner">
               <img src="images/top1.jpg" alt="">
               <i class="image_box_icon ion-link">
            </div>
            </div>
         [/url]
         <div class="image_box_text">
            <h3>Responsive</h3>
            

            <span>You can easily adapt your site to any screen size or device. Simply resize your screen to see it all in action.</span>
            

            <a class="readon" href="index.php/features-mainmenu-47/template-features/responsive-layout">Read More[/url]
         </div>
      </div>
      </div>
      <div style="clear:both:height:0px;"></div>
      </div>
      
      <div class="image_box_item">
      <div class="image_box_item_inner1">
      <div class="image_box_item_inner2" style="min-height: 499px;">
         <a href="index.php/features-mainmenu-47/template-specific-features">
            <div class="image_box_image">
            <div class="image_box_image_inner">
               <img src="images/top2.jpg" alt="">
               <i class="image_box_icon ion-link">
            </div>
            </div>
         [/url]
         <div class="image_box_text">
            <h3>Flexible</h3>
            

            <span>This design comes with options like multiple menus, highlight colors, Google Fonts, dozens of positions, and more.</span>
            

            <a class="readon" href="index.php/features-mainmenu-47/template-specific-features">Read More[/url]
         </div>
      </div>
      </div>
      <div style="clear:both:height:0px;"></div>
      </div>
      
      <div style="clear:both:height:0px;"></div>
   </div>

   <div class="image_boxes_row">
   
      <div class="image_box_item">
      <div class="image_box_item_inner1">
      <div class="image_box_item_inner2" style="min-height: 499px;">
         <a href="index.php/extensions/s5-image-and-content-fader">
            <div class="image_box_image">
            <div class="image_box_image_inner">
               <img src="images/top3.jpg" alt="">
               <i class="image_box_icon ion-link">
            </div>
            </div>
         [/url]
         <div class="image_box_text">
            <h3>Extensions</h3>
            

            <span>This month we also are launching the new Image and Content Fader V4, now with an article integration method.</span>
            

            <a class="readon" href="index.php/extensions/s5-image-and-content-fader">Read More[/url]
         </div>
      </div>
      </div>
      <div style="clear:both:height:0px;"></div>
      </div>
      
      <div class="image_box_item">
      <div class="image_box_item_inner1">
      <div class="image_box_item_inner2" style="min-height: 499px;">
         <a href="index.php/features-mainmenu-47/template-specific-features">
            <div class="image_box_image">
            <div class="image_box_image_inner">
               <img src="images/top4.jpg" alt="">
               <i class="image_box_icon ion-link">
            </div>
            </div>
         [/url]
         <div class="image_box_text">
            <h3>Technology</h3>
            

            <span>This design is built on the powerful Vertex4 template framework, which makes setting up your site quick and easy!</span>
            

            <a class="readon" href="index.php/features-mainmenu-47/template-specific-features">Read More[/url]
         </div>
      </div>
      </div>
      <div style="clear:both:height:0px;"></div>
      </div>
      
      <div style="clear:both:height:0px;"></div>
   </div>

   <div style="clear:both:height:0px;"></div>
</div>
</div>


: Re: Top Image Boxes
: studeno March 02, 2016, 07:10:52 PM
Works! Thanks Mike. Was it me?


: Re: Top Image Boxes
: mikek March 03, 2016, 08:20:24 AM
Hello,

No, some of the code didn't copy right on the custom code page.