Jump to content

Archived

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

sfmstudios

iBoxes - remove Square

Recommended Posts

sfmstudios

Hello - working locally on some development and keep running into this customization desire: to have the iBox media be something other than a square.  I've figured out how to remove the circular border and adjust the size of the image, but it's always a square!

 

What am I missing?  Thanks!

Share this post


Link to post
Share on other sites
James B

Hi there,

 

The image will be square if you remove the code for the border-radius which is what makes the circle shape. You can make a variety of shapes using css which you could apply to the image, see a list of the different options here - http://css-tricks.com/examples/ShapesOfCSS/


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
sfmstudios

I made it work for what I was looking for as I fiddled around with some padding options (see code below), but to actually define the shape with those CSS seems to be lost amidst the layers that make up the iBoxes.  Still feel like there's an easier way...

 

.ibox.top-aligned .ibox-media .media-type-image {

  1. height0;
  2. padding30% 0;
}

Share this post


Link to post
Share on other sites
sfmstudios

Below was ultimately my solution for customizing the iBox with what I wanted (obviously change the pixel sizes for the desired image size).  See the live result at www.chillspa.com.  Thanks for your help!

/* Remove iBox circular border*/
.ibox .ibox-media .ibox-icon-border {
  border-radius: 0 0 0 0;
}

/* Center iBox image */
.ibox.top-aligned .ibox-media {
max-width: 400px;
}
  
/* iBox as rectangle */
.ibox.top-aligned .ibox-media .media-type-image {
  height: 150px;
  width: 280px;
  padding: 0 0;
}

Share this post


Link to post
Share on other sites
James B

Thank you for posting the final solution, this will help others in the future.


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
sfmstudios

As I am doing more maintenance and customization options to this site (chillspa.com), what I found with my custom box image size is that this solution results in over lapping on tablet-sized screens.  The responsiveness works well for smartphones, but looks rather clumsy otherwise (screenshot here).   I've attempted playing around with max-width/height or min-width/height percentages, but can't seem to get the true responsiveness back.  Any suggestions?   

Share this post


Link to post
Share on other sites
greenfly

If you would just like to target your Custom CSS to specific devices or at specific resoltuions you can use Media Queries. http://www.w3.org/TR/css3-mediaqueries/


The answer to many issues can be found by searching in the forum before posting as someone else  may very well have had the same problem before you have.  Also, reading the documentation can help you gain a good understanding of how everything works. 

 

Please do not send me private messages. Occam's razor - The principle states "Keep things simple!"

Share this post


Link to post
Share on other sites
sfmstudios

Just wanted to follow up on this...Martin, thanks for assistance!  Got it working beautifully with the @media reference.  Due to my iBox customizations, there are multiple levels of image overlap, so I have four different sets of customization (using both the @media min-width and max-width), but it all flows well!

Share this post


Link to post
Share on other sites
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

×