Skip to content

Instantly share code, notes, and snippets.

@ashtonlance
Created February 15, 2018 18:02
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save ashtonlance/4d53c8f7de6f00b3424f9a746125c9dd to your computer and use it in GitHub Desktop.
Save ashtonlance/4d53c8f7de6f00b3424f9a746125c9dd to your computer and use it in GitHub Desktop.
Custom Twitter embed styles
# HTML
<a class="twitter-timeline"
data-width="100%"
data-height=""
data-tweet-limit="3"
data-dnt="true"
data-chrome="noheader nofooter noborders noscrollbar transparent"
data-theme="dark"
data-link-color="#ffffff"
href="https://twitter.com/TheSeam">Tweets by TheSeam</a>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>
# JS
var widgetCSS = "" +
"body { font: 100%/1.5 'runda','Helvetica Neue',Helvetica,Arial,sans-serif !important; -webkit-text-size-adjust: 100% !important; }" +
"body * { font-size: 13px !important; }" +
".timeline-Tweet-brand { display: none !important; }" +
".timeline-Tweet-author { color: #868e96 !important; padding-left: 0 !important; }" +
".timeline-Tweet-text { color: #868e96 !important; margin: 0 !important; }" +
".timeline-TweetList-tweet:not(:last-of-type) .timeline-Tweet-text { margin-bottom: 10px !important; padding-bottom: 10px !important; border-bottom: 1px solid #293440 !important; }" +
".timeline-Tweet-metadata { display: none !important; }" +
".timeline-Tweet-actions { display: none !important; }" +
".timeline-Tweet { padding: 0 !important; }" +
".timeline-Tweet:hover { background: transparent !important; }" +
".TweetAuthor-avatar { display: none !important; }" +
".TweetAuthor-decoratedName { display: none !important; }" +
".timeline-Tweet-media { display: none !important; }" +
".timeline-Tweet-retweetCredit { margin-left: 0 !important; margin-bottom: 0 !important; }" +
"";
var widgetJS = "" +
"var $tweets = document.querySelectorAll('.timeline-TweetList-tweet');" +
"$tweets.forEach(function(el) {" +
"var $author = el.querySelector('.TweetAuthor-screenName');" +
"var $time = el.querySelector('.timeline-Tweet-timestamp');" +
" var timeParts = $time.textContent.split(',');" +
"$author.innerHTML = $author.textContent + ' &#9679; ' + timeParts[0];" +
"});" +
"";
$(document).ready(function() {
twttr.events.bind('loaded', function (event) {
var $iframe = document.querySelector('.twitter-feed iframe');
var $iframeDoc = $iframe.contentDocument;
// Add JS
var js = document.createElement('script');
js.innerHTML = widgetJS;
js.type = 'text/javascript';
$iframeDoc.head.appendChild(js);
// Add CSS
var style = document.createElement('style');
style.innerHTML = widgetCSS;
style.type = 'text/css';
$iframeDoc.head.appendChild(style);
// Resize to correct height
window.addEventListener('DOMContentLoaded', function(e) {
$iframe.height = $iframe.contentWindow.document.body.scrollHeight;
});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment