DMS 2 iBox Rectangle images

4 posts in this topic

Hello Everyone,


Website URL:

Framework Version: 2.4.1

Wordpress Version: 3.9.1

Server/Host: Dreamhost

Details: I am having some issues with iBoxes on the above page. When I first set the iBox up the images/logos from our partners were all rectangular, a few days latter I went to add a few more boxes in and they are now all circular cut offs. I added the following to the Custom Styling Classes:


.ibox-media .ibox-icon-border { border-radius: 0 0 0 0;}


This doesn't seem to have the desired effect. Does anyone know what I should do?

Share this post

Link to post
Share on other sites



The iBox has unique styling, if you want to use an image that is rectangle, you will need to adjust the default styling. Add the following and this should resolve your issue.


#site .ibox-media {
background-size: contain;
background-repeat: no-repeat;
background-position: center center;

Share this post

Link to post
Share on other sites

Thank you :D

Share this post

Link to post
Share on other sites

No problem.

Share this post

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • Edge-to-edge images
      By janpeeters+
      Hi, I have a container with on the left a 6 column image section and on the right a six column text section. I'm not succeeding in getting a edge-to-edge image on the left. Even with padding set to 0, there remains a white gap under and on the left of the image. So I'm researching if I'm overlooking something, if I've found something that could be improved in PL5 or if this is 'by design'?
      I've set site lay-out in settings to 100%. I've set pl-framework-base to 'full width'/'unwrapped'. (sidenote: in the end I want to have this 'read width' but for testing purposes I set it to full width. This might ask for an override function in the editor so people can always choose to full-width a section although other content is read width.) The images beneath show the settings and lay-out. 
      I've set all padding on the container to 0, but there remains a gap underneath the image and on the left. 
      I've done the same for the padding on the image.

      I've inspected this with Chrome Dev tools and it shows the following:

      I could create custom CSS to remove these spaces but for PL5 to be even more flexibleI I would think that being able to have edge-to-edge images without too much hassle would be a great feature. You see this a lot in recent webdesign. But I might be overlooking something and it is already possible. 
      I've done some testing with the Window Height setting. I think it would be great if images could fill their container edge-to-edge too with this setting active.
      I've tried to make the image taller but then the aspect ratio changes. A locked aspect ratio function would be great for this. With responsive designs images get cropped all the time so for me cropping would not be a problem. Keeping it's aspect ratio locked automatically or as a setting would be nice. I guess most designers wouldn't want it unlocked. 

      That's it, a whole visual story. I hope that it's clear what I'm saying if not let me know and I'll try to clarify. 
      Thanks, Jan
      (by the way, the current forum software you're using is really the best you've had. It works so easily, brilliant)
      There seems to pop an image at the bottom that I didn't put here, forget about the image below, it's already above.

    • CSS for iBox image howto?
      By attac+
      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?
    • Edit Text in iBox
      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
    • REVSlider Issue
      By jermainestegall
      Hello Danny,
      I've been experiencing problems this past week trying to add images to theREV SLIDER section of my wordpress site.  Once I upload an image, it's not visible within the DMS 2 template.  I can't see images in the media gallery or in the slider even when I refresh or clear the cache etc.  Is there something that's disabled now that was only available for 1 year?  I paid for the template.  Also, if I re-install the DMS 2 template will that help reset anything that may have become corrupt?
      Is this a function that only works for a limited time (1 year?)
      thanks again
      Jermaine Stegall
    • iBox icon issues with most recent DMS2 update
      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  I'm having a weird visualization issue on my website 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.