Did you ever build a page that had a number of buttons on it? You build one button, tweak it until you get it just right, you then duplicate it eight, nine, ten times and add the links. You finish the page and show it your customer – who doesn't like the button colours. Start over.
I think you'll find that the same thing happened to Tommy Hansen recently because the DeFliGra site suddenly has a new stack The stack is simply called Click and Tommy assures me that it is a very simple stack. What Click does, is ensure that every button on your webpage – or even your web site, if you want – looks identical.
When you've installed Click, you'll find that there are two stacks – a Click Master and a Click Servant. With the Master on your Stacks page, you first set a Group ID (the standard setting is 1), the next setting is Alignment – the button can be aligned left, right or centered within its containing stack.
The button padding for left/right and top/bottom is set separately as is the font size and line height. The text itself may be set to bold. The text can be set to change colour on hover.
The buttons are flat so the colour settings are for passive and active state, however there are options to add custom CSS code to alter the button's appearance.
There is also a unique option to set an outer border around the button. The border has eight different settings from plain, over dashed or dotted to grooved. The outer border may be activated or deactivated, as can the button filling. The corner Radii for both the button and the border can be set.
This results in three different button designs:
1. A flat button that changes colour on hover.
2. A flat button with a border, where either the button or the frame or both may change colour on hover.
3. A ghost button that changes colour on hover.
Once you've set your Click Master, you can drop as many Click Servants on to your page as you wish and – as long as they have the same Group ID – they will look identical to the first. Now all you need to do is change the text and set the individual links.
As already mentioned and as is to be expected, Tommy has included extensive CSS settings. The result being that with just a little code dropped into the sitewide CSS container, every button in your entire project will look identical and for alterations just a single Master stack would need to be changed. How cool is that?
Chameleon from Doobox is a stack for creating CSS gradient backgrounds for RapidWeaver. The gradients are probably different to anything you might imagine …
… you would probably imagine a gradient from white to teal as being white at the top of the screen and teal at the bottom of the screen and if the gradient stretches over the length of two, or three screen heights?
Chameleon's gradients are very special because at any one time, the screen will only display one flat colour. If the top of the gradient is white and you are at the top of the screen, your whole screen will be white. Scroll down the screen and Chameleon will calculate the colour of the screen from the screen's position in relation to the gradient and will gradually and almost imperceptibly change to – using our example – teal.
Chameleon hast just two settings: Starting Colour and Ending Colour.
You can drop as many stacks as you wish into Chameleon, but for the gradient to become visible, the content should extend below the fold – the further, the better. If your content is shorter than, or the same as the screen height, Chameleon only produces a single flat colour – that of the Starting Colour.
With a subtle gradient you will hardly notice that the background colour has changed, but even with a daring change from blue to pink, the effect is never shocking. The effect has to be seen, to be fully appreciated. Visit
Chameleon's product page and view the demos.
*Please click on the video for HD version.
Remember Omnidea? They are a small Italian software smithy. They have a cool app that gives you rulers on your Mac's screen and they have a couple of RapidWeaver plugins. RapidMaps, for instance, lets you insert very flexible Google Maps into your web page and then there is RapidCart, one of the first e-commerce solutions available for RapidWeaver.
RapidCart is a little long in the tooth now and, while it is still a great solution for smaller online stores, it's not ideal for larger stock lists.
Rather than update RapidCart, Omnidea has decided to create a completely new store solution — RapidCart Pro [RCP] The decision to do a rewrite solves a number of problems that e-commerce solutions in RapidWeaver have had until now. You'll see what I mean as we go along.
Adding products to your store is easy. RCP makes use of RapidWeaver's resources, so you drag your product images there. If you are selling t-shirts, you can either add a blue t-shirt, a yellow t-shirt and a red t-shirt, or you can add a Led Zeppelin t-shirt with options for a blue, yellow, or red shirt. Obviously a variable for the size of the t-shirt can be set in each case.
If you add multiple images to your products, RCP automatically creates a slideshow. If you want to show larger images, just 'Enable Lightbox' in Settings.
If you offer discounts based on the number of items purchased RCP makes this process a lot easier than in the original RapidCart (I never was terribly good at numeration and found the old process complicated).
New laws in Europe dictate that some products must be sold with VAT calculated in the purchaser's, not in the vendor's country. RapidCart Pro elegantly solves this problem with a complete editable list of countries. You can even restrict the countries that your products are available in by activating or de-activating them in the list.
Shipping costs vary with the number of products being shipped and with the shipping method used. RCP has extensive options to add costs based on the number of items, weight or total cost.
You can add multiple carriers to RCP. An example to demonstrate how much thought has gone into the programming: Let's say your business is based in Belgium. You can add a Standard Postal service for delivery all over the world. Add a delivery service such as UPS for deliveries in Europe. Add Overnight Delivery for Belgium, France and Holland. You may add or remove countries that each carrier can deliver to. And If you offer free shipping for orders over a certain amount, there's an option for that for each carrier too.
Special offers are a cinch too. Add an offer, decide when the offer should be available and forget about it – come back next year, if you wish, and reset the dates to repeat the offer.
The plugin setup is an extensive set of three pages. In a similar fashion to the original, RCP will display standard buttons for adding articles to your cart and completing your purchase. You can choose between 'Flat' 'Almost Flat' and 'Gradient'. However, geeks can easily add in CSS and JS to completely customise RCP.
The number of columns displayed at any breakpoint can be set – yes, RCP is responsive – and headers and footers can optionally be displayed on each page; on catalogue pages; on product pages and/or on cart pages.
Payment: There are multiple options for adding tax – too many to go through here – and extensive options for requesting customer details. Which brings us to payment …
… Obviously payment via PayPal is available – for testing, PayPal can be sandboxed.
Options for accepting orders without processing payments are available. Sensitive data, such as your bank account details, can be attached to the order details via the configuration.
Further payment processes may easily be added to RCP's backend. As you read, payment via Stripe is in preparation, and I am assured that other options will follow. As JS customisation is available, payments can readily be set up by anyone with an understanding of PHP.
So what about Stacks Users?
RCP includes a set of stacks that will allow you to import your store, or parts of your store into Stacks pages. This is especially important if you use a freestyle theme such as FreeStack R, Foundation or Pure. Don't be confused by the fact that your store front isn't visible in preview, though. RCP is entirely PHP based and doesn't become visible until it has been published.
A great deal of thought has gone into the re-creation of RapidCart and the new Pro version is easily the best solution available for setting up an online store that is hosted on your, or your customer's server. It is a vast improvement on the original RapidCart and I can recommend it to anyone that uses RapidWeaver and has a line of products for sale.
When Christoph decided to revive Rapid Ideas, he not only presented some new stacks, but also published a new theme — DEW.
DEW is based on Kube. Kube is a responsive, grid based framework that is ideal for use on screens of any size.
When you first load DEW, it appears as a full screen landing page with title and slogan, but there are twelve different standard themes to choose from, including hero images to replace the full page image or contemporary flat landing pages. In each case, the click of a button can scroll the page down to display the first block of content. The menu bar is sticky and the menus can be configured to open on click or on hover.
DEW arrives with twelve images that can be used for both the full screen display and for the hero setting. If the images are disabled, the header can be set to grow to fit its content or can be set to one of seven different sizes. The images can easily be swapped for images from your own collection. There is a collection of twenty images for use as background patterns.
Twenty-six web fonts are available for text display which can be set to one of three different sizes ranging between small and extra large.
DEW has four Extra Content Areas that can be positioned in the header, the footer and above and below the main content. Strangely enough, these do not take advantage of the EC stack, but must be wrapped in divs. For an ECA in the header, for instance: <div id="ECHeader-Padding">[Your Content]</div> Luckily Christoph has written an extensive manual for DEW, so you won't need to search long for the settings. The fact that the ECAs are implemented through HTML does, however, mean that they can be used on standard RapidWeaver pages.
Icons for tags, categories and archive are automatically created for the RapidWeaver blog page and social sharing icons are also included for the footer area.
Shadowbox is included for RapidWeaver gallery pages. Shadowbox is very flexible, and not only lets you load images but also video, flash and web pages. Again, a glance in the handbook will make the use of external media easier.
DEW is an extremely flexible theme with a wide range of editable settings which will allow you to set up uniquely styled websites with a minimum of effort and within a very short time. Take a look at Christoph's demo page, I'm sure you'll be impressed.
Single page websites load fully with the initial page either as a continuous scrolling page or zones that are replaced with new page elements as the user scrolls.
Single page websites are trending at the moment, because this type of web design is perfect for portfolios and product sites – anything that is not content-heavy. Showcasing the complete content of a website on a single page saves time for visitors because they don't need to jump from one page to another. It also has the advantage that the site only has to load once.
I mentioned recently that I feel that single page websites will be fashionable for a while yet. Well, so do the developers. Screens, for RapidWeaver, is Joe Workman's take on the subject.
The slide effects in Screens are based purely on CSS. This has the advantage over JS solutions that the page scroll is instantaneous and is extremely smooth. I especially like that there are no bouncing effects when the page changes.
Screens can be used with any freestyle theme including Blank, FreeStack, Foundation or Pure, etc. As Screens has its own (optional) Foundation-style theme formatting, I found Blank a good place to start.
Let it be clear from the start that single page websites in RapidWeaver are only suitable for Stacks pages. It is not possible to include a styled text or a standard contact form within the page. RapidWeaver pages can not be loaded within the single page.
It should also be mentioned that while Screens is fully responsive, a new approach to page layout must be taken – single page websites are just that – the information displayed at any one time must fit on to a single page. Mobile screens must be taken into consideration from the word go.
Screens is a suite of seven stacks. Screens, Screens Page, Screens Styles, Screens Menu, Screens Navigation, Screens Slide, and Animation – listed in the order that I deployed them.
Screens stack is the basic 'theme' and adds the CSS code to your project. The HUD displays the setup for the site navigation. Screens Pages are dropped into the base stack.
Screens Page is the stack that will contain your page design. It is effectively your Stacks page, the only difference being that the page title is in the HUD. Also to be found in the HUD are settings for a background image or colour. Any content dropped into the Screens Page will be vertically centred.
The Screens Page has an image well for background images. The images can be set as cover images, so that they will scale to fill the screen. There are also settings for image opacity and positioning.
Screens Styles is an optional stack that can replace the central styling of other themes. It supplies the formatting for Headline sizes and colours, fonts and link formatting. It also has options for the site's background. Screens Styles should not be used in combination with set themes, as conflicts can arise.
Screens Menu is an optional menu bar that is placed above the Screens stack. It displays the page names from the Screens Page HUD and will navigate to those pages. Screens Menu has extensive formatting options for desktop, tablet and smartphone display, including background images. The menu can be set to display horizontally or vertically.
Screens Navigation is a set of arrows which will allow you to navigate your site. Screens Navigation can optionally be used as an alternative or as an addition to the standard page bullets that appear by default on the right hand side of the page.
Screens Slide will allow you to extend your page to the right. Drop as many Screen Slide Stacks into the Screens Page, as you wish to have horizontally sliding pages. There are no further settings for Screens slide.
The final stack is Animation. Any stacks that are dropped into Animation will be animated when the next page is scrolled into view. The stack has extensive options for fade, slide and bounce etc.
Screens is Font Awesome ready. As Font Awesome is already used for Screens' menu bullets, you may enter Font Awesome tags anywhere on the page to place Icons.
The first beta release of Screens was mid January, so it has been a long time in the making, but the results are worth the wait.
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