Twitter: 5 themes ready for use to display on your site the latest tweet

twitter

We are now close to Christmas, this period is known, wherein the occurrence of the usual exchange of gifts among friends and relatives happen. And we did not want to be outdone so we started the week with a new free resource YIW license plate.

In Ivan‘s article- you’ve already had way to read the past week – you can see how to integrate and customize your latest tweet on your own site; Today, based on just that item, we decided to give five different themes already up and running designed and developed specially for you.

download
Versione: 1.0
Pubblicato: 17 December 2009
Dimensione: 861.04 kB
Download: Twitter Theme

Let’s take a look at the five Twitter themes

Before we look at how to integrate and personalize themes on your website, I would like you to read about the various characteristics which define each of the themes that are on offer.

Each theme is shown as a screenshot as well as through live previews which allow you to see in detail each of the distinctive elements that make up an individual theme.

Twitter Crazy

This theme is adorned by light colors and by a cute Twitter bird icon. This is ideal if you want to enrich your site in a joyous way and you are looking for a Twitter section that is lively and original.

01.twitter-crazy

preview

Twitter Baloon

The fonts and icon are displayed in a sketchy, balloon format: definitely a theme for youngsters but it can also be used for other layouts as it is very clean and adaptable.

02.twitter-baloon

preview

Twitter Pop

The warm colors of this theme are in perfect contrast with the blueness of the Twitter icon, and the font used is much more unique. These characteristics make this a lively and catchy theme.

03.twitter-pop

preview

Twitter Romantic

We couldn’t leave out a theme that is as sweet, light, and feminine as this one. Each unique detail emanates a sense of grace and sensuality. For example, the use of pink, the font ‘romantic style’, and the stylized Twitter icon.

04.twitter-romantic

preview

Twitter Christmas

For those who like to decorate their website with some holiday cheer. Following the release of a Christmas-hat rss icon and a stylized Christmas version of social networks, with this theme you can go ahead and personalize your Twitter space. It is a great way to wish ‘Happy Holidays’ to all the visitors of your site!

05.twitter-christmas

preview

Contents of Download Pack

The download package contains the following items:

  1. A source file in ‘PSD’ format : It is used to edit the five themes designed by Sara.
  2. Five folders, one for each theme, which contain all the necessary files for running each individual theme. The files that you will find inside each folder are the following:
    1. A HTML page: named (“index.html”) which loads the present theme.
    2. A folder named “images”: containing all of the images used by the theme.
    3. The style sheet used by the Theme, named “screen.css”.
    4. The “twitter.js” script which is configured with your personal visualization settings.
  3. A screenshot which contains a general preview of the five themes.
  4. A readme file which contains the license and credits.

Installation

The installation procedure is very easy and can be done following these simple steps:

  1. Download the file “twitter-theme.zip”, and unzip the file in a new folder.
  2. You will find each Twitter theme inside its own individual folder, just like in the picture below:contenuto.archivio
  3. Go to the folder which contains the Twitter theme you have decided to install on your site.
  4. Open the “index.html” file with your favorite editor, select the portion of code that you find highlighted inside the red rectangle (click on image below to zoom), then use the function copy & paste to insert the code in the exact place you want it to show on your website.
  5. codice.da.copiare.smallOpen the style sheet named “screen.css” and copy & paste the portion of code found between the comments, just like in the image below (click on image to zoom)
  6. codice.css.da.copiare.smallCreate a new folder with the name “images”.  Copy & paste the contents of the images folder that you find for each theme into this newly-created folder.

Personalization

In order to see the last “x” amount of tweets on your website, you must follow these steps:

  1. Find the following line of code inside your html file
    <script src="http://twitter.com/statuses/user_timeline/YIW.json?callback=twitterCallback&amp;count=2" type="text/javascript"></script>
    
  2. On this line replace the “YIW” string with your Twitter username
  3. On this same line, you can set the number of tweets that will be visible on your site. This can be done by modifying the “count” number, like in the image below (click on image to zoom):

personalizzazione.small

Furthermore, for other personal modifications each theme provides the following css classes:

  • ul#twitter_update_list {contains the total length span of the Twitter section as well as the background image that is shown at the top}
  • ul#twitter_update_list li { background color of main section is defined as well as other settings regarding each listed element}
  • .divisor {line that divides one tweet from another}
  • .data {the color that is assigned to the date}
  • .data:before {content added to area before the date by using this pseudo-class}
  • .data:after {content that is added after the date}
  • a:link, a:visited {color of the hyperlinks}
  • a:hover, a:active {color of hovering relative to hyperlinks}
  • #bottom {size and background image which ends the Twitter section}

If you want to edit the contents of the “twitter.js” script, please refer to Ivan’s article, where it is explained in further detail.

Release Notes

Content on this site is licensed under a Creative Commons License (CC 2.5 Attribution Italy).

Conclusion

I hope you will find these five themes to your liking and I would like to take this opportunity to ask you a few questions. Have you embedded Twitter inside your site or blog?

Is Twitter embedded on your website or blog? What is your opinion on the use of this social network?

Looking forward to reading your comments.

download
Versione: 1.0
Pubblicato: 17 December 2009
Dimensione: 861.04 kB
Download: Twitter Theme

Master per Web Designer Freelance
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »
[pdf]Scarica articolo in PDF[/pdf]
Tags: , ,

The Author

Nando is administrator of Edi Group, a Sicilian web agency founded in 2005. He deals with the development of web applications in php language and the implementation and administration of databases. And besides Microsoft Trainer with years of experience in regional and private training courses as a designer and lecturer.

Author's web site | Other articles written by

Related Posts

You may be interested in the following articles:

3 comments

Trackback e pingback

No trackback or pingback available for this article

Leave a Reply

Current month ye@r day *