Jump to content
  • 0

Media Slider Customization


Jason Schwartz
 Share

Question

4 answers to this question

Recommended Posts

  • 0

Sure can. CSS can do almost anything! The trick is to define the slide title background color in RGBa format to set the transparency (a is for alpha channel). Here is an example.

 

<style>

.slide-title {

background-color: rgba(255, 0, 0, 0.5);

}

</style>

 

As always. Use the head code with care and at your own risk!

Rob Bedeaux (he/him/his)

Director, Content Marketing & Strategy

E rob.bedeaux@nbcuni.com

 

 

Link to comment
Share on other sites

  • 0

Thanks... I was able to use Chrome to inspect the code and find the appropriate class to adjust. Here's the code I added to the page specific head: (adjusted font-size for title and added background for both title and description)

 

 
<style>
.sn-media-slider .slider .slide-title {
    display: block;
    margin: 5% 0;
    font-weight: bold;
    font-size: 200%;
    line-height: 130%;
    color: #FFF;
    text-shadow: 1px 1px 2px rgba(0,0,0,.8);
    background: rgba(195,69,45,0.5);
} .sn-media-slider .slider .slide-description {
    display: block;
    margin: 5% 0;
    color: #FFF;
    text-shadow: 1px 1px 2px rgba(0,0,0,.8);
    font-size: 150%;
    line-height: 160%;
    background: rgba(195,69,45,0.5);
}
</style>

 
Link to comment
Share on other sites

  • 0
I like using the Media Slider to display sponsor logos on my site. As logos are all different sizes, and resizing them doesn't often work, I'd like to get rid of the black background in the media slider. Any logo that doesn't fill the space has black surrounding it. How can I make that transparent? Thanks!
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...