Phoca Forum

Hi,

I am using Phoca Gallery version 4.3.0 with Joomla 3.5.1.

I am trying to set the background colors and transparency for the modal windows of photo details popups. I have the colors set in the Phoca Gallery Image Module but the frontend is only displaying the default PG settings of a dark gray modal screen background. Can you tell me what I am doing wrong?

Here is a URL with a screenshot of my settings.

Thanks.

Hi, which popup method you exactly use? In Screenshot I see Slimbox, but the settings for modal are for Modal box.

Jan

Hi Jan,

I am using the Slimbox popups of details views. I did not see any settings for the slimbox window colors so I just added them to the only options available. I thought all of those popup windows are generally referred to as "modal" windows.

Is there a different place to adjust those settings?

You can click the photos in the headers at the top of each page on this testing site to see the popups

I want to adjust the background colors and transparency for the popup windows of photo details popups.

Thanks.

Hi, for the slimbox, I think, you need to customize it in CSS.

Every popup method is different, every have different way how to set design - every have specific CSS and javascript so it is in fact not possible to have one parameter which will run in every popup method

To have the design you need, try to see the slimbox CSS:
components\com_phocagallery\assets\slimbox\css\

Jan

Hi Jan,

I am trying to adjust the CSS but I can't get it to work. Here is a sample CSS line of code I added but it's not working to make the Slimbox popup window background have a half transparent, green color.

#lbOverlay {background-color: #008000; opacity: 0.5; !important;}

Do you know what I need to change in this CSS line so it will work for the Slimbox popups window background in the PG modules in the headers on my site?

Thanks.

Hi nemmar,

You have syntax error
#lbOverlay {background-color: #008000; opacity: 0.5; !important;}

correct:
#lbOverlay {background-color: #008000; opacity: 0.5 !important;}

Kind regards, Christine

Hi,

Thanks for the info. I corrected the syntax but the CSS is still not working.

There must be a division or class reference error in my CSS line of code. Do you have any idea what it could be? I used Firebug but I cannot figure out what is missing or incorrect in that code.

Thanks.

Hi,

the code in custom.css is working. (opacity)

With previous code: (I put temporary the ";"



with corrected:



Kind regards, Christine

OK; new situation

I corrected the syntax but the CSS is still not working.

As I wrote before, the opacity change works.
Found out, that you meant the background-color. This also needs an important. Maybe somewhere hardcoded - didn't check.

Finally:

#lbOverlay {background-color: #008000 !important; opacity: 0.5 !important;}

Hi Christine,

Thank you very much!! That works great!