Clicky

RapidWeaver Stacks, PlugIns, Themes ...

rjhweb design

fast, flexible, fair

Ninja News

RapidWeaver News & Reviews

Video Gallery

I'm possibly the only person with internet that has never watched a complete video online. Even software documentation — I only watch a tuition video if no written documentation's available and then fast forward until I find the part that explains exactly what I want to know. Recently, though, I've seen a number of forum posts 'How do I put a video online?' so when I was notified that CosCulture had published a video gallery stack, I was interested to see it.

Eric's Video Gallery supports YouTube, Vimeo and HTML5 video formats. As the name states, the stack places a gallery on your page. The gallery may contain a single video, or multiple videos – I dropped 50 videos into Video Gallery before I got bored with the test. I like the way the videos are presented.

video gallery
A panel for the active video and a description panel with thumbnails for the video list. Both fully configurable.


What surprised me when I first looked at the settings panel, is that the standard top four Stacks settings, Background, Border, Layout, Responsive, are missing.
O.K. That's a new one! You'll need a visibility stack, if you don't want the gallery to load on mobile.

Instead, Video Gallery sets off by requesting Main Gallery Settings. These begin with Show Notes. When loading a child video container, there is a field for notes which may be displayed as in the screenshot above.

Panel Type refers to the panel content – the options are Title Only, Title and Description, Title,. Description and Thumbnail – the info displayed in the gallery list.
Autoplay Video – a very important option that is set to No by default! Thumb Scrolling refers to the gallery list which may be scrolled simply by moving the mouse over it, or by dragging with the mouse/finger. Play Next Video – equally as important as autoplay – is set to manual, but may be set to When Current Video Ends.

External Border refers to the Colour and Pixel Width of the Border around the gallery. The Gallery Width is set to 500px by default and the Alignment is set to Centre. The Thumbnail Width, Thumbnail Height, Row height and the Panel Width can all be set individually. By default the panels set to 45%. The width and colour of the Separator between the video and the playlist may also be set. You must then decide if your video is displayed on the left, or the right of the playlist.

The Selected Row and the inactive Other Rows may be formatted individually, so it's easy to see which video is currently playing. The formatting includes Background Colour, Thumbnail Border Colour and Width, Title Bold, Title Colour, Description Bold, Description Colour, Title Font Size, Title Font Family, Description Font Size and the Description Font Family.

So far, so good, now it's time to add a video. One video container is already in the mother stack, if you click it, the setting options are Video Type, the choices being YouTube, Vimeo and HTML5 Video. If you set either YouTube or Vimeo, the Video ID is required next. If you set HTML5, the panel slides open to reveal MP4 URL, Webm URL, OGV URL, with an option to set a link for each.

Below the video format are fields to add Short Title and Description. If a video thumbnail is found, it will be added automatically. If no thumbnail is found, a link setting appears automatically so that you may set your own warehoused thumbnail.
Once you've formatted your video, you can click the plus button to add the next child stack.

Video Gallery is easy to set up, looks good and has an abundance of settings for personalisation. I never put a video online myself and, strangely enough, none of my clients ever requested me to, but if I ever get into the situation, I'll be taking another look at this stack

Comments

Overlay Menu

Exactly one month ago, 1LD released a unique menu stack — Action Menu. Today Overlay Menu flattered into my inbox. Overlay Menu hovers at the top, or the bottom of your page and, when opened, displays a full page overlay with your navigation links.

Foundation, Foundry and Bootleg users already have a wide choice of menus for their pages, while users of other themes are left out in the cold. With the exception of MyMenu and a few button stacks, there are not a lot of choices available. Overlay Menu to the rescue.

I'll freely admit that when I dragged 1LD's Overlay Menu onto my page and took a look at the settings panel, I was a little overwhelmed. Let's take a look and see why:
The General settings panel begins by requesting a unique id. Well o.k. that suggests that I can place more than one instance of Overlay Menu on my page, but why would I want two menus? That's instantly explained but the next option Use Custom List. If this option is left unchecked, OM defaults to the standard RapidWeaver Menu. When checked, the stack instantly changes to display a list of links. The link list is formatted with Markdown by default and contains both Top Level and Sub Level entries. If you prefer HTML formatting, you just need to set it in the next dropdown menu.
Cool, so OM is multifunctional and I can open any link with it – on my page, or elsewhere.



The Menu panel continues with a choice of twelve options for the Font Family. The fonts are all Google fonts, so I'm wondering why there isn't an option to set my own font. However, the fonts are all some of the most popular of the Google fonts, so chances are that your font is amongst them.
The Menu Fill width determines the maximum width for the link list. By default it is set to 960px so, theoretically its max width will be the same width your site. You may also set a max width in %, or to Fill. The max width is always centred on the page, with the link list aligned left.

Next we have the Overlay Opacity with settings between 0 and 1. The default is 0.8.
Now I just wrote that Overlay Menu is a full page overlay. That's not strictly 100% true. The Background may be set to None, Colour, Gradient or Image, so deactivating the background leaves you with just the link list when the menu button is activated. However, you can't click through the transparent overlay, so make sure that your Close button is prominent. This will take some serious planning, as the Close toggle is always the same colour as the link text.

The next settings are for the Dropdown Icons – the icons that appear next to the submenus. You may choose from Google Material Icons, Fontawesome icons, or Ion icons and you'll find options for both the open and the close icon. There is also an option to Rotate Icon when opened.

Top Level Menu Items provides the settings to format your Overlay Menu top level links. These include Font Size, Padding (Horizontal and Vertical), Vertical Spacing, Radius, Text Colour and Background Colour. The Background Colour may be set to None, Colour, or Gradient. With the exception of the Radius, the same settings apply to the Sub Level Menu Items. However, Use Top Level Colour Styles is checked by default.



The Toggle Menu settings are the next to scroll into view. By unchecking Show Toggle Text, the toggle menu will appear as a simple icon bar. By unchecking Show Toggle Icon, the bar will contain just the text. It probably doesn't make any sense to uncheck both?
The Toggle Text Font contains the same options as the Menu panel as does the Toggle Icon Font menu. The Font Size is set to 24pt by default; the Icon Size to 30pt.
The bar's Fill mode is set to Auto by default, but may be set to Fill, Pixel Width, or Percentage Width. This gives you the option of having a simple icon button, or a full width menu bar, depending on your preference.
The Position is set to Fixed by default, so that the page content scrolls underneath the static bar. There is an option for Inline positioning, for when you have a link list embedded in a column. The vertical alignment can be set to Top, or Bottom, making it possible to have a menu bar at the bottom of the page. The Horizontal Alignment can be set to Left, Right, or Center.

Both the Margins and the Padding are set to 10px by default. By removing the Margins, the menu bar will align flush with the edge of the page. The button Radius is set to 4px by default, but can be set as high as 100 to allow for pill buttons or round icons buttons.
The toggle bar Text Colour is the next choice you have to make. Then the Background. The Background may be set to None, Colour, Gradient. or image. Images are scaled to fit the button width.
The same settings are available for the Hovered button, allowing you to have two different pattern states on hover, if so desired.

The next two settings are for Borders and Shadows. Both are off by default. When activated, the settings panel expands to display the styling settings.

Overlay Menu includes a separate Overlay Menu Extra Toggle stack which may be positioned anywhere on the page. The stack settings are identical to those found in the main stack. The extra stack has one advantage — you can drop it into a BWD SlideUp stack, to have it disappear when the page is scrolled.
Overlay Menu can also be set to open via any external button, clicking the next option Show External Data Link Info, will display the menu's data link id in edit mode.
The final option is labeled Experimental. It's an option to Replace Theme Menu. This may not work with all themes. But there are other stacks available that can help hide your theme's menu.

If you're tired of your standard theme menu bars, Overlay Menu is a great alternative.
Jeremy and his crew are always open to suggestions and I've been informed that an update to the stack is already in the works to include new options. I'm sure Jeremy won't mind me letting the cat out of the bag: The update will include List icons, Subtitles, the ability to hide OM at different screen sizes, Clickable Dropdown Items, a new interface for creating menus and perhaps a few other options.


Comments

Enhanced Buttons

An eon ago, M$ announced Windows NT. It was soon dubbed 'Not There' because it was always said to be 'coming soon…'
An age ago, a notice appeared on the BWD site 'ButtonPlus V2 coming soon…' I was eager to receive a copy of BP2 so that I could begin this review, but Andrew was at first reluctant to let me have it as it was still a work in progress. Many moons have come and gone since the first announcement, but the wait was worth it, I assure you.
ButtonPlus

ButtonPlus is titled 'The Ultimate Foundation Button'. I don't know of an escalation of 'Ultimate', if there is one, it should be added as the superlative for ButtonPlus2, which is without a doubt the most flexible button stack ever to hit the RW scene. The ButtonPlus2 stack will soon be accompanied by a Button Bar and a Button Group stack, but this post will focus on the ButtonPlus stack itself. Why? Because you could write a book about everything that is possible with the new stacks! Once again, it's like buying a new car. It's no problem to get in and drive off, but it takes some exploration to discover what every dashboard feature is. Prepare yourself for a long expedition.

When you first drag a ButtonPlus stack into your project, it looks very much like the first version; after a fleeting glance at the setup panel you'd be excused for thinking that it's the same stack, but look closer and you'll find that a number of settings have been added. First there are settings for the button padding both for the mobile view and the desktop view. Then there are those buttons that we have become accustomed to in all BWD stacks Hide/Show Child Stacks.

Next, you'll find that a setting has been added with the options Full Width: Never (default), Mobile Only, Desktop Only and Always. You'll find the Button Styles interesting too. They include settings for the ProStyles Master stack. If you haven't already, take a look at the Pro Styles stack. Pro Styles allows you to define up to eight different button styles which will then allow you to configure your ButtonPlus buttons with a single mouse click, ensuring that each and every button on your page – or site wide – is identical.

The Button Size has been extended by Fixed Height and Custom Padding.
The Fixed Height is of special interest, because when you choose the setting, you now have the capability to set the exact height and responsive width of your button – again, with settings for both Mobile and Desktop. The Shape Menu has also received additions. It now includes Custom Rounding and Square (Override ProStyle).

The option to add an Icon to your ButtonPlus button has been completely rewritten. The Icon may be combined with the button you just set up above, or it can be set to a round button with only the icon. The standard icon set is Fontawesome, but you may also define your own icon set.
Of course the icon colour for Static and Hovered states may be set, but not only that – the icon size can also be set independently from the font size and the Icon Padding – the distance between the button text and the icon – can also be defined.
But that's not all. If you set Split Button, you get a split button – not just optically. The colour of the main button and the split icon button may be set independently. And by setting Launch External Pop Drop, the split button will be assigned two separate functions – the icon will open a Pop Drop* window, while the main button will open the link that you set.
* BWD's Pop Drop stack must be installed

The Button Font now includes an option for Google Fonts and, because ButtonPlus is now fully responsive, you get to set the Breakpoint for the responsive features.

ButtonPlus will, as already mentioned, soon be partnered by two further stacks – Button Bar and Button group – and the settings that follow, a whole bucket full of them, all apply to buttons within theses two stacks too.

ButtonPlus with Pop Drop
A ButtonPlus Bar with Zone Logo and Pop Drop

As mentioned above, you can hide the ButtonPlus Child Stacks in the stack settings. Version one didn't have Child Stacks, but with version two, you can add Hover Effects and Visibility settings. The most interesting features, however, are probably the option to add Dropdown Content and Pop Drop content.

The Dropdown Content has two further options. You may add both Dropdown Links and Dropdown Columns.
The Dropdown Links allow you to add a list of links to your Button Plus Stack, but even the links are more versatile than you'd imagine! They may be set as Headers for group links, or they may 'simply' be linked with a URL or a script. I say 'simply', because even the links have a full set of settings available which will allow you to format everything from size and spacing to a leading badge with ALT text!
Tip — Need a line of links somewhere on your page, rather than a column of links? Drag a Link child stack anywhere on your page and duplicate it as often as you require. Your links will render on a single line!

The Dropdown Columns are perhaps even more exciting! When clicked, a Columns Child Stack contains two columns to which you can add further stacks. You can, however, add additional Child Column stacks which can then be confined to the button width, or can stretch to fill the column container – so-called Mega Menus.
Once more the settings panel allows you to format the Dropdown Columns to your heart's content.

If you have Pop Drop installed, you'll find that a Pop Drop child stack is built directly into the ButtonPlus stack and will accept just about any stack you can throw at it! Pop Drop content can be configured as a Dropdown/Popover or as a separate Modal Window. It has the same setup options as the standard Pop Drop stack, including Header Bar and Close Icon – the simplest way I've found to set up Pop Drops – I was positively astounded by this

Andrew is allowing you some time to spend playing around with the ButtonPlus stacks settings before he releases Button Bars and Button Groups.
So what are these additional stacks about?

Teaser — Button Bars will add a group of buttons to your RW page. You can add Zones to the bar – stack containers that appear within the group – and you can add as many ButtonPlus buttons to the bar as you require. The button shape is configured centrally, via the Group setup panel, but the other button settings may be set up individually – as above. Button Bars are ideal for additional navigation menus.
Button Bar Child stacks include Hover Effects, Background, Toggle Menu and Visibility. You'll have fun exploring the settings panel further – I guarantee.

ButtonPlus Bar

A ButtonPlus Bar with Dropdown Menu

Button Groups come preconfigured with three buttons. They are very similar to Button Bars, but don't have Zones and can not be styled via Pro Styles, instead they have their own custom settings. Once you got your head around the ButtonPlus settings, you'll need to play around with both Bars and Groups to see which is most suited to your purpose. If you'd like an in depth explanation of ButtonsPlus 2, take a look at Andrews instruction videos.

I promise you'll be pleasantly surprised at the possibilities that the ButtonsPlus stacks brings you. Don't forget to make a donation!

Comments

Hovered Captions – Sequel

Just last week, I wrote about Marathia's CaptionOnHover. Yesterday the stack received an update and if you didn't look at the stack last time, you should take a look now.

It turns out that CaptionOnHover has been a big hit – it is now Jeroen's best selling stack ever (thank you all for the clicks!)
A plethora of user requests sent Jeroen back to the workbench and these are the new features that he came up with:

  • New caption position: cover (with vertical alignment)
  • Moving caption (up/down, left/right)
  • Slide caption in/out (from/to the left/right/top/bottom)
  • Add links to the caption
  • Zoom image in effect
  • Caption styling for static and hover:
    • text colors
    • link colors and underlining
    • background color
    • border (width, style, colors, position inside/outside, radius)

CaptionOnHover is now – without a doubt – the most versatile captioning stack available for RapidWeaver.


Comments

New RapidWeaver Blog Concept

For many years, I used the RapidWeaver blog plugin. It only took a while, before I wished it was more flexible. There isn't a lot that you can do with it – except write blog posts, of course. Jannis at InStacks has a new stack online that changes that. Now you can turn your blog page into whatever you please – FAQs; Product Page; Photo Gallery…
Poster's possibilities are almost endless.

Poster is a suite of stacks that blends in with any RapidWeaver theme. Foundation compatibility has specifically been added and, because Poster is based on Stacks and is not a plugin, its potential is only limited by your imagination.
You can build a standard one up/one down blog page with, or without a summarised introduction; or you can build a grid of summaries and, when you click on 'Read more…' a new stacks page will open. The new page can contain whatever you like – Responsive Slideshows; Lightboxed Image Galleries; Responsive Video – if you have it in your Stacks library, you can most likely use it.

Poster
Poster (it seems to be currently fashionable) is another soft release. It is available online but the webpages are still under construction and Jannis is still implementing RSS capabilities. Other than that it's ready to go – and I'm hooked already.

When you drop Poster onto a Stacks page, you will find a pre-formatted post with a Poster Item containing a Header and a Main Content area. The Main Content consists of a Text box with the blue button to add child stacks. The child stack options include Text; Markdown; HTML; Image; Poster Social Share Buttons; Poster Read More (a child stack that is only displayed once the Poster Item is opened) and Poster Back. Once you have added any of the options, you can drag them within the Poster Item to position them where you want them and you can format the child stacks just like any other stack.
Optionally, you may drag in any other stack from your library. A sub-header for instance, a slideshow, a video; a 'Buy Now' button; its entirely up to you.

Below the Poster Item is a second button to add your next post. Once you've added a second post and preview your page, you'll find that clicking a post title or the 'Read More' text will open your Poster Item as a full page – using the same layout that your main page uses. No surprises there – that's how blogs usually work. So let's get down to the nitty gritty…

The stack settings for the main Poster stack let you set the number of Items Per Page, below which is a checkbox to Display Pagination – if you're writing a blog. or building a storefront, you will probably have more Post Items than you'll want to display on a single page, right?
Next you can set the page Layout. The standard setting is One Column, but you can also set Multiple Columns (Flexbox) and display up to four columns of content. Four columns are impractical on mobile devices, so selecting Multiple Columns opens up a further set of settings which allow you to define the number of columns to be displayed at each of four breakpoints.

The Date Format has a choice of five settings. I'm not sure if it's intentional, but one of those settings is in German and displays the month name in German when set. If this is intentional, a few French, Spanish and even English users etc. may be a little miffed that their language is missing. The other date formats are all numerical.
The time format can be set to 12, or 24 hour format – it is Hidden by default.
The Title Header can be set to H1 through H6 and the Metadata can be displayed above, or below the Title, or hidden.

The Poster Item Styling provides format overrides for just about everything on the page – you'll probably spend a while playing with these settings; I did. I wish other blog solutions had them!
The Social Share Button Settings are also interesting. The Alignment needs no explanation, but the Design may be either Thin, as in the screenshot above, or Square (with white icons on a square background). The Color Style offers the options Colorful and Custom. Setting Custom allows you to change the default grey to any colour that suits your overall page design. The standard Font Size is set to 1rem.

The Poster Texts are all editable so that your navigation may be localised. Then follow Poster Tools, with settings for Responsive Video; Reveal Items on Scroll – a neat transition effect that animates the Poster Items as they appear on the page; Lightbox Animation – with two transitions and Disqus Name for Disqus comments.

The final setting is Poster Edit Mode and may be set to developer mode when the stack preview is not available in RW6.

So now we come to the Poster Item Settings – no, we're not done yet – These include the Item Title and the optional Slug name which is used for the Item permalink. If no Slug is set, the Item Title will be used for the permalink – again; something that's missing from most other blog solutions.
Display Date is activated by default. For a storefront or a gallery, you might want to deactivate this. The date has a default of January 1st, 2017, 07:00 – don't forget to change it for each Item!

An External Link may be set for each Poster Item. It will display after the Item Header.
An unusual, but handy feature is the option to set a Header Content. This is (by default) a text content that will appear above the Poster Header Text. The Header Content may be supplemented or replaced with any stack you wish.

The next option – Summary Content – will display a summary of your content on the main page that will then be replaced by the main content when the Poster Item is loaded.
Enable Lightbox will activate a lightbox on the Poster Item page, allowing images to be displayed fullscreen – with an optional Caption. The next setting enable Disqus comments.

Categories + Tags allow you to set up five categories and/or tags for each Poster Item. Both the Categories and the Tags may be used to sort posts once published.

Both the 'Read More' and the 'Back' texts are optional and may be deactivated. As both are editable in the main stack settings, they may also be replaced by FontAwesome icons.

The final settings option is Hide Content. If your blog page is getting too long in edit mode, each Poster Item may be hidden and will only display the title.

I wrote that Poster is a suite of stacks. You will probably want each and every Poster Item to look the same on your page; or perhaps you want more than one standard Item design. If either is the case, drag a Poster Item onto your page and add any, or all of the Poster Back; Poster Read More and Poster Social Share Buttons into your Item, add the stacks that you otherwise require and, when you have finished moulding your Poster Item, create a Partial Stack which you can then drag into the main Poster stack as often as it is required!

Poster takes advantage of the built-in RW Blog Plugin CSS classes, so that it will adapt to any of the RW standard themes. But, as already mentioned, it also offers specific settings for Foundation.
Just like the standard RW blog, there is no CMS and no Database, so zero setup necessary. It is Stacks based, so that you can design your pages as you want them and it is extremely versatile. Even though the RSS capabilities are still in Arbeit – in preparation – I wish it had been available years ago!

BTW "No CMS'. I tested Poster with a simple CMS solution – Sentry – and it works perfectly (with the exception of turning post on and off); each entry can be edited without problems! If you're interested, you canary it out here for a few days: http://hall-net.eu/test/post/

Login: rob@hall-net.eu
Password: 246

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.