mainbanner

Using the Advanced Page Editor

To begin using the advanced page editor, click on the page link in the account settings page. This will open up and display the page.

Editing a Page

To enter edit mode, click on the "Edit Page" button in the upper right corner of the page.

The Advanced Editor Menu Bar

When in edit mode, the main navigation bar will be replaced by the edit bar shown above. Here are the descriptions of each of the commands:

Exit Edit - Exit Edit Mode

Reload Page - A few options[Background color] require the page to be reloaded in order for the changes to take place. This button will reload the page.

Image Tools - This button will display the various components related to images.

Text Tools - This button will display the various components related to text.

Community Tools - This button will display the various components which require interaction with other people.(Plus a few misc tools)

Operations - This button will display any components related to the operation of the site. Currently this category is empty for many members.

Component Edit Options

While in edit mode, a new button appears in the upper right corner of every component on the page. This button is identified with a number and a small down arrow. The number is the unique identifier for the component. This number is only needed when using the super component. Clicking on this button will display the menu shown on the left. Every component shares a number of common editing options and each component type may add one or more extra options to the bottom of the list.

The menu options are:

Move - Change the position and size of this component. See the section on adding a new component for the details on moving a component.

Delete Component - Remove the component from the page. In order to completely delete the component, the component must then be removed from the trash bin inside account settings.

Border - Change the color of the border. See the section on selecting colors for the details on choosing a color.

Background - Change the color of the background of this component. See the section on selecting colors for the details on choosing a color.

Foreground - Change the color of the Foreground(usually text color) of the component. See the section on selecting colors for the details on choosing a color.

Enable/Disable Auto Scale - When Auto scale is enabled, the height of the component will increase if the contents of the component expand beyond their original dimensions.

Enable/Disable Rounded Corners - This will give the component rounded corners instead of sharp corners.

Choose Rounded Corners - This option will only appear when rounded corners are enabled. It is used to determine which of the four corners will be rounded and which of them will be sharp.

Edit Text - This is an extra option added by Headline and Textbox Components. See the components page for details on the different options of each component.


Choosing Colors of a Component

If either the Border, Background, or Foreground options were selected from the menu above, the dialog box shown to the left will appear on the right side of the screen. The top three sections show which colors are currently be used on the page. Click on any of these color squares to use that color. Below the used colors is the color selection box which contains 4097 colors. Click on any of these color squares to select that color.


Adding a new Component

To add a new component to a page, click on the category of the component to add[Images Tools, Text Tools, Community Tools, or Operations] and a dialog listing the components under that category will be display on the right side of the screen. The image to the left is an example of the Text Tools category. Click on the icon of the component to add. This will cause the editor to enter the component placement mode. See the section below on how to place the component.


Moving/Placing a Component

When a component is either added to a page, or an existing one is moved, the above screen will be displayed. A blue grid covers the left portion of the screen. This grid is setup such that any page that fits within the grid will be displayable on a screen resolution of 800 x 600 pixels. However, this grid is not a restriction, components can be placed outside of the grid, but the wider a page is, the less accessible it will be to visitors with older computers.

As the mouse cursor is moved around the page, a pair of red lines will follow the cursor. These lines are used to line up the current component with components already placed on the page. To place the component, click and hold the left mouse button where the upper left corner of the component will be. While holding down the left mouse button, move the mouse cursor to where the lower right corner of the component will be. The red guidelines will follow along with mouse cursor as will a textbox indicating the size of the component. A green box will outline where the component will be placed. To finish the placement, release the left mouse button and the component will be placed on the page.

If a component was placed in an incorrect location, simply release the left mouse button and then reposition the component by choosing "Move" from the component's drop down edit menu[see above].

Editing the Components

Each component has its own set of editing options. These options are explained on the component edit page.














Developed with technology based on: The Merc Engine 1a by www.rockosoftware.com