Sport Ngin User Group Forum
SportsEngine Community Forum
Sign up Latest Topics
 
 
 


Reply
  Author   Comment  
jasondeanny

Junior Member
Registered:
Posts: 10
 #1 
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.
0
robbedeaux

Avatar / Picture

SportsEngine Moderator
Registered:
Posts: 246
 #2 
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
DIRECTOR, CONTENT STRATEGY
 
 
SportsEngine, an NBC Sports Group company| 807 Broadway St NE, Ste 300, Minneapolis MN 55413
 
0
jasondeanny

Junior Member
Registered:
Posts: 10
 #3 
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>
 
0
saari3000

Junior Member
Registered:
Posts: 2
 #4 
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!
0
nickburggraf

Moderator
Registered:
Posts: 27
 #5 
Put this in the HEAD CODE:

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

__________________
Burggie
0
Previous Topic | Next Topic
Print
Reply

Quick Navigation:

Easily create a Forum Website with Website Toolbox.

Powered by Website Toolbox - Create a Website Forum Hosting, Guestbook Hosting, or Website Chat Room for your website.