Okay
  Print

Change images and banners overlay color

Change transparency of overlay

If you satisfied with color of overlay, but want to decrease / increase transparency of overlays, you can use ONE of 2 ways:

  1. Using custom colors in options Youplay Options > Theme Style > Custom > Sizes. Then change Images Opacity and Images Hover Opacity.
  2. Using custom CSS.
    Note: The best way - add this custom styles, in child theme style.css. Also you can add it in options Youplay Options > General > Custom CSS, but in this way, you should add for each value important tag (Example: opacity: 1 !important;)
    /* Banners overlay 100% transparency */
    .youplay-banner .image {
       opacity: 1;
    }
    /* Angled images overlay 100% transparency */
    .angled-img .img > img {
       opacity: 1;
    }
    /* Angled images overlay on mouse over 70% transparency */
    .angled-img:hover .img > img {
       opacity: 0.7;
    }
    


Change overlay color

There are also 2 ways, you can use ONE of it:

  1. Using custom colors in options Youplay Options > Theme Style > Custom ang change Back Color. You will change not only overlay color, but also overall theme colors.
  2. Using custom CSS. Read note in 2 point of first instruction.
    /* All color values are default. Please, change it to yours. */
    
    /* Banner background color */
    .youplay-banner {
       background: #160962;
    }
    
    /* Angled images background color */
    .angled-img .img {
       background: #160962;
    }
    
    /* Footer background color */
    footer .social {
       background: rgba(8,3,37,.45);
    }
    footer .copyright {
       background: rgba(8,3,37,.7);
    }