iframe CSS Override for New Twitter Widget
|
7:52 PM |
No comments |
iframe CSS Override for New Twitter Widget
I'm trying to customise the new Twitter widget, but having some problems with the CSS and can't seem to override theirs on this new one. I've tried searching for solutions but can't find any that match.
Here's my page with the widget in the right-nav and the tweaked CSS for the .timeline class:
.timeline { margin-bottom:0; border:0 !important; border-radius:0 !important; -webkit-border-radius:0; -moz-border-radius:0; } html:
Twitter News
I've started using !important declarations and tried the main #twitter id to override, but neither works.
Any ideas much appreciated.
**I apparently need to edit the iframe somehow, but not sure how - if anyone has a clearer idea how I can do that with my code (as opposed to a tutorial) that would be great. I also need to change the iframe width..
Answer by Gaby aka G. Petrioli for iframe CSS Override for New Twitter Widget
They create an iframe, so it is another document.
You cannot style elements in another document, so it is not possible unless twitter provides a hook to embed your own stylesheet in their iframe..
Twitter only allows to style the link color of the widget and pick a light/dark theme.
Alternatively, you can create your own widget by using the twitter API and then you can style it anyway you want..
Answer by SimonW for iframe CSS Override for New Twitter Widget
As said above, you can't change CSS in a different origin iframe, here is some info:
http://www.jquery4u.com/dom-modification/jquery-change-css-iframe-content/
Answer by Sebastiaan Ordelman for iframe CSS Override for New Twitter Widget
I managed to do this with javascript (I use jQuery in my application!). You have to apply the styles after the iframe load (I did not find a valid "loaded" event, so I use a polling strategy).
// 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 by Camden Narzt for iframe CSS Override for New Twitter Widget
This is without jQuery for anyone interested.
UPDATED with much better solution that doesn't rely on polling and therefore doesn't have a flash of unstyled layout on occasion:
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'; } }); }); old version:
// 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 by tokland for iframe CSS Override for New Twitter Widget
I don't know if it was possible back then when the question was asked, but now it is, check the docs:
Tweets Answer by KPK for iframe CSS Override for New Twitter Widget
I adapted the code from @Sebastiaan Ordelman and added some comments (referring to values from old API). This was my attempt to match the old API in a short amount of time. Place this code after your new copy and paste code from the new twitter widget.
Image of change: http://img837.imageshack.us/img837/1139/btjc.png
Answer by memeLab for iframe CSS Override for New Twitter Widget
This doesn't directly answer CSS aspect of the question, but I think it's worth noting for completeness that some of what you want (eg hide borders / header) can be done using the data- attributes passed in the widget:
Tweets by @twitterapi https://dev.twitter.com/docs/embedded-timelines#customization
Maybe there's a performance benefit to minimising javascript arm wrestling where possible?
Answer by gateblues for iframe CSS Override for New Twitter Widget
It may be better to use twitters eventing structure.
as per https://dev.twitter.com/web/javascript/loading
and per https://dev.twitter.com/web/javascript/events your event and hookup would look something like this (keep in mind this example uses jquery you can opt for a javascript only approach)
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"}); }); }); Answer by om prakash for iframe CSS Override for New Twitter Widget
Fatal error: Call to a member function getElementsByTagName() on a non-object in D:\XAMPP INSTALLASTION\xampp\htdocs\endunpratama9i\www-stackoverflow-info-proses.php on line 72
0 comments:
Post a Comment