Twitterfix for TweetDeck Chrome app

Just started using the TweetDeck Chrome app, so this is preliminary. Works for pic.twitter links, at least.

This code is a TweetDeck Chrome-only substitute for the original.

Copy the following CSS code.

div.media-preview { display: none; }

Chrome users:

Locate the file listed below. You will need to show hidden files in order to see the AppData folder. Open the file, paste the CSS from above, and save. You’re done!

  • Users\[Windows Login Name]\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css

Firefox users:

Locate or create the folder and file listed below. You will need to show hidden files in order to see the AppData folder. Open the file, paste the CSS from above, save, and restart Firefox. You’re done!

  • \Users\[Windows Login Name]\AppData\Roaming\Mozilla\Firefox\Profiles\[Random Text].default\chrome\userContent.css

Code Explanation

/* Hide all inline content... */
div.stream-item-footer + div { display: none !important; }
/* ...until it gets expanded on-click */
.expansion-container div.stream-item-footer + div { display: block !important; }

/* But some videos now inline a preview, and auto-play when clicked!
   The preview is already hidden by the above, but we want to see it on-click. 
   
   So, hide the auto-playing video... */
ol.expanded-conversation div.js-macaw-cards-iframe-container[data-card-name^="player"][data-src*="autoplay"] { display: none; }
/* ... and then display the preview that would now be hidden instead.

   Unfortunately, there's no way, with CSS alone, to have it show the video without auto-playing it.
   Fortunately, by clicking the preview in an expanded tweet, it'll bring up the full-screen player.
   */
ol.expanded-conversation div.media-preview-container > div { display: block !important; }

/* Finally, clean up an oversized margin that shows up below rewteeted inline content */
div.bottom-tweet-actions { display: inline; margin-top: 0px ;}

Undo Inline Images + Videos UPDATE

Prior versions of the CSS did not hide inline videos. The following code will do so, however, due to technical constraints, videos will always use the full-screen popup view when played (that is, with CSS alone, I cannot cause the first click to show the preview, and the second click to play the video inlined - the second click must bring up the full-screen view).

This code extends and replaces the original image-only code.

Copy the following CSS code.

div.stream-item-footer + div { display: none !important; }
.expansion-container div.stream-item-footer + div { display: block !important; }
ol.expanded-conversation div.js-macaw-cards-iframe-container[data-card-name^=”player”][data-src*=”autoplay”] { display: none; }
ol.expanded-conversation div.media-preview-container > div { display: block !important; }
div.bottom-tweet-actions { display: inline; margin-top: 0px ;}

Chrome users:

Locate the file listed below. You will need to show hidden files in order to see the AppData folder. Open the file, paste the CSS from above, and save. You’re done!

  • Users\[Windows Login Name]\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css

Firefox users:

Locate or create the folder and file listed below. You will need to show hidden files in order to see the AppData folder. Open the file, paste the CSS from above, save, and restart Firefox. You’re done!

  • \Users\[Windows Login Name]\AppData\Roaming\Mozilla\Firefox\Profiles\[Random Text].default\chrome\userContent.css

Undo Inline Images

At the end of the day, this CSS looks to give the most consistent results in emulating the old Twitter behavior:

div.cards-media-container.js-media-container { display:none;}
.expansion-container div.cards-media-container.js-media-container { display:block;}
div.bottom-tweet-actions {display: inline; margin-top: 0px !important;}

It may break in the coming days, so please check back.

Undo Inline Images in Firefox

Today, Twitter rolled out a new bug that causes all images in tweets to be automatically inlined (shown). This is fucking stupid, and while we wait for them to fix it, you can do it yourself.

Copy the following CSS code.

div.cards-media-container.js-media-container { display:none;}
.expansion-container div.cards-media-container.js-media-container { display:block;}
div.bottom-tweet-actions {display: inline; margin-top: 0px !important;}

Now, locate or create the folder and file listed below. You will need to show hidden files in order to see the AppData folder. Open the file, paste the CSS from above, save, and restart Firefox. You’re done!

  • \Users\[Windows Login Name]\AppData\Roaming\Mozilla\Firefox\Profiles\[Random Text].default\chrome\userContent.css

Undo Inline Chrome: UPDATE 2

Previous posts have been updated to reflect the following:

Please use this CSS instead. It fixes left-over margins, and works correctly on images that have been replied to by your followers.

div.cards-media-container.js-media-container { display:none;}
.expansion-container div.cards-media-container.js-media-container { display:block;}
div.bottom-tweet-actions {display: inline; margin-top: 0px !important;}

Undo Inline Chrome: UPDATE

The original post has been updated to reflect the following.

Please use this CSS instead. It fixes left-over margins, and works correctly on images that have been replied to by your followers.

div.cards-media-container.js-media-container { display:none;}
.expansion-container div.cards-media-container.js-media-container { display:block;}
div.bottom-tweet-actions {display: inline; margin-top: 0px !important;}

Undo Inline Images in Chrome

Today, Twitter rolled out a new bug that causes all images in tweets to be automatically inlined (shown). This is fucking stupid, and while we wait for them to fix it, you can do it yourself.

Copy the following CSS code.

div.cards-media-container.js-media-container { display:none;}
.expansion-container div.cards-media-container.js-media-container { display:block;}
div.bottom-tweet-actions {display: inline; margin-top: 0px !important;}

Now, locate the file listed below. You will need to show hidden files in order to see the AppData folder. Open the file, paste the CSS from above, and save. You’re done!

  • Users\[Windows Login Name]\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css