Clicky

RapidWeaver Stacks, PlugIns, Themes ...
My Image

All the latest RapidWeaver Stacks reviewed,
plus the most important community news …

Stay up to date with current RapidWeaver developments

Truncated Text and BIG Links in RapidWeaver

There are two or three stacks available for RapidWeaver that will allow you to truncate a long text. Truncator from Marathia is probably the simplest of them all and it is free. It is ideal in combination with Marathia's BigLink stack which is also new.

Truncated, or 'read more' stacks are often used when a text is too long to display within a restricted space. Marathia's Truncator takes a different approach to most 'read more' stacks. Instead of expanding, when clicked, or hovered, Truncator displays the hidden text within a tooltip.

Truncator is ideal for displaying a two, three, or four line teaser text which can be displayed on hover.

Stack settings

There isn't a lot to set up for Truncator.
Number Of Lines – The default is set to 3.
Text Size – The default is 100%
You can set a Custom Text Colour, Bold & Italic, Alignment, Letter and Line Spacing and the Font Family.
Capitalise – Allows the settings Normal, Upper Case, Lower Case, Initial Case and Small Caps.

NOTE 1 – Truncator may not contain any HTML formatting! 2– JS must be activated for Truncator to work.

If you'd like your truncated text to open a new page when it is clicked, or a lightbox, BigLink will come to your aid.
BigLink is, well, a link stack. Any content that's dropped inside it may be linked to…
… a new section of the page, a lightbox, a URL, anything anything that is linkable.

E.G. Drop a teaser text from your latest Blog Post into a Truncator stack, drag Truncator into your BigLink Stack and add a link to your blog page.
On hover, your visitor can read more of the post and, when he/she clicks, will be whisked away to your blog page!
A Call To Action? Pack it into BigLink and have a lightbox open!

There are a few Link stacks available for RapidWeaver, but BigLink link has options that I haven't seen in any of them.

Stack settings

The first setting, obviously, is Set Link
Override Default Transition – when activated, Transition Speed is displayed. Set the speed in milliseconds.
Transitions? Yes, BigLink can change colours when hovered.
Activate Background Type Colour and/or Image and you can add a background to BigLink
When you choose Colour, you'll find colour settings for the four states Static, Hover, Active and visited.
The same settings apply to the stack's border. Obviously, if you add a background image, it will override the fill options.

BigLink Text And Icon Settings
BigLink will also allow you to set the text and Fontawesome colours for the four link states above.
BigLink also has multiple settings to allow you to override the font settings of the stack contained within it.
NOTE If the inner stack already has font settings, these settings may take precedence. That's just the way CSS works – the final stack to be read overrides all previous settings.

BigLink Image Settings
All images contained within a BigLink stack may have hover effect applied to them (does not apply to background images) during Static, Hover and Active states.
Opacity, Blur, Greyscale and Sepia. Browsers do not allow image effects for visited links.


If you need to link whole stacks to external, or internal links, BigLink provides a very flexible way of doing so and BigLink and Truncator make an ideal combination.

Comments

Author Your Own Web Cards in RapidWeaver

This morning a nifty new stack from 1LD, Author, flattered into my mailbox. Author answers a question that I was asked just recently: How do I build a Web Card? Of course, with the right combination of stacks, building a web card is simple, but you will need a number of stacks.
1LD Author

Author puts a face on your website without the work and saves you having to do all the careful positioning that multiple stacks would require. The face can even say "Hi" when hovered.
What Author can do: In addition to the face (or logo) Author can add a name and title to that face. It has child stacks for personal details 'List Items' and a stack container for 'Further Information'. Author then has an optional footer/sidebar, which has child stacks for social icons.

By default, Author creates your web card in landscape mode and automatically morphs to portrait mode on mobile devices. When adding content, the card will adjust to fit that content.

Once you have added your image and details, you can, with just a few clicks, begin to adjust the layout to your liking. Author's minimum width is 300px. As far as I could tell, there is no maximum width so, in theory, you could position Author as a page footer. Only two things prevent you from doing so: The image size can not be defined and grows proportionally to Author's width and even at its narrowest width, Author morphs into portrait format at tablet (portrait) size already; i.e. whilst Author is fully responsive it does not have any settings for breakpoints.
However – for the purpose it was intended – Author is perfect and there's nothing stopping you from dropping your finished web card into the footer as it is.

1LD Author
Stack settings

Author Settings
Profile Image – Add your image here. Profile images should be square. Non-square images are cropped and centered.
Name – Add a name or business name.
Title – Add an occupation or subtitle.
Hover Greeting – This greeting will display in a white chat bubble above the profile image when the card is hovered. Keep this value short in order to prevent the chat bubble from covering too much of the image.
Enable Hover Greeting – Disable this option to remove the “Hover Greeting”.

General Settings
Theme – Choose from 4 card layout themes.
Width – This will adjust the width of the card (The height is determined by the content you add to the card). If the container width is less than the width of the card, the card will adjust to fit inside the container. On mobile screens the card will automatically display in “Vertical Mode”.
Vertical Mode – Optionally display the card in a vertical orientation on all screen sizes.
Name Font – Optionally declare a custom font that will only effect the Name text.
Text Font – Optionally declare a custom font that will effect all text excluding the Name text.
Round Corners – Adjust the radius of the card corners.
Shadow – Choose from 6 predefined shadow styles.
Show Content – Show/Hide the “Drop Stacks Here” section of the card.
Show List Items – Show/Hide the “List Item” section of the card.
Show Footer – Show/Hide the footer that contains the social media icons.

Theme Styles
Round Profile Image – Enable/disable a round profile image. This option is only available in the “Standard” and “Solid” themes.
Text – Adjust the colors of the Name, Title, Content in the “Drop Stacks Here” section and “List Item” section, All the links contained on the card.
Background – Adjust the colors of the Main background (Except for the “Solid” theme), Footer gradient left (Background gradient left of the “Solid” theme), Footer gradient right (Background gradient right of the “Solid” theme), Dividers found above the “Drop Stacks Here” section and “List Item” section.

The information icons and the social icons are set to Fontawesome by default. 1LD's Fontawesome stack is included with Author, for themes that don't have Fontawesome enabled by default. Can't remember the name of the icon you want? The settings panel has a notable feature – right click the help text below the icon settings to be taken to the FA icons page (similarly, a link in the social icon child settings takes you directly to the brand icons).
Clicking the info child stacks opens up a settings panel which allows you to set the icon you prefer, or to disable the icon entirely.
Whilst Author automatically adds a Facebook icon to the footer/sidebar, the social child stack may be deleted simply by clicking and hitting delete. When you have added your Facebook, Twitter, etc. account details to the settings panel, clicking the icons will beam you to the page in question.

Author is a nice stack that takes hours of work out of building contact cards. I needed 9 separate stacks to reproduce the beveled card – and that was before adding social icons, or a shadow. Even then, though, it would take a lot of juggling for the result to be 100% responsive! I'm sure that a number of people will find Author useful.

Comments

Fancy Introduction To RapidWeaver

Just a few days ago, I mentioned that the one time Tsooj Media stack, FancyIntro would soon be reclothed as a Stacks4Stacks product. Well, two days ago it flattered into my mailbox.
Of course, I immediately took out my magnifying glass and inspected it! During my inspection FancyIntro was updated, so this review took a little longer than expected.

Now if you were expecting FancyIntro to be a larger, more luxurious version of Curtains (think VW Passat/Phaeton), think again. FancyIntro is an entirely different stack. More of a Mercedes AMG.

Curtains can display a line of text and opens it's curtains horizontally. FancyIntro can display two lines of text, or two images – or one image plus a single line of text (or stacks content), and opens vertically. However, if you're expecting FancyIntro to open two curtains and reveal the underlying content, you'll be disappointed. Instead, a line travels across the page from left to right, dividing the upper and lower section, then expands vertically to create a coloured page overlay. The page overlay then fades out to reveal the underlying webpage.

Having just taken Curtains through its paces and expecting similar results, it took me a couple of minutes to work out exactly how FancyIntro works. However, once you've put away the curtain concept, FancyIntro is very easy to use.

The default setting displays a white to grey gradient and two lines of text. A mauve coloured line then travels across the page, expands to fill the page and then fades to reveal the content.
Both the initial background and the line have colour settings for top and bottom, so that the line can expand to a gradient too. Obviously, the gradients don't need to be so blatant as below.

FancyIntro
I soon tried dragging two 'halved' images into both the upper and lower content wells. In the latest version of FancyIntro this is possible (the 1.0 version duplicated the upper image). Of course, with an image in both sections, no accompanying text is possible. If images are to be present in both upper and lower containers, it is recommended that they are kept as small as possible. In fact an image size of max 150px is recommended by S4S.
SVG images can be loaded as warehoused images, but be warned – if you have stripped out the pixel sizes, they will scale to fill the screen width.

FancyIntro
Stack settings

General Settings
Overlay Fill Top/Bottom. Whilst the colour palette displays transparency settings, they are ignored by FancyIntro.
Line Fill Top/Bottom
Breakpoint. FancyIntro is hidden below the breakpoint.
Line Height. Set the height of the dividing line in %.
Start Delay
Line Slide Speed
Line Grow Speed
Fade Speed. All of the speed settings are in ms and would seem to be unlimited. Hence, with inappropriate settings, you could sit all day, waiting for the dividing line to travel across the page.
Challenge Mode. The same as Asynchronous Mode in Curtains.
Hide period. Sets a hide cookie for Days (default), or Hours.

Upper Content. Styled Content (default), Dropped Image, HTML, Markdown, None, Stacks, Warehoused Image.
Offset. In %
Text Colours. Text / Shadow
Text Sizing / Spacing
Text Alignment
Text Styling

Lower Content analogue to above.

FancyIntro is less gimmicky than Curtains and is ideal for splash screens that make way for an underlying web page. Announcements such as special offers, upcoming events, or just an attractive 'welcome' message.

Comments

Press The Right Buttons In RapidWeaver

Already a month old, I've just been able to test Press from 1LD. Press is a button stack that works with any RW theme. 'But there are dozens of button stacks for RW', I hear you say and you are correct. Press, though, is probably the biggest hit since ButtonMaker graced us with its presence a few years ago.

Press is an extremely versatile button stack that will allow you to create just about any button that you can imagine. Flat buttons are currently the mode (don't worry, fashions change and flat will be replaced by something else soon – and we'll find the new 'modern look' just as cool). 1LD acknowledges the current trend, so obviously, when you drag your first Press stack into a project, your new button will be flat and black.

Want flat with a very subtle gradient, or pill formed with a less subtle gradient, perhaps a patterned background? Not to forget Ghost buttons, of course – they're still semi fashionable; Press can do them all and more.

1LD - Press
And Press doesn't stop at simple buttons, it can build button groups too. If you need to build a menu bar of your own, design the basic button that you'd like, drag a Press Group stack to the page, drag your button into it and duplicate it inside the Group as often as you need it.

1LD Press Group
Stack settings
If I go through all of the settings available in the two Press stacks, you'll still be reading next week.
Press has similar settings to previous 1LD stacks recently reviewed here. The settings groups are:

General
Button Text
Button Icon
Button Initial State
Button Hover State
Button Active State
Animations
Advanced (Custom Classes)
Each of the above groups contains extensive settings.

Press Group contains settings for the Shared Button Styles – Group Radius, Button Margin and Button Padding.
Press group and the contained buttons are responsive, adjusting to all screen sizes. The only thing I miss is an option to display a hamburger on mobile devices.
You can read the full instructions for Press here.

1LD Press Group

Comments

NewsTicker For Rapidweaver Updated

After Joost's departure from the Stacks world, Tsooj Media has been formally integrated into Stacks4Stacks. The first stack to appear on the S4S page is NewsTicker.

A News ticker, or a marquee displays a running line of text – useful for displaying large amounts of information in the compactest possible space. You see marquees regularly, displaying the latest stock prices, or breaking news. The <marquee> tag was never actually an official HTML tag and is not supported by all browsers.

NewsTicker is a stack that was originally developed by Tsooj Media. It uses a combination of jQuery and CSS and works with all browsers. Originally NewsTicker wasn't fully responsive, the text would break and form multiple lines on narrower screens, making it difficult to read.

Will has rewritten NewsTicker. It is now fully responsive, and scrolls infinitely, it will now accept Styled Text, HTML, or Markdown and the colour options have been expanded. NewsTicker can now load with the text visible on the page, there is a new option for Line height and multiple NewsTicker stacks can be placed on the same page. All that's missing for a Nasdaq feed is an option for an API.

NewsTicker
Stack settings.

NewsTicker: General Settings
Content Type: Styled Text (Default), HTML and Markdown
Direction Left: (Default), Right
CSS Class: (editable)
Start Delay: In ms
Duration Default: 10000ms
Gap Default: 50px
NewsTicker has two option boxes – Pause On Mouse Over and Start Visible.

NewsTicker Styling
Styling: Custom Styling, Inherit Theme Styles
Font Style: Normal, Bold, Italic, Bold+Italic
Font Size: Default 15px
Line height: Default 2.5 em
Font Colours and Link Colours: Normal, Hover

Tips: NewsTicker breaks out of its container and runs across the whole page. If you wish to restrict it to a specific width, Useful Stack (available free from S4S) will come to your aid.
Always place NewsTicker in a containing stack e.g. Useful Stack, or a column stack, otherwise it may not be visible on the page.
Don't place NewsTicker in the same container as and immediately preceding a Headline! If you do, the headline develops an eratic marquee effect too! (I'm assuming that this is an oversight which will soon be fixed)

Comments

Show more posts

Links to the developers ® All trademarks cited on this page are the property of their respective owners.

Subscribe to Ninja News
or ask a question

Hi, I’m the Ninja Bot. What’s your name?
image/svg+xml
Nice to meet you, [1-1]. Could you tell me your mail address?
image/svg+xml
[1-1], would you like to subscribe to the monthly Ninja Newsletter?

Yes, I would like to receive your monthly newsletter.

No thanks, I’m good for now. I have a different issue.

image/svg+xml
Thanks for your support, [1-1]. Is there anything else I can do for you?
image/svg+xml

[1-1], thanks for subscribing. If you made a further request, I’ll get back to you – typically within 24 hrs.

image/svg+xml
Name: [1-1] [1-2]
Email; [2]

Contacted you via the Siphon form at Ninja News.

I would like to subscribe to the Ninja Newsletter

Message

[4]
I’m sorry tohear that, [1-1]. How may I help you then today?
image/svg+xml

[1-1], thanks for contacting me. I’ll review your mail, and get back to you – typically within 24 hrs.

image/svg+xml
Name: [1-1] [1-2]
Email; [2]

Contacted you via the Siphon form at Ninja News.

I don’t want to subscribe to the Ninja Newsletter right now.

Message

[6]

Thanks again for contacting us. Your request was successfully submitted.

Contact Information

rjh logo

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—17

Powered by rjh-design

This website was built with loving care on a Mac using Foundation. For more information, contact me.

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.

View previous campaigns.

Subscribe to the Ninja Newsletter

* indicates required