Google Friend Connect + переключение стилей CSS - PullRequest
Новая
       17

Google Friend Connect + переключение стилей CSS

0 голосов
/ 21 декабря 2008

Я поигрался с переключением стилей CSS на своем блоге www.whataboutki.com, а также добавил Google Friend Connect. Теперь я хотел бы изменить цвета виджета GFC, когда пользователь меняет стили. Это скрипт для GFC ... div id = "div-1229769625913" означает ли это, что я могу получить к нему доступ из своих файлов css? Если так, как бы я поступил так? 

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

Ответы [ 3 ]

0 голосов
/ 21 января 2009

Идентификатор генерируется GFC. Он заполняет DIV iFrame, размещающим код вашего гаджета на их * .gmodule.com серверах

Теоретически вы можете получить доступ к их DOM и изменить его после загрузки, чтобы изменить их стиль

Попробуйте изменить значения в карте "skin" для стиля

например. skin ['ALTERNATE_BG_COLOR'] = '#ffffff';

Удачи!

0 голосов
/ 20 сентября 2009

Div id остается неизменным между страницами, однако он генерирует iframe, и гаджет GFC отображается в этом iframe. Ваши таблицы стилей CSS не имеют никакого контроля над стилем содержимого этого iframe, поэтому единственный способ сделать это - использовать некоторый javascript.

Самым простым решением было бы вырвать все значения в этом хэше, а перед рендерингом гаджета подставить любые подходящие значения на основе используемой в данный момент таблицы стилей. Таким образом, вам не нужно связываться с DOM iframe, что было бы нетривиально и ненадежно хрупким, поскольку Google не ожидает, что вы это сделаете.

Итак, ваш код может выглядеть примерно так: 

<!-- 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>
0 голосов
/ 04 января 2009

Я бы поэкспериментировал, чтобы увидеть, изменится ли div-1229769625913 между страницами в первую очередь. Если этого не произойдет, вы можете изменить стиль в своих файлах CSS, в противном случае вам придется изменить цвета для skin в вашем переключателе стилей (который я предполагаю, что JS).

...