Grow your CSS skills. Land your dream job.

How To Style Twitter Widget

  • # July 4, 2013 at 10:44 am

    Hello I would like to know how to create custom theme color for twitter widget. Instead of the default theme light and Dark.

    I want to change theme style to #005CB9 http://codepen.io/mwbcomputers/pen/ADahj

    # July 4, 2013 at 10:59 am

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

    > ## Customization Options

    > Embedded timelines are available in light and dark themes for customization. The light theme is for pages that use a white or light colored background and follows the twitter.com aesthetic, while the dark theme is for pages that use a black or dark color background and looks more like Tweetdeck.

    > As with your twitter.com profile, you may choose a custom link color for your embedded timelines so that the content matches the links of your website and feels integrated into the color palette of your site.

    > 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, we offer a set of additional client side customization features. These settings allow you to control the background color, borders, header, and footer of the timeline, and are detailed in the “Client Side Options” section below.

    # July 4, 2013 at 11:00 am

    So you’re pretty much stuck with light or dark. If you want to style things differently, you’ll need to avoid using the embedded timeline and do something like this: http://jasonmayes.com/projects/twitterApi/#sthash.7onsZuyu.dpbs

    # July 4, 2013 at 11:30 am

    @TheDoc

    I might pay one of my developers to custom make it then. They don’t give the every day person much choices.

    # December 21, 2014 at 3:42 am

    Guy, the original twitter widget has loads of limitations. There is few great js scripts that can pull widget data from twitter without having to use the default widget markup & styling:

    Customize Twitter Widget

    CodePen demo

    So far I think this is the best method and works fine with 1.1 API

Viewing 5 posts - 1 through 5 (of 5 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".