1

Pony Club Website Template for Clubs, Centers & Regions

Guide to Using the Content Editor

Contents Introduction ............................................................................................................................................................................ 1

Screen ..................................................................................................................................................................................... 1

Text Formatting – Bold, Italic, Underline, Strikethrough, Paragraph/Header ....................................................................... 1

Paragraph Formatting – Left Align, Center, Right Align, Justified .......................................................................................... 2

Numbering & Bulleting ........................................................................................................................................................... 3

Inserting – Links, Unlink, Images, Embedded Content, Anchors, Lines .................................................................................. 4

Link to a Web page ............................................................................................................................................................. 4

Link to a Location on a Page ............................................................................................................................................... 5

Link to an Emai .................................................................................................................................................................... 5

Link to a Document ............................................................................................................................................................. 5

Add Image ........................................................................................................................................................................... 6

Embed Content ................................................................................................................................................................... 8

Embed Pay Pal Buttons ...................................................................................................................................................... 8

Anchor ................................................................................................................................................................................. 9

Corrections – Undo, Redo, Remove Format ......................................................................................................................... 10

Tables .................................................................................................................................................................................... 10

File Browser for Documents and Pictures ........................................................................................................................... 13

Problems or Questions? ....................................................................................................................................................... 13

Pony Club Website Template Content Editor Guide page 1

Introduction The Content Editor allows for text, pictures and documents to be added and formatted onto your website pages.

The Content Editor tool bar is available whenever accessing an editable section of a web page.

Let’s take a closer look at each of the tools found on the bar from left to right:

Screen

Maximize - When clicked, it enlarges the edit area to complete fill the window of your computer screen. To

return the edit area back to its default size, just click the maximize button again.

Text Formatting – Bold, Italic, Underline, Strikethrough, Paragraph/Header

There are several tools that allow you change the look of the text on your web pages. This allows you to organize, highlight

and emphize different pieces of information on the page.

To start writing text in any of these styles, click on the specific icon (or icons) for the style you want and begin typing. To

stop typing in a certain format, click its icon again. To format text already written, use your mouse to highlight the text

and then click the desired formatting icon(s).

Bold - Bold is any text that is darkened.

Italic - Italic slants the letters evenly to the right.

Underline - Underlined text has a line running beneath

them.

Strikethrough – Text that has been struck-through has a

horizontal line drawn through it.

2

Paragraph Format /Text Styling (Fonts) – Paragraph Formatting and Text Styles allow for

titles, subheadings, and section headings to be easily and quickly selected, avoiding having to manually

format each section header each time. By having the Format/Styles set with their own unique fonts,

font characteristics, and sizes, it allow for a consistent look to be achieved across all your web pages.

Pony Club offers four styling options that may be utilized throughout your site.

Normal – This is the default styling for text entered and should be used for the

majority of your text.

Heading 2 (Blue) – This is styling for a header. This means that if chosen all

the text in the paragraph will be in this style. You cannot choose just one or two

words within a paragraph to look like this.

Blue (Span) – This is a styling for text. You may choose specific words within a

paragraph to be in this specific font style.

Serif (Span) – This is another option for styling specific text. You may choose

specific words within a paragraph to be in this format.

All of these different styles may be combined to create the look you desire.

Paragraph Formatting – Left Align, Center, Right Align, Justified

Horizontal alignment determines the appearance and orientation of the edges of the paragraph.

Left Align – In a paragraph that is left-aligned (the most common alignment), the left edge of

the paragraph is flush with the left margin.

Center Align – To place the words in the middle of the page, choose to “center” the text.

3

Right Align – For a paragraph that is right-aligned, the right edge of the paragraph is flush

with the right margin.

Justify – Justified text means the text in the paragraph (other than the last line) will be

spaced out to be flush to the left AND right side margins.

Increase Indent – When this button is clicked, the distance is increased between the

current paragraph (the selected one or the one where the cursor is placed) and the left

page margin. Each time you click the “Increase Indent” button, the left margin increases.

Decrease Indent – The text moves to the left each time you click the “Decrease

Indent” button on the toolbar. The “Decrease Indent” button will only be available if

“Increase Indent” was already used on the paragraph.

Numbering & Bulleting

Numbered List

Numbered lists are useful when you want to group a number of items that need to appear in

a particular order. They are well-suited for lists of step-by-step instructions.

To create a numbered list, press the numbering button on the toolbar. A number will appear

at the beginning of the line of text that contains the cursor and the line will become indented.

If you want to add further numbers, press “Enter” on your keyboard. The cursor will move to

the next line with the next sequential number placed at its beginning.

The list continues automatically as long as you press “Enter” at the end of a line. If you want

to stop the numbering either, press “Enter” a second time after the last number you want or

click the numbering button again. The cursor will then move to the next, unindented

paragraph.

If your text has already been written, you can add numbering by selecting the paragraph(s) and pressing

the numbering button on the toolbar. Each paragraph will then become a separate numbered item.

4

In the Editor you can customize the appearance of the numbered list, its starting

value, and the list marker. In order to change the list style, open the list context

menu by clicking the right mouse button on a numbered line and choose

the Numbered List Properties menu option.

The Numbered List Properties dialog window lets you configure the starting value and

the numbering type. A numbered list can use decimal numbers, Roman numerals, or

letters of the alphabet, in either lower or upper case.

Bulleted List

Bulleted lists are useful when you want to group a number of items that do not need to appear in any particular order.

To create a bulleted list, press the bullet button on the toolbar. A default list marker will appear at the beginning of the

line of text that contains the cursor and the line will become indented. If you want to add further list items, press Enter on

your keyboard. The cursor will move to the next line with a list marker placed at its beginning.

In the Editor you can customize the appearance of the bulleted list and modify the list marker. In order to change the list

style, open the list context menu by clicking the right mouse button on a list item and choose the Bulleted List

Properties menu option.

Inserting – Links, Unlink, Images, Embedded Content, Anchors, Lines

Insert Link – Inserting a link on a webpage allows you to “link” text or an image on your page which, when

clicked on, may either send the user to different web page (either on your site to another site), send the user to

a specific location on a web page, open up a document for the user to view/download, or open up an email with the

addressee already entered.

Link to a Web page

Using your cursor highlight the text or image you want to link. Next, click the Link button

on the toolbar. The Link Type field will be defaulted to “URL,” so all you need to do is enter

the address of the web page to which you want the link to send the user.

If typing in the address, you must make sure you choose the correct “Protocol” – how the

address starts, this may or may not be seen in your browser when visiting the site. The

most accurate way to ensure the link is correct is to copy and paste the address.

If copying and pasting in the address, the tool will see the “protocol” in the address and

make the correct selection for you when you paste in the address.

5

If you are entering in a webpage that is NOT on your site, you will want that site to open up

in a separate tab for the user. This ensures that your site will remain open and available on

their browser for them to access again quickly.

To have your link open in a new tab, click the “Target” tab in the Link dialog box. The drop

down menu will allow you to choose “New Window”.

Link to a Location on a Page

Anchors allow you to link text or images to specific areas within any given page. This is especially useful for long pages

where a fair bit of scrolling is required. See page 8 on Anchors for details on how to create an anchor and the subsequence

directions on how to link to it.

Link to an Email

You can link text or a picture to bring up an email that is prepopulated with an

email address, subject and message body. The email will open in the user’s email

system (Outlook, Gmail, Hotmail, etc.).

To set up an email link, click the Link button. Then choose “E-mail” as the Link

Type. New fields will appear specific for setting an email link. At a minimum the

email address must be entered.

If desired (not required), you can also enter in the subject line and any message

you would like to see from anyone email from the link.

NOTE: The user can change and add to the subject or message once they click on

the link to bring up the email.

Link to a Document

Documents may be uploaded to your site and then linked to in any editable content area. This includes the web pages

and the calendar event descriptions.

To link to a document:

1. Highlight the text or image you want people to click on

in order to bring up the document on their screen.

2. Click on the Link button.

3. Click on “Browse Server” – leave Link Type, Protocol

and URL alone.

6

This will bring up the File Browser. The File Browser is used

to hold document and image files to be use on your site -

see page 13 for information on using the File Browser.

4. Navigate the folders to find the file desired. If the

document has not yet been uploaded to your File

Browser, then:

a. Click into the folder where you want the file

to live

b. In the upper right hand corner, click on

“Choose File”

c. Find the document on your computer

d. Choose the document and then click “Open” (Note: This will not actually open the document)

e. Then click the “Upload” button – found underneath the “Choose File” button

5. Click on the file to which you want to link.

This will bring you back to the Link Tool screen. You’ll see that the Protocol and URL fields

have been automatically and appropriately updated.

6. Click the green “OK” button.

Unlink Button – The unlink button unlinks the path to website pages, documents and emails. Highlight the

text or image currently linked and then click the unlink button and the link will be removed.

Add Image – Like documents, images may uploaded to your site for use on your site.

There is a space limitation of 500 mg for your site, so it is not suggest that you have photo galleries on your site. If you

want to keep a photo gallery of various activities and events, utilize an appropriate site for that purpose (Flicker, Facebook,

etc.) and then post a picture or two on your site to hightlight the event/activity along with a link to the additional pictures.

To add a picture:

Place your cursor AT THE BEGINNING of the line where you want the to top of

picture to be– even if you want the picture to display to the right of the screen.

(You’ll set the alignment of the picture later).

1. Click on the “Add Image” icon.

2. Click “Browse Server” – leave the rest of the fields alone.

This will bring up the File Browser. The File Browser is used to hold document and

image files to be use on your site - see page 13 for information on using the File

Browser.

7

3. Navigate the folders to find the image you want. If the image has not yet been uploaded to your file browser,

then:

a. Click into the folder where you want the file to live

b. In the upper right hand corner, click on “Choose File”

c. Find the image on your computer

d. Choose the image and then click “Open” (Note: This will

not actually open the document)

e. Then click the “Upload” button – found underneath the

“Choose File” button

4. Click on the image you want to insert onto the web page.

This will bring you back to the Image Properties Screen. You’ll see that the URL field has been automatically appropriately

updated.

You may now set properties for the image:

a. Alternate Text: Leave blank, this is not needed for your

site

b. Width and Height: You may adjust the width and height of

your image.

NOTE: It is not recommended to make large changes in the size of your

picture here. Instead, resize the original image and then upload the

smaller image to your site. This will save space on your site AND increase

the speed at which the image will appear on your site for visitors.

c. Border: If desired (not required) enter in

a number for the thickness of the border

you’d like in pixels (1, 2, 3)

d. HSpace (Horizontal Spacing): If desired

adds padding (white space) to the right and

left sides of the picture. Enter in the thickness of the padding in pixels (5, 10)

e. VSpace (Vertical Spacing): If desired adds padding (white space) to the top and bottom of

the picture. Enter in the thickness of the padding in pixels (5, 10)

f. Alignment: Like with the font options, you can choose where in the line/paragraph you want the image to

display – left side or right side of the page.

5. If you would like the image when clicked on, to send the visitor to another

site, click on the “Link Tab.” Then paste or type in (beginning with http) the

web page address, and choose the “Target” of “New Window.”

6. Click the green “OK” button.

Pixels (a word invented

from "picture element") are the basic unit of programmable color on a computer display or in a computer image. The width of your site is 960 pixels.

8

To change the setting of any image:

1. Click on the image.

2. Click on the Image button.

3. Make the adjustments.

4. Click the green “OK” button to save changes.

Embed Content – The embedding tool allows you enter embedding code from trusted sources, which allows

for content from one site to also be on your web site. Trusted sources include YouTube and Google Docs. If you

wish to embed something that is not currently on the Pony Club “trusted source” list, please email the USPC Content/Data

Manager with your request – webmaster@ponyclub.org.

NOTE: Pay Pal button coding may be embedded using the Pay Pal tool, located right next to the Embed Content tool on

the tool bar.

To embed content onto your page, click the Embed Content button on

the toolbar and then copy the code from the site you are embedding

from and paste it into the box.

NOTE: The “embed code” is not the same as the URL/web address.

Once you have found the embed code and pasted it into the box, click the

green “OK” button. Your video/content should now show in on the page,

and when you save page it will show to the visitors on that page.

Embed Pay Pal Buttons – This tool allows you to enter in the code

generated by Pay Pal to place a Pay Pal button onto your site. To embed a Pay

Pal button, click on the Pay Pal button on the toolbar and then copy the code from

the button you created in Pay Pal and paste it into the box. Once you have found the

embed code and pasted it into the box, click the green “OK” button. Your video/content

should now show in on the page, and when you save page it will show to the visitors on

that page.

9

Anchor - Anchors are a way to allow quick navigation to designated sections (an anchor) of a page. This is

useful if you have a long page of various pieces of information. You can enter in a list of links at the top that

automatically place the user to part of the page they are most interested in. A good example would be an FAQ page.

To add an anchor:

1. Position the cursor where you want to place the Anchor (the place to where you want the link to send the visitor).

2. Click the Anchor button.

3. Enter an easy to remember anchor name that describes the section of the page, and then click the green “OK”

button.

The position of the Anchor is shown by

the red flag on your edit screen. The

red flag does NOT show to visitors on

the web page.

4. Highlight the text that you want to turn into the

link which will send visitors to the anchor location on

the page.

5. Click the “Insert Link” button.

6. In the Link Type box click to the drop-down list

and choose “Link to anchor in text.”

7. Next go to “Select an Anchor” and under “By

Anchor Name” select the anchor name.

8. Click the green “OK” button.

You’ve now created an Anchor! Clicking on the linked text will bring you down to its anchor further down the page.

10

Insert Horizontal Line - To enter in a line to run the width of the web page,

simply place your cursor at the location where you want the line and then click on

the Insert Line button. The line will be inserted into your web page where your cursor is

located. Horizontal lines are nice way to separate pages into sections.

Corrections – Undo, Redo, Remove Format

Undo - Undo is a quick way to cancel the last change done (and not saved). This is especially useful if a massive

incorrect change was done, such as accidently selecting all of the page content and delete it.

Redo - Redo allows you revert the last undo operation – returning the page to the state it was in before you

performed the undo.

Remove Format - To remove text styling, select the formatted text and press the “Remove Format” button.

All text styling will be removed (bold, italics, underline, font selection, and indentation) and the text is displayed

with default paragraph formatting of “normal.”

Tables

Table – Tables are handy way to display text and images in an organized fashion on a web page or to ensure

placement of specific text or image on a page.

To create a table, press the “Table” button on the toolbar. The Table Properties dialog window will open to let you

configuration the table as you desire.

The Table Properties tab is the default tab that will be displayed. It allows you to set the table dimensions and define the

way it will appear in the document. It will have some default values already entered. You will just need to review and

make the changes you desire.

Below is an overview of all the Table Properties tab elements:

Rows – the number of rows in the table (required).

Columns – the number of columns in the table (required).

11

Width – the width of the table in pixels or a percent value.

Enter in a pixel width by just entering in a number. To enter

in a percentage of the page you want the table to occupy,

enter in the number followed by the % symbol – for example,

75%. Note: the width of your site is 960 px. Height – the height of the table in pixels. If nothing is entered, then the content in the table will determine the height of table.

Headers – the drop-down list that formats certain table cells as

headers, which applies special formatting to them. You can apply

header formatting to First Row, First Column or Both the first row

and first column.

Border size – the thickness of the table border in pixels. If you don’t

want a border, enter in 0.

Alignment – the alignment of the table on the page. The following

options are available: Left, Center, and Right.

Cell spacing – the space between individual cells, in pixels.

Cell padding – the space between the cell and its contents, in pixels.

Caption – the label of the table that is displayed on top of it.

Summary – the summary of the table contents that is available for

assistive devices like screen readers.

EXAMPLE: The Table Properties entered in to the above right image, create:

NOTE: The Advanced tab lets you configure additional options such as assign it an ID and a language direction. You will

not need to utilize this tab.

Pixels (a word invented from "picture

element") are the basic unit of programmable color on a computer display or in a computer image. The width of your site is 960 pixels.

12

Working with Table Rows, Columns and Cells

Once your table is created, you now have options to set properties to the rows, columns, and individual cells. You may

also access the table properties again to make any changes or adjustments. In addition, you can now easily add or delete

rows and columns. To access these options, place your cursor appropriately in the table and right click on your mouse.

Then hover over if you want to work with the cell, row or column you’re cursor’s currently in, delete the whole table, or

access the table properties.

For the Row and Column selections, the options

available to you are to insert (row) above or below/

(column) before or after the row or column you are

currently in. You also have the option to delete the

row or column your cursor is currently in.

NOTE: If you delete a row or column, all content in

that row or column will be deleted as well.

For the Cells Properties option, you can insert a cell before or after the cell you are

currently in or delete the cell you are in. You can merge cells together, and you can

split cell (horizontally or vertically). In addition, you can set specific properties for

the cell.

The options for cell properties are:

NOTE: Setting Properties for one cell may affect other cells in its column or row.

Width: The desired length of the cell, in pixels or page

percentage

Height: The desired height of the cell, in pixels

Word Wrap: Yes – will allow the text to flow to the next line in

the cell; No – will only allow for ONE line of text to show

Horizontal Alignment: The location of text in a cell – left or right

flush, centered, or justified

Vertical Alignment: The location of text in a cell – start the text

at the top, float it in the middle, or keep it flush to the bottom

Cell Type: Data or Header, will be data, unless otherwise set up

as a header when designing the table

Rows Span: This will cause the selected cell to grow DOWN the

number of rows entered. NOTE: it will push the other cells in the rows it take over to the side.

Columns Span: This will cause the selected cell to grow the number of rows entered. NOTE: it will push the other

cells in the row to the side.

Background Color: Click “Choose” to select a color from the grid, or enter in a specific HEX code

Border Color: Click “Choose” to select a color from the grid, or enter in a specific HEX code

There are many website to help you find the correct HEX code for the color you want. And if you have the RGB for the color you want, there are other sites that will convert it to the proper HEX code for you.

13

File Browser for Documents and Pictures

Your Content Editor allows for documents and images to be uploaded to your site. The file browser for documents and

images are SEPARATE. Documents and images are not kept together. However, the file browser functionality for each is

the same.

NOTE: The File Browser can only be access through an

editable content area or a page you created.

In the File Browser, you may create folders to help

organize your documents and files. A few things to

note:

1. You may create as many folders as you like.

2. You may create folders within folders.

HOWEVER, this does make the address link to the

document/image longer. Just keep that in mind.

3. Folder names must be URL friendly, containing only letters, numbers, dashes and hyphens.

4. Changing the name of a folder will break the link to all the files in it. You will need to redo all the links on the

pages that had documents/images in that folder.

5. Changing the name of a file in a folder will break the link(s) to that document/image. You will need to redo all the

link(s) on the pages that had that document/image. NOTE: “&” are not acceptable in the name of file. It will cause

and error when you try to access the document from the page you are adding it to.

6. Keep your folders “clean.” Once a document or image is no longer going to be used on your site, when you remove

the document/image on the PAGE, remember to visit the file browser and delete the document/image from there

as well. This will make it easier for you to find the documents and images that you do need!

Problems or Questions?

If you need any additional assistance or have a question, please don’t hesitate to contact the National Office – Office

Administrator (officeadmin@ponyclub.org) or the Content/Data Manager (webmaster@ponyclub.org). We’re here to

help!