How to change the black background color into white for Simple Image Gallery?

liekecomp2022 · Post by **liekecomp2022** » Mon Dec 18, 2023 9:18 am

Hello,

How can I change the background color of the images in Simple Image Gallery (by JoomlaWorks)?

See images at https://ontwikkel18.comp-it-aut.nl/?

See https://ontwikkel18.comp-it-aut.nl/comp ... 19f96ec8-2

Etc...

CSS code?

Post by **pe7er** » Mon Dec 18, 2023 10:53 am

You can add the following CSS to create a red background to .png images that have a transparent background:

Code: Select all

.sppb-addon.sppb-addon-text-block.sppb-text-left {
    background-color: red;
}

However, the first image I tried, was a .jpg with a white background.
You cannot change the background of those.

Or do you mean the page that you get after clicking an image?

That page has a hardcoded color in the body tag:

Code: Select all

<body style="margin: 0px;height: 100%;background-color: rgb(14, 14, 14);">

Maybe you could override that with a template override of the simple image plugin tmpl output

liekecomp2022 · Post by **liekecomp2022** » Mon Dec 18, 2023 11:11 am

I have used Element inspectation and I can change the background color in the jquery.fancybox.min.css like

.fancybox-slide {
-webkit-backface-visibility: hidden;
display: none;
height: 100%;
left: 0;
outline: none;
overflow: auto;
-webkit-overflow-scrolling: touch;
padding: 44px;
position: absolute;
text-align: center;
top: 0;
transition-property: transform,opacity;
white-space: normal;
width: 100%;
z-index: 99994;
background-color: white;
}

But where can I find the jquery.fancybox.min.css?

In which directory?

Please help...

liekecomp2022 · Post by **liekecomp2022** » Mon Dec 18, 2023 1:57 pm

Or do you mean the page that you get after clicking an image?

That page has a hardcoded color in the body tag:

<body style="margin: 0px;height: 100%;background-color: rgb(14, 14, 14);"

Maybe you could override that with a template override of the simple image plugin tmpl output

Where Can I add this CSS? I cannot find the simple image plugin css sources?

Pavel-ww · Post by **Pavel-ww** » Tue Dec 19, 2023 7:22 am

liekecomp2022 wrote: ↑
Mon Dec 18, 2023 1:57 pm
Where Can I add this CSS? I cannot find the simple image plugin css sources?

Hi. /templates/shaper_helixultimate/css/> create custom.css.

... Reading the documentation of your template can be very useful and get rid of many questions

Helix template and Simple Image Gallery not JoomlaWorks but Joomshaper products.

Add this to custom.css

Code: Select all

.fancybox-bg {
	background-color: red;
}

liekecomp2022 · Post by **liekecomp2022** » Tue Dec 19, 2023 10:01 am

Thanks this works!
How can I make the transparent background completely white?

Pavel-ww · Post by **Pavel-ww** » Wed Dec 20, 2023 7:25 am

liekecomp2022 wrote: ↑
Tue Dec 19, 2023 10:01 am
How can I make the transparent background completely white?

Hi. Here is

Code: Select all

.fancybox-bg {
	background-color: white;
	opacity: 1 !important;
}

The Joomla! Forum™

How to change the black background color into white for Simple Image Gallery?

How to change the black background color into white for Simple Image Gallery?

Re: How to change the black background color into white for Simple Image Gallery?

Re: How to change the black background color into white for Simple Image Gallery?

Re: How to change the black background color into white for Simple Image Gallery?

Re: How to change the black background color into white for Simple Image Gallery?

Re: How to change the black background color into white for Simple Image Gallery?

Re: How to change the black background color into white for Simple Image Gallery?