Jump to content

Archived

This topic is now archived and is closed to further replies.

twosis

iBox space issue

Recommended Posts

twosis    3
twosis

I am trying to get sections properly spaced and centered. Why do I see a big empty space in the iBox section?  It makes it hard to align these sections.

 

Here is a link to the screen shot I took: http://d.pr/i/6Qqb

 

And here is a link to the site: http://www.xploreproductions.com/

 

thanks!

 

And ignore the funky pie wedges.  Im having trouble with sizing on those, but that is a whole other topic!

Share this post


Link to post
Share on other sites
James B    436
James B

Hi there,

 

Have you checked the settings for the ibox section? I can replicate the same type of setup if they're not set correctly - http://screencast.com/t/rmDiBLhb

 

Can you post a screen shot of the ibox settings for us so we can replicate your setup and work out where it needs to be corrected. 

  • Like 1

Kindly search the forum and read the documentation before posting. It will help you resolve many issues.

For CSS help be sure to check out W3Schools first and be sure to download FireBug for FireFox for troubleshooting.

James B

Share this post


Link to post
Share on other sites
Rob    547
Rob

Hi,

 

Your problem is with the number 12.   The boxes are based on the Twitter Bootstrap Responsive Grid. That uses the number 12 as its basis.  So, if you're going to imagine 12 columns, and then grouping them into boxes, you're merging some of those 12 into little groups.

 

So, to make 3 boxes, each is 4 individual columns.  You have them set as 3 columns, 3 boxes, thus you only use 9 columns out of 12, leaving a gap of 3 columns.  Look at the image you shared with James.  Where it says "Number of Columns for each Box (12 Col Grid)" you will see 3.  When you edit the boxes, change that value to 4.   If you want 4 boxes, change the Number of Columns value at 3.

 

See http://docs.pagelines.com/tutorials/responsive-grid

  • Like 1

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
twosis    3
twosis

A very belated reply in thanks Rob!  Appreciate the link for further knowledge as well :-)

  • Like 1

Share this post


Link to post
Share on other sites
Rob    547
Rob

You're very welcome, as always!


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
mtaus+    5
mtaus

I understand how the 12 column grid works, but I'm not sure I know how to configure this for 5 items (a number that 12 is not divisible by). If I set iBox to 2-columns per box, then my iBox grid is aligned to the left (since 5x2=10, I get an extra 2 gird units to the right). If I set the column width to 3, then iBox forces the last item to a new line.

 

Any suggestions would be appreciated.

 

Thanks,

Mike

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Hi Mike,

 

To do this you will most likely need to use the offset option to adjust the position of your iBox section. Offset can be found just next to the decrease/increase width options.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
mtaus+    5
mtaus

Danny I've done this to compensate, but of course that means I will also ave to decrease the size of the section so that I can offset it. Not ideal. It would be better if the whole section could be centered.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

Not sure why it's not ideal, as 5 iBoxes wont fill the full width area anyway, so reducing the width shouldn't make any difference ?


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
mtaus+    5
mtaus

Danny try it out and you'll see what I mean. In order to offset to the right, then entire ibox section was to be reduced, which in turn reduces the size of the individual ibox icons.

Share this post


Link to post
Share on other sites
Danny    1,327
Danny

OK, well you can't have 5 in one row, as the grid doesn't support it. The only alternative is for you to display 4 on one row and one on another.

 

You may be thinking to your self, why is there even an option for 5, well thats in case a user wants to display 5 or more boxes in one column, like so

 

http://d.pr/i/GusK


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

  • Similar Content

    • Audun MB
      By Audun MB+
      I've added a number option (ie the first box has a 1 next to or above, second box has 2, etc) to iBoxes in DMS (as a custom section), and I'd like that for PL5 Boxes as well. Adding it for iBox was quite easy:
      First this: 'opts' => array( 'icon' => array( 'name' => __( 'Icon Font', 'pagelines' ) ), 'count' => array( 'name' => __( 'Counter', 'pagelines' ) ), 'image' => array( 'name' => __( 'Images', 'pagelines' ) ), 'numb' => array( 'name' => __( 'Number', 'pagelines' ) ), 'text' => array( 'name' => __( 'Text Only, No Media', 'pagelines' ) ) And then this } elseif( $media_type == 'numb' ){ $background = ($color) ? sprintf('<span class="invert-icon" style="background-color: %s;"></span>', $color) : ''; $media_html = sprintf( '<i class="iii icon iboks-number" style="%s">%s</i>%s', $text_color, $count, $background ); } And some CSS (though I used the style for icon mostly). iBox already did know which number the box had in the sequence, so adding the number was quite simple. 
      The Boxes code, and PL5 code in general, is a bit mor complex with javascript (with Knockout) and php, and some CSS cheats. It took me a while to figure out how it works, and I'm not sure I quite grasp it yet.
      Adding a number option to the media array is the same as iBox:
      array( 'key' => 'ibox_media', 'type' => 'select', 'opts' => array( 'icon' => array( 'name' => __( 'Icon Font', 'pl-section-boxes' ) ), 'count' => array( 'name' => __( 'Counter', 'pl-section-boxes' ) ), 'boxnumb' => array( 'name' => __( 'Numbering', 'pl-section-boxes' ) ), 'image' => array( 'name' => __( 'Images / SVG', 'pl-section-boxes' ) ), 'text' => array( 'name' => __( 'Text Only, No Media', 'pl-section-boxes' ) ) ), 'default' => 'icon', 'label' => __( 'Select iBox Media Type', 'pl-section-boxes' ), ), In the section template I'll add a line for the boxnumber. In addition I have to add variuous boxnumb classes in the build.less file to make it hidden by default and style it.
      function section_template(){ ?> <script type="text/html" id="boxes-template"> <a class="boxes" data-bind="class: boxclass() + ' pl-col-sm-' + $root.ibox_cols(), plhref: link" > <div class="boxes-pad" data-bind="class: 'pl-control-'+ $root.ibox_format()"> <div class="boxes-media media-left"> <span class="the-boxes-media pl-animation pl-appear" data-bind="class: 'media-'+$root.ibox_media(), style: { color: color, width: $root.image_width() + 'px', opacity: $root.image_opacity}"> <div class="pl-image" data-bind="plbg: image, class: $root.image_format"></div> <span class="pl-counter" data-bind="pltext: count"></span> <span class="pl-boxnumb" data-bind="pltext: ?numbervalue?"></span> <i class="boxes-icon pl-icon" data-bind="class: 'pl-icon-'+icon()"></i> </span> </div> <div class="boxes-text media-right"> <h3 class="boxes-title" data-bind="pltext: title"></h3> <div class="boxes-desc" data-bind="pltext: text"></div> </div> </div> </a> </script> Where I'm stuck is how to get the number to supply to pltext. Since the boxes are numbered in the configuration panel (showing as Item 1, Item 2, ...) I guess there is something in the code that could give me the box number, but what would that be? Finding it in the pure php code of iBox was quite easy, but the Javascript-Knockout.js-PHP code in PL5 isn't that easy to read. 
      I realise that I'm developer terrority now, but I'd appreciate any help. I guess this could be useful for more people if get it to work. Maybe it should be added as a standard option? "X things you need to know" or similar is staple website content and the Boxes section is ideal for that with numbers. On our website the "X things you need to know"-pages is half our traffic. 
    • laka74
      By laka74+
      Dear support,
      I'm having problems using the iBox - can't change anything or delete it ?!
      http://seriousplay.training/
      Best
      regards
      Lasse Kramer
    • Audun MB
      By Audun MB+
      I'd like to have the images in iBox to look different with the following CSS. This works when manipulating the CSS with Inspect element in Chrome, but I can't get it to work as a class. Here's the class:
      .imagecontain {     border-radius: 1px;     background-size: contain;     background-repeat: no-repeat;       } This is from my style.less in the child theme. I applied the class to the iBox with custom class option, though nothing happens. How to fix that? How do I target only the div with the image in with CSS?
    • dchetson
      By dchetson+
      I am trying to edit the text in an iBox but every time I attempt to make the change, it doesn't take. Website is www.chetson.com.
      Thanks!
    • Matt C.
      By Matt C.+
      I was wondering if there was a way to download legacy versions of DMS 2, so that I can downgrade my theme to the previous version before 2.1.9.9.  I'm having a weird visualization issue on my website http://udforu.com when it comes to the iBox sections and for some reason I can't retrieve the old version of DMS 2 from my backups.  There's also a weird shifted doubling effect that occurs on the search icon, as well as the icons on my pagelines dashboard.  If you know how to fix that issue that would be great, but as a quick fix if there's a way to downgrade that would be great.

×