我刚刚在我的网站上实现了列表小部件:https ://dev.twitter.com/docs/embedded-timelines
我只想将背景颜色从白色覆盖为透明。由于它是一个嵌入式小部件,我无法直接对其进行编辑。有人可以帮我吗?
我刚刚在我的网站上实现了列表小部件:https ://dev.twitter.com/docs/embedded-timelines
我只想将背景颜色从白色覆盖为透明。由于它是一个嵌入式小部件,我无法直接对其进行编辑。有人可以帮我吗?
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>
从 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/的作品。由于脚本,他的片段显然不起作用。
干杯!
编辑:那里有我的昵称
我正在使用类似下面的东西(现在找不到太多参考,但它仍然有效)(<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>
如果您需要进一步的自定义,请尝试使用Jason Mayes 的TwitterPostFetcher。它允许时间线推文的完整样式 - 远远超过股票推特小部件提供的默认样式参数。
目前,这就是 twitter 在您的网页中呈现的内容。
由于您知道所有 id 和 class 属性,因此您可以使用 css 或 JavaScript 来控制它,这个链接http://tweetsdecoder.net对于如何自定义 twitter 小部件也可能很有用。
使用 CSS 背景色更改元素的背景a.twitter-timeline add data-chrome="transparent"
并将锚点放置在元素内