Home

Download this help site
(PDF 80MB)

Download

Using the content editor

Using the content editor, you can add your own custom content to site pages, page templates emails, email templates, or event descriptions. Your custom content can include:

  • text
  • pictures
  • tables
  • links
  • dividers
  • custom HTML or JavaScript
Icon

Custom content is added to site pages using content gadgets.

You can format the text, using inline formatting or text styles, or use ArtText to create stylized text with special effects such as drop shadows. You can link text and pictures to a page on your site or another site, and provide links to documents stored in your account or on another site. For content gadgets, you can layer and overlap content so that text can appear on top of a picture, for example.

Displaying the content editor

To display the content editor while editing a site page or page template, position your pointer over a content gadget then click anywhere within the gadget.

Now, you can use the options appearing on the content editor toolbar to add or modify the content within the gadget.

To display the content editor while editing an email, email template, or event description, simply click within the email body or event description.

Adding and formatting text

To add text while editing a content gadget, email, or event description, simply start typing. If are using a layer to control the positioning of the text, click within the layer before you start typing.

You can set text attributes, copy and paste text and text styles, and control paragraph formatting.

 Read more/less

Setting text attributes

To control text attributes, such as typeface, point size, and color, select the text you want to format then click the appropriate option within the toolbar. You can set the text attributes individually or select a predefined text style from the style drop-down list.

 Read more/less

Text styles not only save you the trouble of selecting multiple text attributes individually, but they also promote consistency since the same text styles are available throughout your site. Text styles are theme-specific and can be modified from the Color and Styles screen. Any changes you make to text styles there will be immediately applied to your entire site.

When you apply a text style, it will be applied to the entire paragraph, not just the selected text. If you apply text attributes locally – using toolbar options other than text styles – the attributes will be applied to the selected text only.

Copying text styles and text attributes

You can copy text styles and text attributes from one chunk of text to another chunk of text or to an entire paragraph. Depending on how the original chunk of text was formatted and how you select the text to be formatted, you can copy the style of the text – e.g. Heading 1 – or just its attributes – e.g. 12 point bold Verdana.

 Read more/less
Icon

You can only copy text styles and text attributes within the same content gadget, email, or event description.

To copy formatting from a chunk of text, select some or all of the text, click the Format painter icon within the content editor toolbar.

To apply the copied formatting to an entire paragraph, click within the paragraph without selecting any of its text. If the text you copied the formatting from had text styles applied, then the style will be applied to the paragraph. If the original text used localized or inline formatting rather than text styles, then its text attributes will be applied to the paragraph.

To apply the copied formatting to selected text only, select the text you want the formatting to be applied to. The attributes of the original text will be applied to the selected text as inline formatting, regardless of whether the original text was formatted using text styles or inline formatting.

Controlling paragraph formatting

By default, text will appear in the upper left corner. Using the formatting options appearing on the toolbar, you can control the alignment of the text.

 Read more/less

You can separately control the positioning of each paragraph within the gadget, email body, or event description.

You can also apply other paragraph formatting such as bullets, numbering, and indenting.

Line spacing

When editing site pages, email, and event descriptions, you cannot control paragraph spacing – the amount of vertical space between paragraphs – but you can control line height or line spacing (aka leading) – the vertical space between lines within a paragraph. You can set the line height separately for each paragraph, or change the line height for multiple paragraphs.

 Read more/less

To set the line height for a single paragraph, click anywhere within the paragraph, then click the line height icon in the toolbar.

From the menu that appears, you can choose a height (in pixels), or type the height you want to apply. If you select the Auto option, the default line height will be applied.

To control the line height for multiple paragraphs, select portions of the paragraphs before clicking the line height icon.

Paragraph breaks and line breaks

When editing site pages, email, and event descriptions, you cannot control paragraph spacing – the amount of vertical space between paragraphs. You can, however, use keyboard combinations to insert either a paragraph break or a line break.

 Read more/less

The different key combinations depend on which browser you are using, and whether your cursor is currently located within an existing paragraph.

To add a paragraph break, press the Enter key. To add a line break, hold down the Shift key and press the Enter key (except on Safari).

In your page's HTML code, a paragraph will appear as:

<p> .... paragraph text ... </p>

A line break will appear as:

<br>

Icon

For advanced control of spacing, you can customize the CSS code.

Pasting text from other sources

To paste text copied from another source – such as Microsoft Word, Google Docs, Apple's Pages, a website, or an email  – click where you want the text to appear then click the  Paste  icon within the content editor.

 Read more/less

Icon

On browsers other than Internet Explorer, you may be prompted to use keyboard shortcuts instead of the Paste icon to paste your text.

When pasting formatted text, the content editor will try to preserve as much of the formatting as possible, but will discard any incompatible formatting – formatting that it cannot reproduce itself. For more information, see Pasting content from other sources.

To completely avoid introducing formatting issues, we recommend that you paste only clean text – text without formatting. To paste text without formatting, use the Ctrl + Shift + V shortcut on Windows, and the Command + Shift + V shortcut on a Mac.  

Clearing formatting

To clear all character formatting – formatting applied directly to text, rather than through text styles – select the text you wanted cleared, then click the  Clear formatting  icon within the content editor.

Adding ArtText

ArtText allows you to create fancy looking text with special effects like 3D and drop shadows. You can use ArtText to produce exciting and colorful headings for your site header, site pages, and event descriptions.

 Read more/less

When you create a piece of ArtText, you can choose from a variety of fonts, styles, and colors. When you save it, an image file is generated containing the text and style that you have chosen. This way, you can be sure that the heading you have created will be the same for every visitor to your site no matter what kind of computer or browser they are using.

You can add ArtText to a content gadget or event description.

To add ArtText, follow these steps:

  1. Either select existing text to use as the basis for the ArtText or wait to enter your text in a subsequent step.
  2. Click the ArtText icon within the content editor toolbar.

  3. In the ArtText dialog that appears, you enter your text if you hadn't done so before selecting the ArtText option.
  4. You can choose any of the predefined ArtText styles from the Style drop-down, or individually select the font, point size, text color(s), and effect color(s). A preview of your ArtText design appears at the top of the dialog.

  5. Once you've modified the ArtText to your satisfaction, click the OK button.

Your plain text will now be replaced with an image of the stylized text you just created.

To modify existing ArtText, position your pointer over the ArtText, then click the Settings option in the bottom right corner.

The ArtText dialog will appear again, allowing you to make changes to your design.

To clear the ArtText so that the text returns to its unformatted state, click the Clear ArtText button within the ArtText dialog.

Inserting pictures

You can insert a picture into a content gadget, and in emails, email templates, and event descriptions.

 Read more/less

To insert a picture, click where you want the picture to appear then click the Image icon within the toolbar.

From the Insert image window that appears, you can choose a picture that is already in your account or upload new pictures from your computer or network.

After you've inserted a picture, you can set its properties by positioning your pointer over the picture and clicking the Settings icon. From the image settings toolbar that appears, you can change any of the image's settings, including s ize, alignment, margin, and borders, and how adjoining text wraps around the image. 

For more information, see Inserting pictures.

You can insert a link so that visitors to your site can click the link and jump to a page on your site or another site, or a section within the current page, or send an email.

 Read more/less

The link can appear as text, as a button, or as a picture.

To insert a link as text or a button, either select the text within the content gadget, email, or event description, or click where you want the text to appear. To insert a picture link, click the picture within the page. Then, click the Link dropdown in the toolbar towards the top of the page and select Insert or edit link.

From the Insert link window that appears, you choose where the link should go to.

If you want the link to appear as a button, click the Style drop-down and select a button style.

You can also choose whether you want the linked page to open in a new window or the same window, and specify a tooltip to be displayed when a mouse pointer is positioned over the link.

If you didn't select the link text before selecting the Insert link option, you can specify it here as well.

For more information, see Inserting links.

Inserting documents and files

On your Wild Apricot site, you can insert links to documents – such as PDFs, Word files, Excel files, etc. – that visitors to your site can view or download.

 Read more/less

Clicking on the link will either open or download the document, depending on your browser and computer setup. You can insert links to documents stored on your Wild Apricot account, or on another site. You can upload documents to your Wild Apricot account as part of the process of inserting a document link, or by using file management or WebDAV.

To insert a document link, click where you want the link to appear then click the File icon within the content editor toolbar.

For blog posts and forum topics, click the  More  menu and select the  Insert file  option.

From the  Insert document  dialog that appears, you can select a document already stored on your Wild Apricot account, or upload a document stored on your computer or network. 

You can navigate between folders in your account, and addrename, or delete folders You can delete a file from this dialog, but you cannot copy or move them to a different folder. You can copy and move files from  File management

After you have selected the document you want to link to, click the  Insert  button.

You can also embed documents so that they appear directly on your web page within an embedded document viewer available from third parties such as Google or Scribd. If you don't want to display the document within a web page, you can link to an external document viewer, so visitors can view the document without downloading it or having the required software to open the document.

For more information, see Inserting documents and files.

Inserting tables

You can insert a table into a page, page template, email, email template, or event description. You can create a regular table, showing information within columns and rows, or you can create tables without borders for advanced page layouts.

 Read more/less

For each table, you can specify the number of rows and columns you want, choose a background color, and set the border width and color. After inserting the table, you click inside the cells and start adding your content.

To insert a table into a page, page template, email, email template, or event description, click where you want the table to appear then click the Table icon within the content editor toolbar and select the Create table option.

On the dialog that appears, you specify the table parameters, including the number of rows and columns, the spacing between tables cells, and the padding (or margin) within each cell. You can also specify the table width – what percentage of the available area it occupies, and the table alignment – where the table is left or right aligned within the available area. Finally, you can indicate whether the first row should be specially formatted as column headings.

On the Background tab, you select the background color of the table. You can click a color at the bottom or enter the hex code for the color. To make the background transparent, so that the page background shows through, click the Set to transparent button.

On the Border tab, you set the color of the cell borders within the table. You can click a color at the bottom or enter the hex code for the color. You can also select the cell border width. To remove the cell borders completely – to make the table invisible – set the Border width to None.

After you click the Insert button to insert your table, you can click within the table cells on the page and start entering text or adding other content.

For more information, see Inserting and editing tables.

Inserting ruling lines

You can insert a horizontal ruling line – aka divider, dividing line, or rule – into a site page, page template, or event description.

 Read more/less

The ruling line will appear as a <HR> tag in the HTML code.

To insert a divider or ruling line, click within the content gadget or event description where you want the divider to appear then click the Divider icon within the content editor toolbar.

From the dialog that appears, select the line style you want to use, the line color, and the line weight, then click the Save button.

The divider should now appear within the gadget or event description.

Layering and overlapping content

To provide precise control over the positioning of content within a content gadget, you can create a layer, then add the content to the selected layer. In this way, you can position the content anywhere you want, even overlapping the content with other content.

 Read more/less

For example, you could use layers to overlap text and pictures.

Icon

You can also overlay text on a graphic by setting the graphic as the background image for the content gadget as part of the gadget's settings.

To create a layer, click within the content gadget, then click the Layer icon and select the Create new layer option.

A new layer with default text ("New layer") will now appear on the gadget with selection handles around it.

You can modify or delete the default text, and add other content to the layer. To add content to layer, position your pointer within the layer and either type your text or use the toolbar options to insert other content.

To resize the layer, drag the selection handles in or out. The side handles controlling the width, top handles controlling the height, and corner handles controlling both height and width.

To move the layer within the gadget, position your pointer within the layer and drag it to a new location.

As you move the layer, the content within the layer moves as well.

You can also use other options appearing under the Layer icon to control the position of the layout.

These options allow you to align the layer horizontally or vertically to the middle or edge of the gadget, email body, or event description.

To delete a layer, select the layer – so that the selection handles appear – then click the Delete layer option under the Layer icon.

If you have added multiple layers, you can control the layering order by using options under the Layer icon to move the currently selected layout forward or backward within the order. For example, if the currently selected layer is partially obscured by another layer, you can move the current layer further up the stacking order by selecting the Bring forward option.

Pasting content from other sources

To paste content copied from another source – such as Microsoft Word, Google Docs, Apple's Pages, a website, or an email – click where you want the content to appear then click the Paste icon within the content editor.

 Read more/less
Icon

On browsers other than Internet Explorer, you may be prompted to use keyboard shortcuts instead of the Paste icon to paste your text.

You can paste content into a content gadget, email body, event description, blog post, or forum topic.

What gets pasted?

You can paste both text and graphics from other sources. When pasting formatted text, the content editor will try to preserve as much of the formatting as possible, but will discard any incompatible formatting – formatting that it cannot reproduce itself.

 Read more/less

For example, some table formatting and text alignment options available in Microsoft Word may not be available in Wild Apricot's content editor, and will be discarded when pasting. For a list of supported formatting code, see Pasting cleanup rules (below).

While the editor is processing the pasted content, the following message will appear:

Whether graphical images are pasted along with the text depends on the source from which you copied the content. When pasting from sources that store images using URLs – such as Google Docs, web pages, and emails – any images included in the content will get pasted. When pasting from other sources – such as Microsoft Word – images will be discarded. 

To modify the settings of the pasted images, you cannot use the Settings dialog as you would when modifying a picture inserted directly through the content editor. Instead, you must click the HTML button within the content editor and modify the HTML code.

Pasting cleanup options

The current process for cleaning up pasted content replaces a process that retained more formatting but resulted in messier and less stable HTML code that could cause the content editor to freeze or otherwise malfunction, and result in inconsistent behavior on different browsers.

 Read more/less

To accommodate those who might prefer the previous process, pasting formatted content is actually a two-step procedure, in which the content is pasted using the previous process then immediately replaced by content pasted using the new process. To take advantage of the old pasting process, you can either click the Revert cleaning option that appears...

...or click the Undo icon within the content editor toolbar.

Clearing formatting

To clear all character formatting – formatting applied directly to text, rather than through text styles – select the text you wanted cleared, then click the  Clear formatting  icon within the content editor.

Pasting text without formatting

To completely avoid introducing formatting issues, we suggest that you paste only clean text – text without formatting. To paste text without formatting, use the Ctrl + Shift + V shortcut on Windows, and the Command + Shift + V shortcut on a Mac.

Pasting cleanup rules

The following is a list of formatting tags, attributes, and styles supported by the content editor, which are therefore retained by the new process for cleaning up incompatible formatting.

 Read more/less

Supported tags

The following HTML tags are supported; all other tags are removed.

P

UL

TH

EM

H1

OL

TD

I

H2

LI

A

U

H3

TABLE

IMG

S

H4

THEAD

BR

STRIKE

H5

TBODY

SPAN

SUP

H6

TFOOT

STRONG

SUB

BLOCKQUOTE

TR

B

FONT

Supported attributes

The following combinations of attribute, tag, and value are supported; all other combinations are removed.

Attribute

Tags

Value

Notes

face

FONT

Any

 

color

FONT

#, A-F and 0-9
or color name

 

align

P, H1-H6, TD

left, center, right, justify

 

align

IMG

left, right

 

valign

TD

top, middle, bottom

 

width

IMG, TABLE, TH, TD

Digits and can be px or % at the end of the line

 

height

IMG, TABLE, TH, TD

Digits and can be px or % at the end of the line

 

alt

IMG

Any

 

title

IMG, A

Any

 

src

IMG

Any

 

href

A

Any

 

name

A

Any

 

border

IMG, TABLE

Digits and can be px at the end of the line

For table converted to style border on tags TABLE and TH/TD

bordercolor

TABLE

#, A-F and 0-9

or color name

Converted to style border on tags TABLE and TH/TD

cellspacing

TABLE

Digits and can be px at the end of the line

 

cellpadding

TABLE

Digits and can be px at the end of the line

 

bgcolor

TABLE

#, A-F and 0-9
or color name

 

Supported styles

The following combinations of style, tag, and value are supported; all other combinations are removed.

Rule

Tags

Value

border-width

TABLE, TH, TD

Digits and px at the end of the line

border-style

TABLE, TH, TD

solid

border-color

TABLE, TH, TD

Valid CSS color

border-collapse

TABLE

collapse

font-size

FONT

Digits and px at the end of the line

background-color

TH, TD, FONT, SPAN

Valid CSS color


Styles to tags conversion

The following combinations of CSS rule and value are converted to the following HTML tags.

Rule

Value

Tag

font-weight

bold

strong

font-style

italic

em

font-size

Digits and px/pt at the end of the line

font

color

Valid CSS color

font

font-family

Any

font

text-decoration

underline

u

text-decoration

line-through

strike

vertical-align

sub

sub

vertical-align

super

sup


Other rules

  • Empty occurrences of P, H1, H2, H3, H4, H5, H6, BLOCKQUOTE, A, SPAN, STRONG, B, EM, I, U, S, STRIKE, SUP, SUB, and FONT tags will be removed.
  • Multiple nested tags FONT will be merged into one.   

Inserting and viewing code

You can insert custom HTML or JavaScript into a content gadget, email, email template, or event description. You can also insert custom HTML or JavaScript as a separate custom HTML gadget. You might want to insert code to embed an audio or video clip, or to embed a third-party widget from Google or Twitter.

As well, you can display the HTML for any content gadget, email, or event description, and modify it as you wish. You can also add JavaScript code and apply it to all the pages on your site. For more information, see Inserting and modifying HTML or JavaScript .

 Read more/less

Inserting custom HTML or JavaScript

To insert HTML or JavaScript code, click within the content gadget, email body, or event description where you want to insert your code then click the S (Snippet) button within the toolbar.

Within the code box, enter the HTML or JavaScript code.

After you save your changes, the element to be displayed by the code may be represented in edit mode by a snippet icon.

Once you switch to public view, the icon will be replaced by whatever your code is meant to display (in this case, a Google search bar).

Viewing and modifying the HTML code

If you want to view or modify the HTML code for a content gadget, page template, email, email template, or event description, click within the content gadget, email body, or event description then click the HTML icon within the toolbar.

On the dialog that appears, you adjust the code then click Save to save your changes.

Icon

You can insert JavaScript code and Iframes but not form tags. For information on inserting custom HTML forms, click here.

Undoing and redoing changes

You can undo and redo up to 10 of your most recent editing actions.

To undo your most recent editing action, click the Undo icon within the content editor toolbar.

After undoing an editing action, you can redo the action by click the Redo icon within the toolbar.

Icon

You can undo and redo actions only within the editing session for the current gadget. The moment you shift focus from the current gadget to another gadget, the editing session for the current gadget ends.

You can also restore the previous version of a page. For more information, see Version history.

On this page: 

 
Wild Apricot Inc. 144 Front Street West Suite 725, Toronto, Ontario, Canada M5J 2L7