如何自定义 twitter 小部件样式？答案

【问题标题】：How to customize twitter widget style?如何自定义 twitter 小部件样式？
【发布时间】：2012-12-27 13:02:09
【问题描述】：

我刚刚在我的网站上实现了列表小部件：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>

【讨论】：

感谢您的信息！似乎他们只是在他们的文档中添加了这一点:)
添加“noscrollbar”也可以移除滚动条。
向下滚动到“客户端选项”部分。
你知道如何隐藏图片（头像）吗？并更改其他元素的样式？
这适用于单个嵌入式推文吗？我似乎无法让 data-chrome 属性工作。

【解决方案2】：

从 twitter>settings>widgets 创建一个小部件。

复制粘贴提供的代码。

<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/ 的工作。由于脚本，他的 sn-p 显然不起作用。

干杯！

已编辑：那里有我的昵称

【讨论】：

+1 在尝试根据网站样式自定义 twitter 小部件时非常有用。
@Neurone00 请确保更新您的小部件 ID。

【解决方案3】：

我正在使用类似以下的东西（现在找不到太多参考，但它仍然有效）（用你的更改 <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>

【讨论】：

感谢您的回复。但它也没有奏效。也许你用过的网站可以帮到我:)
OP：您没有更改背景颜色，因此这不完全是“答案”。
@ManojKumar，已编辑。我只是将它作为样板提供，因此您可以进行自己的自定义，因为我不知道您需要的颜色或需要透明的部分。
我认为他只是希望推文部分是透明的，但不确定。
这实际上已被弃用，并且由于不再支持 twitter api v1 而无法工作：/

【解决方案4】：

如果您需要进一步的自定义，请尝试使用 Jason Mayes 的 TwitterPostFetcher。它允许时间线推文的完整样式 - 远远超过股票推特小部件提供的默认样式参数。

【讨论】：

【解决方案5】：

目前这是 twitter 在您的网页中呈现的内容。

既然你知道所有的 id 和 class 属性，你就可以用 css 或 JavaScript 来控制它此链接http://tweetsdecoder.net 也可能对如何自定义 twitter 小部件有用。

【讨论】：

【解决方案6】：

更改 a.twitter-timeline add data-chrome="transparent" 的背景并将锚点放置在具有 CSS 背景颜色的元素中

【讨论】：