Support Center Visit Demo License manager Buy @ envato

Adding padding to BeTheme Masonry Flat portfolio

davidkanegsbergdavidkanegsberg
in Portfolio
Hi. I am adding a portfolio to the website https://veronicamichalowski.com/
I really like the overall look of Masonry Flat, but would like to add some padding around each image so that the images aren't touching. I would want the padding to be #ffffff color. Is there simple css I can add to do this?

Thank you

Comments

  • PabloPablo
    Hi,
    Unfortunately, It will not be a good idea to attach their paddings with custom CSS.
    The script is calculating the width and height of the images to get it fit, and the padding can make a lot of troubles with attachment of these images.

    I suggest, to change the layout to "Masonry minimal", it's like the masonry flat, but with spaces.
    Thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • davidkanegsbergdavidkanegsberg
    Ok. Is it possible with Masonry minimal, to have the larger images, like the image "Body Landscape" on my website? When I set it to Masonry minimal, it made all the rectangle images the same size. I really liked the various sizes that Masonry Flat offered. 

    Thanks.
  • davidkanegsbergdavidkanegsberg
    One additional question with Masonry Minimal. How would I change the frame color, as well as the background color, so that they are #FFFFFF? I want them to match the color in the header section.
  • davidkanegsbergdavidkanegsberg
    Sorry. A third question. I figured out how to change the frame color, but not the background between the images. Is it possible to remove the frame entirely so the image fills the space where the frame would be? The spacing without the frame would be perfect. 
  • PabloPablo
    1) You would have to edit declared image sizes in the blog/portfolio.
    To change the size of the them used in portfolio/blog, please navigate
    to theme options>blog,portfolio&shop>featured image.
    Remember to use thumbnail regeneration after you make your changes. Otherwise, the images will not change their size.

    3) Sure, please paste this code into the Theme Options > Custom CSS & JS > CSS
    .image_frame{
    	border:0px !important;
    }
    Thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
  • davidkanegsbergdavidkanegsberg
    That worked great! Thank you. 

    I had also asked about how to change the color of the space between the images, in Masonry Minimal. Right now it is grey and I want to change it to #FFFFFF, but I can not find anything under Theme Options > Colors that seems to work. I may just be missing which section that is.

    I was also wondering if it is possible to have multiple sizes of images in Masonry Minimal, similar to how Masonry Flat has small, big, vertical and horizontal image options.

    Thanks for all your help.
  • PabloPablo
    1) I thought that you solved it out, but okay.
    This background color is added in the section, so please get into the settings of the section on that page and change the background color there.
    http://prntscr.com/moj1et

    2) It has already multiple sizes of images, but indeed, the Masonry Flat has more of them.
    Unfortunately, it's not possible to set them in the Masonry Minimal.
    But, please post your suggestion on that topic, we'll surely take a look at it:
    https://forum.muffingroup.com/betheme/discussion/113/your-suggestions-for-future-updates#latest
    Thanks
    Learn more: Video Tutorials | How To | FAQ Vote on what comes next
Sign In or Register to comment.