A Great Blog

Putting a "Share This" button in a blog post

2010-01-18T05:25:00.000-08:00

Social networking icons and buttons have become a common feature in blogs. This in turn makes it easier to promote blog posts organically, improve SEO (search engine optimisation) and generally make your blog a more friendly place for regular readers. There are a number of different social networking icons which can be added to a page. Some authors prefer to use their own custom icons, whereas other prefer to use a widget or module. This post will focus on a ready-made module of buttons, but the same procedure can be applied to custom buttons as well.

Step 1

Go to http://www.addthis.com. Under the setup options, ensure website is selected, choose a button style, leave analytics unticked and then click the large "Get Your Button" code. The button code comprises of three lines of HTML code. The first and last lines are simply comments. The middle line creates a link which contains a small image and javascript code to perform the required bookmarking action. If you want to, you can also signup and get a button script which has the addition of analytics support. This later option is very useful if you want to track activity on your blog and get a rough idea of who is bookmarking or sharing your articles.

Step 2

In RapidWeaver, open your blog page and paste the code into a blog article. For the sake of keeping things simple for end users, it is probably advisable that the code goes into the blog entry body, rather than an entry summary. This way users will only be bookmarking individual articles, instead of an entire blog summary page. Having too many buttons on the same page may be confusing, and ultimately makes your page look cluttered.

Step 3

Highlight the code in RapidWeaver and go to Format > Ignore Formatting within the menu. In preview mode, this will highlight the code pink and ensures that any styling in the code such as line breaks are hidden. This step will help keep your content looking uniformed and well presented within a page.

Step 4

When your site is exported locally and previewed, the button should now be functioning correctly. However, there are a few cosmetic improvements which can be made to change the position of the share button and prevent it taking up an entire line. Buttons like the "Share This" button have selector names, so it is possible to use custom CSS code to change styling.

Step 5

To prevent the button taking up an entire line, enter this custom CSS code below. This changes the default width from 100% (a block element) to a constrained fixed width:

.addthis_button {
    width: 130px;
}

The exact width setting you use depends on the button size you are using. Utilities such as Pixelstick can be used to measure elements on a screen.

Step 6

A common place for social networking buttons within a blog is the space to the right of an entry title and date. The following code will work in some RapidWeaver themes, but not others.

.addthis_button {
    width: 130px;
    position: absolute;
    top: 0px;
    right: 0px;
}

In order for absolute positioning of an element to work, the element must be inside a container with a relative position. Themes which have a .blog_entry container with a relative position set via CSS will work fine. If your theme does not have this style applied, you can apply it yourself using this custom CSS code:

.blog-entry {
    position: relative;
}

The end result

A "Share This" button in a blog page of the Wilderness RapidWeaver theme.

Other information

This tutorial just covers a single type of bookmarking service. Roughly the same procedure should be followed when incorporating other types of buttons within a blog post. The exact CSS code required varies depending on the button size and theme you are using. Absolute positioning enables you to float a button anywhere in the blog content area, but does rely on the outer .blog-entry container having a relative position applied. The custom CSS code can either go in the custom CSS box under the page inspector, or it can be pasted into a styles.css or custom.css file (depending on the theme you're using). The steps outlined above are applicable to the Blog page plugin supplied with RapidWeaver and the RapidBlog plugin by Loghound Software. Both plugins share the same CSS code and many container names.

Create a simple stripe background in Pixelmator

2009-12-05T14:22:00.000-08:00

Stripe backgrounds and gradient backgrounds have become a popular trait in modern web design. Although there are quite a number of online services for rolling out your own stripe background, using an application like Pixelmator gives you a bit more control over colours and some users may find it easier. Now that Pixelmator supports the export of images to the web, the process is even easier. This tutorial will show you how to create a basic stripe background which can be tiled across a website background.

Step One:
Launch Pixelmator. At the opening window, click to create a new image. In the new image dialogue window (pictured below) set the width and height to 4px. Ensure resolution is at 72 pixels/inch which is the standard for all graphics on the internet. Although it may seem a bit silly to be working from such a tiny canvas size, because this is such a simple graphic, there is no need to work from anything larger.

Step Two:
With the new image canvas open, press option + repeatedly until the canvas cannot scale up in size any larger. You may need to resize the window a bit like below.

Step Three:
In the toolbar, click the foreground colour square. In the colour picker dialogue window, click the crayons tab and choose a dark colour like lead (#191919). Press N (to switch to bucket fill) and apply this colour to your canvas.

Step Four:
In the toolbar, click the foreground colour square. In the colour picker dialogue window, click the crayons tab and choose a slightly lighter shade of colour like tungsten (#333333). Press P (to switch to the pencil tool). Go to View > Show Brushes (if the brushes window is not already open). Click to select the smallest brush size available.

Step Five:
Click and pencil 4 points diagonally across the canvas as shown below. You can either have the stripe running from the top left or bottom left. The choice is yours and will govern the direction stripes run in.

Step Six:
Go to File > Export for Web... from the Pixelmator menu. Set the format as JPEG and put the quality slider right up to 100%. Note that even though the quality is maximum, the image file size is absolutely tiny making it perfect for use on the internet. Save the image with a web safe name such as body_bg.jpg so you have a good idea what this file is after it has been uploaded.

Step Seven:
Use CSS to apply a background to a web page. The standard code is this:

body {
    background-image: url(http://www.example.com/template/images/body_bg.jpg);
}

Obviously you would need to change the URL between the brackets in the above code to point to the place where your background image is stored on your web-server.

If you are building a website using software such as RapidWeaver, this background image can be stored in the theme contents. Most themes normally contain an images folder in the theme contents where all images and icons relating to a theme are stored. Use the following CSS code in RapidWeaver to add your new background image:

body {
    background-image: url(%pathto(/images/body_bg.jpg)%);
}

Whenever the %pathto()%
syntax is used in RapidWeaver, the link to your image will automatically be entered, regardless of theme name or website URL. Whichever code you use to set a background image, the image will automatically tile. This CSS code is supported by all major web browsers.

Advanced tips
This tutorial just covers the absolute basics of creating an attractive stripe background for a webpage. It is completely feasible to use a larger canvas size to generate wider stripes or use a thicker pencil tool. Bare in mind that when using a tool such as Pixelmator, you have complete control over colours. This will enable you to create a stripe background effect which matches an existing theme or colour scheme.

Completed Example
Following the steps outlined in this tutorial, the completed background will look like this when applied to a webpage.

In this example, the stripe background effect was applied to the Composition RapidWeaver theme. These finishing touches may only be minor, but they certainly make a website design look far more 'polished' and professional. The size of the background image used means that the page still continues to render very quickly and the background will tile automatically to fill any resolution of monitor. Note that a similar stripe technique was used in the Pixelmator website, albeit a more subtle stripe colour was chosen.

Spacer Stack screencast available

2009-11-24T07:00:00.000-08:00

My thanks to Ed Brenner and the other members of SupportCasts who have kindly put together a free video on using the spacer stack for RapidWeaver. As explained in the video, this is probably the most simple third-party stack available for the Stacks plugin. The purpose of the stack is to insert a whitespace and help divide pages up into blocks of content which are then easier to read. Whitespace is often a bit scary at first -- the concept of empty space within a commercial website may not immediately seem a sensible idea and breaks traditional rules. But as any modern web designer or developer will (should) tell you, whitespace is key in outputting pages which engage the reader and make a website a pleasant place to visit. An excellent article was written here on A List Apart talking about this concept of whitespace. This is also a topic Smashing Magazine regularly visit and make reference to.

This spacer stack was originally developed for a client I had made a bespoke RapidWeaver theme for. The website in question was looking great, with most pages having been setup using the Stacks plugin. But some of the pages were looking a bit sparse at the time of launch, and text was hunched up in the top left corner. Increasing padding around stacks was not really an option because only a maximum of 20px could be applied and this padding got applied to all sides of a stack, which in turn forced elements into a more central position. So in the course of about 5 minutes, I threw together this quick stack which would insert empty boxes into a stacks page. Combined with some columns, the result was excellent. Later I added some settings under the stack inspector. So it is now possible to customise how high this box is, which in turn adjusts the amount of whitespace between two horizontal elements.

It would be safe to say that I now use this stack more than any other stack. I think I have used the spacer stack on just about every stacks page of the ThemeFlood website and used it multiple times where I have inserted whitespace between theme preview images. For such a simple stack, it is very useful and prevents having to tediously give every element in a page selector names and messing around with CSS code etc.

You can watch the full video here: http://supportcasts.com/spacer-stack-free-show/

Theme Fridays - a new RapidWeaver theme (almost) every Friday

2009-10-30T07:58:00.000-07:00

Starting today I am releasing a new freeware RapidWeaver theme nearly every Friday. The truth be known that I've got a large number of RapidWeaver themes which have either been developed to test new features for commercial themes or have simply been developed to make decent themes. Most of these themes will gradually be released for free under the Creative Commons Attribution license so users will be able to download and use these themes for both personal and commercial use. Of course the only stipulation is that any copyright marks or attributions remain in place - but that seems a pretty fair policy. If you do want to remove attributions or have themes customised then you can contact me and we can come to some arrangement.

There is a whole variety of different themes set to come. Some are very clean and minimalist in taste, others are more graphical in appearance. Although most of these themes don't contain any colour settings or style settings, these themes can be custom edited yourself if required. They are also fully compatible with all major web browsers (including the notorious Internet Explorer 6). Each theme uses valid CSS and valid XHTML code.

New free themes will be appearing on the ThemeFlood website on a weekly basis (normal on a Friday). It is not my intention to formally announce these themes in places such as the RapidWeaver forums because there would ultimately be a huge number of announcements otherwise! But if anyone wishes to share information regarding theme availability or blog about new themes, then feel free to. If you want to be one of the first to download each new theme, follow me on Twitter where every announcement will be posted.

Here is the all important link: www.themeflood.com/freeware.html

News Media RapidWeaver theme launched

2009-10-25T04:43:00.000-07:00

News Media sets a new standard in RapidWeaver theme development. This theme picks the best features from world renowned media websites, and combines them with modern web technologies to deliver this minimalist yet highly customisable RapidWeaver theme.

Packed with professional features giving you the power to develop stunning sites which are both flexible, well structured and highly functional for end users. Features never-seen-before elements like style switchers, horizontal scrolling menu bars and optional mega-menus.

Preview and purchase the News Media theme here

News Media supports up to 10 levels of navigation using a combination of auto-scrolling horizontal menu bars and standard block navigation containers. This enables developers to build much larger, categorised websites which remain easy for end-users to navigate through.

Fifteen Extra Content containers allow positioning of content in parts of the theme outside of normal editable area’s. This is perfect for text, links, pictures or banner adverts. Use the ‘Preview Extra Content Containers’ function in the theme to see where Extra Content containers are rendered.

A wide selection of colour and text formatting settings make customising your design simple and safe. Font faces, letter spacing, line heights and text sizes can be modified within the theme style settings giving you a consistent appearance and clean code every time.

There are numerous sidebar options in this theme. Choose between various sidebar widths and positions. Options include single traditional sidebars, double sidebars or 'tramline' sidebars which straddle either side of the content container and make use of Extra Content. Alternatively set the sidebar to hide.

True cross-browser compatibility is offered without all the normal hacks and conditional comments common in themes. News Media will work equally as well in Internet Explorer 6 as it will with the latest versions of Safari and Firefox. An optional IE6 PNG fix is available.

Minimum HTTP requests and file sizes, result in low bandwidth and pages which load quickly. A basic non-cached webpage using the News Media theme weighs in at under 150KB using the default style settings.

News Media has the new opensource BBC Glow API built in, allowing advanced users access to add powerful AJAX features specifically developed for media websites. Alternatively you can use jQuery to add new features such as content sliders, news tickers and carousels. Some of these are also available as Stacks and snippets.

Supports all of your favourite RapidWeaver plugins: Blog, Collage, FAQmaker, File Sharing, HTML Code, Lockdown, PayLoom, Photo Album, PlusKit, RapidAlbum, RapidBlog, RapidFlickr, RapidSearch, Sitemap, Stacks, WeaverBox, WeaverPix, and WeaverFM to name a few.

Built-in support is provided for Cushy CMS (Content Management System) which allows you or others to login and update both general and sidebar content outside of RapidWeaver. Full documentation is included with information on how to switch to another CMS, such as Surreal or WebYep if preferred.

HTML 5 is the next version of HTML currently being developed. News Media starts to use some basic HTML 5 naming conventions for various containers which should make any future upgrades easier and less destructive. You will also find most of the source code in News Media thoroughly commented for easier custom editing if required.

News Media is SEO (Search Engine Optimisation) friendly. Items like headers, slogans and titles are wrapped in header tags to increase their prominence. Content containers, Extra Content containers and sidebars are easily readable by search engines. Site titles and logo images automatically link back to the designated homepage.

Miscellaneous settings allow you to extend your creativity. Add background gradients, capitalisation to headers, increase page margins, hide certain elements or apply backgrounds to your site title container. News Media is compatible with RapidWeaver MultiTool and RapidWeaver Theme Miner for easier custom editing.

News Media is the first ever RapidWeaver theme with support for mega-menus. Set up the mega menus using a provided code snippet or stack, and use code, styled text or the @import function in PlusKit (not supplied) to add content to your drop down menu’s. Full instructions are included.

The theme features an optional style-switcher so visitors to your website are able to switch to a preferred colour scheme or increase text size / contrast etc. The style-switcher uses cookies, so when a visitor returns to your site, their chosen style is loaded as the default. You can edit the available styles with HTML and CSS code or set up your own styles.

Use the optional search function to provide site visitors with the ability to easily search your website and easily find the information they are looking for. The search function in this theme integrates with the RapidSearch plugin (not included) so you can have a basic site search function setup within minutes. Two positioning options for the search bar are included.

Finding help for using this theme has never been easier. News Media has a built-in user guide, plus a version tracker to notify you when any theme updates are available. Just tick the “View User Guide” under the theme settings and follow the on-screen instructions.

What sort of RapidWeaver projects is the News Media suitable for?
News Media is the perfect candidate for professional blogs, company intranets, education websites and news websites. The theme opts for a clean and minimalist design, but also places maximum emphasis on website content. This is a theme geared towards high-traffic, heavy-content websites and can be extensively customised for client requirements. All CSS and XHTML code is valid throughout and advanced features degrade safely on older web browsers.

There are indications that some international news organisations will be moving to subscription-based user access for their news websites in 2010. While regarded as controversial with wait-and-see result - it is more than likely that the public will instead seek alternative small independent websites and blogs to continue obtaining their free news and information. The News Media theme in combination with RapidWeaver, provides the perfect kit to set up any small-scale media website or blog. In addition the theme can also be utilised for any website that is content oriented and geared towards client updating.

Installing stacks in RapidWeaver

2009-10-11T04:17:00.000-07:00

Since I started uploading a selection of free stacks to the ThemeFlood website, a number of people have been downloading them. Quite a few people have not downloaded new stacks before, so the installation process is confusing a few people. Unlike RapidWeaver themes, plugins and snippets, stacks do not install themselves. Each stack is formed of a standard folder called widget.stack or similar. Once this is downloaded an un-zipped, it must be installed manually into the correct folder in order for stacks to see it and add it to the stacks library.

All stacks should be copied over to ~/Library/Application Support/RapidWeaver/Stacks/ where ~ is the name of your home directory.

Here is a quick video to illustrate this better:

Screen Recording - Computer

Setting up Feedfriend in a RapidWeaver project

2009-10-08T23:59:00.000-07:00

I'll admit I'm not much of a social networker! I'm proud to have been one of the first onboard the Twitter train, and indeed I use Twitter as an effective business tool. But as for the whole facebook / myspace malarkey, to be honest this is just kids-play in my eyes and not something I can be bothered with. A client recently asked me to setup a FeedFriend widget in the sidebar of their blog. Friendfeed, unlike feedburner, is not a service I had previously heard of or come across so I had to quickly research this service and signup for an account. It is not very clear from the FriendFeed website what this service is or how it works. But basically FriendFeed is another form of social aggregator. Its purpose is to fetch information from your other social hide-outs such as Twitter, Blogger, Facebook, Tumblr, Delcious, Digg, Flicjr, Last.fm, and YouTube to name a few. When you post information to any of these services, FeedFriend pulls this information into a single consolidated list. This list of postings is sorted into date / time order and other FeedFriend members can subscribe and post comments. As of August 2009, FeedFriend has since been purchased by FaceBook.

Much like many social networking services, FeedFriend provide a widget (what we used to call HTML code) to paste into a website. This fetches your FeedFriend feed to display on a website for all to view. The code loads the FeedFriend content insider a rather gory looking window which has obviously been optimised for Internet Explorer 4. However as this article explains, it is possible to customise the FeedFriend widget so it works more in harmony with your chosen RapidWeaver theme.

Step 1
Log in to your FeedFriend account. Next to the search bar at the top, click on the blue Tools button. Under the tools section, scroll down to the sub heading "share your feed" and click the Embeddable Widgets link. Next you want to click the Feed Widget link which will land you on a page similar to the screen capture below:

Step 2
Choose how many entries are to be displayed. Five is the default value, but more active users may want to display more entries. It is recommended you untick the Logo and Subscribe link options. Ensure the Javascript option is ticked under the format section.

Step 3
Copy and paste the generated code snippet into the sidebar container of your RapidWeaver project or into the main content container. If pasting into a styled text input box, it would be recommended you highlight your code and go to Format > Ignore Formatting in RapidWeaver to clear away miscellaneous line breaks and other formatting.

Step 4
FeedFriend allow you to customise the appearance of your FeedFriend widget further using CSS code. Details of the selector names they use can be found here. This code should be entered into your custom CSS box under the Page Inspector in RapidWeaver. FriendFeed have incorrectly suggested that items such as font sizes should be implemented using point dimensions. This is incorrect and percentage or em values should be specified instead.

Tips:
Once you have confirmed your email address for using FriendFeed, options like the commenting should work. If you have set your FriendFeed to private (so others cannot view it) the widget will not work because access to it will be blocked.

Is it worth it?
The main advantage FriendFeed offers RapidWeaver users is the ability to consolidate many sources of social information into a simple digest with options for other FeedFriend users to comment on your entries. I think most people would probably prefer keeping content from different sources separate and easily distinguishable for readers. But if you are limited to space or unable to use some of the excellent social networking stacks available, then FeedFriend is a promising solution.

Using the @import function in PlusKit

2009-08-22T13:18:00.000-07:00

PlusKit is one of the most useful RapidWeaver plugins you can get and offers a single plugin with many different functions for improving projects. Probably the most frequently used function in PlusKit is ‘@import’ which gives you the ability to import the content of one page into another without the use of iFrames. Lets say for example you had a Twitter feed created with Stacks, you could use PlusKit to display that Twitter feed on another page such as a Blog or Styled Text page. It is a very useful function to have if you are working with lots of different page styles. Not all pages are compatible with PlusKit due to the way they are setup. But if you can work around this list of non-compatible pages, it is a fairly easy function to setup.

Step 1
With your RapidWeaver project open, go to File > Add Page in the RapidWeaver menu. From the list of plugins you have installed, select PlusKit. If you don’t see PlusKit on the list, you will need to download and install it from the Loghound Software website: Restart RapidWeaver for PlusKit to become available in your list of installed plugins.

Step 2
Rename your PlusKit page from untitled1 to something like PlusKit. Although this is not essential, it may stop you from accidently deleting the PlusKit page from your project. Each individual RapidWeaver project only requires 1 PlusKit page and this should be kept hidden. A hidden page will be dimmed out in the RapidWeaver page list.

Step 3
Switch RapidWeaver into edit mode. On the page you want to import content, enter the following:

This code can either be entered in the main content container of a page or in a sidebar. The choice is yours depending on where you want the content to be shown.

Step 4
Between the double open and close brackets, type the name of the page you wish to import. Page names are case sensitive so a page named Twitter Feed would be entered like this:

Step 5
Switch RapidWeaver into preview mode. The rendered content should then be visible.

Taking things a step further:
Some third-party RapidWeaver themes support the use of Extra Content which allows you to position content outside the normal editable bounds of a RapidWeaver theme or apply specialist styling. It is possible to use the @import function in conjunction with Extra Content. If for instance you had an Extra Content container named 4 which you wanted to put your Twitter feed inside, you would enter the following code in the sidebar:

<div id=”myExtraContent4”>

</div>

And you will find your @import function continues to work fine. Likewise if you are using the Stacks plugin by YourHead software, you will find that entering the @import code in a suitable stack produces the same results. It is this degree of flexibility that makes @import such a useful feature in PlusKit.

Create a stacks clipboard

2009-08-15T12:49:00.000-07:00

I am not going to hide the fact that Stacks (by YourHead Software) is probably my all time favourite RapidWeaver plugin. For those unaware of this plugin, Stacks enables you to quickly and effortlessly build professional looking pages which otherwise would have to be coded by hand using HTML and CSS.

Quite often when you are working with Stacks, as your layout comes together, you find yourself in a position where something doesn't look quite right on a certain page. Rather than delete stacks and remake them on another page, a trick I have adopted is to create a 'clipboard' page to stash my spare stacks in. This keeps them stored safely within the RapidWeaver project until I can find a use for them. You can also use the clipboard to store configured stacks in so they can be quickly copied to other pages. Here I will show you how to set up a clipboard page in your project to store stacks in and copy and paste stacks between pages.

Step 1:
Add a new Stacks page to your RapidWeaver project. Rename this page something like "Stacks Clipboard" or similar. Give it a short and relevant name so you wont accidently delete it.

Step 2:
While on your stacks clipboard page, open the RapidWeaver page inspector and click the general tab. Un-tick the first two options which are "Enabled" and "Show in menu". This will prevent your stacks clipboard being visible and showing in the navigation menu.

Step 3:
Stacks does not have a copy or paste button. But the standard copy and paste keyboard shortcuts in RapidWeaver work fine. In one of your stacks pages, click into edit mode and single-click the stack you want to make a copy of. It should be highlighted with a blue dotted border as shown below. Press the keyboard shortcut CMD and C to copy the stack.

Step 4:
Switch into your stack clipboard (remaining in edit mode) and single-click somewhere on the page. Then press the keyboard shortcut combination CMD and V to paste the stack into the clipboard. The pasted stack is normally rendered at the bottom of the stacks page, but you can click and drag it anywhere else in the page. Note that you can also copy and past stacks between RapidWeaver projects, so if for instance you have two projects open in RapidWeaver, you could copy a stack from one project into the other.

Another quick stacks tip:
Stacks makes use of some rather large inspector windows. On a small screen or when RapidWeaver is close the the screen edge, these inspector windows can be partially obscured by the screen edge. Clicking at the top of your stack inspector window (imagine there was a window title bar there) and dragging the inspector will 'snap' it off the stack and leave it free-floating on your screen. To close the stack inspector again, just click outside the stack inspector to minimise it again.

The do's and don'ts of modern web design

2009-07-26T12:01:00.000-07:00

An excellent new resource worth bookmarking. The aptly named "Do's and Don'ts of Modern Web Design" offers a good range of tips and tricks with the aim of improving websites. The site is split into "Do" and "Don't" categories for easy reading. To be honest, many of the points raised have been discussed for so long now, that good developers should be following them by now. But it helps to see a site like this where all the information is condensed into useful "told you so" sized pieces! Should be some good information here for designers and developers alike.

Setting up Mediabox Advanced in a RapidWeaver theme

2009-07-13T01:19:00.000-07:00

Mediabox opens Flash, images and webpages in a animated window which floats over the normal page. Typically these sorts of effects are known as modal windows. It is based on Slimbox and is powered by the MooTools Javascript Library. Mediabox is one of the most popular modal windows as it is compatible with a wide range of different web browsers and is one of the slickest and smoothest ones available. Some RapidWeaver themes already contain these types of effects, or you can use the excellent PlusKit plugin to easily add Lightbox or Fancyzoom to your site. However, most themes are not supplied with extra effects such as Mediabox as licensing can be prohibitive when themes are resold and the scripts used to generate the effects can slow down page loading and add to bandwidth. This short tutorial will show you how to add Mediabox Advanced to almost any RapidWeaver theme. Mediabox Advanced is the newer version which supersedes the original Mediabox version. Mediabox Advanced is harder to add to RapidWeaver themes than the previous version, so hopefully this short tutorial will give you an idea of how it's done.

Step 1
You need to do a little bit of research to begin with. If you are using a third-party theme which already features elements such as drop down menu's or Extra Content, you should check to see if the theme will support Mediabox. Search the RapidWeaver forums to see if anyone has tried in the past using your particular theme or contact the theme developer to ask. The difficulty is that Mootools (which is required by Mediabox) frequently conflicts with other scripts running in the theme. When conflicts occur, users on PC browsers like Internet Explorer will be greeted with ugly warning errors. The rest of us will find certain elements of the site fail to work. There are ways and means to overcome Mootool conflicts, but in reality it is just easier to avoid themes which inherently don't work with Mediabox. See the troubleshooting chapter in this article for further information.

Step 2
There are three files you need in order for Mediabox to work. Go to http://iaian7.com/webcode/mediaboxAdvanced and download Mediabox Advanced and Mootools. At this stage, it is also easier to download the Mediabox Advanced Black Theme. Save all of these files and folders to your Desktop. Regarding MooTools; you may find there are three different versions available for download. Two versions are compressed and have a smaller file size. There is also a non-compressed (development) version available which can be easily edited. As we will not be editing MooTool's itself, you should be fine using one of the compressed versions. Both compressed versions work fine with Mediabox last time I checked. There is no need to download JW Media Player or NonverBlaster.

Step 3

Open the theme contents of the theme you want to add Mediabox to. Always work from a duplicated theme if you are making any amendments to a theme. Create a new folder in the theme contents called 'mediabox'. Drag in your four downloaded files and folders. These files and folders often contain version numbers and complicated names which can be simplified. I always rename these files because it makes linking much easier. The picture below shows what I renamed my files to.

Step 4

In the theme contents, open the theme.plist theme. The best tool to use for editing preference list files is PlistEdit Pro, but there are some free alternatives available or you can just use a regular text editor. Under the RWCopyFiles section towards the top, add a new string with a value of mediabox. This step ensures RapidWeaver will publish the new mediabox folder and its contents to your web server. Save and close the theme.plist when done.

Step 5
Within the theme contents, open the index.html file in your preferred text editor. In the page header at the top, paste the following code in:

<link rel="stylesheet" href="%pathto(mediabox/mediaboxAdvancedStyles/css/mediaboxAdvBlack.css)%" type="text/css" media="screen" />
<script src="%pathto(mediabox/mootools.js)%" type="text/javascript"></script> 
<script src="%pathto(mediabox/mediaboxadvanced.js)%" type="text/javascript"></script>

This code loads the required files to make Mediabox load. Notice I always use RapidWeaver's %pathto% tag in instances like this to make RapidWeaver generate your links automatically based on the theme name and location where your website is stored. It is best to paste this code at the bottom of the header, immediately before the closing head tag. This limits the risk of MooTools conflicting with other scripts or libraries used in the theme.

Troubleshooting
In cases where the Mediabox does not load, carefully check all links in the files you have edited are correct. It is so easy to mistype file names and yet the Mediabox simply wont work. Use the activity monitor in Safari or the Firebug plugin in Firefox to identify which files are missing. Correct any broken links and try again.
If the Mediabox starts conflicting with other scripts or plugins, try moving the code in the header of the index.html file. Try putting links to Mootools after other Javascript links so it is the last script to be run.

If you follow the above steps, you will finish with a working Mediabox. Mediabox is very much a modular modal window effect and there are numerous plugins available for displaying other types of content like Flash video's or audio players. I've just covered the absolute basics here which is all that most people would require. Additional plugins tend to be more complicated to set up and add to bandwidth further.