Feature requests - Banner background - add colour opacity, Slider - Fixed height

I notice that the Banner BG colour option doesn’t have an opacity setting. It would be very useful to add this to hide the BG or act as an overlay on a BG image.

Also the Slider could do with a Fixed Height option in the same way that the Banner and many other Foundry stacks have height settings. Without a fixed height option, unless the slider contents and this affects text most, are the same length and therefore same height, the slider will move content that is below it up and down which doesn’t look so good. If the height of the slides can be set to a fixed value the nav dots and arrows will also keep their position.

2 Likes

The Banner stack has an overlay color option when an image is selected for the background of the stack.

Yes but you might want to let the page BG or other BG through. More importantly you might just want no BG in the Banner stack. The Banner stack is also a very useful fixed height positioning container with vertically centered content and in such a role it would be more flexible to have no BG or use a 0% opacity colour.

There is the Vertical Center stack that serves the purpose you look for. It will have a fixed height at each of the three breakpoints. And, if you use the standard Stacks Background color picker it has opacity for the color.

1 Like

Good point about the Vertical Centre stack which I had overlooked. Still be useful to have opacity for all solid colours.

1 Like

The Banner stack isn’t intended to be laid on top of other stacks. It is meant as a base stack mostly – a stack that is going to be the recipient of of stacks within itself. This is why it does not have an opacity slider. You might look at combining the Backdrop stack and Vertical Center stack, which @Steve_J suggested, though. That might be a combo that works for you. Without knowing your exact use case it is hard to say though.

I assume you’re speaking about the “Slide (Content)” slides, correct? The intended behavior is that the slide height would change with the height of the content. This is to accommodate responsive content. Perhaps there is an opportunity for a small modular stack to handle height changes. I’ll add it as something to look at though.

2 Likes

The use for the opacity setting is to allow any BG to show. You might for example have an animated page BG or an image or a gradient. Banner doesn’t currently allow this and the big advantage Banner has over the Vertical Center stack is the extra large screen breakpoint so for large screen designs, Vertical Centre is not a good solution.

Yes I meant Slide. Fixed height is a common standard feature of other sliders and pretty indispensable when using a slider for text such as customer testimonials. The fixed height can either be an Equalised type of height adjustments or a fixed one as used in the Vertical Centre stack (and several others). Either solution is responsive. You can of course use the Vertical Stack inside each Slide slide but then it is a lot of stacks to achieve a fixed height and can be a lot of fine tuning to adjust.

1 Like

Yes, I second that. A slider where the content stays the same height would help me in some projects as well. You could have three heights depending on the breaking point, but also one fixed height would be perfect.

About the banner: I agree with webdeersign. I needed to add a transparent .png as an image just for a transparent background.

1 Like

@elixirgraphics Could I also request that Opacity is enabled for the Shift Navigation Styling. Shift makes a great Slide alternative that is vertically centered and has a fixed height.

3 Likes