2013-06-20 4 views
1

Я прочитал несколько других потоков на переопределениях CSS для виджета Twitter. Я пробовал добавитьCSS Override для виджета твиттера

!important 

, но это не повлияло. Все, что я хочу сделать, это скрыть среднюю часть виджета. Когда я использовал firebug, div исчезает. В настоящее время я использую:

#twitter-widget-0 .timeline .stream { 
display: none !important; 
} 

Пожалуйста, помогите мне с помощью какого-либо javascript или jQuery. Любая помощь будет потрясающей!

+0

, как вы используете виджет? это виджет третьей стороны, загруженный js с другого сервера? Если это так, вы также не можете редактировать их 'CSS' – Novocaine

+1

, иногда виджеты загружаются в iFrame. Если это так, вы не сможете переопределить CSS. – mohkhan

+0

Возможный дубликат [Как переопределить стили в Iframe?] (Http://stackoverflow.com/questions/6526187/how-to-override-styles-in-iframe) – Pete

ответ

4

Новый виджет Twitter работает, вставив в ваш документ . Из-за этого вы не можете изменить стиль с помощью CSS в родительском документе из-за Same Origin Policy.

Единственные изменения, которые вы можете внести в это, - это настройки, которые выставляют Twitter через атрибуты data-*. Например,

data-chrome="noheader nofooter" data-link-color="#cc0000" 

Невозможно скрыть тело, вы можете скрыть только верхний или нижний колонтитул.

Documentation

старый Twitter виджет работал по-другому, он вставляется элементы непосредственно в текущий документ вместо фрейма, и поэтому старый позволил вам переопределить стили.

Если виджет Twitter не является достаточно гибким для того, что вы хотите, вы всегда можете использовать API Twitter для получения твитов и, по существу, создать свой собственный виджет. Недостатком этого является то, что вам придется управлять вызовами API, чтобы получить твиты и реализовать кэширование и т. Д.

+0

Это решило мою проблему, потому что я могу просто удалить данные что я не хочу, чтобы Twitter был установлен в первую очередь, а затем я могу манипулировать остальными на моем конце. Спасибо за ссылку на документацию. –

0

Вы можете попытаться манипулировать им с помощью javascript.

Таким образом, вы размещаете стиль css в своем iframe.

+0

Привет, ребята. Извините, я не ответил раньше. Спасибо за все ответы! @JREN Куда я могу разместить этот скрипт на странице? http://www.thescribblingape.com/contact –

+0

После того, как ваш кадр загрузится первым, а затем вы введете его в свой кадр. – JREN

1

Это возможно, я использую JQuery:

(function ($) { 

    window.setTimeout(function(){ 
    $(".twitter-timeline").contents().find(".e-entry-title").attr("style", "font-family: 'Gill Sans W02 Book' !important; font-size: 14px;"); 
    }, 1000); 

})(jQuery);