Добавление CSS во встроенный Yammer

<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 sharepoint-online sharepoint yammer
person Michael Downey    schedule 09.06.2016    source источник
comment
просто добавьте CSS в контейнер, что-то вроде #embedded-feed { background-color: orange; } должно работать.   -  person Aziz    schedule 09.06.2016
comment
Казалось, что это сработает, а затем вернулось.   -  person Michael Downey    schedule 09.06.2016

Ответы (1)


arrow_upward
1
arrow_downward

Встроенное содержимое находится внутри iframe с белым фоном. Боюсь, вы не можете изменить это.

Вы можете манипулировать им хакерским способом, используя псевдоэлемент (::after) поверх контейнера (#embedded-feed), который имеет фон и режим наложения. :

#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).

Вы можете поиграть с различными параметрами, цветами и/или непрозрачностью:

псевдоэлемент фонового режима смешивания css

Невозможно придумать другое решение, не связанное с CORS.

person Aziz    schedule 09.06.2016
comment
Настройка Yammer Embed не поддерживается. Не рекомендуется делать это в клиентской или производственной среде, поскольку это может привести к плохому опыту и проблемам с получением поддержки. - person Brian Lyttle; 10.06.2016