Overriding embedded timeline css


#1

I’ve been trying to create a horizontal feed, I’ve just realised that the embedded css is overwriting my own. If I change the values in the dev tools in Chrome, it displays perfectly but as soon as I add those values to my css, it no longer works.

Please could someone let me know if its even possible before I waste any more time on it?


#2

Hi there. My guess is that there is an issue with specificity stopping your classes from overriding ours: https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity. That would explain why things are working in the browser but not in your code.

Hope this helps!


#3

Thanks for your response but I still can’t seem to get it to work. I am styling a div inside a list item, so I have specified it like this

li div.timeline-Tweet {

I have even used !important but it makes no difference :confused:
Sorry I’m a bit of a noob…


#4

Hi,
I dig through many forums and found out that U need to use JS or jQuery to change twitter css because it is an embedded html.
You have to find iframe and assign to a variable so U can use as a reference to embedded in iframe #document DOM
I used simple code that tries to change css until timeline-widget it’s loaded.

document.addEventListener("DOMContentLoaded", function(){
// Function that changes background of twitter widget
function populateIframe() {

// Look for widget
var ifrm = document.getElementById('twitter-widget-0')

// If widget did generate to iframe
if (ifrm !== null){
  var timelineWidget = ifrm.contentWindow.document.getElementsByClassName('timeline-Widget')[0];
  // then if widget has content with class="timeline-Widget"
  if (timelineWidget !== undefined){
    // then change background color css for this class
    timelineWidget.style.background="black";
    // and leave setinterval
      clearInterval(myInterval);
      } else {
        // console.log('timelineWidget == undefined - ', timelineWidget);
      }
    } else {
    // console.log('ifrm === null - ', ifrm);
  }
}

// Run function every second until it will terminate setinterval by itself
var myInterval = setInterval(populateIframe, 1000);

});

#5

Hi thanks for this but it still doesn’t work. Is it even possible?


#6

Look here :slight_smile:
http://coaching.o12.pl/project3/


#7

Here’s the best twitter widget I’ve ever seen, and they used horizontal timeline before so you may can ask them.


#8

I don’t think this uses the embedded timeline because it isn’t populating an iFrame, not that I can see anyway. I have given up on the embedded timeline and am building from scratch using npm. Thanks anyway


#9

I am trying to get the timeline to be responsive and have found out the code is not put in an iframe anymore it is put in an -a- tag. At least the one I got is and this gets stripped out when client uses wyswyg editor. I am wondering why your code is in an iframe. Are we able to use the old way? Mine went down so I updated it to new way, this would help my situation. Thanks


#10

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.