Modal box: detail box does not show up

[christine]

I was obliged to switch to "tooltip" in the menu because if I choose "modal box" then I can't have the "rounded buttons" (they do not appear at all) along. Jan told me it was because the css was not loaded in Bootstrap 5 (so I'm obliged to load the bootstrap.min.css). I contacted Gantry support for the afore mentioned problems, so far, no answer.

You have activated the bootstrap.min.css from PD (again) and therefore the tooltip is OK. But no round buttons.

I tried something. Of course it only went into the custom_38.css temporarily

a) of course deactivated bootstrap.min.css from PD.

b) put the following codes (temporarily) into the custom_38.css.

I can't do the compiling etc., I can only check whether various codes would fit:

Code: Select all

.btn-info {
background: #0dcaf0;
color: #fff;
text-shadow: none;
box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
&:hover {
background: lighten(#0dcaf0, 5%);
color: #fff;
}
&:active, &:focus {
background: darken(#0dcaf0, 5%);
box-shadow: inset -1px -1px 1px rgba(0,0,0,0.15);
color: #fff;
}
}

You can change the font color of details to #000;

Code: Select all

.btn-success  {
background: green;
color: #fff;
text-shadow: none;
box-shadow: 1px 1px 1px rgba(0,0,0,0.1);
&:hover {
background: lighten(#0dcaf0, 5%);
color: #fff;
}
&:active, &:focus {
background: darken(#0dcaf0, 5%);
box-shadow: inset -1px -1px 1px rgba(0,0,0,0.15);
color: #fff;
}
}

Temporary result:



Kind regards
Christine

[fabio42]

Yes, Christine, I have activated the bootstrap.min.css if I want to have the rounded buttons.
So, by activating it, I have the possibility to have the infotip AND the rounded buttons. So why do you say "But no round buttons"?
(and after enlightening me, I will test what you suggested if it helps me)

[christine]

Yes, Christine, I have activated the bootstrap.min.css if I want to have the rounded buttons.

In an earlier post it was noted:

... seems like Gantry Bootstrap: joomla/media/gantry5/engines/nucleus/css-compiled/bootstrap5.css does not have CSS information for buttons (in this case btin-success, btn-info)

So why do you say "But no round buttons"?

It's no wonder. Because if you deactivate bootstrap.min.css, you don't have rounded buttons.

And since your template doesn't load them, (see previous post) I temporarily put these .btn-success and .btn-info into the custom.css. Colors etc. can be changed.

(and after enlightening me, I will test what you suggested if it helps me)

It works, see above screenshot.

Kind regards
Christine

[fabio42]

Did what you said step by step. And it works fine!! Even with the modal box option. Thanks!!!
I still don't know how to have the full height view for the detail box (I still get this useless scroll bar). Jan told me it had to do with the responsive plugin but I can't deactivate it, otherwise, the videos I post with the JCE editor won't be responsive anymore.

Now, just one last question: is it worth it for me to remove the bootstrap.min.css and if so, how to remove it? Or should I simply ignore this by leaving it deactivated?

[christine]

Did what you said step by step. And it works fine!! Even with the modal box option. Thanks!!!

I'm glad it worked.

I still don't know how to have the full height view for the detail box (I still get this useless scroll bar). Jan told me it had to do with the responsive plugin but I can't deactivate it, otherwise, the videos I post with the JCE editor won't be responsive anymore.

Then you have to leave it like that, or maybe, if it fits:
You could use Standard Pop Up Window in Options > Display > instead of modal box.

Now, just one last question: is it worth it for me to remove the bootstrap.min.css and if so, how to remove it? Or should I simply ignore this by leaving it deactivated?

Yes, simply ignore this by leaving it deactivated.

There is an update from PD to 5.0.10:
https://www.phoca.cz/news

The bootstrap.min is actually automatically deactivated. You can check this under Styles.

Detail View:
If you want, you can enter this:

Code: Select all

input#pdlicensesubmit.btn.btn-success {
background: green; 
color: #fff;	
}

In this case it temporarily didn't work in: custom_38.css but rather: custom__body_only.css
You have to try it yourself because of these compiled CSSs.

Kind regards
Christine

[fabio42]

Ok, thanks, I'll leave it like that. Because you really gave me the final solution. No need to add extra code for now.
Thanks a lot for everything. Now, I think you can mark it as solved!

[christine]

Hi Fabio,

That is pleasing. We're finalizing & closing this thread.
Kind regards
Christine