Let's do a quick recap. Hotspots allows you to overlay image areas with live rectangles, or with Fontawesome icons. The rectangles and icons can each be linked to a URL, for instance, or a lightbox.
ImageMapper allows you to overlay an image with rectangles, triangles, hexagons and circles, but more importantly – with a mapped area…
So how do you add something as 'simple' as a circular overlay? You need three coordinates: 1 – the position from the left of the image; 2 – the position from the top; 3 – the radius of the circle – all coordinates are separated by a comma. My tip: In the ImageMapper Area child, choose your shape – Circle, or Rectangle and then adjust the size and position whilst in preview.
For more complicated shapes, such as a triangle, or an octagon, load an image of the shape to begin with; map the shape out with the crosshairs and then copy the coordinates into your final image The base stack provides a square, a triangle, a circle and a hexagon to get you started. The hexagon is already mapped out.
Data Source – Set up your Image maps using either the child stacks, or an HTML image map
Image Source – Dragged and Dropped, or Warehoused
Show Coordinate Inspector – See above
Area Mousover Colouring – Fill Colour, Stroke Colour
Area Title – Title for the tooltip
Custom Area Attributes – add a class to the overlay
So does it make sense to have two similar stacks in the same stables?
Absolutely! ImageMapper is ideal for those more complicated image maps.
Font Awesome is the fourth stack in my library with this same name and is one of seven, when I search for 'Font Awesome', but when you drag the teal coloured flag icon onto your Stacks page, you'll have a Font Awesome Icon that stands out from the rest.
Possibly the easiest and most flexible way to get Font Awesome icons into your projects! RWExtra's Font Awesome stack is ideal to use for setting up individual icons as buttons, column headings and floats. A plethora of powerful settings permit you to apply some quite sophisticated styling and positioning to your icons. Plus you can do fancy things with this stack; like mouseover transparency effects, shadows, fade animations, stacked icons and rotations. Best of all, everything you generate with this stack works with all major web browsers and completed icons are retina display optimised.
Not only is Font Awesome simple to adjust to your exact requirements, it's also flexible enough to stack icons atop each other.
And the icons can rotate. Either to a set value, or on hover; or endlessly.
This stack doesn't really need any instructions. Just drag and drop it into a page. Select the stack in edit mode and take a look at the settings panel. Move your mouse cursor over each setting, to read an informational tooltip about what it does and you'll will quickly discover that there are a huge number of different options to play with! Changes to the settings take effect in both edit and preview modes.
Icon Markup – your Font Awesome code
Create Stacked Icons
Make The Icon A Link
Apply Dimensions – Container Width/Height
Float Alignment – Left/Centre/Right
Custom Background Fill – Normal/Hovered
Border Colour – Normal/Hovered
Icon Colour – Normal/Hovered
Stacked Icon – Normal/ Hovered
Icon Sizing – Font Size/Line Height (px, rem, %)
Rotate – Orientation – Normal, Rotate 90º, Rotate 180º, Rotate 270º, Flip Horizontal, Flip Vertical
Spin Icon Infinitely
Transitional Effect – Animation Speed
If you frequently use FontAwesome Icons, you're going to love Font Awesome
Back To Top is the stack that you'll need if you wish to build attractive buttons to send a user back to the top of a webpage, but don't want to use Photoshop to build sprites and don't want to do any complicated programming .
A choice of customisable options lets you create a button of just about any shape, size, position and colour. And a useful 'view generated source code' setting lets you copy the generated code quickly for reuse in non-Stack pages.
Back To Top General Settings
Placement - Fixed (default) Relative,
Position – Top/Bottom/Left/Right
Offset – Page scroll before active
Back To Top Styling
Content – Font Awesome Icon
Content Colour (Normal/Hover)
Animation – Time ms
Sizing - Width/Height
Background – None, Colour Fill, Gradient Diagonal 1/2, Gradient Horizontal, Gradient Vertical (default), Gradiant Radial, Image (Dragged and Dropped), Image (Warehoused)
Top/Lower Fill – Normal/Hover
Border – Normal/Hover
The very first checkbox in the Settings panel is View Generated Source Code. When the checkbox is activated, the HTML, the CSS and the JS output for your button for your newly created button will be displayed in preview mode. A single click in any of these fields will allow you to copy the code necessary for your Back To Top button to be included within non-Stacks pages.
Without a doubt, a useful stack to have in your collection!
iStack allows you to superimpose images, stacks and a caption over a background image. There are, of course, other stacks, or stack combinations that will allow you to do the same, but iStack drastically reduces the amount of work necessary for such a combination. All you need to do is drop your background image into iStack, add the second image and decide whether, or not you require an additional caption and stacks content. The standard stack settings make sure that you already have a perfect composition, but there's also room for creativity.
So, using one of the 62 (sixty-two) stickers that Tommy has thoughtfully provided as a design aid, let's take a closer look:
Drag iStack (I hope Apple won't contest the name) into a Stacks' page and in the stack settings, you'll find an image well for the main image and for the overlay (all images can be warehoused).
Once you've added an images into each of the image wells, you'll need to activate Show Front Image, otherwise iStack functions as a simple caption stack. You can now switch to preview and you'll find Tommy's sticker positioned in the middle of your image and a caption at the bottom right.
Returning to the Settings Panel, you'll also find options to deactivate the caption and to Add a DropZone. You can add any stacks of your choice to the drop zone.
The first options are Layer Images (active by default) and Switch Front/Back
Link And Hover – Add Link, Hover Opacity, Hover Hue, Scale (back img)
Back Image – Show Back Img (active by default) Image Resource, Fill Width, Greyscale
Front Image – (not activated by default), Image Resource, Width Settings, Margin Settings, Adjust Left/Right Margin, Opacity, Hue
Edit / Publish Crop (container) – Crop, Max Height, Adjust Margin
Caption – (activated by default), Note (caption container), Font Size, Line Height, Colour background/text, Shadow settings, Border, Position Settings
DropZone – (not active by default) When activated – settings for size, position and shadow.
Breakpoint – Settings to adjust size and position of Front and Back images, Caption size and position and the DropZone size and position below a breakpoint
As is usual for DeFliGra's stacks, advanced CSS settings are available for each of the containers.
iStack is ideal for superimposing two (or three) images and a caption, or two images and a text and is really simple to use.
Combining iStack with GoGrid (see Tommy's combined offer), a product page for multiple items with superimposed price or special offer is child's play.
The two examples above each have a background and front image, plus caption and stacks content.
A FAQs page immediately comes to mind, but Table Of Contents [TOC] can be used to build a complete page with article navigation.
TOC consists of two stacks and is simple to set up. Table Of Contents, the main stack, contains the complete setup for all TOC Article Child stacks, with the exception of the content type. The Content Type is individual for each child stack and can be set to Text (default) HTML, Markdown, or Stacks.
Once you've dragged the TOC 'master' stack onto your page, you can add title to the stack, then either drag in new content stacks from the Stacks' library, or simply click the + button to add a child stack. The TOC Content stack has a header area and a content area. When entering a header, it is automatically added to the contentlist.
The Content stacks may be dragged up or down inside the master stack, if you decide to change the order of your articles – the content list is then corrected accordingly.
It is possible to have more than one TOC stacks on your page.
When one of the Articles from the content list is clicked, TOC automatically jumps to that article and displays a progress bar at the top of the page. As you move down, reading the article, the progress bar indicates how much of the article has been read.
The clever thing about the progress indicator is – when you click the plus button at the top of the article, it opens the content list which now shows you which articles you have read and which articles you have yet to complete.
Once more, you will find an endless list of settings for TOC.
Suffice it to say that all aspects of the stack may be set to suit your preferences.
Background Colour, Icon size and colours, Header and Text Size and Colours, Line Height, and the list of Fonts that has become usual for 1LD stacks.
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