Customizing the Twitter Widget

If you have logged into your Twitter account and created a Twitter timeline widget, you can alter various properties so it displays how you want.  From the Twitter documentation here are a few tips:

To create a timeline you must be signed in to twitter.com and visit the widgets section of your settings page.

For sites where the theme and link color do not provide enough customization to make the Tweets feel like they’re a part of the page, Twitter offers a set of additional client side customization features.  These settings allow you to control the background color, borders, header, and footer of the timeline.

Dimensions

You can set the dimensions explicitly by using the width and height HTML attributes:

<a class="twitter-timeline" width="300" height="500" href="https://twitter.com/twitterapi" data-widget-id="YOUR-WIDGET-ID-HERE">Tweets by @twitterapi</a>

The minimum width of a timeline is 180px and the maximum is 520px. The minimum height is 200px.

Client Side Options

While all of the configuration settings are stored on the server, you may override specific options on the client side by customizing the embed code.   Here are a few of the most useful settings:

Theme: Set by adding a data-theme="dark" attribute to the embed code.

Tweet limit: To fix the size of a timeline to a preset number of Tweets, use the data-tweet-limit="5" attribute with any value between 1 and 20 Tweets. The timeline will render the specified number of Tweets from the timeline, expanding the height of the widget to display all Tweets without scrolling. Since the widget is of a fixed size, it will not poll for updates when using this option.

Chrome: Control the widget layout and chrome by using the data-chrome="nofooter transparent" attribute on the embed code. Use a space-separated set of the following options:

  • noheader: Hides the timeline header. Please refer to the timeline display requirements when implementing your own header.
  • nofooter: Hides the timeline footer and Tweet box, if included.
  • noborders: Removes all borders within the widget (between Tweets, cards, around the widget.) See also: border-color.
  • noscrollbar: Crops and hides the main timeline scrollbar, if visible. Please consider that hiding standard user interface components can affect the accessibility of your website.
  • transparent: Removes the background color.

Border color: Change the border color used by the widget. Takes an #abc123 hex format color e.g. data-border-color="#cc0000"

Visit the Twitter documentation forEmbedded Timelines for more information.