How to Customize Twitter Widget Style

How to customize twitter widget style?

https://dev.twitter.com/docs/embedded-timelines

You can change the Chrome of the widget, to hide the header/footer/border or background.

<a class="twitter-timeline" href="https://twitter.com/twitterapi" data-widget-id="<YOUR ID>" data-theme="dark" data-link-color="#000" data-chrome="noheader nofooter noborders transparent"  data-related="twitterapi,twitter" data-aria-polite="assertive" width="300" height="300" lang="EN">Tweets by @twitterapi</a>

Issues styling the default Twitter Widget

SOLVED IT!

So basically you need to tell Twitter to pull from your CSS file after it loads all other styles, and then you have complete control over your Twitter Widget. Although I have found lots of confusion surrounding this topic, there is actually a very simple way to tweak all the Twitter Elements.

Here is the detailed process from start to finish.

FIRST: Download this JS File and upload it to your file structure appropriately. I'd place it in your JS folder. If you don't have a JS folder, you can create one.

Just make sure to correctly change your directory path. You can grab the file from Github here:

https://github.com/kevinburke/customize-twitter-1.1/blob/master/customize-twitter-1.1.min.js

SECOND: Load this file. I would recommend placing the code in your header with other scripts. Here is an example:

<script src="/wp-content/themes/reverie/js/customize-twitter-1.1.min.js" type="text/javascript"></script>

Remember to correctly change your directory path!

THIRD: Create your Twitter Widget. Just login to Twitter and then access this link:

https://twitter.com/settings/widgets

FOURTH: Paste your newly created code into your webpage... like so:

<a
    class="twitter-timeline"
    href="https://twitter.com/TadHeigel"
    data-widget-id="588706214483210242">
</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.id=id;
        js.src=p+"://platform.twitter.com/widgets.js";
        fjs.parentNode.insertBefore(js,fjs);
      }
    }
    (document,"script","twitter-wjs");
</script>

FIFTH: Place the following code below your twitter widget script.

Remember to correctly change your directory path.

<script>
    var options = {
        "url": "/wp-content/themes/reverie/css/app.css"
    };
    CustomizeTwitterWidget(options);
</script>

SIXTH AND FINAL: Play around! Just target the widget's elements using an "inspect element" tool and then paste the new tweaked CSS into your specified stylesheet.

Hope this helps solve lots of the confusion out there on how to tweak these Twitter Widgets. Enjoy.

Twitter widget + custom scrollbar makes styling of the feed disappear

I noticed 2 things in your code that need addressing:

1. In <a class="twitter-timeline">...</a> you have the height listed as height:"600px" which is not valid.
2. The CSS below was missing from your example.

#twitter-widget-holder {
max-height:400px;
max-width:320px;
padding:20px;
background:#fff;
border-radius:3px;
box-shadow:2px 2px 3px rgba(0,0,0,.1);
}

I went ahead and made those corrections and it seems to work fine: http://codepen.io/johnniebenson/pen/PNrOpV

Let me know if that helps!

---

Related Topics