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 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.
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!
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.
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.
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.
A 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.
Image set to 3dpi
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?
In the end, it's all just pixels.
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.
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!
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:
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.
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