Any options to avoid this white frame/background around the image.
I understand, I can put dimensions in the theme settings, but it is not solution as the images are slighty diference in aspect ratio. Any auto option for this?
Maybe somebody can help with this.
Any options to avoid this white frame/background around the image.
I understand, I can put dimensions in the theme settings, but it is not solution as the images are slighty diference in aspect ratio. Any auto option for this?
Any options to avoid this white frame/background around the image.
I understand, I can put dimensions in the theme settings, but it is not solution as the images are slighty diference in aspect ratio. Any auto option for this?
create images with transparent backgrounds and save as png
keep all images to 500x500 or whatever and set the image pop up size as 500x500 (the same)
this will fill the space and remove the white background.
The pop up creates a background shadow so you have to remove that also in your stylesheet
if that doesn’t work you might have to add important
keep all images to 500x500 or whatever and set the image pop up size as 500x500 (the same)
this will fill the space and remove the white background.
The pop up creates a background shadow so you have to remove that also in your stylesheet
Code: Select all
.mfp-figure::after {
box-shadow: 0 0 8px rgba(0, 0, 0, 0.0);
background:transparent;
}Code: Select all
.mfp-figure::after {
box-shadow: 0 0 8px rgba(0, 0, 0, 0.0) !important;
background:transparent !important;
}DISCLAIMER:
You should not modify core files .. if you would like to donate a cup of coffee I will write it in a modification for you.
https://www.youtube.com/watch?v=zXIxDoCRc84
I am aware how how the white background is created.
The solution has been provided above.
Screen-Shot-2021-08-30-at-23.50.38.png (239.96 KiB) Viewed 658 times
Screen-Shot-2021-08-30-at-23.52.18.png (164.49 KiB) Viewed 658 times
DISCLAIMER:
You should not modify core files .. if you would like to donate a cup of coffee I will write it in a modification for you.
https://www.youtube.com/watch?v=zXIxDoCRc84
I am not sure you understood what it is you have to do.
1. You have to save all your images as png images all of the same size. For example
one image today is 500x1000
another image is 1000x500
another image is 800x250
They are all saved as 1000x1000 - as png images - with transparent backgrounds.
You then go into your image sizes and set the image size of the pop-up as 1000x1000 (or 500x500, but it MUST me the same aspect ratio as the png image size)
(Clearly if you use the same name and same size as previously you will need to delete the cache image folder - because “IT” doesn’t know that you uploaded new images if the image name and size is the same - New image sizes will only be created if you make it 999x999 or 499x499 etc (or 500x500 if you have not already created those). <== IS THIS WHAT YOU ARE MISSING
2. You can add the css code anywhere in the theme stylesheet (as you stated above) - at the end is always best under a heading and then you just always add there
/* MY CUSTOM CODE */
- The important is probably required (as above)
(disclaimer: you should ideally create a custom stylesheet)
1. You have to save all your images as png images all of the same size. For example
one image today is 500x1000
another image is 1000x500
another image is 800x250
They are all saved as 1000x1000 - as png images - with transparent backgrounds.
You then go into your image sizes and set the image size of the pop-up as 1000x1000 (or 500x500, but it MUST me the same aspect ratio as the png image size)
(Clearly if you use the same name and same size as previously you will need to delete the cache image folder - because “IT” doesn’t know that you uploaded new images if the image name and size is the same - New image sizes will only be created if you make it 999x999 or 499x499 etc (or 500x500 if you have not already created those). <== IS THIS WHAT YOU ARE MISSING
2. You can add the css code anywhere in the theme stylesheet (as you stated above) - at the end is always best under a heading and then you just always add there
/* MY CUSTOM CODE */
- The important is probably required (as above)
(disclaimer: you should ideally create a custom stylesheet)
DISCLAIMER:
You should not modify core files .. if you would like to donate a cup of coffee I will write it in a modification for you.
https://www.youtube.com/watch?v=zXIxDoCRc84
If that fixes the problem, please add [SOLVED] to the start of the post title.
UK OpenCart Hosting | OpenCart Audits | OpenCart Support - please email info@antropy.co.uk
Legendary Member
You are welcome - thank you for coming back and showing appreciation
as stated above - it helps other users in the future if you add [SOLVED] to the titled when searching.
DISCLAIMER:
You should not modify core files .. if you would like to donate a cup of coffee I will write it in a modification for you.
https://www.youtube.com/watch?v=zXIxDoCRc84
Who is online
Users browsing this forum: ianhaney50 and 13 guests
