Jump to content


Photo
- - - - -

ibox icon/image size


Best Answer James B , 27 September 2013 - 09:38 PM

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

Go to the full post


  • Please log in to reply
16 replies to this topic

#1 twosis

twosis

    Member

  • Members

  • 17 posts
  • LocationNew England
  • Country: Country Flag

Posted 27 September 2013 - 04:37 PM

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!



#2 Jake

Jake

    Advocate

  • Premium
  • 565 posts
  • LocationNC, USA
  • Country: Country Flag

Posted 27 September 2013 - 05:09 PM

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.



#3 twosis

twosis

    Member

  • Members

  • 17 posts
  • LocationNew England
  • Country: Country Flag

Posted 27 September 2013 - 05:13 PM

Thank you again :-)



#4 twosis

twosis

    Member

  • Members

  • 17 posts
  • LocationNew England
  • Country: Country Flag

Posted 27 September 2013 - 05:22 PM

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? 



#5 twosis

twosis

    Member

  • Members

  • 17 posts
  • LocationNew England
  • Country: Country Flag

Posted 27 September 2013 - 05:31 PM

link helps!

http://www.xploreproductions.com/



#6 Jake

Jake

    Advocate

  • Premium
  • 565 posts
  • LocationNC, USA
  • Country: Country Flag

Posted 27 September 2013 - 05:34 PM

@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?



#7 twosis

twosis

    Member

  • Members

  • 17 posts
  • LocationNew England
  • Country: Country Flag

Posted 27 September 2013 - 05:38 PM

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! 



#8 Jake

Jake

    Advocate

  • Premium
  • 565 posts
  • LocationNC, USA
  • Country: Country Flag

Posted 27 September 2013 - 06:00 PM

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?



#9 twosis

twosis

    Member

  • Members

  • 17 posts
  • LocationNew England
  • Country: Country Flag

Posted 27 September 2013 - 06:12 PM

I will try that and see how it goes!  Thanks



#10 twosis

twosis

    Member

  • Members

  • 17 posts
  • LocationNew England
  • Country: Country Flag

Posted 27 September 2013 - 06:18 PM

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



#11 James B

James B

    Advocate

  • Moderators
  • 5126 posts
  • LocationSurrey - UK
  • Country: Country Flag

Posted 27 September 2013 - 09:38 PM   Best Answer

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


  • twosis likes this

#12 twosis

twosis

    Member

  • Members

  • 17 posts
  • LocationNew England
  • Country: Country Flag

Posted 08 October 2013 - 02:23 PM

A very belated thank you James B!



#13 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 08 October 2013 - 05:16 PM

Happy to hear it worked!  :)



#14 twosis

twosis

    Member

  • Members

  • 17 posts
  • LocationNew England
  • Country: Country Flag

Posted 10 October 2013 - 01:22 PM

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-



#15 Danny

Danny

    Is Awesome!

  • Moderators
  • 15242 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 10 October 2013 - 03:06 PM

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.



#16 AliceNicholls

AliceNicholls

    Member

  • Members

  • 16 posts
  • Country: Country Flag

Posted 04 November 2013 - 02:23 AM

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.



#17 Danny

Danny

    Is Awesome!

  • Moderators
  • 15242 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 04 November 2013 - 11:17 AM

Hi Alice,

 

You have a number of options which you can find more information about here - http://docs.pageline...ow-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.