RapidWeaver Stacks, PlugIns, Themes ...

rjhweb design

fast, flexible, fair

Ninja News

RapidWeaver News & Reviews

File Manager For RapidWeaver

There aren't many stacks that you can simply drag to a page, publish the page and have done with it. FileMan from Stacks4Stacks is, however just such a stack. And it's useful too!

FileMan, as you might guess from the name, is a File Manager for RapidWeaver. It has many uses that aren't immediately apparent.

FileMan creates a PHP database on your [client's] website. The database may optionally configured to allow file uploads, downloads and/or deletion.

Simplest scenario: you have a number of documents that you want to make available online. Drag them to your FileMan folder via FTP and they will immediately be accessible to anyone that can log in to the File Manager page.

The next possibility is a flat CMS solution. Let's say you have a warehoused client gallery, or slideshow online and your client wishes to swap out the images on a regular basis. Once the client has been instructed how to create the images accordingly, he/she could log in to their FileMan warehouse page, delete the old images and upload the new ones.
The same applies to text files (or whole HTML/Markdown pages) that are linked to DropCMS (Free download from Stacks4Stacks) boxes, or PDFs linked to the recently reviewed PDF Viewer.

FileMan couldn't be simpler to set up – as stated above, drag the stack to a Stacks page, upload the page and you're done. As soon as you access your new page, FileMan will create a PHP database and you can begin uploading files. You may, however, wish to do a little configuration first:

Stack Settings
FileMan creates a directory outside of the RapidWeaver project. Directory Path will be the name of said folder on the server (refresh your FTP browser view after accessing the FileMan for the first time).
Login Password. Enter the password that will be used to access the FileMan Directory. Permissions – Read/Write, or Read Only.
Next the stacks panel has a number of options: Add Sample Files these may be deleted via FTP if the option Allow File Deletion remains checked before your initial upload. Allow Creation Of New Folders. Allow Direct Links allows files to be downloaded directly. Allow File Uploads allows the user to upload.

Disallowed Files contains a list of potentially harmful files that may not be uploaded to the server. You may add your own definitions to the list.
The remaining FileMan settings are for the localisation strings that you may wish to alter.

It remains to be said that FileMan – a free download, BTW – can be inserted into an iFrame and lightboxed – as demonstrated below.



Automatically Add Events To Your Desktop Calendar

There is an event published on your web page that you'd like to copy to your desktop calendar, so you download the .ics file and bookmark it. But wait! Why not just click on the event button and have the date added to iCal, Outlook etc. automatically. With AddEvent from seyDesign, you can!

AddEvent is a new stack that, with the help of some very clever PHP, will automatically generate an .ics version 2 file and add it to your calendar – and your page doesn't need to be a .php page to do so, .html works just fine.

In addition to the event title and date, AddEvent also supplies a description, location and web address. In newer calendar software such as iCal, locations are automatically presented with a map pin and optional directions. Users can set a reminder and sync the event across all their devices.
AddEvent doesn't rely on any external (and expensive) services to go about its business, and it's not necessary to register every website you wish to use the stack on. Just drop the stack into a Stacks3 page, fill in the event details and publish:

Stack Settings.
Event Title is straightforward – add the name of your event to the stacks panel. Add Start and End Dates (including the time) and add a Location. Now you can add a short Description and – if you wish – a link to the events web page.

Add the Event File Name and, if your server isn't in the same time zone as the event, add your server's time zone so that the times can be synchronised across different countries/states.

All that's left for you to do now, is set the button text (you can also add a FontAwesome icon e.g. <i class="fa fa-calendar"></i> Add To Calendar) and, if you wish to alter the button's default appearance, add a custom Button Class.

Before you publish your event, you can check that everything will be submitted correctly by taking a look at the AddEvent stack on your page.

Note: Your server needs to be running PHP 5.6 or newer. Once you've ensured that the is the case, publishing and remembering events couldn't be simpler.


Codafy – Page Element Inspector

Back in the day, when RapidWeaver was a young product, it didn't include a page inspector (it didn't include a number of things, but that's besides the point). seyDesign introduced Codafy in 2010 to solve the problem. After numerous years in the shadows, Codafy has just been rewritten. Codafy, a web inspector for RapidWeaver.

So what's the point of a web inspector, when RapidWeaver already has one built in? Codafy is different! Codafy will help novices and experienced programmers alike in quickly identifying elements on a RapidWeaver page.

Drop Codafy onto a Stacks page and when you switch to preview, you'll see that there is a button in the top left hand corner of the screen 'Launch Codafy'. Once you've clicked the button, you can click any element in your preview to receive immediate information about that element.

The information that Codafy supplies will inform you what sort of element you have selected on a page. It will display any ID or classes applied to said element – useful for adding custom CSS code or for configuring other stacks to interact with content, like navigation. Codafy will show the positioning of the element within the DOM (document object model) hierarchy; which can help identify other stacks that are influencing your selected element. And finally, Codafy will give you the basic CSS box-model information for a container - including height, width, position, padding, margins and borders.

All of this information is, of course, available via the web inspector, but – it requires some digging around to find what you are actually looking for. With Codafy you simply click on the element and the information is displayed instantaneously, making the process a lot easier.

Codafy is a free download from the seyDesign website – any donations will, of course, be much appreciated.


Side Menu

1LD has enlarged their team. More team members means more capacity which, amongst other things, results in more stacks for happy Weavers. Just a fortnight ago, I reviewed Overlay Menu. Yesterday Side Menu was added to 1LD's range of products.

Side Menu is very closely related to Overlay Menu, it is equally highly configurable, but instead of overlaying the whole page, it slides out from the left, or from the right and is exactly as wide as you want it to be. Just like Overlay Menu, Side Menu can reflect the RapidWeaver site menu, or it can contain a custom list of links. For this reason, multiple instances of Side Menu can be placed on a stacks page.

The menu initially shows up as a black sidebar on the left of the page, with a black menu button in the top righthand corner. This is a configuration that is often seen on current websites but, not being a mortician, I'm not especially fond of this appearance. So let's take a look at the settings panel to see if we can change it.

The first setting is Unique Menu ID. Necessary because, as already stated, you can have multiple instances of Side Menu on each page. If you only intend to have one instance, you can leave the default ID unaltered.
Use Custom List is the next checkbox you'll encounter. Check it if you want a custom links list. Leave it unchecked if you need a site menu.

Now the party can begin: The Menu Configuration sets out with position – Left, or right – and continues with Font Family. Once again, you'll find a choice of twelve Google Fonts and once again, I ask myself – if Google Fonts are implemented, why can't I just enter the name of the font I want to use? Whatever – I'm sure you'll find a suitable font for your site amongst the twelve.

Side Menu

The Text Alignment may be set to Left, Right, or Centre and the Menu Fill Mode can be set to Pixels or Percent. The default setting is px.
Next follow individual settings for the menu width when displayed on Mobile, Tablet and Desktop. The menu Padding is set in px.
Next up is the Background opacity, followed by Background [content], which may be set to Off, Colour, Gradient, or Image. Images are centred and set to fill the menu height.
Image Cover will set a colour overlay for the background image – a nice effect.

As demonstrated in the screenshot, the Menu can contain a Header and/or a Footer. You may drop any stacks you please in the child stacks, but don't forget that the longer your link list, the less room you will have available. As also demonstrated in the screenshot, when the menu is opened, the site's scroll bar is hidden.

Next up: Dropdown Icons. The Icon Size for the icon that appears next to your link list to indicate sub-pages is set to a default of 24px. The Open Icon Font may be chosen from Google Material Icons, Font Awesome, or ION. Open Icon awaits the code of your choice. The same applies to the Close Icon.
Rotate Icon When Opened has its own settings for Degrees.

Top Level Menu Items has options for Font Size, Subtitle Size (for custom link lists), Padding and Vertical Spacing. Radius refers to the button radius. Then we have Text Colour and Subtitle Colour. While the Text Colour is a solid colour, the Subtitle Colour may be translucent.
The Button Background can be set to Off, Colour, or Gradient. The Gradient settings thankfully only have two colours and produce a very smooth gradient. The Direction can be Top to Bottom, Left to Right, Right to Left, or Diagonal.
Hover Text Colour and Hover Subtitle Colour are set individually, as is the Hover Background.

Sub Level Menu Items automatically inherit the Top Level Font, but the Font Size may be set individually. The Indent may be set either with a default Margin, or a default Padding. Margin and Padding can not be altered in this case.
The Sub Level Menu Items are also set to inherit the Top Level colours, but there is a checkbox to override the settings.

Menu Toggle. Show Toggle Text and Show Toggle Icon are the first two checkboxes. The Toggle Text Font may be set individually from the Item Font, as can the Toggle Font Size. The Toggle Text is set to 'Menu' by default. The same Icon options are available once more and the Font Size for the Icon is set individually from the text.
The Toggle Fill Mode is interesting. By default, it is set to Auto, but the options are Fill (full width), Pixel Width, or Percentage Width.
The Menu Toggle is at the top right by default, but the Vertical and the Horizontal alignment may be altered, as may the Margin, Padding and Radius.
Once more we have multiple options for the Background and Hover settings, Plus Border and Shadow options.

I was irritated that the Overlay Menu Close Button couldn't be configured [at initial release]. This is not the case with Side Menu. The close button is as equally highly configurable as everything else. Hats off! ILD always listens to constructive criticism.

Advanced Settings. Here you'll find Show External Data Link Info and Make Parent Links Clickable.
Experimental. As with Overlay Menu, there is an options to Replace Theme Menu. This will not automatically work with all themes, but as mentioned last time, there are other stacks, that offer assistance here.

I liked Overlay Menu very much – it is highly configurable and is different.
I like Side Menu even more. It is more traditional so it will find wider acceptance and, if anything, it is more highly configurable than its sister stack.
Thumbs Up!


Wall – Social Sharing Unfettered

There are a number of stacks that can present RSS feeds in an agreeable layout (you'll find one on the Ninja Network page). There are also stacks that can integrate Facebook pages within your website, or a Twitter or a Tumblr feed. They all just became obsolete with Wall from Yuzool Themes.

Michael Frankland recently came in for a load of negative criticism for changing his business model to a sustainable one. You may, or may not appreciate Yuzool's new business model, but you can not fault their products!

Wall (not to be confused with other stacks of the same name) is the latest stack from the Yuzool smithy, it will bring together all of your social feeds from Facebook, Twitter, Google+, YouTube, Flickr, Pinterest, RSS, Vimeo, Tumblr and/or Instagram – on the same RapidWeaver page. However, I must warn you that if you choose all the available options, your page will need a couple of seconds to load all of the feeds. Wall is fast – it uses AJAX to load your feeds – but don't overdo things.
The possibility to display any combination of the above within a single stack is awesome. The presentation of said feeds is enticing they can be filtered by service.

Yuzool Wall

Let it be said that you will need some time and perseverance to set up some of the options. You will need Handles, Consumer Keys, Consumer Secrets, Access Tokens, Access Secrets, APIs, IDs, etc. depending on the service you wish to load. These are all available online but they do need some research on your behalf. This problem arises because the individual services can't agree on a single access model. It's no fault of Yuzool.

I'll take an example of publishing Facebook posts: First you'll need to register as a developer so that you can create an app. Next you'll need the ID for this app. You can then add your Facebook Handle and the app ID to Wall's settings panel.
But hey, we're web designers, right? We're used to doing a little research before we can plunge in. The process is described in detail in the setup instructions included with the stack and is similar with many of the different services and, it must be said, with all other Social sharing stacks.

So you'll need a little patience to set up some of your feeds, but ultimately it's the result that counts. And the result is an inviting masonry style wall of feeds which, when clicked, will take you to the post/site in question.

All texts within the Wall stack are editable, so that they may be localised. The General Settings include Centre Wall, Cache, Filter, Disable ALL Filter, and External Links. The Order can be set to Date, or Random. The Max number of posts may be set to Days or Limit. The display below changes accordingly to show Number of days or Limit of Posts.

Social Sharing may be disabled and JQuery can be activated. There are two styles for the presentation of Wall; Classic and Modern and the Colour can be set to Light, or Dark.

Wall offers more sharing options than I've seen in any similar stack. The sheer number of services Wall can access makes the settings panel look a lot more complicated than it really is, but once you've discovered the necessary IDs and APIs, it is simple to set up.

Without a doubt the most versatile Social sharing stack to date.


Show more posts

  • Stacks Image 34843
  • Stacks Image 34846
  • Stacks Image 34849
  • Stacks Image 34852
  • Stacks Image 34855
  • Stacks Image 34858
  • Stacks Image 34861
  • Stacks Image 34864
  • Stacks Image 34867
  • Stacks Image 34870
  • Stacks Image 34873
  • Stacks Image 34876
  • Stacks Image 34879
  • Stacks Image 34882
  • Stacks Image 34885
  • Stacks Image 34888
  • Stacks Image 34891
  • Stacks Image 34894
  • Stacks Image 34897
  • Stacks Image 34900
  • Stacks Image 34903
  • Stacks Image 34906
  • Stacks Image 34909
  • Stacks Image 34912
  • Stacks Image 34915
  • weaverthemes
  • Stacks Image 34921
  • Stacks Image 34924
  • Stacks Image 34927

Links to the developers ® All trademarks cited on this page are the property of their respective owners.


Don’t miss a post!
Sign up for our monthly newsletter.

A monthly digest of all the latest updates from our RapidWeaver blog, keeping you up to date with the hottest new stacks and themes.

* indicates required

Contact Information

My Image

rjh web design

265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
Thailand 58130

About Us

We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.


This site uses Cookies to determine the best method of display in combination with your browser.
We do not harvest or sell personal information.
© rjh web design 2010—16

This website was built with loving care on a Mac using Foundation. For more information, contact me at obscure.