I was asked on Freeway Talk how to style Tweets. I’ll add the notes I wrote here, though I do take on board this question and will be looking at giving ore freedom in a future update.

Styling the box and the tweets is fairly straight forward. The Action itself is a stand alone Action, so it won’t be directly styled - it was designed to be the marker where the Twitter feed goes, allowing you the freedom to do styling within Freeway itself.

So to create a background box of a set colour:

1 - Draw an HTML box

2 - Give it a colour

3 - Click in the box as if yuo are going to type something

4 - Go to Insert>Action Item>Twitter

5 - Resize the Twitter box to give your preview a fighting chance of being displayed (though the size of the Twitter box has no bearing on final code output).

You can, of course use other methods to style the box, my Text Box Decoration Action for example, or Freeway’s own box background effects.

To style the Tweets, you need to write a little CSS (I’ll no doubt look at expanding what can be done in a future update).

1 - Go to Page>HTML MarkUp

2 - Choose the Before </head> option

3 - Type the following:

<style type="text/css">
<!--
ul#twitter_update_list li { background-color: #ffff00; }
-->
</style>

Where #ffff00 is replaced by the colour of your choice. This will place each Tweet in a yellow box.

To increase the spacing between each tweet (at the moment it’s fixed to 8px) add the margin-bottom attribute to the CSS above, for example:

<style type="text/css">
<!--
ul#twitter_update_list li { background-color: #ffff00; margin-bottom:120px }
-->
</style>

This is a bit extreme, but you will be able to up the spaces between Tweets this way.

If you look at the source of the page the Action is on, you will see a lot of CSS rules. You can override or add settings to them using the methods above. Be sure to use the After </head> slot in the page markup so that if you do change a setting already made, the change will be used by the browser.

NB - the Twitter Action will not show these extra CSS edits in it’s preview.

The box below was styled using methods described on this page: