CSS 如何自定义推特小部件样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14303710/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to customize twitter widget style?
提问by Barryvdh
I just implemented the lists widget on my site: https://dev.twitter.com/docs/embedded-timelines
我刚刚在我的网站上实现了列表小部件：https: //dev.twitter.com/docs/embedded-timelines
I just want to override the background-color from white to transparent. Since it is a embedded widget I cannot edit it directly. Can anyone help me with it?
我只想将背景颜色从白色覆盖为透明。由于它是一个嵌入式小部件，我无法直接编辑它。任何人都可以帮助我吗？
回答by Barryvdh
https://dev.twitter.com/docs/embedded-timelines
https://dev.twitter.com/docs/embedded-timelines
You can change the Chrome of the widget, to hide the header/footer/border or background.
您可以更改小部件的 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>
回答by Halil ?zgür
I'm using something like the following (can't really find much reference for this now, but it's still working) (change <YOUR_TWIITER_NAME>with yours):
我正在使用类似以下的东西（现在真的找不到太多参考，但它仍然有效）（<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>
回答by Neurone00
Create a widget from twitter>settings>widgets.
从 twitter>settings>widgets 创建一个小部件。
Copy-paste the code provided.
复制粘贴提供的代码。
<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>
For the answer i used the work from http://tweetsdecoder.net/. His snippet apparently doesn't work because of the script.
对于答案，我使用了来自http://tweetsdecoder.net/的作品。由于脚本的原因，他的片段显然不起作用。
Cheers!
干杯!
Edited:There was my nickname there
编辑：那里有我的昵称
回答by Matt
If you need further customisations, try using TwitterPostFetcherby Jason Mayes. It allows for complete styling of timeline tweets - much more than the default style parameters that the stock twitter widgets provide.
如果您需要进一步自定义，请尝试使用Jason Mayes 的TwitterPostFetcher。它允许时间线推文的完整样式 - 比股票推特小部件提供的默认样式参数要多得多。
回答by user1214684
To change the background of a.twitter-timeline add data-chrome="transparent"and place the anchor within an element with a CSS background-color
a.twitter-timeline add data-chrome="transparent"使用 CSS 背景颜色更改元素的背景并将锚点放置在元素中
回答by ShapCyber
At the moment this is what twitter rendered in your web page.
目前，这是 twitter 在您的网页中呈现的内容。
Since you know all the id and class attributes you can then control it with css or JavaScript this Link http://tweetsdecoder.netmay also be useful on how to customize twitter widgets.
由于您知道所有 id 和 class 属性，因此您可以使用 css 或 JavaScript 来控制它，此链接http://tweetsdecoder.net也可能对如何自定义 twitter 小部件有用。
