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:
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.
Greg has just updated Grid Iron to version 3 and it now processes not only Google Spreadsheets, but also CSV and Excel files. Not only that, but Grid Iron also understands Markdown so you can now add links, embed images, bold text, or other HTML styling directly into your spreadsheet.
Your data is added to the RW resources, unless of course you are accessing a Google Spreadsheet, and you have many, many options to format the appearance of your tables.
Grid Iron is responsive – albeit in an unusual fashion: If your data can not be contained within the width of your page, the first column will display a plus button which, when clicked, opens a dropdown with the 'missing' data. This is, of course, a matter of preference and many might prefer a solution with a slider.
But let's take a look at the stack settings. First off, you need to set the format Type for the data that you wish to import. As already mentioned, you may choose between CSV (default), Excel or Google Spreadsheet.
You then need to Link Grid Iron to the data. Sadly, because your data is warehoused, you can't preview your finished table until it has been published online, instead the preview displays a dummy table filled with weather data. This is sufficient for general formatting, but you won't see if your Markdown formatting is correct until it has been published.
Grid Iron automatically formats the first line of data as a header. The stack settings allow you to duplicate the header as a Footer – useful for longer tables. The next option is Responsive Table. If this is deactivated, it doesn't mean that your table has a set width – it will still adapt to your viewport, but you will not be able to activate the dropdown to view any data from the overflow.
When set to Responsive, you can set the colours for the open and close state of the plus/minus button in the first column.
The next settings are for the Table Header Styling. They include Cell Padding; Border Width; Border Style; Enclose Header With Border; Bold and Italic Text; Horizontal and Vertical Alignment; Font Size; Top Spacing; Background Fill colour; Border Colour and Text Colour.
The same settings are repeated for the Cell Styling, but with the addition of alternating colours for the Rows and Omit First & Last Borders. There are two more settings which will allow both Hovered and Selected Rows to be highlighted with colours of your choice. Selected Rows also include formatting for the Focus Borders and Focus Text (see below).
The Table Controls settings let you choose which additional buttons and information are added to your table. The first setting, Controls Display, is a little cryptic at first glance, but allows a number of settings without needing a checkbox for each of them. B=buttons, L=length, S=search, R=processing, T=table, I=info, P=pagination.
One extremely useful feature of Grid Iron is the option to allow your visitor to export the table data in various formats. There are checkboxes for each of the Export Buttons: Copy; CSV; Excel; PDF and Print. But we're not done yet; the colour of the Button, the Button Text and the Button Border in passive and active states may be also be set and then follow settings for the Button Height; Button Padding Button Radius and Button Size. Next follow individual settings for the search box.
We now come to the Pagination Settings. A Grid Iron table does not have to be displayed as a whole, but can be reduced to a maximum number of lines. The default Page Size is 25 lines.Columns, both left and right, can be pinned within the table. This means that however narrow the viewport, the pinned columns will always be visible. It is also possible to hide columns from the table. Search settings will also allow you to exclude specific columns form the search function.
Grid Iron columns can be sorted, ascending or descending. Sorting Settings lets you Exclude Columns from the function while the colour of the Sort Column, Sort Text, the Icon Size and Colours may be set individually.
Fixed Column Settings (you thought we were done, didn't you?) allow columns to have a fixed width in px or % and once more, you can define which columns are affected by this setting.
And now, finally, follow some settings for Status Board for which, sadly, development has been discontinued. However, if you are a Status Board user, you may still take advantage of its functions.
Unlike other solutions, all Grid Iron content is embedded directly within the HTML of your page. This makes it compatible with all major search engines. A lightning fast networking and cache engine means that your sites load faster, and searches give instantaneous results.
When you publish your data, you'll be surprised at the number of files that need to be uploaded. My tip – go and make yourself a pot of tea while you're waiting.
A lot of thought has gone into Grid Iron 3 and if you are in the situation that you need to publish tabular data, you will find it to be a highly professional solution!
I deployed the old version of the stack many times and found it to be the most versatile table builder available for RapidWeaver. Nothing has changed my perception of the stack, except that it got better!
The results that the old TableBuildr stack produced were, it can't be denied, great. The only problem with the stack was that table cells were listed vertically in edit mode. This meant that if you had a number of columns in a table, your edit page would be a mile or two long; not least due to the fact that the stack header was also very large.
The new Table Builder stack has undergone a complete re-write and its presentation on the edit page is much more logical and compact. The resulting tables also appear much cleaner than before.
So where do you start? Once you take a look at the settings panel, you'll realise that everything is actually quite simple.
The first settings are the number of Columns, the Column Sizing – Pixels (Default), or Auto (the cell size adjusts to fit your content) – and the Column Width. The Pixel Width should be understood as maximum width; Table Builder columns have limited responsiveness and will shrink to some extent to accommodate narrower viewports. However, we have defined a 'fixed' cell. We can't reasonably expect a 10 column table to fit onto a mobile screen and still be readable. When Table Builder is wider than the screen it is being viewed on, a slider appears at the bottom of the table..
Next up, you can set the cell Borders. The default setting is All Sides. The options are Table Box Only i.e. the outermost border; Horizontal and Vertical. The default Border Size is set to 1px. You'll notice that in the screenshot above, the border between the top three columns is actually 2px wide; that's is because these are actually three tables set next to each other. This allows my table to reflow on a mobile screen and still display the information comfortably with each table displayed below the other.
The option Table Fill allows you to change the default None to Alternating Rows, Alternating Columns, or Solid. The text Alignment is a global setting for the whole table, but can be overridden on a row-by-row basis, the same applies to the setting Vertical Align – we'll come to these once we take a look at the stack itself, but first the final settings: These are Cell Padding, Line Height, Text Colour and a check box Make First Column Heading which, when clicked, opens up the formatting for the first line of content.
So let's build our table! When you click the blue + button to add your first cild stack, the first Table Row will appear with the number of columns that you set previously. Each cell has a container into which you can drop the stacks for your content. A cell may remain empty without breaking the Table Builder layout.
Once you've added your content to the first row, you can add more child stacks until your table is complete.
The situation may arise, where you wish to format Table Builder rows differently to the overall table content – for dividing headings for instance. Just click the table row and re-open the settings panel. It will now display a checkbox Override Table Styles. In Preview mode, your row will immediately alter its appearance to bold text with a grey background.
You can now set to work to reformat this specific row with the following settings: Bold Text (is activated by default), Disable Borders, Italicized Text, Column Fill for Odd and Even columns, Text Alignment, Vertical Alignment, Cell Padding, Font Size, Line Height and Text Colour. If you need to repeat the formatting further down the table, you can copy and paste or Alt drag and drop the row to its new position and replace its content accordingly.
Table Builder is, in my humble opinion, the best of its kind. I've had it in my toolbox for a number of years and wouldn't want to miss it. And if you have a larger table that needs to be viewed on a mobile device without swiping horizontally, there's always a workaround (see above).
RWExtras' Line Graph is the ideal stack to display any sort of progression. Line Graphs are boring, right? So how about an animated Line Graph? The more information you add, the more valuable the information that your visitors will ascertain from it.
Line Graph is a really simple stack to use. When you place it on your page, you won't see anything but a set of instructions. However, if you set a path to a CSV file in the settings panel and then switch to preview mode – voila – you have a chart that displays all of the information contained within that CSV. The progress of your project's donations could look like this:
You'll notice that some information is visible over 2015/6. This information is displayed for each part of the graph when your mouse hovers over it. In this case it contains details of each donation and the total reached for the date.
Have more information that you wish to show? Are your investors interested in your sales records for the current month?
This chart shows when and where a sale was made, when the customer account was created, when the customer last logged in to his account and, of course, how much was paid.
Both of the above charts were created with Line Graph with almost zero configuration.
But the settings panel allows quite a bit of configuration: First, as already mentioned, you'll need a CSV file. You can then set an URL to load the file either from your server, or from your Resources folder. Once you've read the setup instructions, you probably won't want them displayed in your layout, so deactivate Display Instructions.
Now you can decide if the curves on your chart should be filled with colour [Filled Graph], and if the curves should be smoothed [Line Smoothing]. Next come Stacked Graph, Stepped Points and Connect Separate Points. The settings can all be played with in preview mode and the changes are immediately visible.
Once you have your curves displaying as you want them, you can set your Graph Height and Title, including the titles Size and Colour. Your X and Y Axes will also require Titles and Render Grid Lines places a grid behind the chart – Now set the Colours for the Axes Titles and the Axis Lines.
The Legend that is displayed (the additional information contained within the CSV file for each project state) is set to Always by default. In this case the legend is fixed to the top right hand corner of your graph and changes as you move your mouse along the curves. With On Mouseover set, the legend is only displayed when the mouse enters the graph. Follow causes the legend to follow the mouse along the curve and None hides the legend completely.
You can add Highlight points to your chart and set their size, then you can set the colours for each of the progress lines; there are colour options for up to five different graphs. The final settings are for the Stroke Width and the Stroke Colour.
RWExtras' Line Graph will enhance the display of your financial records, your project's progress, weather data from the last ten years, or whatever else you can pack into a CSV file, in an informative fashion and has the advantage of being extremely simple to set up.
CSV To Table
Once again, all you need to do is link a CSV file in the settings panel and your file will be displayed in a clean table. CSV To Table automatically assumes that the first row of information is a header and underlays the first line in the table with colour, this can of course be changed in the settings panel.
This is part of the same content as the donations chart above.
The first setting in the settings panel is CSV File (set link); the second setting is (minimum) Column Width. As CSV To Table isn't a responsive stack, you'll need to play around with the Column Width, if you wish to display your data on a smaller screen. CSV TT will match its visible width to fill the container it is in; if your CSV contains mor information than can be displayed on the screen width, a scrollbar will appear underneath the table – you may want to make sure that your most important data is contained in the first columns! CSV TT's height is governed by the number of rows in the file.
The settings that follow, govern the cell Borders, The Border Size and the Border Colour. The Borders can be set to All Sides (default), Table Box Only, Horizontal, or Vertical.
The Table Fill can be set to None (default), Alternating Rows, Alternating Columns, or Solid, with options for the Colours. The (cell) Alignment is set to Left by default and the Cell Padding to 10px. The next settings are forFont Size, Line Height and (font) Colour.
Next we come to the CSV To Table Header Settings which allow for Bold Text, Disable Borders, Italic Text and the same text controls as for the cells. The First Column may also be treated as a header and has the same control settings as Header Settings once it is activated.
You can always trust Marten to come up with a business orientated solution to some problem or other. I've seen a number of forum posts asking "What's the easiest way to build a price list?" RapidWeaver Central now has the answer – PriceThing.
So your client owns a business and wishes to publish his prices online. PriceThing now gives you a simple way of doing so. When you drag the stack on to your page, you'll be presented with a list of three predefined PriceThing Items. If you're not keen on their design, you can delete two of them and set about redesigning the third.
The first thing that I did was to alter the text in the setup panel. I mean; who wants whisky flavoured chocolate pizza? My restaurant serves International Specialities prepared with ingredients Fresh From the Market – That's what I placed in my H1, anyway.
My first speciality comes from Hungary, so I altered the 'Item Name' to Goulash, I then altered my 'Description' to reflect the ingredients used in my goulash.
With that done, I dropped the whole PriceThing stack into a single column stack and set a maximum width. I can now return to my PriceThing Item and match my font sizes, measured in rem, to fit the width. The first thing I notice in the setup panel is that there is an option to use my Foundation or Font Pro Fonts. This means that my Google Fonts, or my Site specific fonts will also be used in the stack,
Animation Settings are also included, PriceThing Items can fade in as the page is scrolled – left, right, up or down. Next up, the font and theme settings – default, or alternate settings for Foundation, if the Foundation button has been activated, and the settings for the Item Name colour, The font settings also include Uppercase, Italic, Bold, Letter Spacing and Text Shadow. The Shadow Colour and the Line Height now remain to be set.
With the Item Name set up, I can move down the settings panel to Item description where I find the same settings duplicated. And they are duplicated once more for the Item Price. The setup couldn't be simpler.
Moving on to the PriceThing container stack, the standard Stacks settings are available. Alongside these are simply a button to collapse the 'Pretty Header' and a slider to set the Spacing between my Items. O.K. so I've set the background colour, the border etc, What else is there for me to do?
Well, actually – nothing, my first PriceThing Item is already finished! I could, of course, click that tempting + button to start over with a fresh item, but I'm lazy at heart. Instead, I drag and drop the existing Item, with the Option key pressed and duplicate it. Now I just need to alter the text in the setup panel and have an exact duplicate of my previous settings.
Once your price list is finished, you can drag the Item Price sub stacks around within the PriceThing container stack, to alter their sequence. Cool!
No matter if you have automobile spares for sale, holiday residences or roast coffee from around the world, setting up an appealing price list couldn't be easier than RWC's
PriceThing. And, of course, it goes without saying that your price list reflows to fit perfectly on a mobile screen.
Marten really went to town with this stack – and his demo page too!
EDIT: PriceThing went through a soft launch and was updated immediately after it was published. The PriceThing Items can now be linked. An ideal combination is BWD's Pop Drop Stack.
Links to the developers ® All trademarks cited on this page are the property of their respective owners.
Do you have a question regarding RapidWeaver?
Would you like help with your new project?
Would you like us to build your new RapidWeaver website?
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.
265 Moo 2
Mae Na Toeng Nai, Pai
Mae Hong Son
We design websites and print-products for small businesses at reasonable prices. We specialise in Responsive Web Design.
We do not harvest or sell personal information.
© rjh web design 2010—16