Toggle Google Friend Connect + CSS style
I played around with CSS Style Switching on my blog www.whataboutki.com and also added Google Friend Connect. Now I want to change the colors of the GFC widget when the user changes styles. This is a script for GFC ... div id = "div-1229769625913" does that mean I can access this from my css files? If so, how can I do this?
<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-1229769625913" style="width:260px;border:1px solid #cccccc;"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
var skin = {};
skin['HEIGHT'] = '385';
skin['BORDER_COLOR'] = '#cccccc';
skin['ENDCAP_BG_COLOR'] = '#e0ecff';
skin['ENDCAP_TEXT_COLOR'] = '#333333';
skin['ENDCAP_LINK_COLOR'] = '#0000cc';
skin['ALTERNATE_BG_COLOR'] = '#ffffff';
skin['CONTENT_BG_COLOR'] = '#ffffff';
skin['CONTENT_LINK_COLOR'] = '#0000cc';
skin['CONTENT_TEXT_COLOR'] = '#333333';
skin['CONTENT_SECONDARY_LINK_COLOR'] = '#7777cc';
skin['CONTENT_SECONDARY_TEXT_COLOR'] = '#666666';
skin['CONTENT_HEADLINE_COLOR'] = '#333333';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
{ id: 'div-1229769625913',
site: '10794935298529647173'},
skin);
</script>
The identifier is generated by GFC. It populates the iFrame DIV by placing your gadget code on * .gmodule.com servers
In theory, you can access and modify your DOM after loading to change the style.
Try changing the values ββon the map "skin" for style
eg. skin ['ALTERNATE_BG_COLOR'] = '#ffffff';
Good luck!
source to share
The div id stays the same between pages, however it generates an iframe and the GFC gadget is displayed inside that iframe. Your CSS stylesheets have no control over the styling of this iframe's content, so the only way to accomplish this would be with javascript.
The simplest solution would be to rip out all the values ββin this hash and, before rendering the gadget, replace any values ββwith the appropriate ones based on the stylesheet used. This way you don't have to mess with the iframe's DOM, which would be non-trivial and volatile as Google doesn't expect you to.
So, your code might look something like this:
<!-- Include the Google Friend Connect javascript library. -->
<script type="text/javascript" src="http://www.google.com/friendconnect/script/friendconnect.js"></script>
<!-- Define the div tag where the gadget will be inserted. -->
<div id="div-1229769625913" style="width:260px"></div>
<!-- Render the gadget into a div. -->
<script type="text/javascript">
function currentSkin() {
// Put some real code that detects what the
// right color scheme is here.
return 'VERY_BLUE';
}
var skins = {};
skins['VERY_BLUE'] = {};
skins['VERY_RED'] = {};
skins['VERY_BLUE']['HEIGHT'] = '385';
skins['VERY_BLUE']['BORDER_COLOR'] = '#0000ff';
skins['VERY_BLUE']['ENDCAP_BG_COLOR'] = '#0000ff';
skins['VERY_BLUE']['ENDCAP_TEXT_COLOR'] = '#0000ff';
skins['VERY_BLUE']['ENDCAP_LINK_COLOR'] = '#0000ff';
skins['VERY_BLUE']['ALTERNATE_BG_COLOR'] = '#0000ff';
skins['VERY_BLUE']['CONTENT_BG_COLOR'] = '#0000ff';
skins['VERY_BLUE']['CONTENT_LINK_COLOR'] = '#0000ff';
skins['VERY_BLUE']['CONTENT_TEXT_COLOR'] = '#0000ff';
skins['VERY_BLUE']['CONTENT_SECONDARY_LINK_COLOR'] = '#0000ff';
skins['VERY_BLUE']['CONTENT_SECONDARY_TEXT_COLOR'] = '#0000ff';
skins['VERY_BLUE']['CONTENT_HEADLINE_COLOR'] = '#0000ff';
skins['VERY_RED']['HEIGHT'] = '385';
skins['VERY_RED']['BORDER_COLOR'] = '#ff0000';
skins['VERY_RED']['ENDCAP_BG_COLOR'] = '#ff0000';
skins['VERY_RED']['ENDCAP_TEXT_COLOR'] = '#ff0000';
skins['VERY_RED']['ENDCAP_LINK_COLOR'] = '#ff0000';
skins['VERY_RED']['ALTERNATE_BG_COLOR'] = '#ff0000';
skins['VERY_RED']['CONTENT_BG_COLOR'] = '#ff0000';
skins['VERY_RED']['CONTENT_LINK_COLOR'] = '#ff0000';
skins['VERY_RED']['CONTENT_TEXT_COLOR'] = '#ff0000';
skins['VERY_RED']['CONTENT_SECONDARY_LINK_COLOR'] = '#ff0000';
skins['VERY_RED']['CONTENT_SECONDARY_TEXT_COLOR'] = '#ff0000';
skins['VERY_RED']['CONTENT_HEADLINE_COLOR'] = '#ff0000';
google.friendconnect.container.setParentUrl('/' /* location of rpc_relay.html and canvas.html */);
google.friendconnect.container.renderMembersGadget(
{ id: 'div-1229769625913',
site: '10794935298529647173'},
skins[currentSkin()]);
</script>
source to share