I've been using the Bible Study components on our church website - it's been great. I've am just installing it on a new site I am building for another church and I am having difficulty with the rendering of the media elements in the studiesview, module & the details view. The icons/mp3 player show up but they are surrounded by a white background - as in picture below. I have checked through the CSS and even removed the odd/even backgrounds but nothing seems to remove it. Could you advise?

Currently the site is not live so I can't give a url link.

Hi Paul,

Glad you find the component useful in your ministry. As for the white space - this is a function of the internal player so it's no wonder you couldn't change the colors.

I'm not sure you can effect the look of the player - that's the bad news - though you could try to do some research.

The good news is that version 6.2 and above we are using JWPlayer which can show videos as well as audio. I've also made it so you can add parameters to the player so you can control other things. In addition, the player won't show up until someone clicks the speaker icon so there won't be any annoying "white" space until the file is actually playing.

The current player (versions 6.1.x and below) is from 1PixelOut www.1pixelout.net/

You can check there for how to customize.

Tom

Thanks Tom for the reply. Yes, I see what you are saying about the inline player and I look forward to 6.2. The only difficulty, is I get the same problem if I use the .png images and not the inline player. When I do, the white space is not just around the image but stretches for the whole colomn.

On the CSS I can add a background color to the #bsmsdetailstable .mediatable td entry. This adds colour underneath the inline player or immediately around the .png image, but it doesn't fill the white space.

Any further suggestions?

Can you do a cut and paste of what the screen looks like?

I'm not a css expert - and didn't actually create the css for this myself - it was done by one of our developers only active on the project for a short period of time - but perhaps I can figure it out.

You might also try using FireBug for FireFox if you don't already, to quickly identify the css div and even make changes on the fly before putting into the css edit in com_biblestudy.

Here is a cut and paste. The first is the component screen with media images. The second is with the background-color added in the CSS. The code is
#bslisttable .mediatable td {
background-color: #514f42;
border: none;
padding: 0 0 0 0;
}

Second