Мастер сообществ Google + переключение стилей CSS
Я экспериментировал с переключением стилей CSS в своем блоге www.whataboutki.com, а также добавил Мастер сообществ Google. Теперь я хотел бы изменить цвета виджета 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
Я бы поэкспериментировал, чтобы сначала посмотреть, переключается ли div-1229769625913 между страницами. Если этого не произойдет, вы можете изменить стиль в своих файлах CSS, в противном случае вам придется изменить цвета для skin в переключателе стилей (который, как я полагаю, является JS).
Идентификатор генерируется GFC. Он заполняет DIV iFrame, на котором размещается код вашего гаджета на своих серверах * .gmodule.com.
Теоретически вы можете получить доступ и изменить их DOM после загрузки, чтобы изменить их стиль.
Попробуйте изменить значения на карте "скин" для стиля
например. кожа ['ALTERNATE_BG_COLOR'] = '#ffffff';
Удачи!
Идентификатор div остается неизменным между страницами, однако он создает 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>
Не могли бы вы сделать отступ в опубликованном вами коде? Используйте четыре пробела в начале строк, так код будет читабельным :)