Twitter嵌入式时间线背景颜色

5
5个回答

12
如果您使用来自 https://publish.twitter.com 的新Twitter嵌入,您可以只需添加 data-chrome="transparent" 以使背景透明,然后您可以使用具有设置背景颜色的包装器元素。
对于代码块:
<a class="twitter-timeline" data-dnt="true" data-chrome="transparent" data-link-color="#ffcc00" href="https://twitter.com/StackOverflow">Tweets by StackOverflow</a> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

其他可用选项包括:

data-chrome="transparent nofooter noborders noheader noscrollbar"

文档:

https://developer.twitter.com/en/docs/twitter-for-websites/timelines/overview


8

这个问题是几年前提出的。现在可能有更好的答案。 - Dan382
1
我希望有一种方法可以将其设置为“自动”,并跟随prefers-color-scheme。我找不到任何干净的方法来实现样式的自动切换,特别是因为似乎无法从JS中获取prefersColorScheme值。我想到的最好的解决方案是同时呈现浅色和深色,并使用CSS交换显示哪一个。 - Ehsan Kia

0

a.twitter-timeline {
  /* Buttonish */
  display: inline-block;
  padding: 6px 12px 6px 30px;
  margin: 10px 0;
  border: #ccc solid 1px;
  border-radius: 3px;
  background: #f8f8f8 url("") 8px 8px no-repeat;
  background-size: 1em 1em;

  /* Text */
  font: normal 12px/18px Helvetica, Arial, sans-serif;
  color: #333;
  white-space: nowrap;
}

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


0

你可以这样做:

.GridLayoutTextOnlyTweet {
  background: red;
}

它在iframe中并不重要。您可能需要添加!important来覆盖默认样式,但首先请尝试不添加。


尝试使用!important,但没有效果。iFrame本质上是外部内容,因此我无法通过纯CSS来操作它。不确定是否有某种JavaScript钩子(甚至是Twitter选项),可以进行微调,但在Google搜索后,我找不到一个。 - Dan382
这不是关于 iframe 的问题,而是关于跨域安全性的问题。 - dval

-1

好的,这是我的解决方案。将其放置在 Twitter 嵌入后面:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
var hideTwitterAttempts = 0;
function hideTwitterBoxElements() {
    setTimeout( function() {
        if ( $('[id*=twitter]').length ) {
        $('[id*=twitter]').each( function(){
            var ibody = $(this).contents().find( 'body' );
            if ( ibody.find( '.grid-Widget' ).length ) {
            ibody.find( '.GridLayoutTextOnlyTweet' ).css( 'background-color', '#1e73be' );
            }
            else {
                $(this).hide();
            }
        });
        }
        hideTwitterAttempts++;
        if ( hideTwitterAttempts < 3 ) {
            hideTwitterBoxElements();
        }
    }, 1500);
}
// somewhere in your code after html page load
hideTwitterBoxElements();
</script>

使用setTimeout是完全不可预测的,如果用户连接速度慢需要2秒钟呢? - Alex
同意这不是理想的。如果你有更好的解决方案,我很乐意听取。 - Dan382

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接