Dark filter over the video in the banner
-
Hi there,
anyone could help me find css for making a darker overlay/filter over the video that is included in the home banner? I am using Swell theme.
Thanks
The blog I need help with is: (visible only to logged in users)
-
Your theme is set to private, but based on the Swell demo site you can adjust the opacity of the video section overlay by adding this code to the CSS section of the site customiser:
.video-background .pattern-overlay { opacity: 0; } -
-
With your site set to private there’s not really any way I can tell. You could perhaps try and see if this helps overrule whatever is causing it not to work:
.video-background .pattern-overlay { opacity: 0!important; } -
-
OK, so if you want to use the standard shaded overlay you need to adjust the z-index too:
#video-background .pattern-overlay { z-index: 4 !important; opacity: 0.55; }If you just want a non-patterned (i.e. block) overlay try this instead:
#video-background .pattern-overlay { z-index: 4 !important; opacity: 1; background-image: none; background-color: rgba(0,0,0,0.2); } -
Thanks, so which one i use to keep the overlay only on the video? Is there a possibility that the title The new generation of Desktop as a Service and the button underneath stay bright and more visible?
-
-
-
It should just be a case of setting the z-index higher than we did for the overlay:
#banner-content { z-index: 5!important; } -
ok thanks, but i just realized the overlay disables the button link : Discover Awingu…:/ is there any solution to keep the overlay but to keep the button function
-
The button link to your contact form page works fine for me. What browser, device and OS versions are you using? Have you tried testing on any other combinations?
-
-
oh and one more question:)
apparently, the homepage layout gets different on some devices, like mac laptops…the menu is on the left and the logo also…can you help me solve this to have one layout with the menu on the top? thanks:) -
@awingucompany, I’m not seeing any menu on your site. When I view the Swell Demo page, in Safari, Chrome and Firefox on my Macbook Pro, they appear identical with logo/title on left and menu to the right. Can you try viewing the Swell Demo page and let us know if you see a difference on different browsers? If so, can you let us know the browser/browser version you are seeing differently?
-
Hi there,
sorry for a delay response, we found the css code that was making the mess:)
Thanks! -
Hey there,
I have issues with the video display, on a smaller screen, it seems to be cut out…
another question is it possible to add two more addresses in the contact widget in the footer area (we want to show three address in total)
Thanks! -
If you invite me as a viewer to your private site I might be able to help – it’s hard to offer advice knowing you’re using custom CSS and not being able to see the effects it might be having.
-
You should be able to use multiple instances of the widget, each with a different address in. Alternatively just use a text widget and add the content in yourself directly.
I’m not sure about the video issue, it is happening because the video is large and not centred, are there any options you can select to change these settings on the screen where you select the video to use?
It is a background video, it’s not really meant as a place for you to include a product demonstration so the theme won’t be designed to scale and resize the section for all possible devices and screen sizes like you might find with an embedded video.
- The topic ‘Dark filter over the video in the banner’ is closed to new replies.
WordPress.com Forums 