I am new to Drupal.
How do I set up a semi-transparent text box in front of background image/hero frame similar to what is done her: https://ats.web.cern.ch/ and here: https://ams02.space/?
Hello @onordahl and welcome,
To start with, the pages your refer to are Landing Page nodes which are constructed using components. The component used in both cases is the Featured Banner component which is actually a background with a box on top of it. The box can include text and/or a link as title.
The box supports opacity too, as you can see in the following GIF example. You can find the opacity settings under the Text Block Settings
Also as far as I know both examples have small modifications. For example the box in the ats website is centered in the middle of the banner, which is not a default option. For more information regarding the customisations on this specific website you can ask @ogomezal or someone from his team.
Let me know if that answers your question.
Konstantinos
I have some problems using the Featured banner component.
It is showing without any Content and Configuration option:
Can you give me the url of your website?
cern.ch/test-norway
Thank you for great support!
Hello again,
There was a misconfiguration in some paragraph types. Now its fixed. Let me know if you spot it in other components too.
Konstantinos
Hi,
The Feature banner works fine. Thank you.
Do you know if it is possible to use semi-transparent text box (similar to Feature banner) for Hero Frames?
Ole Petter
Hey Ole,
Glad that it works. In order to achieve what you mentioned:
- Add a Featured Banner to the first section of you Landing Page.
- Write your text inside the Featured and make the box opaque as already described in my previous comment.
- In the section settings, set the height of the section to Full Height and the width to Fluid width.
Let me know if that works for you.
Konstantinos
Hi,
This did not work for me. The Hero frames are not shining through the Feature banner. Look at my test here: https://test-norway.web.cern.ch/test-0
As you can see in the following screenshot, the opacity is actually applied
Opacity: 0.1
Opacity: 0.6
What you need now is to add a background image either from CDS (suggested) or a local one.
Konstantinos
Yes, using Feature banner with one background image works fine.
What I want is to use semi-transparent text boxes for several sliding images using Hero frames (Hero header component). Maybe this is not possible. This would have been a nice feature since it is much easier to get a nice and readable design when using semi-transparent text boxes over images.
Ok I see. The featured banner is designed to be used with one background image. When it comes to sliding images, the Hero Header is a much better option. However as you mentioned, the Hero Header does not support the box and hence the opacity.
I will see it with the team and create a feature to support boxes around the text of Hero Frame.
Also something else that came in mind (and is already supported) is the highlighting of text. The image below shows what I refer.
You can apply this style to your text by using the CERN full HTML format and then use the Tag tool to mark your text. As a result you can create your Hero Header and then highlight the text using the tool.
The following GIF shows how to implement it.
(The color of the highlight you can change it from Appearance > TAXONOMY TERMS: Tag background color)
Konstantinos
Hi Ole and Konstantinos.
There is a possibility to have a semi-transparent box (similar to the ones in Feature Banners) with Hero Frames.
In the subtitle section of your Hero Frame, wrap your content in a DIV tag with the following style parameter:
background-color:rgba(8,85,160,.8); color:white; padding:20px 20px 20px 20px; width:50%;
The 4th parameter in the background-color:rgba function is the opacity of your box background color from 0 to 1).
The width parameter is not needed. If you omit it, the box will take the necessary place, no more no less, which is even better (more dynamic for mobile display).
And now that Konstantinos has modified the Hero Frame height (forced to 100% in version 2.7.1 of CERN Components, you may even align the “box” at the bottom by adding the following parameter in the style of the DIV:
position:absolute; bottom:0;
Does not work exactly like the box in Feature Banner but quite close to it.
You can have a look at a working example on the first 3 Hero Frames on http://cern.ch/test-belgium (nice to see that country-oriented websites help each other!)
Best regards,
François