• 0
Sign in to follow this  
Followers 0

ibox icon/image size

Question

Posted · Report post

I'd like to use my own images for the iboxes but can't find in the documentation what size they need to be.  Does anyone know?

 

thank you!

Share this post


Link to post
Share on other sites

16 answers to this question

  • 0

Posted · Report post

Hi there,

To get rid of the grey background -

 

.pl-contrast {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0);
}
 
To remove the circle effect and make it square
 
.ibox .ibox-media .ibox-icon-border {
    border-radius: 0 0 0 0;
}
 
To get the image to fit
 
.ibox.top-aligned .ibox-media .media-type-image {
    background-repeat: no-repeat;
    background-size: contain;
    height: 0;
    padding: 50% 0;
}

 

 

That shold give you the following effect - http://screencast.com/t/hDioLWgZg

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi twosis - The iBoxes will respond to the images you upload regardless of their size. That said, it's probably best looking and faster loading to keep them somewhere around the 200 or 300 px area.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thank you again :-)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

ok - set my blue pie wedge to be 300 px, but the problem is that it's not responding regardless of size - you only see a little bit of it.  And if I make it too small then it automaticlly resizes them and they look fuzzy, like the orange and green pies. Thoughts? 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

twosis - My apologies, I did a little testing and you're right, they crop when they scale to fit in the circle. Help me with this, you don't necessarily want the circle do you but rather you'd like to just show the complete pie images?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Jake - yes jus them to show - I have the pie wedges as 50x50px images. Haven't decided yet whether I want the grey circles, but I think I know how to make those go away in the css.  I appreciate your help! 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

OK - so probably your best bet would be to remove the roundness with the following:

 

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

 

and then the pie pieces will show without being cropped by the circle. Does that make sense?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I will try that and see how it goes!  Thanks

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

no go :-(  The grey circles are still there!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

A very belated thank you James B!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Happy to hear it worked!  :)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Well it sort of worked :-(  I made those pie wedges smaller (50px x 50px) and all facing in the same direction.  this is the css I have:

 

.ibox.top-aligned .ibox-media .media-type-image {
    background-repeat: no-repeat;
    background-size: contain;
    height: 0;
    padding: 50% 0;
}
 

But the 50px x 50px wedges are being forced to a larger size making them blurry.  I looked at it through Firebug in Firefox to see if I could spot some other CSS that was causing this and I just don't see it.

 

Hoping one of you sharp eyed experts will see it right away!  Page again is here:
http://www.xploreproductions.com/

 

thanks-

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi,

 

Your images are appearing blurry as they're being sized, because they're not large enough. You will need to edit your images and make them about 150x150 pixels, this should resolve your pixelated images.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

HI there, I have found this really useful too thank-you. 

I am (BRAND) new to altering any CSS myself and would like to understand once I have altered the code to reflect this in the 'inspect element' box...

Where can I cut and paste this code to make it permanent on my website?

 

Thanks in advance for your help.

Alice.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Alice,

 

You have a number of options which you can find more information about here - http://docs.pagelines.com/customize/how-to-customize

 

However, if you're new to making alterations with CSS, then the simplest method would be to add your custom CSS to DMS Toolbar > Custom > Custom CSS/LESS editor.

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
Sign in to follow this  
Followers 0