The Blog of Will Woodgate

Flood 2.0 released

2011-10-19T13:50:00.000-07:00

Today I'm releasing Flood 2.0. Cosmetically not a lot changes in this version. The update was mainly put together to address a couple of niggling issues and build in support for some new features, which existing users had contacted and asked me about. As ever, this update is completely free for existing users to obtain, and you can grab the latest update using your download link or requesting a new link.

I'm not going to hide the fact that Flood has exceeded all of my expectations. It was a theme I had originally put together for my own website (ThemeFlood), because I needed something very clean and modern-looking, in which to showcase my collection of themes and stacks. It didn't take very long before I was getting a steady trickle of people asking what theme I was using, followed closely by the question of where it was obtainable! So I spent a couple of weeks tidying up the theme and building in a lot of theme style and colour settings. Because it was quite a complex theme, it had to warrant the £20 price tag. And so it went on sale in March 2011.

I honestly thought that a lot of people would have laughed at the Flood theme and questioned why something that looks so simple should cost so much. But thankfully the provision of a free demo version meant that many people downloaded Flood and quickly came to realise the power and potential of this theme. And that is why I think it has been the most successful RapidWeaver theme I've ever released. To date, I have told over 300 copies of Flood through my website, and I know for sure that there have been several dozen purchase orders for it as well, from education organisations and bigger media / publishing companies. Considering the theme is not even a year old, that is pretty good going.

Some of the most noteworthy changes in version 2.0:

Support for SS3 slideshows

SS3 is a slideshow script originally developed by Adam Merrified over at SeyDesign. Recently we've been sharing a few ideas relating to RapidWeaver themes, and Adam had kindly made the SS3 script available in 'opensource' form for other developers to use. SS3 is no WeaverPix or SymNivo killer, but if you are wanting a basic slideshow without the need for additional plugins, SS3 offers a superb solution. The way it works is that SS3 can read from a set of images provided in the theme. New theme style settings allow you to customise the slideshow transitions and duration's. For those who have previously used SS3 in some of Adam's themes, you'll feel right at home with SS3 in the Flood theme. If you've previously not used SS3 before, then there is a wealth of information published in the new user guide.

Intelligent jQuery calling

A common complaint made by some RapidWeaver users is that their themes break when they are working offline. This is primarily because themes use public libraries like jQuery or MooTools sourced from Google API's. Of course when the internet connection to Google is lost, aspects of the theme like ExtraContent and drop-downs stop working. In Flood 2.0, we're piloting a new system whereby the theme will always try to pull in cached versions of jQuery from Google. If no jQuery can be accessed, the theme will instead use its own local version. This new system has the advantage of allowing you to work on RapidWeaver projects offline, and demonstrate websites round at your client's office, where an internet connection is not always available. If it proves successful, this is something that will be rolled out to other ThemeFlood themes in the next few weeks.

Tidying up

Flood is quite a technical theme behind the scenes with several layers of scripting. In recent weeks a lot of work has been done to consolidate code, merge multiple files together and build in some improvements. This work will hopefully result in a RapidWeaver theme which is highly optimised towards performance and less prone to doing 'quirky things' when mixed in with other scripts, stacks and plugins. In particular, all the jQuery Javascript has been merged into a single file called flood-scripts.js and is wrapped up inside a closure with it's own namespace. Some of the more troublesome code like the date / time function has been removed altogether, to reduce browser memory leaks and the risk of things going wrong in Internet Explorer.

Better print output

By request, printed pages should look a lot better now. The print.css file included with the theme has been updated and now only the most important parts of the page like body content and sidebar are printed. All the extra trimmings which waste ink and paper like the banner container and navigation are excluded from printouts. The default font face for printed pages is Spranq Eco Sans - a special environmentally friendly font face which uses less ink compared to other fonts. For computers without this free font installed, the print output will revert back to a sans-serif typeface.

Banner box background

The banner box is a small content container which floats left or right inside the main banner container. It is empowered using ExtraContent and can be used to display extra text, images or links. A common request from users was an easier way to change the banner content background. So Flood 2.0 introduces a new group of settings called Banner Box Background. These enable you to easily customise the background opacity and shade colour. Or alternatively you can choose to use a JPG or PNG image instead, as a background.

Sticky footer

Sometimes page content does not extend all the way down a page. So sometimes you may end up with a rather odd configuration and the Footer bar running mid-way across the page. It can look a bit amateurish. To resolve this potential issue, the Flood theme now uses a 'sticky' footer bar which is permanently affixed to the bottom of a page. This is achieved by using some clever CSS wizardry which ensures the footer container is always sat at the bottom of a browser window. It works in all major web browsers and on devices like the iPhone and iPad. Incidentally the bug that was causing the footer bar not to extend fully horizontally on iOS versions of Safari has been fixed in the latest version of Flood, by adding a viewport META tag in the index.html file.

Space-saving slogan

The site slogan is now a more integral part of the content container, and has lost the default 50px of padding which were previously applied above and below the slogan text. This should make the slogan more useful, rather than a space-wasting inconvenience. Of course if you preferred the older slogan style, you can still use custom CSS code to restore spacing above and below the slogan text.

Getting the update

Flood 2.0 is a free update for all existing users, and you can get it using your original download link. If for some reason you no longer have this download link or it has expired, see details on the ThemeFlood support page for obtaining a reactivated link.

Steve Jobs, co-founder of Apple, passes away aged 56

2011-10-06T00:43:00.000-07:00

Sad news this morning that Steve Jobs, who stepped down from position of CEO in August has died at the age of 56. Without question, Steve has inspired millions and had a significant influence on 21st century technology. Steve was always pushing the limits of design and technology. He set ambitious standards for the competition to equal and certainly a world without Apple would be a more subdued place. BBC News writeup: http://www.bbc.co.uk/news/world-us-canada-15193922

MacRabbit releases Espresso 2.0

2011-09-30T01:42:00.000-07:00

Following quick behind the launch of Analog this week, MacRabbit has released Espresso 2.0. This version of Espresso merges the previous Apple award-winning CSSEdit with Espresso 1.0, and introduces a swath of new features. Previously I really liked CSSEdit and Espresso 1 and used them extensively on a day-to-day basis for RapidWeaver theme and stack development. So to have both apps merged together as one makes sense to me. The user interface in this latest version of Espresso remains fantastic, and there are plenty of options to satisfy both novice web developers and seasoned professionals.

Purchasing Espresso 2 will cost you $79. That may seem a little steep, but one web development project would easily cover that cost. Existing Espresso or CSSEdit users can benefit from very generous upgrade discounts as well. Altogether Espresso 2 offers a fantastic application for web developers, a beautiful interface and is brimming with professional features for getting jobs done quicker.

MacRabbit website: http://macrabbit.com/

RapidMaps plugin on special offer today

2011-09-29T00:31:00.000-07:00

RapidMaps is today's featured MacZot, selling for $6.99 instead of the normal price of $14.95. A very useful plugin to use in RapidWeaver, wherever you want to display a map. It uses Google Maps, so you don't have to worry about sub-licensing maps from other companies. Remarkably simple to setup and the interface is much easier to work with, compared with competing stacks.

RapidMaps is a RapidWeaver plugin that lets you add Google Maps to your site in a few clicks. Just center your map, fill in your Google API Key and publish!

MacZot website: http://maczot.com/
RapidMaps: http://www.omnidea.it/rapidmaps/

Analog released by Realmac Software

2011-09-28T11:16:00.000-07:00

A superb little image editor I've been Beta testing for the past few months got released today. It's called Analog and is developed by Realmac Software, the same company behind other prestigious software titles like RapidWeaver, LittleSnapper and Courier. Analog is a remarkably simple application that lets you to drag and drop images into a placeholder and choose from a range of professional looking filters and frame effects. Then these processed images can be saved locally on your hard drive, attached to an email or published to various online 'clouds' like Flickr, Picasa or Facebook for the world to see.

Do we need yet another Mac-exclusive image editor? Well put yourself in my position. Two weeks ago I shot over 1000 photographs on my 2 year-old Sony A350 DSL, only to find later on in iPhoto that the camera had developed a fault, and I had white over-exposed bands running across the bottom third of my pictures. While I battle with the paper trail at Sony UK to have my camera repaired for less than the quoted £300, it left me with the problem of what to do with these imperfect images. Rather than trash the entire shoot, I tried several of them through Analog. In quite a number of examples, it turned the bad images into 'artistically refined' images. So it was great to find a way to recycle less-than-perfect pictures. Likewise I had a mess around with some of the effects in Analog, and found that it gave me some inspirational ideas for future creative projects. Even if you drop in a picture taken on a 1MB camera phone, the finished image is pretty impressive.

As mentioned already, using Analog is really easy. Basically you have a single window entitled 'Analog' (which can be set to fullscreen on Lion). You then drag and drop a suitable image into the central placeholder. On the right is a panel where you can choose one filter effect and one border effect. Confirmation of an effect applied is given via a low audible tone and the image preview refreshes almost instantly. Analog also provides basic controls to rotate an image and crop it. Images can be shared by clicking the share button and selecting a destination like Mail, Facebook, Flickr, Picasa or Tumblr. Analog remembers your login credentials for these services, so uploading images to 'the cloud' becomes a one step process.

From my testing, Analog was rock-stable and flew along at unstoppable speeds. It is certainly a very nifty application, and as the marketing blurb suggests, it really does "give your photos some soul". I'd imagine most people could find a use for it, and at $7.99 for a limited time, it is practically free. My single hope is that Realmac will release a public API, to allow third-party developers to create addon filter and frame effects. That would really push this application into a league of its own.

Some example images processed using Analog:

Sunset and moon

Rowing boat at low tide

Breitling Wingwalkers

Urbanscape

Boy holding pet rabbit

Stourhead Garden

Introducing System7

2010-07-08T08:28:00.000-07:00

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.

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.