Remove blue mask hero video module

cytropics

Hi,
How to remove Blue shade from home page hero video module (change to black, change opacity)

Module cuts the lower part of the video, How to fit the entire video into the module so that the video play button will show.

Thanks

Ninja

cytropics
Hi
Open templates/uber/css/custom.css file and add this code

.acm-hero.style-4 .video-wrapper:before {display:none!important}

It will remove the video wrapper. For the height i can not see any issue with height the video is 100% width with container size and auto resize it. you can go in the full screen mode.

cytropics

Ninja

Thanks for the reply. This is how it currently looks

It should look like this..

cytropics

Ninja

I want to know where is the settings for the blue shade? I would want to manipulate it into desired results. Black colour, and be able to change the opacity.

Ninja

cytropics
Hi
Use this code for height

 @media screen and (min-width:1080px){
.acm-hero.full-screen {

    min-height: 1050px;
}}

This is code used for wrapper

.acm-hero.style-4 .video-wrapper:before {
    content: "";
    position: absolute;
    background-color: #559eaa;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    opacity: 0.6;
    filter: alpha(opacity=60);
    -webkit-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    transition: opacity 0.5s;
}

You can customize it as per needs.

Regards

cytropics

Ninja
Thanks for the response. I tried these, nothing changed.

Ninja

cytropics
Hi
I have not found any code in custom.css file
http://prntscr.com/nsm7ew
If i try to add its working fine http://prntscr.com/nsm7kr
Kindly add the code and check it again.

cytropics

Ninja
I added, nothing changed.

Ninja

cytropics
Hi
You must add the code first https://volunteer2ja.com/templates/uber/css/custom.css
You can see the code for Height of the video is not added.
I tested the code is fine, once you will add it it will work : http://prntscr.com/nt3ytu

cytropics

Ninja

Thank you, height adjusted.

Now, how to remove the blue in front the video? I want to change it to black and not too dark (Just enough so that the writing will be visible).

How to remove the effect of clicking the arrow button before I can play the video?

How do I add text to the arrow button to be "GET STARTED >" link button

Thanks in advance.

teitbite

cytropics Hi, for the color use this in css:

.acm-hero.style-4 .video-wrapper::before {
    background-color: #222;
}

for replacing the arrow with text use this in css:

.fa-chevron-right::before {
    content: "Getting started";
		font-family: 'Arial', sans-serif;
}

.acm-hero.style-4 .hero-content .btn-rounded {
    border-radius: 3px;
    height: 52px;
    line-height: 48px;
    padding: 0 !important;
    width: auto;
    border-width: 1px;
    opacity: .7;
    font-size: Arial;
    padding: 0 10px !important;
}

Unfortunately the effect needs to be there since video is not a part of the site, so cannot be scripted.

cytropics

Tried this solution, does not work.

Ninja

cytropics
Hi
It look like your site use heavy cache.
Kindly clear the cache each time you apply changes, Also if you have server cache, you must clear it from server too.
As the code is not loaded in custom.css file, this is reason no change is visible.

About the customization of icon Here is file of the ACM : "/acm/hero/tmpl/style-4.php" in template "uber".

This is code used for Icon and click that you can customize

   <a href="http://vimeo.com/<?php echo $video_link; ?>" title="<?php if( trim($heroHeading)) : ?> <?php echo $heroHeading; ?> <?php endif; ?>" class="btn btn-border btn-border-inverse btn-rounded">
              <span class="sr-only">Watch the video</span><i class="fa fa-chevron-right"></i>
            </a>