RapidWeaver Stacks, PlugIns, Themes ...
menu Menu

rjhweb design

rjhweb design

fast, flexible fair

Ninja News

RapidWeaver News & Reviews

Marathia's Rainbow Text

It is sometimes necessary to accentuate a text, or a headline, or even both and you may have been at a loss, as to how to do it exactly. Fear not, help is at hand.

Marathia's RainbowText is Jeroen's latest "Pay-What-You-Want' stack. It has been especially created to accentuate text elements. The effects can range anywhere between anywhere between subtle and eye-watering crazy.

If you drop a RainbowText stack onto your page, you'll find that, in its default form it is a text stack awaiting your text input. It contains a lot of setup information which can, of course, be hidden. The stack settings then give a Target with the options Content Of Stack and Custom Selector Outside Stack (advanced), i.e. if you know the selector of the stack that you wish to target, you may add it in the selector box that then appears.
Otherwise, move on to Tag and set the stack's format to anything between H1 and H6 (or None, leaving the stack as a Paragraph stack).

The next setting that RainbowText requires is Background and the options range between 2—8 Colours, Background Image and SVG Background Pattern.
I freely admit that I was unable to discover where to find the code required for an SVG background pattern, but then, I do suffer from an acute case of code-phobia. The patterned headline above uses an Illustrator pattern exported as .png that I created.

Image size has just two settings – Tile and Fill. Exclude Links, when set, will exclude any links with your text from being reformatted. Use Fallback Colour will allow yo to set a flat text colour for all IE browsers detected.
RainbowText Style gives you full control over the text formatting, including Spacing and Font Family gives you the options of Theme Default, Web Safe Font – with an option of fourteen standard web fonts, or Custom (Expert Mode), where you may enter a Google Font, plus a substitute format.

Capitalise has the options Normal, All Upper Case, All Lower Case, and Initial Caps. Then follows a section with the title Advanced Fiddling, where you can set what is displayed in preview mode, Reduce the Top and Bottom Margins and move the Background Image Position – Up, Down, Left, or Right, if it doesn't't suit your fancy.

I have to say that what initially struck me as a gimmicky effect stack, turns out to be a useful stack for text accentuation. You won't need it on every website that you build, but one day it will come in handy.


Split Headlines – Do Away With The Tedium

What started life as a simple Pizza Menu, slowly morphed into a full-blown stack with a myriad of setting options. Nothing unusual for Tommy at DeFliGra, he often gets tired of repetitively formatting text block for text block and thinks up a stack to automate the process instead.

Split Headline is just such a stack.
Let's stick with the Pizza Menu. We've all had those clients that, when you've presented the final page, changes his mind and wants different colours for the content. So you meticulously alter all of the colours to suit his new wishes and he decides that no, it shouldn't be red, white and blue after all, his is an italian restaurant; the colours should be green, white and red. so you start over. Two days later the client decides…

Split Headline is a stack that will allow you to define a master setting that will coordinate the settings of all slave instances of the stack. It's not the only DeFliGra stack that has master and slave stacks and they are a neat idea that can save you hours of tedious work.

Drop a Split Headline stack onto your page and you'll see an unusual looking stack with three 'add child' plus buttons. Essentially, Split Headline is a two column stack with a footer stack..
If we begin to compose our menu on the left, the first child button offers a choice of adding a Header, Text, Two Columns, Three Columns, or an Image (actually all three + buttons have the same options). So lets add a Header. Clicking the same button once more, you could add a text block that shares the first column. Click the right + button and you could add a second header and then an image. Clicking the middle + button will give you a child stack that fills the width of the Split Headline stack.

Split Headline
Add your content to Split Headline and format away to your heart's content – there are certainly enough options in the settings panel.
Once you're satisfied with the results, drop a Split Headline Servant stack onto your page, make sure that it has the same Paired ID as the master that you just formatted and add the same child stacks to it that your master has. Cool – they all have the same formatting and all you have to do now is add your content!

Split Headline
Stack settings.
No! No way! I refuse! If I have to go through all of the settings here, I'll still be working on this post next week – and you'll get bored reading it. Instead, I'm adding two screenshots to demonstrate what I mean.

Split Headline
See — you can literally spend hours playing with the individual settings. I assure you, however, that the settings panel looks a lot more complicated than it really is.
Suffice it to say that there is no aspect of the stack that can't be customised.

If you (don't we all?) have clients that insist on changing their minds countless times, you'll find Split Headline to be a blessing. But not only that, it can save you hours of tedious work on those more complicated pages.


The Myth Of 72dpi

I hear on a regular basis that images for web display must be set to 72dpi (96dpi Windows). The statement is simply incorrect.
Video monitors do not work with dpi. They display pixels. To put things straight – dpi/Dots Per Inch is a set of instructions for the printer, for the spacing of the dots/pixels when an image is printed.

So let's get print products out of the way first. Lets take an image of 500px X 375px. If you set it to 3dpi and print it, the print will have 3 X 3 dots spaced across each inch. The physical size of the print will be a whopping 168 X 125 inches, but you'll need to stand around 100 yards away to recognise it.

If we set the resolution of the exact same image to 300dpi the physical size of the image (kb) remains exactly the same, but when printed it will have 300 dots spread across an inch. The print size will be 1.67 X 1.25 inches – little better than a thumbnail.

3dpi/30dpiA comparison of 3dpi and 30 dpi in print
To Scale, but not actual size
Depending, of course, on your screen resolution (ppi)

Now let's take a look at video screens. Video screens only display pixels and are set to a screen resolution in ppi (Pixels Per Inch) a common setting today is, for instance 1920px X 1080px.
Any dpi information contained within an image is disregarded. An image with a pixel size of 500px X 375px will always display at 500px X 375px – on your monitor, on my monitor, or on Joe Blogs' monitor regardless of the dpi settings. It will never change either its pixel size, or its appearance. The physically displayed size will depend on your monitor's ppi settings.

Here's Proof That Video Systems don't use dpi
Don't believe me? Then take a closer look at the two images below. The first is set to 3dpi, the second is set to 300dpi. Both are 500px X 375px.
Do you see any difference? I don't. And yes, I have my glasses on.

Bike 3dpi
 Image set to 3dpi 

Bike at 300dpi
 Image set to 300dpi 

Still don't believe me? Then drag the images to your desktop (or right-click and save.)
Don't use the clipboard function. The copy function won't copy any dpi information and Windows image editors will automatically set the resolution to 96dpi, whilst Mac editors will set the resolution to 72dpi.
Now open both images in your favourite editor and check the size and resolution for yourself.

Believe me now?

It is important not to confuse PPI with DPI.
If you set an image to a physical size of 300ppi x 200ppi (px), but set your webpage to display the image at 500ppi x 300ppi (px), the browser will need to interpolate the image (i.e. replace the missing pixels with iterated (guessed) pixels, causing the image to look pixelated. If the same image is set to display at 200ppi x 150ppi (px) the browser will have to 'throw away' the excessive pixels – causing an an image to appear unsharp.

In the end, it's all just pixels.


Day Of Reckoning – RapidWeaver Calculator

Isn't it strange how two developers can release similar stacks within days of each other. Just a few days ago, it seems, I worked my way through the settings for a calculator stack. Now another one has suddenly appeared.

A quick look at the new CalcStack from Stacks4Stacks led me to believe that this was going to be a quick review. A more comprehensive examination proved me wrong.
Take it from me, the examples on the Stacks4Stacks page don't do the stack justice. Not only is CalcStack proficient with the four basic calculations, plus modulus, it integrates seamlessly with FormsPlus and can pass on its calculations to other contact forms – even the default RW form – and to other web pages for further processing.

Stack Settings
The very first option is Integrate With FormsPlus. Setting this option allows you to drop CalcStack into a FormsPlus field. It extends the FormsPlus code and becomes fully integrated. (Take a look at the demo project)
Next you'll find a choice of buttons that may be added to the CalcStack: Copy Answer, Mail-To, Reset/Reload, Submit Answer As Hash, Submit All Input As A Query (allows you to connect to an external page/site), Share To Twitter.
Extensive Style formatting options follow – too many to list here.

If you drag a CalcStack onto your Stacks page, you'll find it contains a child stack containing a one plus one calculation. You'll need to set a Calculation ID if you wish to use the results in further calculations – possibly something more recognisable than Calculation1.
Calculation Input settings start off with a choice of Input Types. The default setting is Number Box. Optionally, you can set Checkboxes, Fixed Value, Option Select Menu, Range Slider, Input or Answer From Another Calculation, or URL Query String.
Checkboxes will supply an array of checkboxes and associated labels. that provide a list of selectable items attached to a numerical value. Optional selection limits can be used to limit how many checkboxes a user can select. A selection limit of '1' gives the input a similar behaviour to radio buttons and permits only a single item to be selected from the list.
Option Select Menu provides an HTML select menu, allowing users to pick a single option. Not especially pretty (Will's own words), but extremely user-friendly and functional (especially on iOS and Android). This is a the input method to use if you need to be stringent about the values a user can choose from.
Both the Checkboxes and the Select Options are formatted with Markup.

Next – Input 1 Name, Default [value] and Steps. Steps allows you to define the incremented value displayed when the default Increase/Decrease buttons are clicked.
The Input Value can be hidden, but it will need a Operator – Add, Subtract, Divide, Multiply, or Modulus. Next follow the Input Values for the second numeral.

The Answer Settings give you the options Answer Decimals and Answer Name. The Answer may be hidden.
The Unit Settings will allow to to add both a prefix and a suffix to all three field labels – km/h, or ºC, for instance.

Once you have your first calculation, you can add a further child stack to take the calculated value and process it further. Will has provided a temperature conversion table as a simple example. E.G. Calculation1 – n minus 32 ºF; Calculation2 – Answer from Calculation1 multiplied by 5 (hidden); Calculation3 – Answer from Calculation2 plus 9 = n ºC


CalcStack is fully responsive, as you'd expect from a modern stack; will integrate with any theme and is a versatile calculation stack that will easily save you the costs involved with having a calculator specially programmed for your purposes.

If you need an online calculator and didn't already purchase the stack that I reviewed last week, I recommend that you check out the CalcStack demo pages (and 20 minute video) and download the demo version – Will is one of the few developers that offers demo versions of his stacks!


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.



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.


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.