Стилирование фида Twitter - CSS не будет нацелен.timeline-Tweet-text

Я привожу канал Twitter на свой сайт, используя следующий код, который описан на https://publish.twitter.com/

<a class="twitter-timeline" href="#" onclick="location.href='https://twitter.com/ACCOUNT-HERE'; return false;" data-tweet-limit="3">Tweets by</a> 
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

Канал отображается правильно. Однако он использует CSS, который предоставляется через Twitter.

Когда я проверяю его с помощью инструментов Chrome dev, я вижу следующие классы вокруг твитов:

<p class="timeline-Tweet-text" lang="en" dir="ltr">

Поэтому я подумал, что это простой пример нацеливания на CSS, например

.timeline-Tweet-text {
}

Тем не менее, это не относится к стилям в Tweets. Почему нет?

Я также упоминал руководство Twitters об этом здесь https://dev.twitter.com/web/overview/css, но это также не работает.

Единственная причина, по которой я хочу сделать это, - это то, что шрифт, используемый в виджетах, соответствует шрифту, используемому остальным текстом body на моем веб-сайте.

Ответ 1

Просто добавление правила стиля на страницу верхнего уровня не будет работать, потому что это два разных и изолированных документа в отношении браузера.

Однако, используя проект kevinburke Customize Twitter 1.1, вы сможете внедрить CSS в график. Он делает это, введя ссылку на внешний файл CSS непосредственно в содержимое документа внутри этого фрейма.

В опубликованном Кевине примере он делает весь текст белым, который выглядит немного сломанным, но когда я взял этот пример и скорректировал его, чтобы он также изменил цвет фона, мы видим, что он работает по назначению, и поэтому вы можете внести любые корректировки, которые вам нравятся, если у вас есть файл CSS для него.

Обратите внимание, что это возможно только потому, что Twitter настроил platform.twitter.com чтобы он мог быть встроен в фреймы. По соображениям безопасности многие веб-сайты в настоящее время отправляют заголовок ответа HTTP, чтобы предотвратить кадрирование содержимого, чтобы люди не вмешивались в их содержимое.

Ответ 2

От https://dev.twitter.com/docs/embedded-timelines

Параметры настройки

Встроенные временные рамки доступны в светлых и темных тем для настройки. Световая тема предназначена для страниц, которые используют белый или светлый фон и следует эстетике twitter.com, а темная тема - для страниц, которые используют черный или темный цвет фона и больше похожи на Tweetdeck.

Как и в вашем профиле twitter.com, вы можете выбрать собственный цвет ссылок для встроенных временных графиков, чтобы контент соответствовал ссылкам вашего веб-сайта и чувствовал себя интегрированным в цветовую палитру вашего сайта.

Для сайтов, где цвет темы и ссылки не обеспечивают достаточную настройку, чтобы заставить Tweets чувствовать себя частью страницы, мы предлагаем набор дополнительных функций настройки клиентской стороны. Эти настройки позволяют вам контролировать цвет фона, границы, заголовок и нижний колонтитул временной шкалы и подробно описаны в разделе "Параметры боковой стороны клиента" ниже

Вы можете использовать свойство CSS * для установки шрифтов для всех страниц...

Пример: (это может быть полезно для вас)

#twitterFeed * {
font-family: "Lato" !important;
}

Ссылка ссылки для стиля виджета Twitter:

https://dev.twitter.com/web/overview/css

https://www.solodev.com/blog/web-design/styling-your-websites-twitter-feed.stml

Ответ 3

К сожалению (если это было недавно изменено) вы не можете манипулировать CSS внутри iframe

https://jsfiddle.net/tm94g9n4/5/

.timeline-Tweet-text {color: red;}

Я добавил красный цвет к тексту, но, как вы можете видеть, когда вы его проверяете, он даже не отображается как перезаписанный. Он не упоминается вообще.

Я думаю, вам нужно будет заглянуть в пользовательские библиотеки для этого. Я не могу рекомендовать, так как раньше я этого не делал.

fooobar.com/info/35969/...

Надеюсь, поможет

РЕДАКТИРОВАТЬ

Кажется, это возможно (Дублирующий вопрос) Как применить CSS к iframe?