Media Slider Customization

[Jason Schwartz]

Is there CSS or Header Code that can create a shaded box behind the text Title and Description so the text doesn't get lost in the image behind it?

 

See http://www.njbandits.com/page/show/2625876-merchandise for an example.

[Rob Bedeaux]

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!

[Jason Schwartz]

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>

 

[saari3000]

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!

[SportsEngine Staffer]

Put this in the HEAD CODE:

 

<style> .sn-media-slider .slider {
background-color: transparent;
}
</style>