Jump to content

Archived

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

twosis

ibox icon/image size

Recommended Posts

twosis    3
twosis

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
Jake    74
Jake

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.


Have you searched the forums yet or checked out the DMS user docs?

PageLines geek, blogging at MyUntangledLife.com

Share this post


Link to post
Share on other sites
twosis    3
twosis

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
Jake    74
Jake

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?


Have you searched the forums yet or checked out the DMS user docs?

PageLines geek, blogging at MyUntangledLife.com

Share this post


Link to post
Share on other sites
twosis    3
twosis

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
Jake    74
Jake

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?


Have you searched the forums yet or checked out the DMS user docs?

PageLines geek, blogging at MyUntangledLife.com

Share this post


Link to post
Share on other sites
twosis    3
twosis

I will try that and see how it goes!  Thanks

Share this post


Link to post
Share on other sites
twosis    3
twosis

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

Share this post


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

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

  • 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
twosis    3
twosis

A very belated thank you James B!

Share this post


Link to post
Share on other sites
Rob    547
Rob

Happy to hear it worked!  :)


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
twosis    3
twosis

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
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
AliceNicholls+    0
AliceNicholls

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
Danny    1,327
Danny

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.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites

×