Clicky

RapidWeaver Stacks, PlugIns, Themes ...
menu Menu

rjhweb design

rjhweb design

fast, flexible fair

Ninja News

RapidWeaver News & Reviews

Internal Search Engine

If you want your guests to be able to search your site, there are a couple of options available. You can set up a Google Custom Search or a DuckDuckGo search box for your page. Both can be set up to search more than one website, but neither looks especially good without hacking the CSS and DuckDuckGo is only fully reliable when searching a single website.
If you don't mind advertisements above your search results, Freefind and SiteLevel Basic are both very good, both are customisable with Freesearch being highly configurable.
The problem with all of the above solutions is that you have no control over the regularity with which your site is trawled for fresh data, although with Freesearch, you can log in to your control panel and refresh the index manually.
There are a couple of RapidWeaver stacks which will place a searchbox on your web page – one of those is Live Search from 1LD. Live Search just underwent a massive overhaul and now delivers reliable and highly professional looking results that match your site's theme perfectly.
Live Search
First and foremost, Live Search will carry out a private search of your website, without involving external search engines. Hence, your search is not tracked and no advertisements will be displayed.
If you drop a Live Search stack into your RW project, you can publish the page[s] and forget it. No setup is necessary whatsoever; there is no PHP support needed and no database to set up. Once you've published your page, you can search your site immediately. It's that simple.
It will take a couple of seconds for the initial load, but that is to be expected.
The simplicity doesn't, however, mean that Live Search is not customisable. It is, in fact, as highly customisable as Freesearch, if not more so.
live search
Just take a look at Live Search's list of features:
Search Bar Options
Show Suggested Search Terms; Allow Autocomplete
If you click the third option, Customise Appearance, you can then set the Border Radius; the Input Font; the Input Font Size and the colours of the Background; Border; Input Text and the Placeholder. And you can disable the Search Icon.
Search Result Options
Results per Page; Word Count; Open Links in New Window and Show File Path.
If you click Customise Appearance, you have the option of four different Themes — These allow you to choose between two display styles for the search results that either load as a pop up or load directly into a container that you declare. The Embedded options allow you to place the search bar in a sidebar or elsewhere, but have the results display in a container of your choice within the main content. There are also Four different colours for the Focus Overlay in addition to the Title Font and Font Size; the Text Font and Size and the Text Line Height. Then you will find options to set the colour for the Background; Text; Page Titles; Page Tiltles Hover and Term Highlight.
Advanced Options
I'm not going to list all the options here; suffice it to say that you can alter all text and error messages to the language of your choice. Then there is an option to Search Additional Pages for pages not included in the menu bar. Additionally you can click Search These Pages Only.
There is the option Hide Description Terms, which will allow you to add a list of words that will not be searched for.
Finally there is an option to Declare Search Container, which will allow you to enter the ID of a specific container to search instead of a search of whole pages. Only one container may be added here, so make sure that you have set all of the containers that you want Live Searchh to look at to the same ID.
If you don't want a specific page to be searched, you can add <!--NOSEARCH--> to the page prefix and the page will be excluded from the search results. Similarly, if you have text areas that should be exluded, you can add the code before and after that text. Snippets are provided with the stack.
While Live Search will not function in Preview mode – it must be published before it can index your pages – the changes that you make in the stack settings panel are displayed on RW's Edit page, so that you know exactly what your results will look like before you publish.
I have recently tested a number of different search engines and have come to the conclusion that for a private search of a single website i.e. a search that is not tracked by a corporation and is plastered with 'relevent' ads, Live Search is the ideal solution that has the added plus that it is easily and fully customisable.

Comments

Clandestine Connections & Cues

Have you got something to hide? Secret documents; a login page that not everyone should find; sleazy pics? Then I've got just the thing for you…

Stealth Link

Stealth Link from RWExtras is a link that doesn't always link to the page that you'd expect it to. A normal click will take you to a perfectly innocent page – your portfolio, perhaps. However, if you click and hold a Stealth Link for a couple of seconds (4 seconds being the default), it can take you somewhere completely different. A members login page for instance, or a download area – the choice is yours.

Once you open the Stealth Link settings panel, you'll only find two settings: Hold Length and Destination Link (your hidden page). Drop a text container into Stealth Link and apply a normal link to some text and your clandestine link is ready to be clicked or held.

Super Tooltips

Give your visitors detailed cues when they hover over a link, with Super Tooltips. A great way either to let them know where a link will lead them or even to explain part of a text.

I moved the Tooltip in the first screenshot it would normally be positioned exactly below the linked text.

Let's take look at how Super Tooltips works. In the settings panel, you'll first find Custom IDs that will allow you to format links for tooltips elsewhere on your page. This will allow you to add just a single Super Tooltips stack to the page and to use its settings over multiple text or paragraph stacks. To do so (using the default settings), add 'customClass a' to the Custom Class section of your text container and in the URL panel, add an id with '#customid a'. Then add your hint as described below.

Below the IDs, there is an option to display the tooltips with or without an arrow. Next, you can set the Max. Width for the tooltips. Below Max. Width you will find Tooltip Animation settings. The tooltip can Fade in, Grow (default), Swing in, Slide, or Fall in. However they appear, they certainly can't be missed.

Tooltip Side sets where the tooltips appear: Top, Bottom (default), Left, or Right. And finally, you'll find a choice of six different Tooltip Themes for the appearance of your hints.

If you want the links to link to a specific URL, you need to add the link to your text as you normally would. To add a hint, you need to add the hint text into the Value field next to the Title. If you need a hint, but don't wish to link to an URL, just leave the URL field empty.

If you have a page with 'chapters' and would like each chapter to have its own Super Tooltips formatting, you may add multiple Super Tooltips stacks to a page, each with a different setting. But don't overdo it – you'll confuse your readers.

Stealth Link and Super Tooltips are two great additions to your RapidWeaver toolbox and Stealth link is free!

Oh, and if you're wondering why the links in my screen shots stands out so boldly, that's LinkEffectThing, but that was the subject of a completely different review.

Comments

Ups And Downs

Do you oversee a charity website? Are you responsible for an online project? If so, you may have asked yourself how to demonstrate how your project is progressing – is the project's funding going as planned – is your project nearing completion, or is there still some way to go? Well, you could add some sort of progress bar, but that doesn't really say a lot. How about a Line Graph?

Line Graph

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

While I was writing the above, Will was hard at work updating yet another stack. CSV To Table is also stack that will present project details to your visitors, but this time using a more sober display method.

RWExtras' CSV To Table does exactly what its name says, it takes a CSV file and presents the data as a table. More useful than a line chart, if you need compare details more easily.

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.

RWExtras' CSV To Table is a clean way to display tabular data.

Comments

RWExtras – Gutenberg & Layerz

Johannes Gensfleisch, better known as Gutenberg, was the German blacksmith/goldsmith who introduced movable type to European printing and is the father of the modern printing industry. Like the scribes before him, he realised that large texts require a smaller printed area if displayed in columns. Type set in columns is also easier to read. What better name, then, for a stack that automatically divides your text into columns?
Gutenberg

RWExtras' Gutenberg stack has been completely reworked for Stacks 3. It is as simple to use, as it is elegant, but it also has a wealth of features to render it completely responsive.

Simplicity: Drag Gutenberg onto a page and paste your text into it. Hit command + R to render/preview the page and you will find that your text has elegantly been divided up into four columns of equal height, with dividers between each column.


Could that be any simpler? I don't think so. You'll also find that if you reduce the width of your page, the text automatically reflows to fit the new width. The text content reflows to match the new column heights. Whilst reducing the screen width further the number of columns is reduced until, when finally reaching the mobile width, only one column remains.

Responsiveness: The settings panel contains the magic behind the transition. You will find the panel's settings reproduced four times. Once each for Small Screens, Mobile Screens, Laptop Screens and Desktop Screens, allowing Gutenberg's display to alter for each.

The very first setting is Content Type and can be set to HTML, Markdown, or Styled Text (default). Gutenberg renders each content type equally well.

The display settings that follow allow you to define the Column Count, the Column Gap (otherwise known as 'Gutter') and the Border (otherwise known as 'Divider' and not to be confused with the outer border) Weight and Colour. As already stated, these settings are repeated for each possible device. I found that there is nothing to be said against the default settings, however, if you don't like the dividers, you can set the Border Weight to 0 and reduce the Column Gap slightly.
No further settings are available. The emphasis is placed on simplicity.

Master Gutenberg utilised a number of tricks for one of his first books (The Gutenberg Bible). He implemented justified columns by using Ligatures, variable width Glyphs and Hanging Punctuation. Sadly, on the interweb, these are all things of the future. Whilst justified text is possible in RW, it usually doesn't look very good, so Gutenberg hasn't added it unless you include HTML tags.

The Gutenberg stack presents your text elegantly and highly readable on any device it is displayed on. 10+ forRWExtras!

Layerz

If you wish to layer multiple stacks, one atop of the other, I don't know an easier way than Layerz.
With the added advantage of Stacks 3, you can even fine tune your layered stacks in RW 7's preview mode.

The simplest application of layered stacks, is to position an image caption over an image, but Layerz allows to to place any stack you wish over any other stack. Heck, you can even place text over text if that is your fancy!

Layerz is a lot easier to use than some layering stacks I've encountered. I remember spending hours for one review, positioning my (two) stacks exactly as I wanted them. Not so with Layerz.

Drop Layerz onto a Stacks page and you'll be presented with a container for your base stack. You can drop any stack you like into this container – it will most likely be an image stack?

Now, lets say you wish to superimpose a caption text. Nothing easier than that! Click the + button below your main content and add a text container of your choice. In the example above, I added Headline Pro from BWD.
Next, you'll want to position the stack exactly where you want it. But let's first take a look at Layerz' main settings panel. There's not a lot that you will need to set here, but you perhaps you want Layerz to be placed inside your Theme Banner or in withinan Extra Content area? If so, you'll need to take a look at the Stack Placement settings.

Now click the Layer stack inside Layerz; there are many more settings available here. I didn't want my rather large headline to obscure the image on smaller screens, so I left the Breakpoint set to 768px. On screens of this size and smaller. my superimposed headline now slides down below the image.

If you wish, you can also rotate your layered stack by setting a value for its Rotation. The z-Index may also be important, depending on which other stacks are in Layerz' vicinity. You can also add a unique ID in case you need to target it with specific CSS formatting.

Now we get to the actual positioning of your superimposed layer. In Horizontal, you can set Left, Right, or Centre. Margin allows you to move the stack away from the edge of the main stack.
The Vertical positioning of your layer is set to Bottom by default, but you may also set Top, Middle, or Transformed Middle. I found that 'transformed' worked best for entering my caption.

By altering the Bottom settings, you can now move the layer up or down – I moved my caption up by 5%. The superimposed layer's width is set to Proportional by default, meaning that on smaller screens it will will retain its proportions in relation to the main stack. Auto, or Fixed may also be set. My caption is set to 70%. The layer's height settings are similar to the width settings, so that you have complete control over the layer size.
If your layer doesn't stand out against the background, you can choose Fill Layer to add a background. In my example, I set 40% (opacity) white. And finally, we have settings for Corner Radius, Layer padding, Text and Link Colours, Font size and Line height.

Want to add more layers? Just click the + button in the main stack and experiment to your heart's content.

As I said, Layerz is really simple to set up and is one of those cool tools for challenging layouts.

Comments

Adjacent Spaces

Some weeks ago, I downloaded Sections Pro from the BWD site. It was only now that I was able to take a look at what I'd downloaded. I did try, but was hindered by the fact that in RW 7.1 nothing seemed to work as it should, not to mention the regular crashes. I just threw a quick page together to see what I might be able to do with it in future.

I know that, for some of you, this is old hat, but if you haven't taken a look at BWD's Sections Pro yet, I recommend that you do so immediately – it opens up a completely new design world. One that wasn't available to RW users previously.

Of course, you could set up variable width, responsive columns and build chequered pages, but Sections Pro is much more than that. As Andrew writes on the product page, Sections Pro isn't complicated, but it is  rather like purchasing a new car. You can jump inside and drive off with it straight away, but it may take you months to discover what all the knobs and buttons inside do and if the hype about fuel consumption was accurate or not.

My first steps with Sections Pro were, as already mentioned, hampered by an unstable application that didn't seem to do what I wanted it to do. I even contacted Andrew to see if I'd missed something. As it turned out. I hadn't – it was just a misbehaved app.

I've always liked diagonals as design elements. These were previously difficult to create and involved transparent .pngs, which were challenging when it came to create overlapping elements.
Enter the Sections Pro suite.

Sections Pro
Sections Pro

As I say, diagonals. That's what I jumped in with. I envisaged a design with overlapping diagonals at the top of my page and a text container that overlapped them.
Sections Angle to the rescue! I quickly discovered that I needed an empty, responsive stack at the top of the page to square off my top diagonal. I wanted three columns with different gradients within the diagonal, similar to the Stripe pages. Sadly, that is not yet possible (Andrew?). O.K, I can accept that, let's press on.

A second, smaller diagonal was quickly added, moved up to overlap the first and then moved below the top diagonal using the z-Index. So far so good. But what about the overlapping text box? 

A standard Sections Pro stack quickly solved that problem. A margin with a minus value moved the box up to where I wanted it and the with a little motivation from the z-Index settings, it appeared above the diagonals.

Feeling adventurous, I decided that I would add a Headline that moved up and faded as the page was scrolled. That was quickly achieved with Header Pro and Scroll Mate – both BWD stacks. 

But what about an animated image caption?
Sections Box quickly answered that question. One Sections Pro stack with a Child Stack [background image], a Sections Box inside the Sections Pro stack containing the image caption. A second Child stack added to the Sections Pro box to animate the Sections box and Robert is your father's brother!

All that remained now was to position my site logo over the Foundation Top Bar. Once more, the solution was a Sections box inside a Columns stack with the appropriate proportions. You can also add negative values for the Sections Box Margins and alter the z-Index until the Box is positioned exactly where you want it.

With the exception of the menu bar and a responsive columns stack, the example above was built entirely with BWD stacks. You can explore Sections Pro for months on end, and you'll continue to find new possibilities — an amazing suite of stacks. I highly recommend that you download them and begin your exploration straight away, but don't forget to add a little coffee money to Andrew's kitty before you leave the BWD site.

If you'd like the example project from this rapid-run-down (which comes nowhere near doing Sections Pro justice – I've only been using it for a week) then please feel free to drop me a line.

Comments

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.

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.