将 CSS 添加到嵌入式 Yammer答案

【问题标题】：Adding CSS to an Embedded Yammer将 CSS 添加到嵌入式 Yammer
【发布时间】：2016-06-09 19:43:42
【问题描述】：

<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，它会变成橙色，然后立即反转。

【问题讨论】：

只需将 CSS 添加到容器中，#embedded-feed { background-color: orange; } 之类的就可以了。
看起来它可以工作，然后又恢复了。

标签： css sharepoint yammer sharepoint-online

【解决方案1】：

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

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

#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）。

您可以尝试不同的选项、颜色和/或不透明度：

想不出其他不涉及 CORS 的解决方案。

【讨论】：

不支持自定义 Yammer 嵌入。在客户或生产环境中执行此操作不是一个好主意，因为这可能会导致体验不佳和获得支持的问题。