-
Posts
-
The masonry gallery has a dark gray background but the transparent background shows the contents of the gallery behind the enlarged image.
I want the color to stay and but without transparency.
Where in Enfold Theme Options can I access this?
Many thanks for your support
Regards
PeterHi Peter,
Could you post a link to where we can see the actual element on your site please?
Best regards,
Rikardfor masonry gallery you can do this in quick css.
But sometimes under the images – there are titles and the close button and the left and right arrows are styled for a dark background – so you had to find a possibility to differ between foreground ( lightbox image ) and background ( body beyond )try in quick css :
.mfp-zoom-in.mfp-ready.mfp-bg, .mfp-zoom-in.mfp-ready .mfp-preloader { opacity: 0; } .mfp-wrap.mfp-gallery .mfp-img { box-shadow: 0px 0px 20px -5px #000; padding: 0 0 40px; } .mfp-wrap.mfp-gallery .mfp-figure { background-color: rgba(0,0,0,0.5) !important } .mfp-wrap.mfp-gallery .mfp-arrow:before { color: #333 !important } .mfp-wrap.mfp-gallery .mfp-bottom-bar { padding: 8px 20px !important; } div.avia-popup .mfp-close { right: -5px; border: 2px solid #ddd; top: -45px; color: #000; background-color: #FFF; opacity: 1; } div.avia-popup .mfp-close:hover { border: 2px solid #000; opacity: 1; }and if you like to have the body content in grayscale when lightbox is opened:
#top.mfp-zoom-out-cur #wrap_all { -webkit-filter: grayscale(1); filter: grayscale(1); }if you like to have a light background behind tiltes and image counter – you can change it on the mfp-figure – but then you had to change the font color for those entries.
Hi,
Unfortunately, the CSS ju send me did not work.
Please go to petergasser.info/gallery
So you can see that the background is unfortunately still transparent.
Regards
Peterwhere did you enter those rules?
Have you regenerated the merged files – under performance : “Delete Old CSS And JS Files?”because on your css i can not see any quick css entry –
Hi Peter,
Do you have a caching plugin enabled on your site? if yes, please try to flush out the cache and temporarily disable it.
I checked the merged CSS file and I don’t see @Guenni007’s code on it as well.Best regards,
NikkoHi,
Thanks for your question, currently on your page /gallery/ when an image is clicked you can see the other images from the gallery in the background:
I believe that you want the other images from the gallery to not be seen, so we should change the background opacity with this css in the General Styling ▸ Quick CSS field:.mfp-zoom-in.mfp-ready.mfp-bg { opacity: 1; }After applying the css, please clear your browser cache and check, this is the expected results:
Best regards,
Mikeyou’re right Mike – I interpreted the sentence as meaning that he wants to remove the Transparent background altogether:
“I want the color to stay and but without transparency.”
That’s why I set off the lightbox image from the background with a shadow.If it’s that he just wants a completely black background it’s probably the way you’ve suggested now.
A more precise formulation of the wish would have been good here.Hi,
Fantastic it works!!!
Unfortunately, the background is now black. Is there a way to have the background the same dark gray as it was before?Thank you for the excellent support
best regards
PeterHi,
Unfortunately there is another problem.
The Masonry Gallery overview has a partially black background (see attached screenshot)Thanks for your help
Peter
Hi,
Thanks for the screenshot of your /books/ page, the black space under the masonry gallery is from your page content smaller that the browser height of the page. So you can either add more content or place the masonry gallery inside of a color section and set the minimum height of the color section to 100%.Best regards,
Mikeor – if it is only the color that disturbs you – set your html to:
html { background-color: #000 !important; }Hi,
html {
background-color: #000 !important;
}Unfortunately that didn’t work, but the masonry gallery inside of a color section and set the minimum height of the color section to 100% worked very well.
But now there is a big distance between the masonry gallery and the menu (see petergasser.info/portfolios/gallery)
Best regards
PeterHi,
Thanks for the feedback, and the example to /portfolios/gallery/ the space you are seeing from the masonry gallery below the header is because the color section is vertically centering the element, please note in this screenshot the green space is padding, but the masonry element is centered:
So while on a low content page this would be desired, centering the content, if you would rather have the extra white space below the content please try this css:#av_section_1.avia-section.av-minimum-height.av-minimum-height-100 .container .content { vertical-align: top; }After applying the css, please clear your browser cache and check.
Please note that typically we would recommend adding a custom class to your color section so this would only affect the certain color sections that you wish, but in this case I believe that I have successfully targeted these low content page color sections in the css rule with the ID #av_section_1 which would only occur on the first section, and with the added class .av-minimum-height-100, which means it must be a color section with a minimum height of 100%
But please test and check your other pages for any conflicts and link to any you find so we can adjust.Best regards,
MikeHi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike
- The topic ‘Masonry Gallery Backgruond’ is closed to new replies.