New Stack - ButtonMaker

ButtonMaker lets you create gorgeous, pure HTML and CSS buttons for your websites; in a variety of modern styles and designs. Everything ranging from flat Bootstrap buttons, glossy buttons, rounded-pill buttons, buttons with icons and background image buttons. Not only do these buttons look great, but they won't slow your page speeds down or introduce ugly compatibility issues. Buttons built with ButtonMaker work reliably in a broad range of RapidWeaver themes and web browsers. These buttons can be set as links to other pages in your website, external websites or social media. ButtonMaker is both quick and easy to work with. A fun stack, but one which will also save you time and money in the long-term.

A unique feature of ButtonMaker is the ability to export the code for your buttons. This means that you can build buttons in Stacks, but paste them into any other RapidWeaver page type. This innovative feature opens up brilliant opportunities to incorporate stylish buttons into parts of your website that are normally off-limits to stacks! Areas like the blog sidebar, ExtraContent containers, a contact form, a sitemap, website banner or footer regions etc.

For more information, please click here.

A short video has been published too, introducing you to ButtonMaker. It's published on YouTube and is subtitled.

All Packt eBooks and videos just $10

This month marks 10 years since Packt Publishing embarked on their mission to deliver effective learning and information services to IT professionals. To celebrate this huge milestone, Packt are offering ALL their eBooks and Videos at just $10 each for 10 days – this promotion covers every title and you can stock up on as many copies as you like until July 5th.


If you’ve already tried a Packt title in the past, you’ll know this is a great opportunity to explore what’s new and maintain your personal and professional development. If you’re new to Packt, then now is the time to try their extensive range – and they're confident that in their 2000+ titles you’ll find the knowledge you really need, whether that’s specific learning on an emerging technology or the key skills to keep you ahead of the competition in more established tech.

To take advantage of this excellent offer, click here. Your discount is applied automatically at the checkout.

Introducing the new HotSpotsPro stack

I’m pleased to announce the availability of HotSpotsPro today. As you may be aware, the free HotSpots stack was developed and released about two months ago, at request of a client to achieve some image maps in an important project. There was a lot of interest in the free stack, and it became clear through the RapidWeaver forums that there’d be interest in a paid ‘pro’ version with many more features and functionality too.

Although image maps remain a popular technique in modern web design, the ability to create them in RapidWeaver has somewhat dried-up in recent years. Rage MapDesign used to be the go-to solution for creating image maps to go into RapidWeaver; but unfortunately it’s no longer developed and quite unstable in newer versions of Mac OS X. The Points Of Interest stack was another option; but this too appears to be unsupported now. My hope with HotSpotsPro is that it can become the most feature-rich solution for building basic image maps in RapidWeaver.

The idea of an image map, in the simplest form, is to display a static image. Over the top of this image, there are then ‘hotspots’ positioned in specific areas. These hotspots can be visible or invisible. It’s these hotspot regions which can perform various tasks, like displaying tooltips on hover or opening content or other pages when clicked. Built correctly, a basic image map can promote a lot more user interaction with a web page and offer a fantastic method of navigation.


Development of HotSpotsPro has by no means been a walk in the park! I received a number of ideas and feature requests from many different people worldwide. Some of these were unachievable via the Stacks API and a couple of others conflicted with what others wanted! So as a result, in a few areas, things have needed to be re-thought and some small compromises were required. But hopefully the completed stack today meets nearly all objectives that someone building a basic responsive image map in RapidWeaver needs. A fine balance has been cut between providing plenty of useful features; while at the same time avoiding a stack that gives the illusion of being too complicated to use. The HotSpotsStack went through several revisions and a number of Beta builds; which allowed us to get feedback from actual users and perfect the stack for release today.

Some noteworthy features of the HotSpotsPro stack are as follows:
  • Support for up-to twenty hotspot regions, which should be more than adequate for most requirements
  • Completely code-free setup, coupled with live previewing of the background image and hotspots in Stacks edit mode
  • Search engine optimised, print friendly and valid HTML5 markup. No messy Javascript or Flash code
  • Option to display informational rollover tooltips left, right, above or below hotspot regions, and customise their size and colour
  • Hotspots can open a link when clicked or open content (like iFrames, images or video) in a responsive lightbox
  • Robust compatibility with all major web browsers and various different handheld devices
  • Lots of style options, including semi-transparent hotspot fills and various border styles. Support for both static and hovered states
  • Proportionate scaling of internal content (like Font Awesome icons) in supported RapidWeaver themes

HotSpotsPro is available to purchase from the Stacks4Stacks website for £10.00. It’s been carefully priced in respect of the amount of time and effort that went into developing this stack, and the fact that the free HotSpots stack remains available for people working on a very tight budget. HotSpotsPro is very much a professional-grade stack (hence the name) you can purchase once and use an unlimited number of times in many projects. It's a single stack element which can save you from hours of complicated coding and tedious testing.

A free demo version of HotSpotsPro can be downloaded from the product page. A couple of different examples showing the HotSpotsPro stack in action are also presented, for you to test. All purchases include free technical support and updates. HotSpotsPro will be compatible with future versions of RapidWeaver and the next Stacks update. If you have pre-sales questions, you can contact me direct through the Stacks4Stacks website (a reply is normally provided within 6 - 12 hours).

Introducing the all new Builder stack

This is a brand new stack element that lets you build you own stack elements in RapidWeaver, using free scripts and plugins available from other websites. It's quite a lot different to anything else you may have previously used and undoubtedly opinion will be very split over its usefulness. I don't think it will drive any stack developers out of business, but potentially it has the ability to provide yet another way of building with Stacks and RapidWeaver! I'll certainly be interested to see how it's received and there's every possibility it may get updated and taken further forward over time.

As you may know, I'm a very heavy user of the concrete5 publishing platform for any projects that RapidWeaver is not man-enough to handle. I use concrete5 in bigger commercial projects where a database-driven website is needed or where clients have complicated requirements for things like content management, social media aggregation, marketing and sophisticated user permissions etc. For as long as I've been using concrete5, there has been a free plugin available called Designer Content. This plugin (and the paid 'pro' version) is brilliant, in that I can use it to setup editable blocks in pages that my clients can login and easily edit. These blocks can be added, deleted, moved or duplicated between pages or other projects. Best of all, Designer Content hides all the ugly HTML markup from my clients. So the client just sees a pretty editing interface while they're logged into their website, and they can drag and drop their content into the required boxes with ease. It means you can build some pretty complex responsive page layout blocks that clients can easily and safely edit themselves.


The concept of it is brilliant. So naturally this got me thinking about whether something similar like this could work in RapidWeaver too - a stack you can use for building reusable stacks with. Admittedly RapidWeaver already has the benefit of the Stacks plugin and an incredible inventory of addons available. But often I still get people contact me who have seen a shiny plugin or effect they want to incorporate into a website. It can be confusing knowing where each part of the code needs to go, and equally so the terminology of things like 'calling jQuery' will scare a lot of people away. Likewise even if you can get something working successfully within a single page, it would be great to save it and reuse it in other pages too.

So this is where the benefits of Builder start to come into play. Once installed and added to a page, Builder assists you with incorporating basic HTML, CSS or Javascript code into a page. The Builder editing interface gives you some highlighted placeholders, into which you paste your code. Once you've confirmed that your little plugin is working in RapidWeaver preview, then you can use the new settings in Stacks 2.5 to save your Builder stacks. Once saved, then these self-built stacks are always available for you to use in your RapidWeaver projects or to share with others.

Builder stack

Potentially this new Builder stack means that in instances were suitable stack elements cannot be found to perform specific tasks in a project, an average RapidWeaver user may be able to build the stack themselves. This is especially true if the code to build the plugin is already available online. Builder attempts to make the setup procedure easier.

Builder is completely free to download from the Stacks4Stacks website. If you like it you can keep it and if you don't like it you can delete it. Although I have no working example of the Builder stack, I've provided a detailed walk-through which may help to illustrate the use of this stack element and potential benefits. For more information about builder, please click here. If you do manage to get lots of use from this new stack, I would much appreciate a small contribution. So download it, install it, play with it, and see what you think.

Volcano 1.2 released

A small update is available today for the Volcano theme, with emphasis on fixing an iOS7 menu bug and introducing a couple of new features that some users have been requesting over the weekend:

  • Fixed an issue whereby the drop-down menu would not work on retina iPads for some users
  • Fixed a problem whereby the sidebar was not correctly positioned in Internet Explorer 7
  • New miscellaneous style setting to toggle drop-down motion (sliding) animations on and off
  • New miscellaneous style settings to turn off page elements like the sidebar and footer on mobile
  • 15px padding now applied between parent menu links if their width is set to 'auto'
  • Renamed the banner auto-height setting so that it's easier to understand
  • Site title is now reduced down to 24px on screens less than 768px wide
  • Branched the sidebar colour settings into their own group
  • New sidebar font size settings

This theme update is free for all existing users. Details about this RapidWeaver theme can be found here. If you have questions about the update or Volcano theme in general, please contact me direct via the ThemeFlood website.

Some people have also been asking me about Font Awesome support in this RapidWeaver theme. Volcano 1.2 is using Font Awesome version 4.1.0. Currently this is the latest version of Font Awesome available and is already built into the theme; meaning that you do not need to buy or download extra Font Awesome stacks. Everything you need is setup ready for you. Just make sure you have CSS consolidation turned on in RapidWeaver preferences. The Bootstrap Snippets pack contains the HTML code for Font Awesome 4.1.0; and this can be downloaded directly from the Github repository or using the links provided on the ThemeFlood website. Font Awesome icons can be used in many different parts of a page, and have the advantage of being retina-compatible and fully customisable with ordinary CSS code.

Volcano updated to version 1.1

A general (free) update with emphasis on updating a few of the underlying frameworks, addition of some feature requests, simplification of some theme style settings and further performance optimisations.

  • Updated Font Awesome to version 4.1 (includes the 71 new icons)
  • Updated Bootstrap to version 3.0.3
  • New title bar height and positing settings
  • More navigation menu drop-down width settings
  • RAFT (Responsive Adaptive Framework for Themes) 2.0 mobile / desktop menu
  • Various tweaks and improvements to responsive behaviour
  • More title bar border thickness settings
  • Minor improvements to print / PDF output for better printouts
  • New navigation font size settings
  • New option to remove desktop navigation borders
  • Multilingual 'back-to-top' button icon and colour settings
  • New and improved slogan style / colour settings

Volcano 1.1 is now mobile-first. This means many of the previous responsive theme settings are enabled by default and hard-coded into the theme. Mobile devices receive less code, resulting in faster and smoother loading pages (consuming less bandwidth). A small amount of supplementary CSS code is instead loaded for laptops and desktop displays. Mobile-first is the future of web design and now is the perfect time to start embracing it!

For more information about the Volcano theme, click here.

Introducing Storm 2.0

Same name, new theme! Storm provides a mobile-first RapidWeaver theme that's both easy to work with and delivers exceptional results. This is very much a RapidWeaver theme that has been carefully crafted at every stage; ensuring that you get the feature set and customisability demanded. At the same time you've got reassurance of working with a robust theme, engineered to give years of service. The bold and distinctive appearance of Storm makes this theme ideally suited for a wide range of different projects; whether it's a blog, a photography portfolio or a business website.

Storm RapidWeaver theme

There's too many features to list here. However of particular interest; Storm features an animated fly-out menu style, a FreeStyle banner container, built-in Bootstrap toolkit, social bar, fluid layout, Font Awesome icons and a broad range of style and colour settings. 40 example header images are provided. Like many other ThemeFlood RapidWeaver themes, pages published with Storm load very fast. Emphasis has been placed on search engine optimisation and website accessibility too. We've also worked hard on some of the minor details, like ensuring that your completed webpages print to an acceptable standard.

The Storm product page hosts information on how you can obtain the free update (if you're updating from version 1). Potential new users of Storm can access the theme user guides, a live demo site and free downloads too. Take time to explore all that's new in this excellent theme.

New Stack - SuperMenu

A radical retake on the mega-menu concept, SuperMenu is a "does more" drop-down menu stack with incredible power, style and functionality. SuperMenu works independently of a theme navigation system. You can use SuperMenu in the main content region of a page, a sidebar or an ExtraContent region (with the potential to replace an existing theme navigation unit with SuperMenu stacks). Not only does SuperMenu support the manual setup of links, but it happily works with static content, images, basic HTML, contact forms and even video. SuperMenu can be styled to match existing RapidWeaver themes. This is a menu stack that really packs a punch.

Other than the free Options stack, I've not done a navigation stack before. SuperMenu is the first "true" navigation stack I've built for RapidWeaver. It reuses quite a lot of code from TopBox, which has proven over time to be extremely flexible and robust. In some respects it's similar to TogglePlus, except the drop-down panel spans the full width of the page. I've often been asked if I'd consider building a mega-menu stack, so this is very much my contribution! It's a version 1.0, so there are bound to be minor bug fixes and new features added over time.

For more information, working examples and a free demo download, click here.

New Stack - HotSpots

The new HotSpots stack solves the age-old problem of building responsive image maps. Normally image maps are of a fixed size (in pixels) and require specialist software or scripting to get setup. In the HotSpots stack, we've turned things around; by providing a basic image map solution for RapidWeaver, that's fully responsive and requires no additional plugins or software to get working. In essence, all we're doing in this stack is to display a static image, and then draw some square boxes in different positions over the image. By specifying the position and dimensions of these square boxes (links) in percentage units of measurement, everything correctly scales to the same proportions as the original background image.

Image maps have lots of different uses in websites. Done correctly, they can provide a fast and friendly form of website navigation. The HotSpots stack works on all major web browsers; including desktop, tablet and most smartphones. Although the HotSpots stack requires the limited use of some HTML code; even if you've never touched HTML code before, you should find setup of the HotSpots stack straightforward. You can use either a local image dragged and dropped into your Stacks page, or an image already stored online.

For more information and working examples, please see the HotSpots stack page. If you find this stack useful in your projects, please contribute.

New Stack - Tabable

A really simple, back-to-basics tab stack. Tabable is intended for use in ThemeFlood RapidWeaver themes and is styled using the popular Twitter Bootstrap toolkit. It's a great little stack to use if you want to setup a simple tabbed interface on your website, to display some content within. Tabable was created upon request of some of our customers, seeking to achieve a similar tabbed interface; compared to the one we presently use on some pages of the ThemeFlood website.

We opted to replace the default Javascript code that the Bootstrap Tabs component uses already; and write a small custom jQuery plugin to 'do the tabbing'. Not only does this significantly reduce the amount of code required by the stack, but it improves the compatibility of this tab stack with other scripts or plugins running in the same page. Tabable is styled using Bootstrap, however it's definitely feasible to write you own custom CSS code to change the appearance of this tab stack.

As you would expect, Tabable uses valid HTML5 and CSS markup. A concentrated effort has been made to ensure Tabable will print or save as PDF nicely; ensuring pleasant and reliable display of all tabbed content on your handouts. Tabable works in all major web browsers and is compatible with touch devices.

Tabable is completely free to download and install on your computer. It can be freely used in personal and commercial projects. If you find this stack useful in your projects, you can make a contribution.

For more information, a working example and download links, please click here.