X3Photo Gallery Forums

You mean for the menu drop downs, or for the top bar itself where the logo and top level items are?

This can already be set in the body setting for that page, and you already have one of the following there: You could change it by adding some custom css in the /custom/css/ page from your panel, and I can assist if you want for the sake of testing, although at this point I didn't want to open the door too wide on customizing the CSS.

morgenius wrote:Thank you, Karl
I'm testing this ability but then I set number more than 50 nothing happens. It's like opacity seto to 0

Because the "tags" you are applying there are technically just predefined CSS classes, and I made those 3 available for convenience sake. Modern html5 styling is done by CSS, for good reason, and it would become very tedious if we were to create "tag-settings" for every conceivable style through a "tag" language native to only Imagevue X3 when this can be done by industry-standard CSS.

Try this:

1. Add a class tag to the "body" setting of the page, for example mystyle. Your body setting might look like this: 2. Go to custom->css from the control panel, and add the follow CSS: Check the page. The 0.5 in the style in the code above sets the opacity. It can be set between 0 and 1 in decimal format.

Hey Karl. Was interested into this setting too (just to get it a bit darker (50% I think) but can't get it to work after following your instructions with .mystyle...
Don't know if it is working for Morgenius though.

Any idea ?

The name mystyle was just an example name ... Did you add mystyle to the body setting of the page where you have the menu overlaying? Also, you might need to use !important:

Yep Karl the !important did the trick, now it is working perfectly and I can adjust my header opacity
Excellent !! Thank you and have a nice sunday !

And what about changing the opacity of i.e. 'menu: carousel'
'carousel' has a background parameter, but I do not see any effect when I change it from 0 to 0.5 or 1.

The carousel background is just a 1/0 on/off setting, that adds a soft background in case you need some contract. It does not support any opacity.

If you need precise control over styling these elements, you would need to add custom css.

Hi Karl,

I was talking about the carousel option at menu level.
I think that 'menu: carousel' does not respond to all the parameters that are mentioned (carousel:[items or carousel-height],[margin],[lazy],[timer],[showtimer],[background],[nav],[loop]).
It only responds to the first one: items and then only when no other parameters follow.

Examples:
'carousel' shows 3 carousel items
'carousel,4' shows 4 carousel items

But the ones below:
'carousel,5,10'
'carousel,4,5,0,0,0,0,0,0'
'carousel:5,20,0,0,1,0,1,1'
will all show the default 'carousel' which has only 3 items (and have also no effect on 'margin')

My conclusion is that carousel at menu level only responds to one parameter when and only when it's the only one.

So, I think my question still stands: is it possible to change the opacity of carousel at menu level?
Even only to turn it off.

As you may see, there are extensive settings available to features like the carousel, which are not documented in detail yet. However, just because all these settings for the carousel are available to the gallery page module, doesn't mean they are also available in the carousel-option in the mega menu. The mega menu does in fact use the same core carousel script, but it is not the same functions that create the carousel. When creating such an advanced and fragile UI element, it isn't logical to just have loads of options available that easily will break the menu. The design needs to be controlled.

For example: margin, lazy, timer, showtimer, background, nav, loop ... All these settings, they don't have anything to do in the mega menu carousel.

As for opacity, I am not sure where you even get that from in the first place ... There is no option for opacity for the carousel, and I am not quite sure why you would add opacity to the carousel anyway. If you REALLY need to style certain items, all this can be done from custom stylesheet, and I would be happy to suggest what css code to add.

All settings are generally limited to mechanics and interactivity, and we won't normally add plain styling options directly to settings.

mjau-mjau wrote:As for opacity, I am not sure where you even get that from in the first place ...

I thought it would be nice to see just a little bit of the background shining through the carousel-menu... maybe just a bit less opacity as in the menu itself.
Then I found this thread and so I tried something like this: ... and in the custom/css I put: ... just to try this out, but it didn't work.

mjau-mjau wrote: If you REALLY need to style certain items, all this can be done from custom stylesheet, and I would be happy to suggest what css code to add.

Well, I would be happy for some suggestions how to achieve it... if only for trying out the effect and have a look if I like it...

I must admit, it took some time for me to figure out exactly what you wanted to apply opacity on, but now I understand. Basically you want to apply opacity on the menu dropdown background, which from a technical perspective, has nothing to do with the carousel. The background is in fact entirely part of the menu and mega menu, thus would be slightly hard to set opacity on unless you want to apply the same opacity on other submenu items also ...

Come to think of it, it is very complicated, because the dropdown menu background animates from 0 to 1 opacity on mouse "hover" event. Overwriting with a CSS style would break the animation. I tried to apply an 0.9 (90%) opacity directly from browser just to see how it looks, and I don't think the result is very attractive: