The emphasis of this stack is very-much on quick setup, and instant, professional results. You can use images dragged and dropped locally into Stacks / RapidWeaver or warehoused images stored in an online location. HighLight stacks scale responsively to the size of the area they are nested within. The link function allows you to set HighLight stacks as anchor links, links to other pages in your website, links to external websites, links to resources or the creation of other links like lightbox links, email or Skype etc.
Unlike competing stacks, the caption region in HighLight can support many different types of stacks and content. Support includes styled text, HTML code, Markdown, images, floats and columns. If you don't set the entire stack as a link, you can highlight individual segments of text (within your captions) to set as a links. Both the text colour and caption fill can be customised; with support for opacity. Further modifications can be applied with custom CSS code.
If you want a stack where the captions only display on mouseover or click, please condor using the ImageCaption or ImageKiosk stacks.
Please Note: HighLight is intended as a replacement to the (now) discontinued Deli stack, which is still available to download from the Archive page if you need it.
Unlike competing stacks, the caption region in HighLight can support many different types of stacks and content. Support includes styled text, HTML code, Markdown, images, floats and columns. If you don't set the entire stack as a link, you can highlight individual segments of text (within your captions) to set as a links. Both the text colour and caption fill can be customised; with support for opacity. Further modifications can be applied with custom CSS code.
If you want a stack where the captions only display on mouseover or click, please condor using the ImageCaption or ImageKiosk stacks.
Examples
Here are some working examples of the HighLight stack, nested within an AdaptiveGrid stack. Each HighLight stack has been set as a link.Customisable options
HighLight stack supports the following customisable options, making this stack very versitile:- Options to place HighLight within the normal page flow, an ExtraContent container or a FreeStyle banner
- Toggle between using a local or warehoused image
- Apply rounded corners (border radius)
- Position your caption at either the top or bottom of the image frame
- Set a breakpoint to simplify the layout on smaller screen widths
- Change the font size of the captions independently of your theme font size (useful if you want to make captions more prominent)
- Adjust the line height (line spacing) of caption content
- Apply padding around the edge of the caption. Padding is specified in percentage units of measurement, so it scale proportionately
- Control the caption text colour and background fill (including opacity)
- Set the entire HighLight stack as a link to a RapidWeaver resource, another page in your website or an external website
Setup
To setup a single HighLight stack in your website, please read and follow these instructions carefully:- Once installed into RapidWeaver, open your stacks library and drag-and-drop a copy of HighLight into your stacks page
- In the HighLight stack settings, change the Placement of the stack if necessary. By default HighLight will go within the normal page flow, but alternatively you can instantly embed it into any theme ExtraContent container or a theme FreeStyle banner.
- Choose the source of the image you want to use. More details about this can be found below. Drag and drop a suitable image into HighLight stack or link to a warehoused image
- Drag and drop a stack into the placeholder marked 'drag stacks here'. This is the stack that contains your caption content, and can be a Styled Text, HTML Code, Markdown or other basic stack type
- Customise any of the caption positioning, colour or style settings accordingly. The caption text and fill options support opacity too
- If you want to set your entire HighLight stack as a link, enable the Set As A Link option and create a new link. Alternatively you can disable this option and create links within your caption content instead
- Preview the page to see what your HighLight stack looks like. Export or publish when done.
HighLight is compatible with all ThemeFlood RapidWeaver themes. Compatibility with other themes may vary. HighLight is tested and confirmed to work with IE9+ and the latest versions of Edge, Safari, Opera, Chrome and Firefox.