Twitter CSS Override

Question

I know very little about Javascript and the like (essentially, I know enough to figure out which pieces to copy and paste). Thus, I've been attempting to modify the Twitter widget using the code I found here. I've modified it so it appears as I want, but there is a large space before and after the feed, which is unintentional. Please see my blog: Lost Little Lutheran.

Here's the css I used:

if ( ibody.find( '.timeline .stream .h-feed li.tweet' ).length ) {
   ibody.find( '.footer' ).css( 'visibility', 'hidden' );
   ibody.find( '.footer' ).css( 'min-height', 0 );
   ibody.find( '.footer' ).css( 'height', 0 );
   ibody.find( '.footer' ).css( 'margin', '0px 0px -10px 0px' );
   ibody.find( '.p-nickname' ).css( 'font-size', 0 );
   ibody.find( '.p-nickname' ).css( 'visibility', 'hidden' );
   ibody.find( '.e-entry-content' ).css( 'margin', '0px 0px 0px 0px' );
   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' );
}

Does anybody know how to tighten this up?

Thanks!

MrJustin · Accepted Answer · 2013-11-16T06:53:51.223

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.

I greatly appreciate your suggestion! I am actually using Google's Blogger, and adapt css and java as I can. I'm less than an amateur coder, so basically bumble my way through changing things. I think what I am doing is essentially using a script to modify the existing script. I've noticed that when the page loads, Twitter's typical widget loads, and my tweaks load a split second after. I can't tell, but I my modifications are simply shifting the widget around, rather than actually modifying it, but doesn't change the overall size of the widget. Perhaps that is what I need to figure out. — pianofreak, Nov 16 '13 at 23:32

Twitter CSS Override

1 Answers1