Jump to content

Archived

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

miop38

Ibox Image Shapes like PopThumbs

Recommended Posts

miop38    0
miop38

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

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/

  • Like 1

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
miop38    0
miop38

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

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.


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
miop38    0
miop38

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
miop38    0
miop38

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

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

 

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


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
miop38    0
miop38

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
James B    436
James B

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
  • Like 2

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
miop38    0
miop38

 

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
Rob    547
Rob

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.

  • Like 1

Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
miop38    0
miop38

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

Thanks for informing us the issue has been resolved.


Please search our forums, before posting!

Share this post


Link to post
Share on other sites
flourishdesignstudio    9
flourishdesignstudio

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
James B    436
James B

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;
}
 
 

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

  • Similar Content

    • jeomiland
      By jeomiland+
      How can I save a page in one Platform 5 site for upload to a different site?
      Have a site in which there are a couple extensive extensive Portfolio pages made with Popthumbs, buttons and text sections. Clients are going their separate ways and need to split site into 2 different sites. I'd hate to have to recreate these pages. There MUST be a simple way to download a page and it's content from one site and upload it to a new site - not recreate the whole site, just selected (popthumbs) pages. Did asearch in forum for this and got zero results. Investigated the save/load templates extension but don't see how that can work for this case.
      Thanks for advise.
       
      je
    • cstudio
      By cstudio
      How do I control the lightbox effect on the plugin "popthumbs"?  On mobile, it opens up much to small then when expanded it opens to large.  I would like to control the the lightbox to like 90% of the viewer window but I can't figure out how/where to control that.
      Site example

       
      Thx
    • Michael Kummer
      By Michael Kummer+
      Hi guys,
      I have noticed that all thumbnails on www.michaelkummer.com are scaled down in CSS or HTML, rather than on the backend by Jetpack's Photon. See https://db.tt/vNJCn7Gh and https://db.tt/3ZpkHM7G. 
      Any idea why Pins sets the image width and height to something much larger than what's shown on the screen? Is there any way to fix this so that Photon can do a better job in rescaling the images on the backend before they are delivered to the browser?
      Thanks
      Michael 
    • sfmstudios
      By sfmstudios+
      I'm using the boxes section on a local development site to play around with some options, and running into an issue.  
      Have the following settings for the boxes:
      Type: Images/SVC Media on Top Image Appearance: Standard/Default Image/Icon Width: 280px Image Opacity: 100% Each of my box images is 280x150 in size, but the result of the image on the box is a strange zoomed-in, cropped square (see attached).  I looked to adjust border properties via CSS, but couldn't find a fix.  What solutions are out there?

    • richardjacruz
      By richardjacruz+
      I received our monthly Alexa report, and it pointed out that there were missing alt tags on EVERY page on our site. Upon closer inspection, it looks like the QuickSlider which is used for the scrolling banners at the top of the site doesn't bring in the alt tags. Recently, you made a change to the RevSlider to allow images to have "alt" tags. Can you do that for the QuickSlider too?
      Thanks.
×