• 0

Ibox Image Shapes like PopThumbs


Question

Posted · Report post

HI

 

Iam ew around and was very please to find Pagelines DMS.

 

I dont know about code(been learning a bit) so its a bit new for me

 

 

I am on the learning curve of using pagelines and I understand that with time and use it will be easier.

 

In between I love PopThumbs Size and shape of the images. However I need to make it clickable to a link so its no good. after trying a few I Got IBOX

 

Just what I needed but... What code use to transform the circle image into a rectangle? 

 

I transformed already into a square. looking here in the forum http://forum.pagelines.com/topic/30250-ibox-iconimage-size/?hl=ibox

 

But i would love the POP Thumbs size .. a nice rectangle

 

Anyone can help please?

 

 

PS.. How can I integrate an auto responder code to build an email list?? I have been looking and cant understand..

 

 

Thanks you in advance

 

Maria

Share this post


Link to post
Share on other sites

15 answers to this question

  • 0

Posted · Report post

Maria,

 

Your image for Tower Bridge, for example is 150px x 150px, and you're stretching it to a larger container.  There are constraints on scaling upwards like that.

 

I suspect that if you were to use a larger image, the size you're hoping to see, then it will fill the container without scaling, and hopefully without cropping (so don't use a gigantic image).  If you're looking for an image to appear 300px wide, then use one of that size and you'll be fine.

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Anyone, please? I am kinda stuck here! Thanks

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi miop38 - To make the iboxes a larger square, upload the images you'd like to use and then add this to your custom code:

 

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

 

For email auto-responders, there's a few good contact form plugins out there that have these types of features. Try http://ninjaforms.com/, or http://contactform7.com/

1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi miop38 - To make the iboxes a larger square, upload the images you'd like to use and then add this to your custom code:

 

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

 

For email auto-responders, there's a few good contact form plugins out there that have these types of features. Try http://ninjaforms.com/, or http://contactform7.com/

 

 

Thank you so much for you answer Jake

 

However I would like to make the images a rectangle. I was able to do a square already but they don't look as well as I would like..and I don't know the code to make this transformation. Can you help further please? regarding the auto responders, will take a look.

 

Thanks

 

Maria

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

My apologies miop38 - you did ask about rectangles. To do that, you just want to adjust the border radius to suit your needs. For instance, try this:

 

.ibox .ibox-media .ibox-icon-border {border-radius: 25px 25px 25px 25px;}

 

The more you increase that border-radius number, the more the image becomes a circle. So play with it a bit if you'd like a little bit more or less curve to the rectangle.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

My apologies miop38 - you did ask about rectangles. To do that, you just want to adjust the border radius to suit your needs. For instance, try this:

 

.ibox .ibox-media .ibox-icon-border {border-radius: 25px 25px 25px 25px;}

 

The more you increase that border-radius number, the more the image becomes a circle. So play with it a bit if you'd like a little bit more or less curve to the rectangle.

 

Thanks again. will give a try right away!!!

 

Maria

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

My apologies miop38 - you did ask about rectangles. To do that, you just want to adjust the border radius to suit your needs. For instance, try this:

 

.ibox .ibox-media .ibox-icon-border {border-radius: 25px 25px 25px 25px;}

 

The more you increase that border-radius number, the more the image becomes a circle. So play with it a bit if you'd like a little bit more or less curve to the rectangle.

 

 

Ok I have tried but I was looking for something different. Is there  any chance I can increase the width and height of the rectangle??  Sorry if the question is basic .

 

Thanks

 

Maria

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi miop38 - To make those a little bigger try playing with the percentages here like:

 

.ibox.top-aligned .ibox-media {max-width: 80%}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi miop38 - To make those a little bigger try playing with the percentages here like:

 

.ibox.top-aligned .ibox-media {max-width: 80%}

Thanks again James.it didn't work and I assume is because the ibox doesn't allow. But it is looking good anyway..

 

Many thanks

 

Maria

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Maria

 

To make the images bigger and a perfect circle use the below, you can tweak the figures further to make bigger etc. But you might have to adjust the height if you do to get it to display as a perfect circle.

 

.ibox.top-aligned .ibox-media .media-type-image {
    border-radius: 150px 150px 150px 150px;
    height: 30px;
    min-width: 200px;
    padding: 50% 0;
}
 
The result will look like this http://screencast.com/t/R74przKiA5p
2 people like this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

 

Hi Maria

 

To make the images bigger and a perfect circle use the below, you can tweak the figures further to make bigger etc. But you might have to adjust the height if you do to get it to display as a perfect circle.

 

.ibox.top-aligned .ibox-media .media-type-image {
    border-radius: 150px 150px 150px 150px;
    height: 30px;
    min-width: 200px;
    padding: 50% 0;
}
 
The result will look like this http://screencast.com/t/R74przKiA5p

 

James B Thank you! Although I want to do it in rectangles(kind off was able) this was very handy

 

Cheers

 

Maria

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Maria,

 

Your image for Tower Bridge, for example is 150px x 150px, and you're stretching it to a larger container.  There are constraints on scaling upwards like that.

 

I suspect that if you were to use a larger image, the size you're hoping to see, then it will fill the container without scaling, and hopefully without cropping (so don't use a gigantic image).  If you're looking for an image to appear 300px wide, then use one of that size and you'll be fine.

Thanks a lot Rob. Now I arranged it and all is great.

 

I cat thank enough to all of you guys

 

thanks

 

Maria

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks for informing us the issue has been resolved.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I would also like to have rectangular images using iBoxes. On this page http://carolbushberg.com/our-listings/ you'll see that I have used PostPins to create an overview of listings. However, my client would like more control over formatting the information. So, I thought that iboxes would be the way to go. So, I've started to create a test page. http://carolbushberg.com/our-listings-test/ It's closer to what the client is hoping to achieve.

 

However, no matter what I do, the image appears to be masked. But, I want to show the complete image as a rectangle, which it is to begin with, with no corner radius and no cropping/masking. I just want the whole photo, sized to take up the width of the ibox. Can you help me? Thanks SOOOO much!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi there, try the code below, should give this effect - http://screencast.com/t/IAryQuJkzun

 

.ibox.top-aligned .ibox-media {
    margin-top: 0;
}
.ibox.top-aligned .ibox-media {
    max-width: none;
}
 
 

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