iframe सीएसएस नए ट्विटर विजेट के लिए ओवरराइड

Question

मैं नए ट्विटर विजेट को कस्टमाइज़ करने की कोशिश कर रहा हूं, लेकिन सीएसएस के साथ कुछ समस्याएं हैं और इस नए पर उनका ओवरराइड नहीं लग रहा है। मैंने समाधान खोजने की कोशिश की है लेकिन वह मैच नहीं मिला है।

.timeline { 
margin-bottom:0; 
border:0 !important; 
border-radius:0 !important; 
-webkit-border-radius:0; 
-moz-border-radius:0; 
} 

एचटीएमएल::

राइट एनएवी में विजेट और .timeline वर्ग के लिए बदलाव सीएसएस के साथ Here's my page

<div class="bg"> 
<h3 class="twitter">Twitter News</h3> 
<div id="twitter"> 
<a class="twitter-timeline" href="https://twitter.com/" data-widget-id="268336500536647680">Tweets by </a> 
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script> 
</div></div> 

मैं का उपयोग प्रारंभ कर महत्वपूर्ण घोषणाओं और करने की कोशिश की मुख्य # ट्वीटर आईडी ओवरराइड करने के लिए, लेकिन न तो काम करता है।

किसी भी विचार की बहुत सराहना की।

** मुझे स्पष्ट रूप से किसी भी तरह आईफ्रेम संपादित करने की आवश्यकता है, लेकिन यह सुनिश्चित नहीं है कि - अगर किसी के पास एक स्पष्ट विचार है कि मैं अपने कोड (ट्यूटोरियल के विपरीत) के साथ ऐसा कैसे कर सकता हूं तो यह बहुत अच्छा होगा। मुझे iframe चौड़ाई को बदलने की भी आवश्यकता है ..

Answer 1

वे एक आईफ्रेम बनाते हैं, इसलिए यह एक और दस्तावेज़ है।

आप कर सकते हैं न कि किसी अन्य दस्तावेज़ में शैली तत्वों, तो यह संभव नहीं है जब तक कि चहचहाना उनके iframe में अपने स्वयं के स्टाइलशीट एम्बेड करने के लिए एक हुक प्रदान करता है ..

ट्विटर केवल शैली the link color of the widget लिए अनुमति देता है और एक प्रकाश/अंधेरे विषय लेने।

---

वैकल्पिक रूप से, आप twitter API का उपयोग करके अपने खुद के विजेट बना सकते हैं और फिर आप इसे किसी तरह आप चाहते हैं शैली दे सकते हैं ..

Answer 2

जैसा कि ऊपर कहा, तुम एक अलग मूल iframe में सीएसएस बदल नहीं सकते, यहाँ कुछ जानकारी है:

How to apply CSS to iframe?

http://www.jquery4u.com/dom-modification/jquery-change-css-iframe-content/

Answer 3

मैं जावास्क्रिप्ट के साथ ऐसा करने में कामयाब (मैं जे का उपयोग मेरे आवेदन में प्रश्न!)। आपको आईफ्रेम लोड के बाद शैलियों को लागू करना होगा (मुझे वैध "लोड" ईवेंट नहीं मिला, इसलिए मैं एक मतदान रणनीति का उपयोग करता हूं)।

// Customize twitter feed 
var hideTwitterAttempts = 0; 
function hideTwitterBoxElements() { 
    setTimeout(function() { 
     if ($('[id*=twitter]').length) { 
     $('[id*=twitter]').each(function(){ 
      if ($(this).width() == 220) { 
       $(this).width(198); //override min-width of 220px 
      } 
      var ibody = $(this).contents().find('body'); 
      ibody.width($(this).width() + 20); //remove scrollbar by adding width 

      if (ibody.find('.timeline .stream .h-feed li.tweet').length) { 
      ibody.find('.timeline').css('border', 0); 
      ibody.find('.timeline .stream').css('overflow-x', 'hidden'); 
      ibody.find('.timeline .stream').css('overflow-y', 'scroll'); 
      ibody.find('.timeline-header').hide(); 
      ibody.find('.timeline-footer').hide(); 
      } 
      else { 
       $(this).hide(); 
      } 
     }); 
     } 
     hideTwitterAttempts++; 
     if (hideTwitterAttempts < 3) { 
      hideTwitterBoxElements(); 
     } 
    }, 1500); 
} 

// somewhere in your code after html page load 
hideTwitterBoxElements(); 

Answer 4

यह रुचि रखने वाले किसी के लिए jQuery के बिना है।

काफी बेहतर समाधान है कि मतदान पर भरोसा नहीं है और इसलिए इस अवसर पर unstyled लेआउट की एक फ्लैश नहीं है के साथ अद्यतन:

twttr.events.bind('rendered',function(){ 
    [].slice.call(document.querySelectorAll('iframe.twitter-timeline')).forEach(function(e,i,a){ 
    var fE = e.contentDocument.getElementsByClassName('timeline-footer'); 
    if(fE.length){ 
     fE[0].style.backgroundColor='transparent'; 
    } 
    }); 
}); 

पुराने संस्करण:

// Customize twitter feed                    
var hideTwitterAttempts = 0;                   
function hideTwitterBoxElements() {                  
    setTimeout(function() {                   
     var list = document.getElementsByTagName('iframe');            
     if (list.length) {                    
      Array.prototype.forEach.call(                
       list,                     
       function(element){                  
        var footerE = element.contentDocument.getElementsByClassName('timeline-footer')[0]; 
        footerE.style.backgroundColor="transparent";          
       });                      
     }                        
     hideTwitterAttempts++;                   
     if (hideTwitterAttempts < 3) {                
      hideTwitterBoxElements();                 
     }                        
    }, 1500);                       
}                          
hideTwitterBoxElements();                    

Answer 5

मैं डॉन ' टी पता है कि जब सवाल पूछा गया था, तो अब संभव था, लेकिन अब यह है, docs:

<a class="twitter-timeline" data-chrome="nofooter" ....">Tweets</a> 

Answer 6

मैंने @ सेबेस्टियान ऑर्डेलमैन से कोड को अनुकूलित किया और कुछ टिप्पणियां (पुराने एपीआई से मूल्यों का जिक्र करते हुए) को जोड़ा। यह थोड़ी देर में पुरानी एपीआई से मेल खाने का मेरा प्रयास था। अपनी नई प्रतिलिपि के बाद इस कोड को रखें और नए ट्विटर विजेट से कोड पेस्ट करें।परिवर्तन की

<script src="http://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('.timeline .stream .h-feed li.tweet').length) { 
      ibody.find('.customisable-border').css('border', 0); 
      ibody.find('.timeline').css('background-color', '#004A7B'); //theme: shell: background: 
      ibody.find('ol.h-feed').css('background-color', '#0575A1'); //theme: tweets: background: 
      ibody.find('ol.h-feed').css('border-radius', '5px 5px 5px 5px'); 
      ibody.find('li.tweet').css('border-bottom', '1px dotted #FFFFFF'); //theme: tweets: color: 
      ibody.find('li.tweet').css('color', '#FFFFFF'); //theme: tweets: color: 
      ibody.find('.customisable:link').css('color', '#07E0EB'); //theme: tweets: links: 
      ibody.find('.footer').css('visibility', 'hidden'); //hide reply, retweet, favorite images 
      ibody.find('.footer').css('min-height', 0); //hide reply, retweet, favorite images 
      ibody.find('.footer').css('height', 0); //hide reply, retweet, favorite images 
      ibody.find('.avatar').css('height', 0); //hide avatar 
      ibody.find('.avatar').css('width', 0); //hide avatar 
      ibody.find('.p-nickname').css('font-size', 0); //hide @name of tweet 
      ibody.find('.p-nickname').css('visibility', 'hidden'); //hide @name of tweet 
      ibody.find('.e-entry-content').css('margin', '-25px 0px 0px 0px'); //move tweet up (over @name of tweet) 
      ibody.find('.dt-updated').css('color', '#07E0EB'); //theme: tweets: links: 
      ibody.find('.full-name').css('margin', '0px 0px 0px -35px'); //move name of tweet to left (over avatar) 
      ibody.find('h1.summary').replaceWith('<h1 class="summary"><a class="customisable-highlight" title="Tweets from fundSchedule" href="https://twitter.com/fundschedule" style="color: #FFFFFF;">fundSchedule</a></h1>'); //replace Tweets text at top 
      ibody.find('.p-name').css('color', '#07E0EB'); //theme: tweets: links: 
      } 
      else { 
       $(this).hide(); 
      } 
     }); 
     } 
     hideTwitterAttempts++; 
     if (hideTwitterAttempts < 3) { 
      hideTwitterBoxElements(); 
     } 
    }, 1500); 
} 

// somewhere in your code after html page load 
hideTwitterBoxElements(); 
</script> 

छवि: http://img837.imageshack.us/img837/1139/btjc.png

Answer 7

यह सीधे सवाल का सीएसएस पहलू का जवाब नहीं है, लेकिन मुझे लगता है कि पूर्णता के लिए ध्यान देने योग्य है कि आप क्या चाहते हैं (उदाहरण के लिए छिपाने सीमाओं/हेडर) में से कुछ कर सकते हैं

<a class="twitter-timeline" href="https://twitter.com/twitterapi" 
    data-widget-id="YOUR-WIDGET-ID-HERE" 
    data-theme="dark" 
    data-chrome="noheader nofooter noborders noscrollbar transparent" 
    data-link-color="#cc0000" 
    width="200" 
    height="300" 
    >Tweets by @twitterapi</a> 

https://dev.twitter.com/docs/embedded-timelines#customization

हो सकता है कि वहाँ एक प्रदर्शन ख: विजेट में पारित डेटा- विशेषताओं का उपयोग किया जा जहां संभव हो जावास्क्रिप्ट हाथ कुश्ती को कम करने के लिए enefit?

Answer 8

ट्विटर्स इवेंटिंग संरचना का उपयोग करना बेहतर हो सकता है। https://dev.twitter.com/web/javascript/loading

<script>window.twttr = (function (d, s, id) { 
    var t, js, fjs = d.getElementsByTagName(s)[0]; 
    if (d.getElementById(id)) return; 
    js = d.createElement(s); js.id = id; 
    js.src= "https://platform.twitter.com/widgets.js"; 
    fjs.parentNode.insertBefore(js, fjs); 
    return window.twttr || (t = { _e: [], ready: function (f) { t._e.push(f) } }); 
}(document, "script", "twitter-wjs"));</script> 

और प्रति https://dev.twitter.com/web/javascript/events आपके घटना और जोड़ने का काम कुछ इस तरह दिखेगा (ध्यान में रखना इस उदाहरण jQuery का उपयोग करता है आप एक जावास्क्रिप्ट केवल दृष्टिकोण के लिए विकल्प चुन सकते हैं)

twttr.ready(function(twttr){ 
    twttr.events.bind("rendered", function(tw_event){ 
    var tw_iframe = ev.target; 

    //the following is custom jquery code to do various 
    //css overrides based on selectors 
    var twitterbody = $(tw_iframe).contents().find('body'); 
     twitterbody.find(".avatar").hide(); 
     twitterbody.find("li.tweet").css({padding: "2px"}); 
    }); 
});