Clicky

RapidWeaver Stacks, PlugIns, Themes ...

rjhweb design

fast, flexible, fair

Ninja News

RapidWeaver News & Reviews

Typed – Tickertape Reinvented

In the very early days of the web, many sites would display a tickertape message somewhere on the page. Said pages often had a black background and the tickertape text was neon green. It looked awful (IMHO), but the fashion persisted for many years. Many years – even today there are tickertape stacks available for RapidWeaver.
Weaver's Kingdom has just released a stack called Typed. It's a modern version of tickertape and is actually useful.

You never heard of Weaver's Kingdom? You must have, it's been online for weeks now and is the rebranded Archetypon from Lucas Tsolakien.

Tickertape is considered useful, because it can display large amounts of text within a very compact space. It is often used to display upcoming events.
Typed takes the idea to a new level. Instead of a constant stream of text running across your screen, Typed types text, deletes, or untypes it and then types a fresh text in its place.
My first thought was "Duh! Not another one!", but then I took a look at a couple of examples and changed my opinion.

Lets say you have a number of different products or services available. You could type a list such as:
We Design Websites
We Design Logos
We Design Print Products etc, etc.

Or you could position your text "We Design" and let Typed fill in the blanks at intervals of a second or two.
You've got your message across and, because it's animated, it gets noticed and – it saves a lot of space.

Typed

Stack settings
When you drop Typed onto a Stacks page, you'll see a text container with a + button to add child stacks.
Type your text alternatives into the containers and add, or delete child stacks as needed.
In the settings panel, you can set the Typing Speed and the Start Delay. You may choose to Shuffle your texts and set the Back Speed [untype] and the Back Delay.
You will probably want the text display to Loop [repeat], but this option may also be deactivated.

Typed 'types' your text across the screen, so by default it displays a cursor. Show Cursor can also be deactivated.
The next settings are for the text formatting. Override Styles, [Text] Colour, Bottom Border [underline] and Border Colour.

Note: I haven't actually been able to test Typed for myself, so I'm unable to say what the final setting Detach does.

Typed re-invents and modernises tickertape and makes it a lot more appealing than it used to be.
Take a look at the demo sites at the bottom of Lucas' product page and see for yourself.


Comments

Listify – RapidWeaver Lists Demystified

Every now and then, our clients insist that we need to place lists on their websites. We can, of course, build a simple bulleted list using the tools that RapidWeaver supplies. There are also a couple of developers that have stacks in their line up, to help us spice up said lists. Just in time for the Easter holidays, 1LD released Listify, a set of stacks that will let you build truly eye catching lists.

Listify is a set of three stacks that will help you build professional lists within your Stacks pages. The basic stack, Listify, is a container for individual List Items. You can either click the stack's + button to create a List Item child, or drag in a List Item stack. The third stack is Listify Group; a container that allows you to create groups of list and automagically builds responsive columns to contain them.
The clever thing about Listify is that you can drop anything into it that you please…

Lets take a basic list. Drop Listify into a stacks page and add a List Item.
The List Item Displays an Icon and a Text Field. Enter your text, add a new List Item – as many as you need – and you have bulleted list.
If you need a headline, you can either enlarge the text in the first Item (see the image below), or you can add a container to the Item and drop in a Header stack (hover over the image below). You can, of course drop in an image, or a button into the List Item Stacks and switch off the default icon and text display.

Each List Item may be formatted individually, or – by leaving the default settings – the completed list may be configured as a whole. Once you've studied the settings panel you'll find that the configuration is really simple.
Tip. If you wish to set up individually formatted List Items, begin with one Item. Once you have finished the basic formatting, duplicate the Item and then reconfigure. You'll find it a lot easier than setting up each Item from scratch.

Listify
Stack settings.
The basic Listify stack provides the settings for the overall look and feel of your list. The List Fill Mode determines the width of your list – either Full Width (of the container it is placed in), or Pixel Width. The List Radius is set to a default of 5px whilst with the List Padding and the List Margins are set to 10px T, B, L & R.
The Background is set to Off by default, but may contain a solid Colour, a Gradient, or an Image.
Both the Borders and the Shadow are Off by default.
List Items (Shared Styles). The following settings will affect every List Item within the Listify stack:
Indent Direction (Left/Right), Item Indentation (px), Align Content (Left. Centre, Right, Separate (Icon & Text)), Item Spacing (default 5px), Item Radius (default 5px), Item Margin, Background and Border.
List Item Fonts gives you a choice of 13 standard Google Fonts, or (just to prove that 1LD listens to their customers) Custom. Text Size (px) and Text Colour.
List Item Icons (Shared Styles). Here you get to set the standard formatting for the icons: Vertical and Horizontal Positioning, Icon Padding and Spacing, Icon Radius and Icon Size. The Icon Background can once more contain a solid Colour, Gradient, or Image. Oh, and the Icon Colour itself, of course!
The default Icon is a Google Material Icons star. The icons are set individually for each List Item, with a choice of GMI's, Font Awesome, or Ion Icons.

Listify Item. The individual Items may be Linked to an external source. The next setting is Item Level. Each Item may be set to up to 10 (in words TEN!) Sub Levels! Excuse the overuse of exclamation marks (points if you're American) but this is amazing!
Next you have the option to Override Shared Styles. If this option is activated, each List Item may be individually styled. With the exception of Custom Stack Content and the Icon setting, the list of formatting options that follows is identical to those already listed above, including the individual visibility settings for the three screen sizes.

Finally, we come to the List Group stack.
As already stated, if you drop two, three, or more individual Listify stacks into a Group, your list is automatically columnised.
The List Group Stack also has some interesting features, though.
The List Alignment is set to Centred by default, but may also be set to Top, or Bottom. Then you'll find a setting Wrap List for Mobile Tablet (Portrait) and Desktop. Then there are settings for the group's Background – again None, Solid Colour, Gradient, or Image, Group Radius and Group Padding. The whole group may, of course be hidden at different screen sizes.

Hover over the image above, and you'll see just how flexible Listify really is – and that's without having added button stacks, or images!

Kool, or wot?


Comments

Velvet Video Lightbox

There have been a number of recent forum posts asking about video presentation.
Well, two days ago another video player joined the fold. Velvet Video from Nick Cates will display both YouTube and Vimeo videos in a fullscreen lightbox.

'Velvet' refers to the velvety smooth transition that Velvet Video displays when transitioning from thumbnail to full screen view. It is really smooth.

There are two Velvet stacks – the Velvet Base stack that enables Velvet's functionality and Velvet Video – the thumbnail/video container. Once you have placed a Velvet Base stack on your RapidWeaver page, you can add as many Velvet Video stacks to the page as you please.

Velvet Video's flexibility is quite distinguished. You can place multiple thumbnails in a multi-column stack, or in a Foundation grid, or you can drop the Velvet Video stack into a slideshow of your choice. The stack is Mobile First, so when a thumbnail is clicked on a mobile device, the video will play 'in place' whilst on a desktop or tablet display it will smoothly open a full screen lightbox.

As you already know, I am not a fan of online videos, but I do have clients that require video implementation on their sites. Velvet Video is an ideal solution if you have multiple clips to present.


Velvet Video

Stack settings
First you'll need to add a Velvet Base stack to your page and configure it.
Because Velvet Video is Mobile First, the first setting is Direct Play Break – the breakpoint at which the video will play in place and not open a lightbox. The next setting is Player Shadow. The default is set to 4px, but as the default Zoom Overlay – the lightbox background – is set to dark grey, the shadow won't be immediately discernible. However, the Opacity and the colour of the Zoom Overlay may be set individually, after which the subtle shadow comes into its own light.
The final Velvet Base Settings are optional Autoplay and Full Screen Zoom and Force Loading. The latter will force load the videos so that they may be previewed at responsive sizes.

The Velvet Video stack itself has two or three more settings. First, you should add a thumbnail image for your video. Next, you need to add either the YouTube, or the Vimeo ID.
Prevent Video Zoom doesn't yet have a text tip and I was unable to see a change between active and inactive states.
Play Icon Style offers a choice of six different icon overlays for the thumbnails. I like the fact that the Play Icon Position has a multitude of options and that the Play Icon Offset can be set between 0 and 30px. The Play Icon Size may be set between 0 and 30px too and the Play Icon Colour has options for both static and hovered states.
Also quite unique are the Thumb Overlay [colour] settings which may also be set individually for both static and hovered states.

Velvet Video isn't the cheapest, but it is amongst the best stacks for video implementation on your Stacks page.
Ahem… You're supposed to be checking out Velvet Video, not watching Simon's Cat!

Comments

Pricing Tables From RWtuts

Open your browser and go online and I can almost guarantee that within 30 minutes, you'll encounter an offer for a subscription or service that compares three or more variations: e.g. Beginner; Advanced; Pro. These comparison charts are easy enough to build within Stacks, but require a little thought and patience. RWtuts just released Pricing Tables, a simple stack that will relieve you of both.

Pricing Tables is so simple to set up that if you have your content prepared, your first comparison table will be complete within mere minutes – you just need to work your way down the stack settings! The example below took less than five minutes to set up.

When you drop a Pricing Tables stack onto your RapidWeaver page, all you'll see is a box with a logo inside it.
Oops! 'What did I do wrong?' Was my first thought.
However, when I switched to preview mode, I discovered the same Pricing Tables on my page, as demonstrated on the RWtuts website.
Huh? I didn't do anything yet!
So let's take a look at the settings:

Pricing Tables
Settings panel.
Columns Styling. Pricing Tables is set up to display the 'standard' three options that we see online on a daily basis. No amount of juggling will allow you to add just a single price table, or compare four options – it's "take it, or leave it". So after choosing a Font from a choice of ten options (the dreaded Comic Sans is also included), your next option is the column width, set in percentage of the container stack.
The next setting is Space (in px) and governs the spacing between the columns.Next up – Border width, BG Colour and Border Colour.

Header Styling. Set the Header Colour for Headers 1 through 3, the Font Colour and the Font Size.

Price Styling. Price Colour (actually the background colour which also formats the background behind the submit button) and Font Size.

Button Styling. Button Colour, Font Colour and Font Size.

Once you have your formatting set up, you can add your content. Moving down the settings panel you will find containers for the contents of each panel.
These include Title, Price, Descriptions 1 through 6, Button Link and Button Text.
Once you've added this content, you can go proceed to publish – your setup is complete already.

Pricing Tables is a minimalistic stack that takes the work out of building a flat comparison table. There are no bells, or whistles, with the exception of the fact that the column that your visitor hovers over grows a subtle shadow. The setup is simple and the results will suffice in many situations.


Comments

Eye Catching Hue Changes

Did that stack just change its colour? I'm sure that it was yellow before, but now it is blue…
An Easter Egg from DeFliGra.

It's Easter Monday and Tommy has just placed an Easter Egg on his Stacks Page. Tivoli. And it's free.

Actually, this is a stack that I wanted a long time ago after seeing the effect on a web page. However, the developers that I spoke with didn't seem to be interested in the idea so, not wanting to bother myself with the necessary CSS, I abandoned the idea.
The page in question was a page consisting mainly of text and it very slowly – almost imperceptibly – changed colour as you were reading.

And this is exactly what Tivoli will do for your RapidWeaver text blocks.
Drop the stack onto a stacks page, drop in some text content and set the colours that you'd like.
When you visit Tommy's demo page, you'll find that the examples he provides are a bit stark. He has to emphasise the stack's possibilities.
But think "Pastel Colours" and the possibilities of Tivoli become more obvious.

A text bock with a pale yellow background imperceptibly morphs into pastel blue, whilst the text slowly changes from blue to teal. Your visitor's eyes will automatically be drawn to this block of text – your CTA can no longer be ignored, that button just yearns to be clicked!

tivoli stack

Stack settings
Tivoli is a work in progress and Tommy promises future updates.
If you want more than one block to change colours, you'll need to set a unique ID for each stack.
Ani Flow has the cryptic settings Lunch Break and Running. To be perfectly honest, I've been unable to discern what the setting does.
Timing and Delay set the length of time that the colours are displayed and the transition time – the settings are in seconds. The higher the settings, the more subtle the effect, but be my guest, set the minimum of 1 in each case and have your CTA flash like a neon sign.
You can set the base colours of the stack and its text content and then you can set four colours for each to transition through.

Further, there is a setting for an Inner Shadow. If your text block is rather small – like the example above – I would advise against using a shadow; with any of the available settings (small, medium, large) it's rather imposing.
And last, but not least – Tommy's usual Custom CSS settings.

I like Easter Eggs – even when they are not made of chocolate!

Comments

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.

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