Use CSS and CSS3 to create and style widget or page elements
bobleah 270000CN12 Comments (2) Visits (33251)
Here is the HTML:
Here is the my-recent-tweets CSS class:
I have created the following CSS to style these basic HTML elements into something that better fits my intended purpose. You can also update this CSS to create additional styling for your own twitter custom widget.
Here is the CSS for the innerHTML elements returned by Twitter:
Now using the same "my-recent-tweets" style class, I will create a time line widget with a different look & feel. In this new example I have increased the number of tweets returned to "3". I also modified the style class "my-recent-tweets" to provide additional curvature of the widget corners, a bolder color radiant, and deeper shadowing of the widget itself.
The reason my class contains both -moz and -webkit elements is to provide support for Mozilla and Safari web browsers. Microsoft does not offer an equivalent kit at this time. As a result, the style class will not appear exactly the same in IE, however it does degrade gracefully. Fortunately, Microsoft does provide a filter gradient, so this major visual element does carry across to all modern browsers.
You may be questioning why I have included a plain background-color element in the class, since I'm also setting a background gradient. This is to enable older browsers that do not provide the supported functions to still have a default background, in place of the gradient. It is important that you take into account that some users will not have the latest and greatest browser level, so you should provide for a graceful degradation of the experience whenever possible.
Updated gradient elements of my-recent-tweets CSS class:
Updated radius and shadow elements of my-recent-tweets CSS class:
As I have demonstrated, the ability to re-style the wrapper and re-purpose the widget is a simple mark up exercise. Rather than go line by line into each property of every element within my class, I have provide the full HTML You can experiment directly by tweaking the style class yourself, by downloading the complete HTML of the above example.