Since twitter retired API v1 in March 2013 it has seemed to affected the feed on my website.

It has [of course] become quite hard to style the feed how i want.

I have found some code that I have developed but I still can't adjust heights and widths.

I need to hide images from the feed, I can hide the image but the sizing space still remains.

Can anyone offer any advice.


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
<html xmlns="">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Twitter feed</title>
<style type="text/css">



<a class="twitter-timeline" align="left" href="" data-widget-id="YOU_TWITTER_NAME" data-chrome="noheader nofooter noborders transparent" data-tweet-limit="1" width="753" height="30" lang="EN" >Tweets by @YOU_TWIITER_NAME</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);;js.src=p+"://";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");
<script src=""></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', '#transparent' ); //theme: shell: background:
            ibody.find( 'ol.h-feed' ).css( 'background-color', '#transparent' ); //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', '#000' ); //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( '.e-entry-title' ).css( 'border', 'none' )
            ibody.find( '.e-entry-title' ).css( 'margin', '0px 0px 0px -50px' )
            ibody.find( '.e-entry-title' ).css( 'height', '35px' )
            ibody.find( '.retweet-credit' ).css( 'display', 'none' )
            ibody.find( '.dt-updated' ).css( 'color', '#07E0EB' ); //theme: tweets: links:
            ibody.find( '.full-name' ).css( 'display', 'none' ); //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="" style="color: #FFFFFF;">fundSchedule</a></h1>' ); //replace Tweets text at top
            ibody.find( '.p-name' ).css( 'color', '#07E0EB' ); //theme: tweets: links:
            else {
        if ( hideTwitterAttempts < 3 ) {
    }, 1500);

// somewhere in your code after html page load


Am just wondering. If you want so many things different, wouldn't it be easier to parse the feed and rebuild it the way you want?

commented: smart +8

My skills at the moment dont stretch that far, do you know of a tutorial?