× Joomla Facebook Connect support forum

Topic-icon SOLVED (Workaround) : JFBConnect Fan Box Always Transparent Background

Active Subscriptions:

None
Hi,
I have been trying unsuccessfully to change the background color of the site.
Supposedly the module inherits the page properties, but this the same thing happens on every Joomla site I have installed this on.
I have tried module class suffix, overriding the css in the templates style sheet. I cannot get this to change. It looks terrible on top of a site with a background image.
Why is it doing this? This should be so easy to fix?

Using firebug I select the inner most part of the module.

.phs {
padding-left:5px;
padding-right:5px;
}
Cs5ao2aAEBZ.css (line 336)
.pts {
padding-top:5px;
}
Cs5ao2aAEBZ.css (line 324)
.connect_widget {
overflow-x:hidden;
overflow-y:hidden;
}
e_F_MPMsJmo.css (line 269)
.connect_widget {
background-color:transparent;
}


I mouse-over the css link above, and it shows:
static.ak.fbcdn.net/rsrc.php/zz/r/e_F_MPMsJmo.css

Why can't I just redefine "connect_widget"?

or use the module class suffix to add a custom style with "background-color: #fff;"
How can I do this?

thanks in advance
Last edit: 15 years 6 months ago by halcyonnetworks.
The topic has been locked.
Support Specialist
The reason you can't override that is because the Fanbox is called up in an iFrame. This how the social widgets for Facebook work. Because it's in an iFrame, even if you're stylesheet says the background should be #fff, the iFrame'd site has it's own stylesheet which 'wins'. Some of the other widgets have the ability to specify your own CSS stylesheet that Facebook will use to override styles, but I don't think the Fanbox has that capability yet.

We'll investigate some more and let you know what we find.
The topic has been locked.
Active Subscriptions:

None
Great thatnks for the reply,
but can't I just make a change to the php file. Has anyone come across this before, and come up with a work around?
Perhaps we can create another iframe or simply div box that sits below that is just white?
What do you think?
The topic has been locked.
Active Subscriptions:

None
Actually that is fixed. Dead easy. I took my own advice, after realising what I had posted.
Just create a div in the same module position with a lower z-index

<div style="background-color: #ffffff; width: 290px; height: 290px; position: absolute; left: 0px; top: 1px; z-index: 0;">.</div>
The topic has been locked.
Support Specialist
Yes, that's actually a brilliant solution. I was thinking too hard about it as well.. trying to modify the iFrame itself. When I read your first post, I was going to agree that that sounds like a good course of action.

Glad you tried it and figured it out. Sorry we couldn't help more..

Good luck!
The topic has been locked.