Google Friend Connect + CSS Style Switching

Question

I have been playing around with CSS Style Switching on my blog www.whataboutki.com and have also added Google Friend Connect. I would now like to change the colours of the GFC widget when the user changes styles. This is the script for GFC... the div id="div-1229769625913" does that mean I can access that from my css files? If so how would I go about doing so?

<!-- 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>

Could you please indent the code you posted? Use four spaces at the start of the lines, the code gets readable that way :) — Kablam, Dec 21 '08 at 14:15

score 0 · Answer 1 · answered Sep 20 '09 at 00:33

The div id stays the same between pages, however, it generates an iframe and the GFC gadget is displayed within that iframe. Your CSS stylesheets don't have any control over the styling of the contents of that iframe, so the only way to accomplish this would be with some javascript.

The simplest solution would be to rip out all of the values in that hash, and prior to rendering the gadget, substitute whatever values are appropriate based on the currently used stylesheet. That way you don't have to mess with the DOM of the iframe, which would be non-trivial and unreliably fragile, since Google doesn't expect you to do this.

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>

score 0 · Answer 2 · answered Jan 04 '09 at 12:51

0

I'd experiment to see if div-1229769625913 changes between pages first. If it doesn't then you could restyle in your CSS files, otherwise you will have to change the colours for skin in your style-switcher (which I assume is JS).

answered Jan 04 '09 at 12:51

Ross

46,186
39
120
173

score 0 · Answer 3 · answered Jan 21 '09 at 02:39

The ID is generated by GFC. It populates the DIV with an iFrame hosting your gadget code on their *.gmodule.com servers

In theory you could access and modify their DOM after it's loaded to change their style

Try changing the values in the "skin" map for style

eg. skin['ALTERNATE_BG_COLOR'] = '#ffffff';

Good luck!

Google Friend Connect + CSS Style Switching

3 Answers3