JavaScript: structure of a Twitter widget

In this post I'm going to outline the inner structure of a Twitter widget from the point of view of the DOM structure created by the JavaScript code. We're going to use the Profile widget, whose embedded code is shown below:

<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 4,
  interval: 6000,
  width: 'auto',
  height: 300,
  theme: {
    shell: {
      background: '#333333',
      color: '#ffffff'
    },
    tweets: {
      background: '#000000',
      color: '#ffffff',
      links: '#4aed05'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'all'
  }
}).render().setUser('yourusername').start();

This code generates a large amount of HTML elements. Most of them are presentational elements used to make the widget fit the page. They're as follows:

<div class="twtr-widget twtr-widget-profile" id="twtr-widget-1">

    <div class="twtr-doc">
    
        <div class="twtr-hd">
        
            <a class="twtr-profile-img-anchor" href="yoururl">
            
               <img class="twtr-profile-img" src="yourprofileimagepath">
            
            </a>
            
            <h3>Your Full Name</h3>
            
            <h4><a href="yourhomepath">your Twitter username</a></h4>
        
        </div>
        
        <div class="twtr-bd">
        
            <div class="twtr-timeline">
            
                <div class="twtr-tweets">
                
                
                    <div class="twtr-tweet">
                    
                        <div class="twtr-tweet-wrap">
                        
                        
                           <div class="twtr-tweet-text">
                           
                           
                               <p><a href="yourhomepath">your username</a> your tweet.</p>
                           
                           
                           </div>
                        
                        
                        </div>
                    
                    
                    </div>
                    
                    <!-- more tweets -->
                
                </div>
            
            
            <div class="twtr-ft">
            
            
                <div>
                
                    <a href="http://www.twitter.com/">
                    
                        <img src="widget logo path">
                    
                    </a>
                    
                    
                    <span>
                    
                        <a href="your home path">Join the conversation</a>
                    
                    </span>
                
                
                </div>
            
            
            </div>
            
            </div>
        
        </div>
    
    
    </div>


</div>

As you can see, we have a lot of CSS classes with the prefix twtr, so it won't be difficult to change the default layout of your widget by using CSS, provided that you respect cascade and specificity order.