Clicky

RapidWeaver Stacks, PlugIns, Themes ...
menu Menu

rjhweb design

rjhweb design

fast, flexible fair

Ninja News

RapidWeaver News & Reviews

Link Drawer for RapidWeaver

The folks at the One Little Designer smithy seem to be working overtime. They just released yet another interesting stack. In a similar vein to Action Menu, Link Drawer is a home for your links or menu items. It can be fixed at the top, or the bottom of your page, or it can be placed inline.

Link Drawer – 1LDThe Link Drawer toggle can be as wide as the container that it is enclosed in, or set to a fixed pixel width.
The drawer too! The drawer also allows you to set the number of columns it displays – for Desktop, Tablet and mobile devices. So if you set the drawer to 4 columns wide and then add 8 Drawer Items, you will have a grid with 4 x 2 link items on the desktop.
Each Drawer Item displays an Icon and a text. The Icon can be chosen from FontAwesome, Google Material Icons, or Ion Icons, but if you prefer, you can also add your own icons, i.e. a png, or a jpg image. Sadly SVG's are not (yet?) recognised.

Link Drawer – 1LD

Stack settings

General
Start Collapsed – Default
z-Index – Set by default to a pessimistic 1 quadrillion. I've recently seen this number before somewhere?? Today's developers seem to be obsessed by being top of the pile!
Max Width – in px
Breakpoints – Tablet, Mobile
Columns – Desktop, Tablet, Mobile

Drawer
Font Family – 14 Options, including Custom.
Outer Margin
Corner Radius
Border Weight
Border Colour
Shadow
Background – Off, Colour, Gradient, Image

Items
Icon Size – Desktop, Tablet, Mobile
Text Size – Dito
Icon Colour – Initial, Hover
Text Colour – Dito
Background [Colour] – Dito
Border Colour – Dito
Gutters
Content Spacing – Spacing between Icon and Text
Padding – Vertical Horizontal
Radius

Toggle
Hide Icon
Fill Mode – Full, Pixel
Width – px
Alignment –Left, Centre, Right
Height – px
Text – Open, Close
Background [Colour] – Initial, Hover
Icon [Colour] – Dito

Link Drawer Item
Link
Icon
Use Custom Icon
Responsive Hid

As you can see by the list of settings, Link Drawer is highly configurable and I can see many uses for it.
My only 'criticism', if you'd like to call it that, is the lack of support for SVG icons and the inability to alter the toggle Icon.

Otherwise — a great stack!

Comments

Download Links in RapidWeaver

A while ago Marathia stacks released a stack that automatically added a link icon to any links contained within it. Yesterday Jeroen released a new stack that will automatically add the correct file icon to those links. Both stacks may be used in combination.

DownloadLinkIcon will not only add the correct icon to a linked file, but it can also force the file to download instead of being displayed in the browser.
LinkPlus can add the appropriate link icon – Internal Link, External Link, or Email to any links contained within a text and format your links so that they are easily identifiable within your flow of text.

Let me begin with the older of the two stacks – LinkPlus – when you drag the stack onto your page, it displays a container into which you can add a text stack. The stack settings allow you to set the icons to be used i.e. internal and/or external and/or email icons which are then automatically added to any links within the text. You can also set the icon colour and the link colours individually – for Link, Hover, Active and Visited states in each case.

Quite recently Google decided that underlined links are 'Oh, so 90s' and removed all underlines from their search pages. This Blog also doesn't use underlined links. While it might be fashionable to indicate links by using colours alone, this can cause problems when your visitor has a sight impediment. (I hope that if you are visually impaired and regularly visit my page, that you are aware that 90% of the product names mentioned are linked to the appropriate page?)

LinkPlus has the additional options of not only adding underlines to linked text, but also also format the links as bold/italic and can add a background colour to aid your visitors in identifying links.
The only thing that you need to observe is that external links must begin with 'http://', or 'https://' for the appropriate icon to be added.

The external link icon may be solid, or open and can be applied to all links within the stack, or to all links that will open in a new window.
LinkPlus also has an option to target text stacks that have a custom selector. This makes it possible to target all text links on a page.

DownloadLinkIcon adds an icon before or after a text link to a downloadable file. The stack will automatically add the most appropriate icon based on the file extension, but you can also override its choice.
As with many recent stacks an instruction sheet is added to your page along with the stack. DownloadLinkIcon has a neat addition – a cheatsheet may be loaded in addition to the user instructions!
The icons used by both stacks are loaded from Font Awesome. Instead of having to go to the Font Awesome site to search for an appropriate icon (who knows all 675 FA Icons? I certainly don't), the cheatsheet displays all file-related icons from A - Archive to V - Video, plus generic icons such as Download and Dropbox.

LinkPlus and DownloadLinkIcon are two useful stacks that make links immediately identifiable. The latter can also force a file download – a feature that is often requested by Weavers.

Comments

BFS1 – Paperless For RapidWeaver

BFS1 — Black Friday Special Chapter One. It would seem that developers have been working like crazy to get new, or updated stacks ready for the Black Friday Weekend. As I'm going to review a number of stacks today, I'll have my work cut out, so here goes!

First off: Paperless from Stacks4Stacks. A question that is regularly asked on the forums: "How can I put files online so that they can be downloaded?" The question arises most often because text links to file types that a browser can display natively, e.g. .jpg, or .pdf won't download the file, but display the file in question in the browser window.

But what if you want to share images with colleagues so that they can be used in a publication. Or what if you want to share an e-book? In such cases, it's impractical to first load the file in question to the browser and then save it to the computer.

Paperless solves the problem by searching an online directory for files and then displaying them for download. Each file that Paperless finds can then be downloaded with the click of a button.Paperless – S4S
Paperless' setup is extremely simple. You have two options to add your files.
Option One: Create a "downloads" folder on your desktop. Drop the files into the folder that you wish to place online. Drag the "downloads" folder to your project's resources. Publish your project. Paperless is already configured for this workflow, you don't need to alter anything. Your files are now ready for download.
Option Two: Create a folder on your server via FTP. E.G. "documents". In the stacks setup change the Paperless General Settings/Relative Path to ../documents. Publish your project. If your both your new "documents" folder and your "paperless" folder are at the top level of your site's directory, any files dropped into the documents folder will automatically appear on your Paperless page.
If you have placed the "documents" folder in a subdirectory, the Relative Path would be ../[subdirectory]/documents. If you have placed both the "paperless" and the documents folders within subdirectories, the path would be ../../[subdirectory]/documents.
../ informs the server-side php code that it is required to move up one directory-level each time it is encountered.

You may place multiple Paperless stacks on a page, if you wish to list more than one directory for downloads.
Paperless is highly configurable, so each aspect of the UI can be matched exactly to your site's design. You can also configure the way that files are ordered on your page and any changes within the downloads folder are reflected on your Paperless page immediately.

If you have set up Google Analytics for your website, Paperless has a Google Analytics option, and is able to communicate useful preview and download statistics back to Google Analytics, for display in your reporting data.
A list of your download files will be shown by their name. Next to each file name, the number of times that the preview button or download button was clicked is shown. From this information you can determine how many times a file has been downloaded and other information like the most popular times of day for downloads.

Paperless easily solves the problem of downloading files with RapidWeaver, it supports all common file types and will automatically display the correct document icons for common image formats, PDFs, Word, Powerpoint, Excel, OpenOffice, Pages, rich text, markdown, audio, video, zip, tar, and various code files so that these file types may be readily identified.

TIP: Check out the Stacks4Stacks website for Black Friday promotions beginning around 09:00/10:00 UST.
Also – Will has been hard at work updating seyDesign and Henk Vrieselaar themes. So don't forget to check out the seyDesign and Themeflood sites for promotions too – some of the themes come with complementary stacks!

Comments

Quick Menu For RapidWeaver

The past twelve months have seen a couple of menu stacks arrive on the RapidWeaver scene. Weavium just added an interesting new stack that will make your choice even more difficult than before. The fifth stack in the Weavium line-up is called Quick Menu.

Quick Menu – WeaviumQuick Menu is one of those stacks that makes you wonder why no one came up with this solution before now. A menu stack that appears, or disappears when and where needed and can trigger whatever you want it to trigger.

Here's an example: I have a single page website and would like a context menu to appear for each section. With Quick Menu I can add a menu of my choice to either side of the page with markers before and after each section and with each section a new menu will fade into view.

A product section, for instance, with a couple of rows of images could display a menu to call up product information for each item.
And when you scroll to the next section, the menu fades out, ready for the next products…

A group of social buttons when a contact form is visible on the page, or that contains a trigger for the contact form's lightbox alongside the social buttons.

Quick Menu can also be set to be permanently in view, or to appear when a marker on the page is scrolled to and then remain visible until the bottom of the page is reached. Quick Menu can also contain hidden menu buttons.
In this case, there is a 'View All' button which triggers a Quick Menu lightbox that displays a complete list of menu items.
Quick Menu is highly configurable, so that each button can have its own colour and it goes without saying that each button can have its own icon.

Quick Menu – Weavium
Quick Menu consists of three stacks – the main stack that supplies the menu's global settings, a Menu Item stack that allows configuration of each separate item and a Marker stack.
The first thing that struck me about the settings panel, is that there are no unnecessary settings included – so no background colour, no margins, or padding. The second thing that I observed is that Weavium, like a number of other developers that produce great stacks, don't make use of tool tips; so you'll either need to experiment, or read the manual.

Stack settings

Show/Hide – Display – Always, On Scroll To, Between Markers
Responsive – Hide Menu (for the standard breakpoints)

General
Horizontal Position – Left, Right
Vertical Position – Top, Centre, Bottom
Top Offset – px
Padding – Top Offset for the lightbox menu
Z-Index – Default setting 1 quadrillion
Background – Lightbox background colour
Hide View All Button – deactivates the lightbox

Items
Default BG (colour)
Default Content (colour)
Item Size
Item Radius (interesting to note that whilst the menu radius is altered top and bottom, the lightbox radius only top right)
Icon Size
Text Size
Text Weight – Normal, Bold
Font – Selection of 15 web fonts

Items > Open
Max Width – px
Item Padding – Vertical, Horizontal
Item Radius – sets the radius of all four item corners
Icon Size
Text Size

Close Button
Size
Icon Size
Radius
Icon Colour
Background [colour]

Quick Menu Item Stack
Hide (shows when opened)
Item Action – Link (default), Scroll to Top, Scroll to Bottom, Scroll to Marker, Java Function
Icon Font – Font Awesome, Ionic, Material, Custom
Custom Colours

Quick Menu Marker Stack
Marker ID

Quick Menu is an interesting new stack that is well worth a look at. Check out the demo page to see its possibilities.

Image Card. A Free Weavium Stack For RapidWeaver

We talked about Weavium yesterday. They are a relatively new stack developer with a few new, but really interesting stacks. Two days ago Image Card was announced as a free stack. I've taken a look at Image Card and while it is a very simple stack, it's also quite unique.

Image Card. What does it do? It displays an image with a colour overlay, a text and a link icon.
But it does the above in a unique way.
Supposing you have an image gallery, or a portfolio, or you'd like a navigation grid to other pages…
Drop Image Card into a Stacks page and add an image to it. You can add a colour overlay and a title, or a short text – link is already provided – and you have a cool link box to your new page. It is even animated – the whole card moves up, or down when hovered.
Images scale within Image Card, to fit the longest dimension. But as you are able to set the card's height, you can make adjustments to the image display.
Weavium Image Card

Stack settings

General
Fill Mode – Percent, Pixel
Percent/Pixel Width
Alignment – Left. Centre, Right
Image – Drag & Drop
Set Link

Card
Mobile/Tablet/Desktop Height – px
Margin – Vertical, Horizontal
Padding – Vertical, Horizontal
Overlay Type – Gradient, Colour
Overlay Colours/Opacity
Drop Shadow

Caption
Hide Caption
Title Font – Choice of 14 Fonts + Custom
Font Weight
Mobile/Tablet/Desktop – Font Size, Line Height
Text Shadow

More Button
Hide Button
Button Size
Icon Size
Button Radius
Border Thickness
Hover Icon Colour

Hover FX
Overlay Opacity
Shift On Hover
Shift Amount (px)

That's a pretty impressive list of settings for such a simple looking stack and just goes to show how seriously Weavium takes their work.
What's more – Image Card is free!

Show more posts

  • Stacks Image 35399
  • Stacks Image 35402
  • Stacks Image 35405
  • Stacks Image 35408
  • Stacks Image 35411
  • Stacks Image 35414
  • Stacks Image 35417
  • Stacks Image 35420
  • Stacks Image 35423
  • Stacks Image 35426
  • Stacks Image 35429
  • Stacks Image 35432
  • Stacks Image 35435
  • Stacks Image 35438
  • Stacks Image 35441
  • Stacks Image 35444
  • Stacks Image 35447
  • Stacks Image 35450
  • Stacks Image 35453
  • Stacks Image 35456
  • Stacks Image 35459
  • Stacks Image 35462
  • Stacks Image 35465
  • Stacks Image 35468
  • Stacks Image 35471
  • weaverthemes
  • Stacks Image 35477
  • Stacks Image 35480
  • Stacks Image 35483

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

x

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.

Legal

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.