We need a volunteer to fill the Print Competition Assistant position and two website assistant volunteers. Please contact the "Management Committee". We can't have a club without volunteers! Thank you!

Using Snippets to Format Custom Pages

Snippets are provided as a method for creating more complex formatting of your web pages without coding any HTML. It is highly recommended you avoid tables for the overall formatting of your pages since these will not display well on a mobile device. Use the text block snippets to create blocks of texts that display side-by-side in a browser but will be "stacked" on a phone.

The editor used to create content for your Home page and all custom pages includes a feature to insert special blocks of content to help you layout and format a page. At the top of the editor, click the "Insert" tab. In the ribbon bar that displays, you will use the "Insert Code Snippet" drop-down list to select content to insert.

In the editor, locate where you want to insert the special content. You might create a new paragraph where you want this to happen. You then select one of the items from the "Insert Code Snippet" list. This will insert a block of text with special formatting instructions as described below. Most of the time this is a formatted block of text that you can then modify.

While these descriptions reference "text", you can insert gallery tags and images within the text blocks. You can nest snippets within snippets.

Snippets Available

Highlight Panel

This inserts a highlighted block of text with the themed border and background.

Highlight Panel White

This inserts a block of black text with a white background and a themed border.

Highlight Panel-Float Left

This inserts a highlighted block of text with the themed border and background. This block of text will "float" to the left side of the page. This can be useful if you have other blocks of text that will "float" to the right. After all floated blocks of text you must add a "Clear Floated Panels" snippet to complete the floating of text blocks.

Highlight Panel-Float Left White

This inserts a block of black text with a white background and a themed border. This block of text will "float" to the left side of the page. This can be useful if you have other blocks of text that will "float" to the right. After all floated blocks of text you must add a "Clear Floated Panels" snippet to complete the floating of text blocks.

Highlight Panel-Float Right

This inserts a highlighted block of text with the themed border and background. This block of text will "float" to the right side of the page. This can be useful if you have other blocks of text that will "float" to the left. After all floated blocks of text you must add a "Clear Floated Panels" snippet to complete the floating of text blocks.

Highlight Panel-Float Right White

This inserts a block of black text with a white background and a themed border. This block of text will "float" to the right side of the page. This can be useful if you have other blocks of text that will "float" to the left. After all floated blocks of text you must add a "Clear Floated Panels" snippet to complete the floating of text blocks.

Clear Floated Panels

This inserts an invisible marker that indicates that the "floating" of text blocks is complete. The formatting returns to a single column for the page. This is only needed if you used any of the "float" snippets.

Error Panel

This inserts a special highlighted block of text that is used to display an important warning message. It has special formatting that is the same for all themes.

Flexbox Container and Main Column

This creates a container for using the Flexbox system for creating columns. It includes the main column. Additional articles may be inserted after the main column. Multiple columns will display as space is available for the articles in the Flexbox container.

You can read more about the Flexbox method of formatting page content from //developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox. This system adapts best to different browser sizes and mobile devices.

Flexbox Aside for a Minor Column

This creates a minor column inside a FlexBox container.

Flexbox Aside for a Left Column

This creates a minor column inside a FlexBox container. This block will "float" to the left side of the container.

Flexbox Aside for a Right Column

This creates a minor column inside a FlexBox container. This block will "float" to the right side of the container.



This website is hosted by Visual Pursuits, a service provided by Software Pursuits, Inc.