TEMPLATIS

I thought I’d share a useful tip on how to place your latest tweet or tweets into an HTML page. For example, see the footer bottom right of this iPhone app website template. It’s very simple. First you’ll need to reference some javascript:

<script type="text/javascript" mce_src="http://twitter.com/javascripts/blogger.js"></script>
<script type="text/javascript" mce_src="http://api.twitter.com/1/statuses/user_timeline/templatis.json?callback=twitterCallback2&amp;count=1"></script>

Paste these two lines anywhere within your HTML. Before the closing </body> for example.

Place your chosen twitter username in place of “templatis” (before .json), in the second URL. The other thing you might want to change is the number after “count”. This changes the number of tweets displayed. For the last two tweets, instead of just the last one, change to “count=2″.

Next you’ll need to place the following code, wherever you want your last tweet or tweets to appear:

<div id="twitter_div"> <ul id="twitter_update_list"> <li>&nbsp;</li> </ul> </div> You can now style your HTML using your CSS style sheet.

That’s it! If you use this tip, please tweet, like or otherwise share it. Give us credit!

Good luck!

To add importance to a CSS style, append “!important”. This will overrule any non-!important style re-definitions below, in most browsers. For example:

h1{
color: pink !important;
color: gold;
}

In this CSS !important example the h1 color will display in your web page as pink, because adding “!important” is telling the browser that the pink style is more important than the gold style.

Hacks are inadvisable, but if in urgent need, or for experimental reasons, here is how to target ie7 using CSS. To target ie7 and below, with a hack, add “*″ to your CSS style, before the property declaration. For example:

body{
*color:blue;
}

Using this CSS styling, the blue color property will target the ie7 browser and below only.

Hacks are inadvisable, but if in urgent need, or for experimental reasons, here is how to target ie8 using CSS. To target ie8 and below, with a hack, append “\9″ to your CSS style. For example:

body{
color:red\9;
}

Using this CSS styling, the red color property will target the ie8 browser and below only.

Here is a useful tip to target ie6 only, in your CSS stylesheet…

To target ie6 only, in your CSS stylesheet, add an underscore before the relevant property. For example:

#target_element{
padding: 6px; /* will be interpreted by all browsers */
_padding: 3px; /* will be interpreted by ie6 only */
}

Of course, it is inadvisable to unsparingly use such tricks as this will interfere with validation, but this tip has its development uses.

Here at TEMPLATIS we like valid code, indeed all of our web templates are fully valid; and so, on the occasions on which ie6 is misbehaving, we favor an additional stylesheet, placed in the header section of the html file, for example:

<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->


Try it out!