将 CSS 添加到嵌入式 Yammer

Question

<div id="embedded-feed" style="height:800px;width:400px;"></div>
<script type="text/javascript" src="https://s0.assets-yammer.com/assets/platform_embed.js"></script>
<script type="text/javascript">

yam.connect.embedFeed({
  "config": {
    "use_sso": false,
    "header": false,
    "footer": false,
    "showOpenGraphPreview": false,
    "defaultToCanonical": false,
    "hideNetworkName": false,
    "defaultGroupId": 8430003
  },
  "container": "#embedded-feed"
});

</script>

如何将 CSS 插入其中以更改嵌入式 yammer 的背景颜色？

<style>
#embedded-feed { background-color: orange; }
</style>

如果我使用上面的 CSS 将其变为橙色，然后立即反转。

Answer 1

嵌入的内容位于白色背景的 iframe 中。恐怕你不能改变它。

您可以通过在具有 背景的容器 (#embedded-feed) 顶部使用伪元素 (::after) 以一种 hacky 的方式对其进行操作 和 混合模式:

#embedded-feed {
  position: relative;
}

#embedded-feed::after {
  content:'';
  position: absolute;
  left: 0; right: 0; bottom: 0; top: 0;
  background: orange;
  pointer-events: none;
  mix-blend-mode: multiply;
}

<script type="text/javascript" src="https://c64.assets-yammer.com/assets/platform_embed.js"></script>
<div id="embedded-feed" style="height:400px;width:500px;"></div>
<script>
    yam.connect.embedFeed({
        container: '#embedded-feed',
        network: 'fourleaf.com',
        feedType: 'group',                // can be 'group', 'topic', or 'user'    
        feedId: '123',                     // feed ID from the instructions above
        config: {
             defaultGroupId: 3257958      // specify default group id to post to 
        }
    });    
</script>

jsFiddle: https://jsfiddle.net/azizn/40faxryw/

请注意，这是 实验性的，目前浏览器支持有限（FF32、Chrome 41+、Safari 8+、Opera、无 IE）。

您可以尝试不同的选项，颜色 and/or 不透明度：

想不出另一个不涉及 CORS 的解决方案。

将 CSS 添加到嵌入式 Yammer

Adding CSS to an Embedded Yammer

css

sharepoint

yammer

sharepoint-online