Clicky

RapidWeaver Stacks, PlugIns, Themes ...

rjhweb design

fast, flexible, fair

Ninja News

RapidWeaver News & Reviews

Morphing Lightbox

A few days ago Eric Boo, the man behind CosCulture, released Morphing Lightbox [ML]. ML is a new name for a new type of RapidWeaver lightbox – one that morphs to cover the whole page when it opens and accepts endless amounts of different content.

I was just working on a new webpage and wondering which lightbox I could use to do exactly what my client wants, when Eric's product announcement flattered into my inbox. Just the right stack at just the right time!
My client wanted to open a new page when an image was clicked. As the client's page is a single page website, I thought that a lightbox would be a better solution than a new page, but none of the lightboxes I tried did exactly what I envisaged.
ML does!

Morphing Lightbox is a the ideal RapidWeaver lightbox if you need to add more than an image and a couple of lines of text. You can add a whole page of information to it. The test that I made contains multiple videos, multiple full page images and multi column texts. If you click the text, button, or image that triggers ML, the lightbox will zoom, or slide in to cover the whole page. ML's content can then be scrolled so that the whole content is visible. Videos cease to play when the lightbox is closed. And – my test page contains 14 (in words fourteen) of these lightboxes.

Morphing Lightbox

Stack settings.

There aren't very many settings. You'll need to set an ID for ML, especially if you need more than one instance per page. Linking to the lightbox is child's play, just add # as the URL and set an ID that duplicates the name of the lightbox.
The z-Index is set to 99999 by default, so ML will always float above your main content.
Background Colour – as to be expected with RW7 and Stacks3, the background colour may also be transparent.
Effect – there are five different 'morph' settings for ML including slide ins and fade.
Custom Button – The default close button is a rather imposing 'X', which for my personal taste is much too large. However, you have the option of linking to an image of your choice.
That's it! What more do you need?

Check out the ML product page – you're going to like this one!

Comments

Call To Action On Scroll For RapidWeaver

Jeroen at Marathia's stacks can always be relied upon to produce interesting stacks. His latest product, ScrollShow is a flexible CTA stack that can load with your page, or be set to appear when your visitor scrolls the page.

Why do I say flexible? Because ScrollShow has a number of options to display/position the stack – we'll get to that shortly; you get to decide exactly when it is displayed and you can drop almost anything into it that you want.

Example: You want to display a CTA when your visitor has scrolled 500px down the page. With a teaser and a button to link to a special offer. Or you want to display a menu bar at the bottom of the page (DeFliGra's MenuList is ideal for this) when your TopBar has been scrolled out of view – and have the menu disappear again, when the page is scrolled back up.

ScrollShow

The CTA above is set to display once the page is scrolled down 400px, but to disappear again when the page has been scrolled down a further 400px. It can be clicked away and won't appear again until the page is refreshed. No page contents are permanently hidden from view.

Stack settings.

Action. The options are Show, or Hide.
Show/Hide… The options are When Scrolling Down At Least… When Scrolling Down Between… and Always.
Scroll Position displays the pixel values for the above options.
When Scrolling Up gives the options Do Nothing, Hide When Shown and Show When Hidden.
Transition Speed. Can be set between 0 and 1000 milliseconds.
Position. Allows nine different positions on the page – combinations of top, bottom, left, right, or centre.
Distance From. Pixel distance from the edge of the page.
Width. Popup width in percent. It is also possible to set both a Minimum and a Maximum width in px.

Content Settings
Custom Font Size. Font Family has three options – Theme Default, Web Safe Font, or Custom.
Custom Text Colour. Custom Link Colour. Custom Link Underlining. Custom Heading Size. Custom Heading Colour.

There are further options to activate a Close Button, three options for the Close Icon, Icon Size and Icon Colours for Static, Hover and Active.
The Icon Position can be set to the Left, or The Right of the open Popup.

You can look forward to seeing ScrollShow on this page in the near future!


Comments

Get Noticed In RapidWeaver

1LD just released a neat and very useful popup stack with a great set of actions. Notify will present anything you wish to drop inside it, from cookie notices to information boxes and warnings.

EU law stipulates that a warning must be presented, when cookies are present on a site. These notices are now generally ignored and are rarely clicked away, or accepted unless they hide page content. So what about a cookie message that loads with the page and disappears after n seconds?

1LD Notice

What about a Call To Action that is displayed after n seconds and has to be clicked away, or an info box that is opened when an image. or a button is clicked, or when the page scrolls – and has options to open a new link? What about a thumbnail image that opens up a full page image when clicked?
Notice can do all of the above and more.



1LD Notice

Stack settings.
Notice consists of two stacks. Notice and Notice Trigger. Notice trigger allows you to drop in a stack that will trigger notice. Its only setting is Connected ID. set the ID of your Notice stack (you might want more than one, right?).

Show Type. The first thing that Notice wants to know, is how it should be triggered. The options are Open On Start, Timer, On Scroll and On Notice Trigger only.
I searched in vain for a setting to determine the scroll distance before Notice opens on scroll. I'm sure this option would be much appreciated. As it stands, Notice opens up immediately, as soon as the page is scrolled any distance.

Show Animation. You have a choice of 42 animations to blend in your Notice Stack.
Hide Type has two options: Hide Manually, or Timer. Hide Animations has the same options as Show Animation.
Content Type is set to Text/Icon by default. It can be set to Stacks. Fill Mode may be set to Fill, Pixel Width, or Percentage Width.
The Z-Index is set to 999999 by default.

Position Vert: may be set to Top, Centre, or Bottom, while Top Margin determines the offset in px. Position Horiz:has the optionsLeft, Right and Centre. Margin, Padding and Radius can all be set individually and the Content width may be defined in px.
Notice's Background, like all recent 1LD stacks, can be set to None, Colour, Gradient, or Image. The settings for Notification Text and Notification Icon also mirror the settings of 1LD's recent stacks.

A Close Button is optional in Notice. When activated it is always in the top right hand corner. Show Action Buttons is also optional. When activated, two buttons are positioned at the foot of your Notice. The left button is a Close button, while the right button may be assigned a link. The Height of the button may be set in px and the colour of the Button Text and Button BG are definable. Each of the buttons has individual hover settings for Button Text and Button BG.

Trigger ID lets you set an individual ID for each Notice stack you have positioned on your page. You will then find a setting Maximum height for the Notice window in Percent. Any content that can not be displayed at this height can then be scrolled.
The two final settings are Activate Cookies and Absolute Position.

Notice is a versatile stack that shouldn't be missing from any self respecting Weaver's arsenal.

Comments

Scalable Vector Graphics in RapidWeaver

SVG, or Scalable Vector Graphics is the latest trend for adding logos, illustrations and animations to web pages. Or is it? SVG has actually been around since 2001, but has been more, or less ignored.
So what is SVG?
SVG is vector based as opposed to pixel based. The result is scalable images that retain their image quality at any size. Text and contours remain razor sharp, no matter to which extent they are scaled up, or down. They can also be animated.


SVG – Wiki Commons

Wiki says:

SVG is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation. The SVG specification is an open standard developed by the World Wide Web Consortium (W3C) since 1999.
SVG images and their behaviors are defined in XML text files. This means that they can be searched, indexed, scripted, and compressed. As XML files, SVG images can be created and edited with any text editor, as well as with drawing software.
All major modern web browsers—including Mozilla Firefox, Internet Explorer, Google Chrome, Opera, Safari, and Microsoft Edge—have SVG rendering support.

The emphasis here lies on "Modern". IE8 and Android 2.3 have problems with SVG, but there are workarounds.

So why am I writing this article?
I've been using SVG images in conjunction with RapidWeaver for many years. There are a number stacks that will allow you to add SVG warehoused files (via 'Resources) to a project and I've probably used all of them at some time or other. (Graphic Stack from S4S is the ideal free option, if you're not using Foundation)
However, I've recently hit upon problems when using BWD's Sections Pro and Sections Box. I must emphasise from the beginning that the problem does not lie with BWD, but the way that SVGs are exported by default.

Today, I was experimenting with BWD Sections Box animations. I added a couple of SVGs to a project and set them to animate. The animation worked just fine – when set to 'Hover', but didn't work at all when set to 'On Page Load', or 'When In View'. I was miffed and wrote to Andrew asking about the crap he was offering RW users. (Obviously. I was a little more polite in my mail).

Within seconds, Andrew replied that the crap was of my own manufacture. (Again – Andrew and I always converse on polite terms and only badmouth our anonymous clients) And so I was forced to review my production process. Strong coffee and some patience were needed.
I began to research the web. My findings:
Most illustration applications add a load of redundant Code when exporting an SVG file, not least Adobe Illustrator CS6.

During my research, I discovered two (actually three) important web pages.
If you're just setting out with the use of SVGs – especially in combination with Adobe Illustrator, I highly recommend that you visit both this page and this page. The first explains how to export 'web-ready' SVGs from Illustrator, the second explains how to include SVGs on your web page.

However – even after following the advice from the first page, the SVG export from most illustration apps is still not ideal for the web. My new-found advice, (but perhaps Paul Russam has more input on this subject) is — visit Jake Archibald's GitHub page, drop in your shiny new SVG and save the results to a text file (TextMate, or similar) with an .svg extension. Your SVG will now be fully optimised for the web, with no redundant code and – it can still be opened and edited with your favourite illustration application (just remember to repeat the optimisation process once you re-saved).

Many thanks to Andrew Tavernor for convincing me to do some research. It was well worth the effort and I've bookmarked Jake Archibald's GitHub page. I recommend you do the same – pending feedback from Paul Russam, the SVG/Animation expert.

Go forth and create better logos!

P.S. If you need detailed information about SVG, this page will tell you everything you wanted to know.

Paul Russam commented:

I did a test a while ago where I created a simple graphic of squares, circles, text etc in Sketch, AI, and Affinity Designer and then exported each as svg. AI's export was the biggest and showed AI's print focused origins, Sketch and AD did much better but AD came out best for a couple of reasons primarily that the exported svg was the smallest and that it was 100% x 100% not NNpx x NNpx (AI's biggest problem) thus making it perfect for web use.

Comments

Take Control Of HTML In RapidWeaver

Many professional web designers have tried the RapidWeaver demo version and rejected it for its lack of HTML support. Stacks adds an HTML box to your arsenal, we've all seen it; we've all used it, but no-one in their right mind would try to build a complete website using HTML boxes.
Now dedicated coders have no excuse for not using RapidWeaver; HTML Body Stack from 1LD even makes it easier!

So you're a hardcore coder and you want to build your website using RW. You will need Stacks 3 and a copy of the HTML Body Stack which comes with a dedicated blank theme.

You may, of course use any theme you like, but hey, you're hardcore and you want full access to the <head> and <body>, right? These are preconfigured when you use themes. Not the case with 1LD's Blank Theme – it's blank and just begging for an HTML Body stack.

Let's start a new project.
Open a new Stacks project, choose the HTML Body Blank theme and then check your Stacks' library for HTML Body. Drag this stack onto your page and hey! It looks like Stacks, but it works like HTML. It has three themes for the editing mode – the Standard Stacks' theme, Light and dark.
You added it to your page already? You now have a <head> and Before <body> elements on your page, but both have the 'Add Child' + button!
Go on – click the + button in the <head> area. Now you can link your CSS and meta tags, etc. or, may the heavens forbid, a stack.

Same thing with the <body>. Click the + button and add your HTML content, non-wrapped HTML, or a stack.
I know some people who are going to love this.
Imagine – we're halfway down our new HTML page and it's looking great. But we need an image slider. So off we go to make coffee – that always helps us concentrate when browsing that code that we need. But wait – time is tight. We need the slider now, this instant.
What is easier than dragging one in from the stacks library? So what, if you didn't code it yourself (i.e. borrow the code from the web), forget vanity; time is tight – remember?

HTML Body

But now, watch this – I'm working on a Foundation project and just discovered the source code for a cool calendar. I drag an HTML Element stack into my project and add the code to it. It is already surrounded by <divs> and I can add as many child stacks to it as I need.

1LD created HTML Body as a way to give themselves the control they wanted to have in order to create HTML templates for their own web development projects.

Using a hybrid Stacks/HTML editor gives RapidWeaver users the ability to really mold projects into whatever they need them to be, whether they need to include simple to use RapidWeaver Stacks or import advanced external libraries.
To get you started 1LD has thoughtfully included a free project file that they created with Bootstrap. The project contains 5 sections that you can save as partials for use in other projects. Perhaps we might even see a Foundation project soon?

If you have little, or no HTML/CSS experience or suffer from code phobia, this is not the stack for you — 1LD can only support the stacks and theme, but not our inability (and yes, I include myself) to understand what all those <div>s, </p>s and <span>s are about.

If you're a coder and use RapidWeaver for the obvious ease of use that it offers, HTML Body is exactly the stack that you've wished for all these years.

Comments

Show more posts

  • Stacks Image 34843
  • Stacks Image 34846
  • Stacks Image 34849
  • Stacks Image 34852
  • Stacks Image 34855
  • Stacks Image 34858
  • Stacks Image 34861
  • Stacks Image 34864
  • Stacks Image 34867
  • Stacks Image 34870
  • Stacks Image 34873
  • Stacks Image 34876
  • Stacks Image 34879
  • Stacks Image 34882
  • Stacks Image 34885
  • Stacks Image 34888
  • Stacks Image 34891
  • Stacks Image 34894
  • Stacks Image 34897
  • Stacks Image 34900
  • Stacks Image 34903
  • Stacks Image 34906
  • Stacks Image 34909
  • Stacks Image 34912
  • Stacks Image 34915
  • weaverthemes
  • Stacks Image 34921
  • Stacks Image 34924
  • Stacks Image 34927

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 at obscure.