การเพิ่ม 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 จะกลับด้านทันที

ป้อนคำอธิบายรูปภาพที่นี่


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