Image Magnifier is a brand new Stack for Stacks 1.3. What it enables you to do is to display an image within a Stacks page. When a user hovers their mouse over the image, they can zoom in to see parts of the image in detail. The mouse cursor becomes a crosshair, and enables users to pan around on an image. This makes it a great stack for use in a variety of different projects. For example, on a shopping website it could be used to display products at a large magnified size. On an educational website, it could be used to display photographs or illustrations at a large size. Certainly this is a Stack with plenty of uses.

The Image Magnifier stack is based on the MooTools Zoomer plugin. It was converted to a Stack by myself and is available for preview and purchase from Greg Barchard's website. The stack comes complete with detailed setup instructions. But in theory, it is an easy Stack to use and can be setup with drag-and-drop simplicity.

It is compatible with a wide variety of RapidWeaver themes and confirmed to work with all major web browsers including IE6, IE7, IE8, Firefox, Safari and Opera. There are no limits to how many image magnifier stacks you have running in the same page. The MooTools Javascript library is called automatically via Stacks, and is delivered via the Google API's service for reduced bandwidth.

Personally, I think this is the best image magnification effect I've seen. Quite a few image magnification scripts you see online open magnified images in a separate box. This looks quite ugly and can make navigation tedious for end users. This Image Magnification stack works brilliantly, in that the magnified images remain inside the image container. Overall it looks neat and tidy. A worthwhile purchase for anybody looking to do more with their images in a Stacks page.

Drop-down menu navigation layouts have become a popular trend in modern web design. Although they are sometimes criticised by accessibility experts, generally they are favoured by both developers and site visitors and mimic navigation layouts found in common desktop software. However integrating drop-downs into websites is still a very challenging process. Many methods exist relying on a broad range of techniques and technologies. Integration in RapidWeaver is particularly difficult as page links get generated automatically and projects can be quite hostile places with any number of stacks or scripts running in the same page.

System7 is my own drop-down menu plugin developed from scratch specifically for RapidWeaver. I became very frustrated by the lack of decent drop-down menu scripts suitable for RapidWeaver. Existing scripts either had serious compatibility flaws or were completely bloated with messy code. It is called System7 because it incorporates 7 basic functions I deem to be essential for a drop-down menu in RapidWeaver:

1) Cross browser compatibility

The range of browsers and browsing devices in use now is quite daunting. At one end of the scale you have a decade-old version of Internet Explorer which can barely handle basic CSS code. At the other end of the timeline, browsers like Safari, Firefox and Opera pack in some serious technology and excellent support for web standards. It would be easy to say “no support for IE6”. But that is simply not an option for many I supply themes to. Fortunately System7 can handle all these browser versions without problem, and does so elegantly without any conditional comments or browser hacks, to keep things clean and future-proof. And it works on the iPad and iPhone really well.

2) Dynamic class selectors

A frequent request on the RapidWeaver forums is the ability to change the style of individual navigation links - to highlight particular pages for example. Currently this can only be done by wrapping links in span tags and using inline CSS. There is nothing seriously wrong with this, but it is not an ideal setup and does not work in many themes. What System7 does is to apply unique class selector names to all navigation links dynamically via the browser DOM. Using the Safari inspector or Firebug, it is possible to grab these selector names and apply custom CSS. Several style changes can be applied such as text formatting, fonts, colours and even icons. Apply styles to one or more links.

3) Ability to disable page links

If you’ve been studying existing drop-down navigation menus online, you may have noticed in many examples that the parent (trigger) link at the top is not actually a link to another page. Again this is something people had raised on the forums time and time again. But it has not been previously possible without constantly editing a site after publication, which is very tedious to say the least. System7 builds in support to disable navigation links, without actually hiding them. All that’s required is some basic HTML code in the page name to prematurely close a link, display static text and reopen the link tag to maintain validation.

4) Smooth and customisable animation

Lots of drop-down menus online are boring. They just have an option of open or close. This does not look particularly professional and the ‘had a go’ approach simply wont make the cut with professional designers and developers. System7 uses jQuery Javascript to create menus which fade in and fade out. Not only does this look and behave a lot better, but helps with site accessibility. The speed at which a menu fades in and fades out can be customised.

5) Intelligent styling

System7 can detect when a page link acts as a trigger for sub pages. It will automatically adjust padding and add either a downward facing arrow or a sideway facing arrow. This gives you the confidence to build more complex site layouts, without having to worry about menu structure. Everything is taken care of for you. There is no danger of padding or indicator arrows being misplaced where they are not required.

6) Fallback compatible

Apparently some loonies are still browsing the internet with no Javascript enabled in their web browser! Normally you would not get very far these days without Javascript - just about every major website and search engine relies on Javascript now. But it is reassuring to know that System7 will fall back to CSS-only mode, meaning the menu will still work in non Javascript-enabled browsers. Because menu links are created from a simple HTML unordered list, all links are perfectly accessible to search engines as well for improved SEO.

7) A true framework

System7 is not another ‘one trick pony’ jQuery plugin. It has been engineered to be expanded and built on. As well as powering basic drop-down menu’s, System7 has recently been used to power a full blown mega-menu in an upcoming RapidWeaver theme. It can be adapted and reused in various themes with excellent flexibility and robustness. RapidWeaver theme style and colour settings can be used, enabling end users to customise width and styles of drop-downs without any code.

Currently only the Media, Boxes Pro and Decorate themes have System7 built in. But there are at least four new themes in development by ThemeFlood which incorporate System7. Commercial agreements have also been made with a couple of other theme developers, so it is hoped System7 will find its way into other themes. The feedback so far has been very positive, many agreeing in full with the above merits. Although it is another one of these projects which has taken a huge amount of time to complete, hopefully System7 will provide many years of use, until we are at such as stage that CSS can be trusted to do everything.

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.



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.


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.


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.


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.




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.


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;
}





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


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.

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/

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 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.

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

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.

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.

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.