Stacks4Stacks

Porthole is the go-to stack element to use, if you're seeking to create highly attractive and eye catching circle effects in your web pages. You can use a single Porthole stack on its own to display an image or blockquote. Porthole stacks are excellent for displaying photographs next to personal profiles. Alternatively you can create a complete grid of Porthole stacks, and build brilliant and innovative navigation structures or image galleries. Using this simple stack, you will find no end of creativity.

Here are some key features of Porthole:

• Use one or more Porthole stacks on the same page or import Porthole stacks into non-stack page types
• Support for gorgeous Google-embedded web fonts that make your content shine
• Two text placeholders per Porthole, for larger and smaller titles
• Font Awesome icons supported (in RapidWeaver themes advertised as having Font Awesome support)
• Set Porthole stacks as links to resources, internal pages or external URL's
• Apply solid colour fills, CSS gradient backgrounds or images backgrounds
• Lots of useful style, colour and layout settings to make setup easier for you
• Porthole stacks degrade gracefully in older web browsers (without support for CSS border-radius)
• Subtle rollover animation effects to create a nice finishing touch

Examples

Here is an example of 9 Porthole stacks arranged as a grid:
 

 
In this instance, the free UsefulGrid stack was dragged and dropped into the page. Porthole stacks were then dragged and dropped into each grid box. By changing the text and background settings, each Porthole stack is different in appearance and content.

Not just circles! Porthole is also fantastic for square boxes with written content centred and presented within. This makes Porthole ideal for large theme headers and banner containers. In the example below, a warehoused image was used. Rounded corners were set to 0px. The Content Top setting was adjusted to 35%. The font sizing was increased (to 600%) and a different font face (Oswald) was used. The Porthole stack was set as a link to another website.
 

 

Setup

Getting Porthole stack setup within a page is a relatively easy affair.

• Once installed, drag and drop a Porthole stack into your page
• Double-click in the first text box to change the title shown. Its recommended that titles have a total length of just a couple of words
• Next, double-click in the second text box to change the subtitle shown. Again its recommended that subtitles are kept short
• Open the stack settings on the right. Change any of the style, colour or layout settings as you see fit.

Hovering your mouse cursor over the Porthole settings will display information tooltips about what each setting does or how it can be configured. You'll notice that things like text sizes use percentage units of measurement, for maximum flexibility. You may need to keep previewing the Porthole stack and tweaking the settings, to get things just right.

Print output

Porthole stacks print in a simplified style, resulting in less ink and paper wastage. Text is printed in black (so it contrasts against white paper). Background fills, gradients and images are removed.

Sizing

By default, a Porthole stack added to a page will be 100% wide (of the given area) and will extend vertically to the same proportions. Therefore it's recommended (but not essential) that you either constrain the width of Porthole stacks using the existing Fill Mode settings (available to all stack elements) or consider putting Porthole inside a float, grid or column stack. Any of these can be used to reduce the size of your Porthole stack. The examples shown above were nested inside a free UsefulGrid stack, using the default settings.

Browser compatibility

Rounded corners will not be rendered in IE7 or IE8; where Porthole stacks will get rendered as simple square boxes instead (you can see what this will look like by setting the border radius setting to 0px in the stack settings). On all newer web browsers (like IE9, IE10, IE11, Safari, Firefox, Chrome and Opera) Porthole stacks will render almost identically, in comparison with each web browser. Some CSS gradient effects may not get shown in certain browser configurations (and will default to a flat colour instead). Porthole is not really using any top-notch sophisticated technology as such. Most of it is just standard HTML and CSS code.