This page is a work in progress in Google Docs and will change as I edit it.

 

MODX Revolution Client Documentation

 

Contents:

Introduction

Logging In

Forgot Your Password

Change Your Password and Edit Your Profile

Manager Overview

Resource Tree: Managing Resources

Top Buttons and Search Bar

Right-Click Menu

Moving Pages

Creating and Editing Resources

Resource Types

Full Edit/ Create View

Resource Fields

Weblinks (Redirects)

Search Engine Tips

Resource Settings

Other Edit Tabs

Template Variables

Resource Groups

Quick Edit/ Create Mode

Rich Text Editor

MODX Codes

Using the File Manager

Inserting Links

Anchors (linking to a part of a page)

Inserting Images

Inserting Media (such as YouTube videos)

Main Menu Tools

Components Menu

Configuration

Gallery

Introduction 

This non-technical guide to the MODX manager is meant to be used as a convenient reference after your initial training. Please contact me if you need additional help or if you have any questions about anything to do with your website.

 

Limitations:

 

Free to use and distribute: This document is free to modify and distribute, even commercially, under the Creative Commons Attribution 3.0 Unported license, as long as you make a note that I was the original author. I would appreciate an optional link back to the original document or to my website (http://websitezen.com).

 

Logging In

 

1. Point your web browser to YOURDOMAIN.COM/manager, where YOURDOMAIN.COM is your website’s domain name.

 

2. Enter your username and password and click “Login

 

Forgot Your Password

If you forgot your password, you can have a new password emailed to you:

 

1. On the login screen, click “Forgot your Login?”.

2. Enter your username in the box that appears and click “Send Activation Email”.

You should see a message saying the email was sent:

3. Open the email that was sent to you and click on the activation link.

4. After you click the activation link, enter your username and the new password you received to log in.

5. Change your password after you log in.

 

Change Your Password and Edit Your Profile

You should change your password any time you receive a randomly-generated password, such as when you first log in or when you reset your password.

 

1. Either click on your username in the top right corner of the manager, or (in the main menu), click on User → Profile. Either one will take you to your user profile.

 

2. On the profile page, you will see the following tabs:

 

3. After you click on the Reset Password tab, enter your current password, your new password, and your new password again and hit “Save” when you are done.

Manager Overview

When you first log in you will see the following manager screen:

 

Basic manager areas:

 

Resource Tree: Managing Resources

On the left of the manager, you will see a “tree” of the pages, or resources, on your website:

 

Definitions:

 

Unique Resource ID:

Each resource name is followed by a number in parentheses. This number is the unique resource ID number, which never changes and uniquely identifies each page.

 

Resource Types:

 

Top Buttons and Search Bar

At the top of the resource tree are some buttons with icons in them. Move your mouse over each button to see its title.

 

Explanation:

 

Right-Click Menu

When you rick-click (click using the rightmost button of your mouse) on a page name in the resource tree, you

 

Explanation:

 

Moving Pages

You can click and hold on a resource in the tree to “grab” a resource. You can then drag it to a new location in the tree. Moving a resource in the resource tree automatically rearranges it in any automatic menus on the website, such as the main menu.

Creating and Editing Resources

Resource Types

There are four Resource Types that you can choose from when creating a resource:

  1. Document: A document is a “normal” webpage. Most pages on your site will be documents. When in doubt, choose “Document” when creating a resource.
  2. Weblink: A weblink is a “redirect”. When this page is opened, it does not show the page for viewing. Instead, it redirects to another page on your website or to an external URL.
  3. Symlink: A symlink is a “mirror copy” of another resource. This is used, for instance, when you want to have the same article in two separate categories.
  1. Static Resource: Static resources store their content in a file on the web server.

Full Edit/ Create View

Edit an existing resource: You can open a page in full edit view in the following ways:

  1. Click on the page name in the Resource Tree
  2. Right-click on the page and select “Edit Resource”

 

Create a new resource and edit it: You can create a new resource in the following ways:

  1. Click one of the “Create Resource” buttons in the top of the resource tree.
  2. Right-click on a page name (or root) in the Resource Tree and select “Create Resource” in the menu to create a resource that is a child of that page.
  3. In the main menu, go to Site → New Document (or choose another resource type):

 

Locked Out: If you try to edit a resource and you get a warning saying that the resource is locked or being edited by another user, you have two options:

  1. Wait until the other user finishes editing the resource.
  2. If you know that the other user is not currently editing the resource, which happens sometimes due to closed or left-open browser windows, go to Site → Remove Locks in the main menu to remove all page locks.

 

Saving your changes: After you are finished making changes, remember to click the “Save” button. Otherwise, your changes will be lost or your new resource will not be created.

 

Here is a typical edit view:

   

Top Buttons:

  1. Add another - Close this page and create another new page.
  2. Continue editing (default) - Keep this page open for further editing.
  3. Close - Close the full edit view.

Tabs:

  

Content: At the bottom of the full edit view is the main content area for the page.

 

Resource Fields

Warning: The exact effect of each field may be different for each MODX website. Below is the standard use of each field, but the exact use of each field may vary slightly for your website.

If in doubt:

 

When you first create or open up a resource for editing, you will see the following fields:

 

How the fields appear on the website when the page is viewed:

 

How the Title and Description appear in the search results. Note: I am using a different website as an example here, as the test site used above is not indexed by search engines.

 

Explanation of each field:

 

Weblinks (Redirects)

In Weblink resource types, the content area is replaced by a Weblink field, where you will put the URL that the resource redirects to when the URL for the resource is opened.

 

Everything else works the same as other resources. For example, if the weblink is not “hidden” from the menu, it will automatically appear in the automatic menus, using the Title or Menu Title as the menu link.

 

Example Weblink Uses

 

Weblink Format

  1. To redirect to an external website, place the full URL of the external website in the Weblink field, starting with “http”. For example, http://google.com would redirect to the Google home page.
  2. To redirect to another page on your site, use the following code: [[~#]] (where # is the ID number of the resource you want to redirect to) in the Weblink field of the resource.
  1. To redirect to your website start without using the home page’s alias, use the following code in the Weblink field of the resource: [[++site_url]]

 

Search Engine Tips

 

Resource Settings

The “Settings” tab of the full edit view usually looks like this (important fields are outlined):

 

Important Settings:

 

Other Settings:

 

Advanced Settings - Usually no need to modify!

 Other Edit Tabs

Template Variables

The Template Variables (TV) tab of the full edit view contains all of the template-specific fields for your website.

 

Template Variables are different for every website, so call me if you have a question about the template variables created for your website.

 

Example Template Variables (for the example dog rescue website used in this doc):

 

Resource Groups

Resource groups are specific to websites that restrict access to certain parts of the site.

 

When a resource is part of at least one resource group, access to it is restricted. Only people that have the rights to the resource groups that the resource is in will be able to view it.

 

To add a resource to a resource group, simply check the box next to the resource group name and save the resource when you are finished.

 

  

Quick Edit/ Create Mode

The quick edit/ create window is similar to the full edit view, except it:

 

Use the quick edit/create window when you need to quickly change a simple field, such as a title or description, or a simple setting, such as the “searchable” option.

 

Quick Edit:

 

Quick Create:

What the quick edit/ create window looks like:

 

And the Settings tab:

 

Rich Text Editor

MODX allows the use of many different rich text editors, but the most common editor, the editor with the most features, and the editor described here is the MODX version of TinyMCE.

 

Rich-text tips:

 

 

Keep it simple. Try to use the following formatting primarily:

If you really need more styles, use the Edit CSS Style button: .

 

Inserting special content:

 

Block Types Reference

 

   

MODX Codes

Any text that starts with [[ and ends with ]] is a special MODX code that will get automatically replaced when the page is generated. For example:

 

Note: Most codes are customized for each website. The above codes will work with most sites. Check your site-specific documentation for useful codes for your websites.

 

Tips for using codes:

 

Using the File Manager

The file manager shows the files uploaded to the server for use in images, links, and template variables.

Warning: Do not move or rename files you have uploaded and already used unless you are prepared to change (update) every image and link that refers to the moved or renamed file.

 

File Manager Tips:

 

When the file manager opens (e.g. because you need to choose a file for an image, link, or template variable), here is how to select the file you want to use:

  1. Click on the directories on the left to navigate to the folder where the file is stored.
  2. (Optional) upload a new file to the folder by right-clicking on the folder and selecting “Upload File”.
  3. Click on the file you want to use. The file will be highlighted to show it is selected.
  4. Click “OK” to select the file.

 

The “Files” tab on the left of the MODX Manager is is another way to view, organize, and upload files to the file manager (when you are not browsing for a file):

 

 

Inserting Links

Important: when linking to pages on your website, make sure you let the link dialogue insert the link code for you. DO NOT link to the page using its URL, because the link might break if you change the page’s Alias.

 

To insert a link from the rich-text editor:

  1. Select some text or an image that you want to make into a link.
  2. Click the “Insert/ Edit Link” button:
  3. In the link selection dialogue:
  1. To link to an external website, type the URL (starting with “http”) in the “Link URL” field.
  2. To link to a file for download, such as a PDF or ZIP file, click on the file browser icon  to browse for the file using the file manager.
  3. To link to a page on your website, search for it using the “Search” field and select it from the list.
  1. Press OK when finished.

Link Selection Dialogue:

 

Changing and Removing Links:

  1. Place your cursor on the link. The link and “unlink” buttons will become “highlighted”:
  2. Click the link button to open up the link dialogue to edit the link, or click the unlink button to remove the link.

Anchors (linking to a part of a page)

Anchors allow you to link to a specific part of a page, such as a specific subheading.

 

To insert an anchor into a page for later linking-to:

  1. Position your cursor where you want the anchor inserted (usually to the left of a heading).
  2. Click the Insert/ Edit Anchor button:
  3. Type the name of the anchor (no spaces) and click Insert:
  4. The anchor symbol will mark the place the anchor was inserted in:

 

To link to an anchor: The new anchor will appear in the “Anchors” drop-down of the Insert/ Edit Link dialogue.

 

Inserting Images

To insert an image using the rich-text editor:

  1. In the rich-text editor, place your cursor where you want the image to be inserted.
  2. Click the “Insert/ Edit Image” button:
  3. In the Image Dialogue, click on the file browser icon  to browse for the image using the file manager.
  4. Select the image from the file manager.
  5. Enter an “Image Description” for viewers who are unable to see images.

 

Image Dialogue:

 

Appearance Tab:

The appearance tab of the image dialogue allows you resize your image and configure display settings.

 

Appearance Tab Options:

 

Inserting Media (such as YouTube videos)

Note: older versions of MODX Revolution’s rich-text editor do not support some of these features. Ask me to update your website to get the new features.

 

To insert media into the rich-text editor:

  1. Position your cursor where you want your media to go.
  1. Click the “Insert/ Edit Embedded Media” button:
  2. Configure your media and click “Insert” when finished.
  1. Save the document and view it to make sure everything is working correctly.

 

YouTube Tutorial:

  1. Go to the page of the YouTube video you want to insert.
  2. Click the “Embed” button (you may need to click the “Share” button first). You should see some HTML code appear.
  3. (optional) Configure the options under the HTML code to customize the video player.
  4. Copy the code for pasting into the “Source” tab of the “Insert/ Edit Embedded Media window”. The code may look like this:
  5. Back  in the MODX rich text editor for the page where you will be placing the YouTube video, position your cursor and click the “Insert/ Edit Embedded Media” button. In the window that pops up, switch to the “Source” tab and paste the YouTube code you copied into the provided box:
  6. Switch back to the “General” tab to view a preview of the video and adjust the width and height and other options. The fields should have been automatically filled in from the source code. Click the “Insert” button when you are finished.
  7. The video will appear as a yellow placeholder square in the rich text editor.

 

Main Menu Tools

 

Clicking on “Dashboard” takes you to the main manager page (the page you see when you first log in).

 

The Site menu is packed with useful site maintenance tools:

 

The Components menu contains components specific to your website. Some of the most common components are described in the Components Menu section.

 

The Reports menu contains logs, reports, and information about the website:

 

The User menu gives you access to your Profile and messages. Messages allow you to send simple messages to other manager users and are not often used (email is the usual alternative).

 

The Support menu contains a variety of MODX support links.

 

Other Menus:

 

Components Menu

Note: These components are installed on a site-by-site basis, depending on the project specifications, client needs, and the component availability at the time your site was built. Contact me if you need help with components not listed here or if you would like some of these added to your website.

Configuration

The configuration component allows you to configure non-technical site settings. The available site settings are different for every website.

 

To edit your site settings, go to Components → Configuration in the Main Menu

 

Instructions:

 

Gallery

Gallery appearance on the front-end website is different for each site, so this section only deals with basic gallery management. Contact me to find out how galleries are displayed on your site and how the various settings affect your galleries.

 

To edit your gallery albums and images, go to Components → Gallery in the Main Menu

 

Creating and Managing Albums

Note: Your design may use only a few pre-set albums, or you may be able to create and place new albums as needed. Check with me if you are not sure which setup you have. 

 

Album information fields:

 

Adding Images to an Album

Note: Images for each album are completely managed by the Gallery Component and are not the same as images uploaded via the file manager.

 

There are four ways of adding images to an album:

Image Information: Right-click on an image and select “Update Item” to edit the information stored with the image. The image information for each image may be used in different ways on each website. In general:

 

Managing Images:

  1. Click on an image to select it. Image information will appear in the right panel.
  2. Click on the image thumbnail that appeared in the right panel. A full-size image should open up.