Iframe CSS sobrescribe para el nuevo widget de Twitter

Estoy tratando de personalizar el nuevo widget de Twitter, pero tengo algunos problemas con el CSS y parece que no puede anular el suyo en este nuevo. Intenté buscar soluciones pero no encuentro ninguna que coincida.

Aquí está mi página con el widget en el navegador de la derecha y el CSS modificado para la clase .timeline:

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

html:

 
!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");

Empecé a usar declaraciones importantes y probé la identificación principal de #twitter para anular, pero ninguno de los dos funciona.

Cualquier idea muy apreciada.

** Aparentemente necesito editar el iframe de alguna manera, pero no estoy seguro de cómo – si alguien tiene una idea más clara de cómo puedo hacer eso con mi código (a diferencia de un tutorial) sería genial. También necesito cambiar el ancho del iframe.

Logré hacer esto con javascript (¡uso jQuery en mi aplicación!). Tienes que aplicar los estilos después de la carga del iframe (no encontré un evento “cargado” válido, entonces uso una estrategia de sondeo).

 // 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(); 

Esto es sin jQuery para cualquier persona interesada.

ACTUALIZADO con una solución mucho mejor que no se basa en el sondeo y por lo tanto no tiene un destello de diseño sin estilo en ocasiones:

 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'; } }); }); 

versión antigua:

 // 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(); 

Adapte el código de @Sebastiaan Ordelman y agregué algunos comentarios (en referencia a los valores de API anterior). Este fue mi bash de hacer coincidir la antigua API en un corto período de tiempo. Coloque este código después de su nuevo código de copiar y pegar desde el nuevo widget de Twitter.

   

Imagen de cambio: http://img837.imageshack.us/img837/1139/btjc.png

Esto no responde directamente al aspecto de CSS de la pregunta, pero creo que vale la pena destacar que algunos de los elementos deseados (por ejemplo, ocultar bordes / encabezado) pueden realizarse utilizando los atributos de datos pasados ​​en el widget:

  

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

¿Tal vez hay un beneficio en el rendimiento para minimizar la lucha libre javascript siempre que sea posible?

Crean un iframe, por lo que es otro documento.

No puede aplicar estilos a elementos en otro documento, por lo que no es posible a menos que Twitter proporcione un gancho para incrustar su propia hoja de estilo en su iframe.

Twitter solo permite diseñar el color del enlace del widget y elegir un tema claro / oscuro.


Alternativamente, puede crear su propio widget usando la API de Twitter y luego puede darle el estilo que desee.

No sé si fue posible en ese momento cuando se hizo la pregunta, pero ahora sí, verifique los documentos :

  

Como se dijo anteriormente, no puede cambiar CSS en un iframe de origen diferente, aquí hay alguna información:

¿Cómo aplicar CSS a iframe?

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

Puede ser mejor utilizar la estructura de eventos de twitters.

según https://dev.twitter.com/web/javascript/loading

  

y por https://dev.twitter.com/web/javascript/events su evento y conexión se vería como este (tenga en cuenta que este ejemplo usa jquery puede optar por un solo enfoque de javascript)

 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"}); }); });