Iframe CSS Override for New Twitter Widget

Twitter CSS Override

Dangit, I hate having to start out with a rant, but it's needed in this case.

You have 875 lines in your header. That is just beyond ridiculous, you really really need to build an external CSS. This is just terrible.

But now to why we are here, let's get this problem SOLVED!

Ok, after doing some digging to your website, it seems that you actually have content in the header of the tweet.. until the tweet plugin comes in and replaces some content.

And then you will notice that you have a margin of '25px 0px 0px 0px' on the avatar.

This tells the image to have a space of 25px on the top.

In your script, you will find this

            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( '.footer' ).css( 'margin', '0px 0px -10px 0px' );
        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', '0px 0px 0px 0px' ); //move   tweet up (over @name of tweet)
        ibody.find( '.p-name' ).css( 'font-family', 'Georgia' );
        ibody.find( '.e-entry-content p' ).css( 'font-family', 'Georgia' );
        ibody.find( '.dt-updated' ).css( 'visibility', 'hidden' );
        ibody.find( '.dt-updated' ).css( 'font-size', 0 );
        ibody.find( '.full-name' ).css( 'visibility', 'hidden' );
        ibody.find( '.full-name' ).css( 'font-size', 0 );
        ibody.find( '.avatar' ).css( 'margin', '25px 0px 0px 0px' );

So my solution is going to be to look at this script and remove little parts at a time. Starting off with the ibody.find( '.avatar' ).css( 'margin', '25px 0px 0px 0px' ); , or just replace the 25px to 0px and see what effect it has.

If you remove the lines that have 'visibility', 'hidden' then you might find you like those results too. and if you dont want to do that, try using 'display', 'none'. Visibility leaves it in place, just doesn't allow it to be seen.

There is DEF a lot that you can do to your site to smoothen up the coding, and help to not run into future problems that may arise from this mess, no offense.

I hope this helps, happy coding!!! Plus the up arrow to the left if your satisfied. Reply if you have any more questions.

---Edit---

General Guide for doing external CSS

CSS Guide

You could also move the JS into a sub file and include it from the header. I'd wait to fix the problem first, then do that.

How to overwrite style sheets for embedded Tweets

From the documentation you linked to, it seems you can change the styling of the fallback presentation, but not the fully styled regular version. The regular version is shown using an iframe to which, if I recall correctly, you can't apply styles from the parent page. This is probably by design -- Twitter don't want you to mess with the branding of the embedded content.

Edit: For example, if you disable JavaScript on the linked documentation page, the tweet indeed renders using the fallback markup, and styles such as yours apply.

How to override css class set in iframe?

Browser security does not allow to manipulate third party iframe content via JavaScript. Adding a CSS from outside is also not possible.

The only way to change the style would be from within widget.jsp. Maybe whoever provides you that can also provide a URL parameter, which would allow you to change its appearance.

How Can I Replace 100% Width in the New Twitter Widget Using CSS code?

Based off of Kris's answer. This has an interval that checks to see if the iframe is available to manipulate. If so it fires the code and then clears the interval.

If you have multiple Twitter feeds use this:

$(document).ready(function() {
    twitterCheck = setInterval(function() {
        if($('iframe[id^="twitter-widget-"]').length) {
            $('iframe[id^="twitter-widget-"]').each(function () {
                $(this).contents().find(".timeline").attr("style","max-width:100% !important;");
                $(this).attr("style","max-width:100% !important; width: 100% !important;");
            });
            clearInterval(twitterCheck);
        }
    }, 1000);
});

JSFiddle: http://jsfiddle.net/v7xom6ms/20/

Or if you have one you can drop the .each() and use this:

$(document).ready(function() {
    twitterCheck = setInterval(function() {
        var twitterFrame = $("#twitter-widget-0");
        if(twitterFrame.length) {
            twitterFrame.contents().find(".timeline").attr("style","max-width:100% !important;");
            twitterFrame.attr("style","max-width:100% !important; width: 100% !important;");
            clearInterval(twitterCheck);
        }
    }, 1000);
});

JSFiddle: http://jsfiddle.net/v7xom6ms/21/

Edit: One could argue that the above code is prone to fail as well since the iframe is loaded but you can't confirm the content loaded. Easy fix. This also allows us to lower the interval for a less obvious resize transition.

$(document).ready(function() {
    twitterCheck = setInterval(function() {
        var twitterFrame = $("#twitter-widget-0");
        var twitterTimeline = twitterFrame.contents().find(".timeline");
        if(twitterFrame.length && twitterTimeline.length) {
            twitterTimeline.attr("style","max-width:100% !important;");
            twitterFrame.attr("style","max-width:100% !important; width: 100% !important;");
            clearInterval(twitterCheck);
        }
    }, 10);
});

http://jsfiddle.net/v7xom6ms/22/

---

Related Topics