Как настроить стиль виджета Twitter?

Я только что реализовал виджет списков на моем сайте: https://dev.twitter.com/docs/embedded-timelines

Я просто хочу переопределить фоновый цвет от белого до прозрачного. Поскольку это встроенный виджет, я не могу редактировать его напрямую. Может ли кто-нибудь помочь мне с этим?

ОТВЕТЫ

Ответ 1

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

Вы можете изменить Chrome виджета, чтобы скрыть верхний/нижний колонтитул/границу или фон.

<a class="twitter-timeline" href="https://twitter.com/twitterapi" data-widget-id="<YOUR ID>" data-theme="dark" data-link-color="#000" data-chrome="noheader nofooter noborders transparent"  data-related="twitterapi,twitter" data-aria-polite="assertive" width="300" height="300" lang="EN">Tweets by @twitterapi</a>

Ответ 2

Я использую что-то вроде следующего (теперь не могу найти много ссылок для этого, но он все еще работает) (измените <YOUR_TWIITER_NAME> на свой):

<script type="text/javascript" src="//widgets.twimg.com/j/2/widget.js"></script>
<script type='text/javascript'>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 6000,
  width: 300,
  height: 288,
  theme: {
    shell: {
      background: 'transparent',
      color: '#2c458f'
    },
    tweets: {
      background: 'transparent',
      color: '#525252',
      links: '#ad1111'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: true,
    behavior: 'all'
  }
}).render().setUser('<YOUR_TWIITER_NAME>').start();
</script>

Ответ 3

Создайте виджет из twitter > настроек > виджетов.

Скопируйте вставляемый код.

<a
class="twitter-timeline"
href="https://twitter.com/YourNickname"
data-widget-id="xxxxxxxxxxxxxxxxxxx" <!--you will haveyour own number http://stackoverflow.com/questions/16375116/what-is-data-widget-id-in-twitter-api-how-i-can-get-the-data-widget-id-->
data-chrome="noheader nofooter noborders noscrollbar transparent" <!--tweak these for the looks-->
data-tweet-limit="5"
data-link-color="#FFFFFF"
data-border-color="#FFFFFF"
lang="EN" data-theme="light" <!--light or dark-->
height="447"
width="255"
data-screen-name="yourName"
data-show-replies="false"
data-aria-polite="assertive">

Tweets by @YourName

</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Для ответа я использовал работу из http://tweetsdecoder.net/. Похоже, что его фрагмент не работает из-за script.

Ура!

Отредактировано: Там было мое никем

Ответ 4

Насколько я знаю, вы не можете сделать это в чистом CSS. Я бы предложил использовать jQuery (который, согласно сайту, вы уже используете):

$("iframe").contents().find(".timeline").css("background",'rgba(0,0,0,0)');

Замените "iframe" идентификатором виджета на вашем сайте, если вы не хотите, чтобы это было применено ко всем iframes.

Ответ 5

Если вам нужны дополнительные настройки, попробуйте использовать TwitterPostFetcher от Джейсона Майеса. Он позволяет полностью стилизовать твиты по времени - гораздо больше, чем параметры стиля по умолчанию, которые предоставляют виджетов твиттера.

Ответ 6

На данный момент это твиттер, отображаемый на вашей веб-странице. Tweets Widgets Decoded

Поскольку вы знаете все атрибуты id и class, вы можете управлять им с помощью CSS или JavaScript эта ссылка http://tweetsdecoder.net также может быть полезной при настройке виджета twitter.

Ответ 7

Чтобы изменить фон a.twitter-timeline add data-chrome="transparent" и поместить привязку в элемент с фоном-цветом CSS