Here is a demo of the microblog module in action in flat list mode and using FancyBox to display the content item in a fancyBox overlay.

{loadposition microblog}

Here is a screenshot of the settings available in the microBlog module.

The Microblog module in column mode.

{loadposition microblog2}

The Microblog module in leading intro plus list mode.

{loadposition microblog3}

The Microblog module in date Title mode.

{loadposition microblog4}

An explanation of the microBlog module settings.

General Layout.

Layout Type: This setting determines the layout of the content within the module. You can select between flat list, column, leading with links or Title and Date. See the demos on this page for an idea of the differences of these layouts.

Content Retrieval Settings

The settings in this block are the same as those found in the core Joomla modules for latest and popular news items. Select the category to display the items from, their order, the number of items and whether or not to display front page items.

Content Display Settings

Enable Date: This option determines whether the date is displayed in the module output.

Date Format: This option determines the layout of the date if the date is enabled in the setting above. You can select from the following date formats: 15 Sep, 09; Sep 15, 09; September 15, 09; 15 September, 09; September 15, 2009; 15 September, 2009; 15/09/09; Tuesday 15 September, 2009; Tue 15 Sept, 09.

Display content item in fancybox?: When set to yes each link in the content item will trigger the display of the content item intro and full text in a popup above the website. Please see the FancyBox settings below for further parameters for changing the appearance and behaviour of the fancyBox popup.

Title as a link: This setting means that all content item titles also behave as a link.

Display readmore link: If set to yes then the readmore link will appear in column, flat list and leading layouts.

Introtext Word limit: This setting sets the maximum number of words to appear in the output. This setting is only relevant for column, flat list layout and to the leading article in the leading layout option.

Allowed Tags: The html tags entered in this textarea are those tags that are included in the output of the intro text. You can use this to sanitise the output of the intro text eg remove tags that may become broken as a result of the introtext word limit above.

Items per row: This option relates only to the module when its in column mode and determines the number of content items that appear in a row before a new row is created.

FancyBox Settings

The settings in this block relate to how the fancyBox popup behaves and appears to the user. These settings are only relevant if the fancyBox option is enabled above.

Display the fancyBox title: This option when enabled displays the title of the content item at the bottom of the overlay.

Popup Gallery: When enabled this option links all content items for that module in a popup gallery that allows navigation between the content items.

Use the overlay?: This option enables a transparent overlay that floats above the main website in between it and the popup box.

Overlay Transparency: This option sets the transparency for the overlay. 1.0 is full opaque while 0 is invisible.

Overlay Padding: This option creates a padded buffer between the content of the fancyBox and the the edhe of the FancyBox popup.

Popup Width: Determines the width of the popup

Popup Height: Determines the height of the popup.

Image Settings

Overview.

What makes the Bamboo Box module different from other galleries is that you dont need to install other components or plugins and you can use your existing Joomla content to create a simple but effective way of presenting your artwork, photos or anything else that needs a gallery.

Here is an example of the Bamboo Box using a minimal grid layout:

{loadposition bamboobox}

Please note: The module references images in your content and then adds them to the module. If the content item does not have an image assigned to it then content item will not display in the BambooBox module.

Bamboo Box Features:

• Display unlimited number of images from your Joomla content items in a module
• Use the gallery as a traditional light box and display the full size image in a lightbox popup.
• Use the gallery to display the entire content item in a popup.
• Display More Details and View Image links beneath the image.
• Display the title of the content item the image is drawn from using the captify effect.
• Complete control over the resizing of the thumbnail image.

Some more examples of the Bamboo Box in action:

Clicking on the images below will display the image in the lightbox.

{loadposition bamboobox1}

Clicking the images below will navigate the user to the content item, while the more details link will launch the content item in a lightbox and the view image link will display the image by itself in the lightbox.

{loadposition bamboobox2}

The example below is a demonstration of the module being used as a navigation strip. Clicking the images will direct the user to the content item.

{loadposition bamboobox3}

The screenshot below displays the parameters available for the Bamboo Box module.

General Module Setup

Module Class Suffix - Use this setting to add your own unique styling to the module.

Thumbnail Settings

Width of the resized image
This setting specifies the width of the resized image.

Height of the resized image

This setting specifies the height of the resized image.

The width ratio of the image
This setting specifies the width ratio of the resized thumbnail image in relation to the height ratio.

The height ratio of the image
This setting specifies the height ratio of the resized thumbnail image in relation to the width ratio.

The width ratio of the image
This setting specifies the width ratio of the resized thumbnail image in relation to the height ratio.

Thumbnail Hover Effect
When set to yes this setting enables a fade effect on the thumbnail when the image is hovered over.

Content Display Options

1. Install v1.05 of the extended menu module if you havent done so already.

2. Publish the module to either the left, right or inset position depending on your layout configuration.

3. Disable the module title.

4. Select the menu you want to use.

5. Select flat list as the menu type.

6. Set expand menu to yes.

7. Set use menu template to yes.

8. Set the menu path to accordion/menu.html if its not already set.

Here is a snapshot of the settings used to generate the panel menu.

Parent/Child menus in Joomla - Setting up the drop down menu in Joomla:

In order for the drop down menu to have child items (eg items that are sub menu items of the main navigation items) you will need to set the menu accordingly in the Joomla backend.

1. In the back end of Joomla navigate to menu ---> main menu (or the name of the menu you selected in the previous step.

2. The top level or parent menu items are seperators rather than menu items. The setup for a separator is the same as a menu item except you are creating a separator rather than a menu link. Create the separator item and give it the name that you want to use for your top level item eg the item that opens the panel with the sub menu items underneath.

3. Write the name of the menu item.

4. Publish the menu item.

5. Set the parent item for the menu item. So if you want to have the menu appear on the main level of the menu then dont select anything here or make sure the menu item is set to top. If you want the menu item to be a sub level menu item then simply select the menu item that already exists that you want the sub level to appear under.

6. Configure any other options that may be relevant for your menu link.

7. Click Save.

If you have followed all of the preceding steps then you should have a sliding panel menu that saves its state from page to page. This means that if a specific menu panel was open on the previous page then it will be open on the subsequent page.

1. Background theme variations

{loadposition themes}

2. Typography Hilites

The typographical hilite option in the template administrator determines the colour scheme used for the headings and links in your text. The styles are stored in a separate css file in the css/styles folder in the template folder for easy access. The css files are named according to your selection eg styleBlue.css. You can select from the following typographical hilites:

• Apricot
• Grey
• Blue
• Green
• Brown
• Purple
• Pink
• Rose
• Warm

Template Theme parameters

Setting the colour scheme for your site is as easy as 1 - 2 - 3.

You can see an example of the jTweet script on the front page of the Strata demo site. Here is an overview of some of the features available for this module. Check the parameter settings below for a more detailed explanation.

jTweet Source Feed

• Choose to display your twitter feed, combine multiple feeds or a twitter query
• Display your twitter avatar or pick one of our fresh twitter icons.
• 3 different tweet templates and configurable join text options lend your tweets a unique voice.
• Embellish your compact module with a dynamic information popup, follow me button and custom messages.
• Experimental support for omitting @replies.

jTweet Styling

Here are some screen shots of the different styling available.

The optional bird icons will be displayed by the first first tweet in the stream while the optional avatar will display next to all tweets in the stream.

Parameters for the jTweet module.

Some screenshots of the different layouts in action.

Avatar Enabled

Multiple Streams

An explanation of the jTweet module settings.

General Module Settings

Module Class Suffix : A suffix to be applied to the css class of the module (table.moduletable), this allows individual module styling.

Module ID : A unique ID to be applied to the Tweets of this module. This allows multiple JTweet modules on a single page.

Twitter Source Settings

Display your tweets or query? : If set to displaying your tweets the module will feed off your recent tweets, multi-tweets will merge feeds from multiple users, otherwise if set to query it will display all recent tweets returned for that query term.

Twitter Username(s) : Your twitter username or usernames seperated by commas. eg; joomla, joomlabamboo, seaofclouds

Twitter Query : is the query term for twitter whose search results are displayed in the module

Tweet Count : specifies the number of tweets you want displayed in the module.

Tweet Layout and Display Settings

Twitter Icon : Choose from one of 5 different Twitter bird icons to display by the first tweet in the module. This icon also acts as a trigger for the popup when it is enabled.

Display Avatar : Choose to display or hide the user avatar before a tweet.

Avatar size : Can be set between 0 and 48 to control the size of the user avatar.

Display Twitter Name? : Option to display the twitter username with each tweet.

Twitter Name Action Text : is the text following the twitter name when it is displayed. This text is used to define the users action eg; 'tweeted'.

Display Source? : when set to yes will add the source of the tweet.

Tweet Source Preceeding Text : is the text preceeding the Tweet source. eg; 'from'.

Display linking text? : Display the intro text nominated below to preface your tweets.

Display Replies? : Choose to display direct replies to other users. This is an experimental feature that may result in reduced and possibly no tweets being displayed in the module. It is recommended to set the tweet count high when set to no.

Choose a Tweet Template : Lets you pick between 3 different layouts for your tweets. The various components will follow the order specified here if they are set to be displayed in the module.

Non verb text : auto linking text for non verb: i said 'surfs up'

Past tense text : auto linking text for past tense: i 'surfed'

Present tense Text : auto linking text for present tense: i 'surf'

Text for reply : auto linking text for replies: 'i replied to' @someone 'with'

Loading Text : Informative text that is displayed while tweets load

Additional Settings

Display Popup User Info? : This will display the twitter users information in a popup. This will be displayed only when a single user's tweets are set to show in the module. The popup is triggered by the optional twitter icon and the more info button below it. The popup contains a follow me link, the users avatar and following/followers/location information for the user.

More Info Text : is the text in the button below the twitter icon which acts as a trigger for the popup.

Popup Intro Text : is the introductory text within the popup.

Display follow text? : will set a follow me button below the twitter icon if no popup is set to show. It will link to the first user in the 'Twitter Username(s)' field.

Follow me text : is the text in the follow me button that links to the users twitter page.

The trigger for the panel automatically appears at the top right of the screen whenever any of these positions have modules published to them. You can control the text for the button that triggers the hidden panel in the template administrator. Changing the open text is as simple as changing a field in the template administrator.

Module Positions within the Hidden Panel;

Module position overview.

Heading 1

Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor. Donec congue. Morbi auctor hendrerit dui. Aliquam turpis. Maecenas molestie augue in urna. Donec gravida magna eget nulla. Phasellus sed pede et turpis mollis aliquam. Quisque aliquet pede nec turpis. Maecenas ultricies.

Heading 2

Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor. Donec congue. Morbi auctor hendrerit dui. Aliquam turpis. Maecenas molestie augue in urna. Donec gravida magna eget nulla. Phasellus sed pede et turpis mollis aliquam. Quisque aliquet pede nec turpis. Maecenas ultricies.

Heading 3

Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor. Donec congue. Morbi auctor hendrerit dui. Aliquam turpis. Maecenas molestie augue in urna. Donec gravida magna eget nulla. Phasellus sed pede et turpis mollis aliquam. Quisque aliquet pede nec turpis. Maecenas ultricies.

Heading 4

Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor. Donec congue. Morbi auctor hendrerit dui. Aliquam turpis. Maecenas molestie augue in urna. Donec gravida magna eget nulla. Phasellus sed pede et turpis mollis aliquam. Quisque aliquet pede nec turpis. Maecenas ultricies.

Heading 5

Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor. Donec congue. Morbi auctor hendrerit dui. Aliquam turpis. Maecenas molestie augue in urna. Donec gravida magna eget nulla. Phasellus sed pede et turpis mollis aliquam. Quisque aliquet pede nec turpis. Maecenas ultricies.

Heading 6

Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor. Donec congue. Morbi auctor hendrerit dui. Aliquam turpis. Maecenas molestie augue in urna. Donec gravida magna eget nulla. Phasellus sed pede et turpis mollis aliquam. Quisque aliquet pede nec turpis. Maecenas ultricies.

This is a paragraph with the first letter in a span class called dropcap.Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor. Donec congue. Morbi auctor hendrerit dui. Aliquam turpis. Maecenas molestie augue in urna. Donec gravida magna eget nulla. Phasellus sed pede et turpis mollis aliquam. Quisque aliquet pede nec turpis. Maecenas ultricies.

The following are simple colour stylings for divs and paragraphs.

This content is placed within a div with the class blackbox. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.

This content is placed within a div with the class greenbox. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.

This content is placed within a div with the class redbox. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.

This content is placed within a div with the class bluebox. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.

This content is placed within a div with the class yellowbox. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.

This content is placed within a div with the class brownbox. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.

This content is placed within a div with the class purplebox. Aenean sit amet sem. Phasellus rhoncus venenatis felis. Suspendisse iaculis mattis dolor.

This is some bold text.

This is some italicised text.

To apply any of these styles simply add the class of the colour that you want applied to your list.

• This is a list item with the class blue assigned to it.
• This is a list item with the class brown assigned to it.
• This is a list item with the class red assigned to it.
• This is a list item with the class green assigned to it.
• This is a list item with the class yellow assigned to it.
• This is a list item with the class black assigned to it.

And just to add some more flavour here are some colours for your spans.

• This is a span with the class blue
• This is a span with the class yellow
• This is a span with the class black
• This is a span with the class red
• This is a span with the class green
• This is a span with the class brown
• This is a span with the class purple

This is a code snippet if you want to highlight some text or code snippet. Just use the code class like this <p class="code">Insert your code here.</p>

This is a paragraph with the "new" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "attachment" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "calculator" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "cut" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "dollar" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "euro" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "pound" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "contact" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "sale" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "save" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "sound" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

This is a paragraph with the "support" class applied to it. Sed id eros iaculis tellus ultrices vehicula. Suspendisse sed urna consequat nunc condimentum sagittis. Ut laoreet turpis eget orci.

List Styles

The following are some handy links styles to apply to your links. You can apply the class to the list element like this: <li class="functionstyle">List item</li> or to the whole unordered list like this: <ul class="functionstyle"><li>My list item</li></ul>.

• A list with the class attachment. To use this style use the following html <li class="attachment">My list item</li>
• A list with the class calculator.To use this style use the following html <li class="calculator">My list item</li>
• A list with the class dvd.To use this style use the following html <li class="dvd">My list item</li>
• A list with the class cut.To use this style use the following html <li class="cutt">My list item</li>
• A list with the class dollar. To use this style use the following html <li class="dollar">My list item</li>
• A list with the class edit. To use this style use the following html <li class="edit">My list item</li>
• A list with the class euro. To use this style use the following html <li class="euro">My list item</li>
• A list with the class pound. To use this style use the following html <li class="pound">My list item</li>
• A list with the class home. To use this style use the following html <li class="home">My list item</li>
• A list with the class sale. To use this style use the following html <li class="sale">My list item</li>
• A list with the class save. To use this style use the following html <li class="save">My list item</li>
• A list with the class sound. To use this style use the following html <li class="sound">My list item</li>
• A list with the class support. To use this style use the following html <li class="support">My list item</li>

If you check the source output of your site (by clicking view --> source in firefox) you should see the following code references being output:

<script type="text/javascript" src="/joomla/1.5/elevation/media/system/js/mootools.js"></script>
<script type="text/javascript" src="http://localhost:8888/joomla/1.5/elevation/plugins/system/bambooLibrary/js/jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="/joomla/1.5/elevation/media/system/js/caption.js"></script>

You can see the first line relates to the mootools library that is output by default in Joomla. The next line contains the jQuery library that the plugin is outputting and the third line is the caption script that helps display the hints in the Joomla editor.

Why are we using this method for embedding jQuery?

By adding jQuery as a plugin we can add other jQuery plugins and scripts in our module son the fly. That means that there is no need to add script references to the head of your template and it also means that scripts only get loaded if the module is present.