Skip to content
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
59 changes: 49 additions & 10 deletions en/building-sites/client-proofing/custom-manager-themes.md
Original file line number Diff line number Diff line change
@@ -1,21 +1,60 @@
---
title: "Custom Manager Themes"
_old_id: "365"
_old_uri: "2.x/administering-your-site/customizing-the-manager/manager-templates-and-themes"
description: "Override the files of the MODX Manager with a theme of your own: how the theme is chosen, what it has to contain, and how to override a single file or a controller."
---

**Heads up**: when you use custom Manager theme you need to check that everything still works as expected after upgrading MODX. A custom Manager theme can conflict with or be missing important core changes that come in new MODX releases.
> [!IMPORTANT]
> Check a custom manager theme after every upgrade of MODX. A theme can conflict with the changes of a new release, and the files that a release adds are never picked up by the theme.

The MODX Manager uses a template similar to regular MODX pages. By default, the Manager template files live inside the `manager/templates/default` directory. By updating the MODX system setting for `manager\_theme` to point to a new directory, you can override any single file by copying its directory structure and adding just the templates you wish to override. You can override as few or as many templates as you desire, as long as you maintain identical directory layouts. The Manager will fall back to the `default` theme templates for any that have not been overridden.
## How a Theme Works

For example, to customize only the Manager Login page, you copy the following file into a new directory:
The manager is built on Smarty templates. The default theme's files live in `manager/templates/default`. The system setting `manager_theme` holds a directory name inside `manager/templates/`. The manager reads that theme's files first, and falls back to `default` for every file the theme does not have.

>manager/templates/default/security/login.tpl
Only the `default` theme ships with MODX 3. Other themes come with a build, an extra, or your own files.

To create a custom Manager login theme called **my-brand**, copy that file into a new directory:
The theme covers more than the manager pages. Dashboard widget templates, TV templates, and Resource controllers are resolved from it as well.

>manager/templates/**my-brand**/security/login.tpl
## Overriding a Single File

Then update your system setting for `manager\_theme` to point to the newly created `my-brand` directory. The version of the file from the `my-brand` directory will override the version of the file from the default directory.
To theme only the manager login page, copy the file:

While far less common, you can similarly override the Controllers in the same way, replacing "templates" with "controllers" per above. If you don't know what that means, you don’t need to do so.
`manager/templates/default/security/login.tpl` → `manager/templates/my-brand/security/login.tpl`

Then set `manager_theme` to `my-brand`. The file from `my-brand` wins over the file from `default`.

**Create the directory before you pick the theme**
The setting is a combo box that lists the directories of `manager/templates/`, and it cannot be typed by hand. Create `manager/templates/my-brand/` first, then pick it in **Admin → System Settings**.

## What a Theme Has to Carry

These files are read from the directory of the theme, with no fallback to `default`:

| File | What breaks without it |
| --- | --- |
| `images/modx-icon-color.svg` | The icon of the site in the header of the manager. |
| `images/modx-logo-color.svg` | The logo on the login page. |
| `images/login/default-background.jpg` | The background of the login page. |
| `email/default.tpl` | Creating a user: the template of the letter is not found. |

**The login page stylesheet is not themed**
`security/login.tpl` links the `default` theme's stylesheet by a fixed path. To theme it, put `css/login.css` into the theme directory and fix the link in your copy of `security/login.tpl`. The same holds for the file browser: its `browser/index.tpl` links the `default` theme's `css/index.css`.

The manager stylesheet is themed. Put `css/index.css` into the theme directory, and the header picks it up through the `{$indexCss}` placeholder.

## Where the Theme Has to Live

The theme directory is resolved inside `manager/templates/`, which is part of the installation and is overwritten by an update. Keep the theme files in a repository of your own and restore them after an update.

**An update from Evolution resets the theme**
When the installer upgrades a site from Evolution, `setup/includes/upgrade.install.php` sets `manager_theme` back to `default`. An update inside MODX 3 leaves the setting as it is.

## Overriding a Controller

A controller is overridden the same way, with `controllers` in place of `templates`. The file in the theme must have the same name as in `default` (`<action>.class.php`). The class inside it must be named `<Action>ManagerController` in the global namespace, for example `SecurityLoginManagerController`.

## See Also

1. [Client-proofing the manager](building-sites/client-proofing)
2. [Custom Manager Themes](building-sites/client-proofing/custom-manager-themes)
3. [Customizing the Login](building-sites/client-proofing/manager-login)
4. [Dashboards](building-sites/client-proofing/dashboards)
54 changes: 31 additions & 23 deletions en/building-sites/client-proofing/dashboards/creating-a-widget.md
Original file line number Diff line number Diff line change
@@ -1,25 +1,26 @@
---
title: "Creating a Dashboard Widget"
_old_id: "69"
_old_uri: "2.x/administering-your-site/dashboards/creating-a-dashboard-widget"
description: "Create a Dashboard Widget in MODX: the fields of a widget, the sizes it takes, and how to put it on a Dashboard."
---

This article describes how to create a custom Dashboard Widget, including a short description of the different Dashboard Widget types and how they work.

## Creating a Basic Widget

Go to the Dashboards page (Dashboard -> Dashboards in the top menu), and click on the "Widgets" tab. Then, click on "Create New Widget", and this will load the Widget creation screen. You'll see a few new fields:
Go to the Dashboards page (**Admin → Dashboards** in the top menu), and click on the "Widgets" tab. Then click **Create**, and the Widget creation screen loads. It has these fields:

- **Name** - The name of your new widget. Let's call ours "Hello World".
- **Description** - A short description of your widget, used internally.
- **Widget Type** - The type of Widget. We'll get into this more later, but for now, just select "HTML".
- **Size** - Widgets come in 3 sizes - half, full, and double. A half-sized widget takes up half of one row. A full takes up one whole row. A double takes up 2 rows.
- **Namespace** - The Namespace to associate the widget with. Useful for Extras developers; but for us, let's keep it at "core".
- **Lexicon** - Adds an ability to load a lexicon with this widget. Let's go ahead and leave ours at "core:dashboards", the default setting.
| Field | What it holds |
| --- | --- |
| **Name** | The name of the widget. It must be unique. |
| **Description** | A short description of the widget, used internally. |
| **Widget Type** | The type of the widget. For a first widget, select "HTML". |
| **Size** | One of seven sizes: Quarter, One Third, Half, Two Third, Three Quarters, Full Size and Double Size. |
| **Permission** | The manager permission a user needs for the widget to appear. Empty means the widget is shown to everyone. |
| **Namespace** | The Namespace to associate the widget with. Leave it at "core" unless you build an Extra. |
| **Lexicon** | The lexicon to load with the widget. The default is "core:dashboards". |
| **Properties** | Arbitrary properties of the widget, stored as JSON. A file or a snippet widget receives them as `$scriptProperties`. |

You'll note that as you type the name of the widget, text appears below it following what you type. This is the automatic translation tool for Widget names; if you were to type a Lexicon Entry key, it would translate it (try typing "widget\_create" for kicks to see what it does).
As you type the name, a translated version of it appears below the field. The translation looks up the key in the lexicon of the widget. Type the key of an existing entry, for example `w_configcheck`, and it shows the translated name of that entry.

Now, in your dashboard widget content, go ahead and put this:
Now, in the content of the widget, put this:

``` php
<p>Hello, world!</p>
Expand All @@ -29,13 +30,13 @@ Our widget should look like this:

![](dashboard-create1.png)

Go ahead and save the Widget.
Save the widget.

### Assigning the Widget to the Default Dashboard

Now that we've got our widget, let's assign it to the Default Dashboard, by going back to the main Dashboards page, clicking on the "Dashboards" tab, and finding the default Dashboard. Right-click on it, and click "Update Dashboard". This will load the Default Dashboard editing page.
To assign the widget to the Default Dashboard, go back to the main Dashboards page, click on the "Dashboards" tab, and find the Default Dashboard. Right-click on it and click "Edit". This loads the editing page of the Default Dashboard.

From here, click the "Place Widget" button above the Widgets grid on this page. Select our "Hello World" widget from the dropdown, and click save. Now our Widget is on the Dashboard! Let's go ahead and place it in position #2 by dragging it between the "Configuration Check" widget and the "MODX News Feed" widget:
From here, click the "Place Widget" button above the Widgets grid on this page. Select the "Hello World" widget from the dropdown, and click save. To place it in position #2, drag it between the "Configuration Check" widget and the "MODX News Feed" widget:

![](dashboard-create2.png)

Expand All @@ -45,24 +46,31 @@ Save your Dashboard.
>
> Adding a widget directly on the dashboard page (via the dashboard view itself) only adds it for the currently logged-in user. Other users will not see it unless it is also added to the template.
>
> On large sites with many users, adding a widget to the template will create a placement record for each user who already has a personal copy of that dashboard. Keep this in mind if performance is a concern.
> A widget that is added to the template arrives at the existing users with the default size and at the end of the list.
>
> On large sites with many users, adding a widget to the template creates a placement record for every user with a personal copy of that dashboard. Keep this in mind if performance is a concern.

### Viewing the Widget

Now, if you click the "Dashboard" top menu item on the page, you can see your new dashboard widget in place!
Now, if you click the MODX logo in the top left, you can see your new dashboard widget in place!

![](dashboard-create3.png)

## Removing a Widget

A widget is removed from the Widgets tab, and that removes it from all the Dashboards it was placed on. The widgets that ship with MODX cannot be removed.

## Other Widget Types

Obviously, there are more widget types to create. See the [Dashboard Widget Types](building-sites/client-proofing/dashboards/widget-types "Dashboard Widget Types") section for more information on creating different types of widgets.
See the [Dashboard Widget Types](building-sites/client-proofing/dashboards/widget-types "Dashboard Widget Types") section for the other types of widgets.

## See Also

1. [Managing Your Dashboard](building-sites/client-proofing/dashboards/managing)
2. [Assigning a Dashboard to a User Group](building-sites/client-proofing/dashboards/usergroups)
3. [Creating a Dashboard Widget](building-sites/client-proofing/dashboards/creating-a-widget)
4. [Dashboard Widget Types](building-sites/client-proofing/dashboards/widget-types)
1. [Dashboards](building-sites/client-proofing/dashboards)
2. [Managing Your Dashboard](building-sites/client-proofing/dashboards/managing)
3. [Assigning a Dashboard to a User Group](building-sites/client-proofing/dashboards/usergroups)
4. [Creating a Dashboard Widget](building-sites/client-proofing/dashboards/creating-a-widget)
5. [Dashboard Widget Types](building-sites/client-proofing/dashboards/widget-types)
1. [Dashboard Widget Type - File](building-sites/client-proofing/dashboards/widget-types/file)
2. [Dashboard Widget Type - HTML](building-sites/client-proofing/dashboards/widget-types/html)
3. [Dashboard Widget Type - Inline PHP](building-sites/client-proofing/dashboards/widget-types/inline-php)
Expand Down
63 changes: 40 additions & 23 deletions en/building-sites/client-proofing/dashboards/index.md
Original file line number Diff line number Diff line change
@@ -1,48 +1,65 @@
---
title: "Dashboards"
_old_id: "90"
_old_uri: "2.x/administering-your-site/dashboards"
description: "The Dashboard of MODX: the widgets on the page a user sees after logging in, the core widgets, and the personal copy each user gets."
---

## What are Dashboards?
## What a Dashboard Is

A Dashboard in MODX is the page that shows on initial loading of the MODX manager, or when clicking the "Dashboard" link in the top-left of the screen. Dashboards can contain an unlimited number of "widgets", which are boxes that show various content on the Dashboard. Widgets can be arranged in any order, and can be either a file, a MODX Snippet, or straight HTML.
A Dashboard is the page that opens when a user logs in to the manager. The MODX logo in the top left leads to it as well.

Each User Group in MODX is assigned a Dashboard by default. This means that you can give different Users different Dashboards via the User Group they belong to.
A Dashboard holds widgets: boxes with content. A widget is a file, a MODX Snippet, straight HTML, or PHP code, and the widgets can be arranged in any order.

If a User is part of two different groups, it will use the Dashboard of its Primary Group, which can be set in the User editing screen.
Each User Group is assigned a Dashboard. This is how different users get different Dashboards. If a user belongs to two groups, the Dashboard of the Primary Group is used. The Primary Group is set on the User editing screen.

## The Core Widgets

MODX ships seven widgets:

| Widget | Permission |
| --- | --- |
| MODX News Feed | — |
| MODX Security Feed | — |
| Who's Online | — |
| Configuration Check | — |
| Buttons | — |
| Recently Edited Resources | `view_document` |
| Updates | `workspaces` |

The last two are shown only to the users who hold the permission, so they are missing on the Dashboard of an ordinary user.

## Customizable Dashboards

Dashboards have a **Customizable** setting. When this is checked (the default), MODX clones the dashboard's widget layout for each user the first time they load the dashboard. This gives each user their own personal copy of the dashboard, which they can then rearrange, add widgets to, or remove widgets from without affecting other users.
A Dashboard has a **Customizable** setting. When it is on (the default), MODX clones the layout of the widgets for every user the first time they open the Dashboard. Each user then has a personal copy, which they can rearrange, add widgets to, or remove widgets from, without touching the Dashboard of anyone else.

A user can also resize a widget on their own copy, as long as the Dashboard is customizable.

When **Customizable** is off, all users share the same layout and cannot change it.

When **Customizable** is unchecked, all users share the same dashboard layout and cannot make personal changes to it.
A Dashboard has a second setting, **Hide Left-Hand Trees**. It hides the trees on the left while the Dashboard is shown.

### How Template Changes Propagate

The widget layout configured through the Dashboards manager page (Dashboard -> Dashboards -> Update Dashboard) serves as the **template** for a customizable dashboard. When you add or remove widgets from the template, those changes propagate to all existing users of that dashboard:
The layout configured on the Dashboards manager page serves as the **template** of a customizable Dashboard. When you add or remove widgets from the template, the changes propagate to all existing users of that Dashboard:

- **Widgets added** to the template will automatically appear for all users who already have a personal copy of the dashboard.
- **Widgets removed** from the template will be removed from all users' personal dashboards.
- **Widgets added** to the template appear for all users who already have a personal copy.
- **Widgets removed** from the template are removed from all users' personal Dashboards.

Other personal customizations, such as widget order, are not affected by template changes.
The order of the widgets is not affected by template changes. A widget added to the template arrives at the existing users with the default size, at the end of the list, not with the size of the template.

Changes made directly on a user's dashboard page (for example, removing a widget with the close button or adding a widget via the dashboard itself) only affect that individual user and do not change the template.
Changes made directly on the Dashboard of a user affect that user only and do not change the template. This covers removing a widget with the close button and adding a widget from the Dashboard itself.

## Using Dashboards
## Permissions

- [Managing Your Dashboard](building-sites/client-proofing/dashboards/managing "Managing Your Dashboard")
- [Assigning a Dashboard to a User Group](building-sites/client-proofing/dashboards/usergroups "Assigning a Dashboard to a User Group")
- [Creating a Dashboard Widget](building-sites/client-proofing/dashboards/creating-a-widget "Creating a Dashboard Widget")
- [Dashboard Widget Types](building-sites/client-proofing/dashboards/widget-types "Dashboard Widget Types")
The Dashboards page and all the actions on the widgets require the permission `dashboards`. The Dashboard itself is shown to any user who is allowed into the manager.

## See Also

1. [Managing Your Dashboard](building-sites/client-proofing/dashboards/managing)
2. [Assigning a Dashboard to a User Group](building-sites/client-proofing/dashboards/usergroups)
3. [Creating a Dashboard Widget](building-sites/client-proofing/dashboards/creating-a-widget)
4. [Dashboard Widget Types](building-sites/client-proofing/dashboards/widget-types)
1. [Dashboards](building-sites/client-proofing/dashboards)
2. [Managing Your Dashboard](building-sites/client-proofing/dashboards/managing)
3. [Assigning a Dashboard to a User Group](building-sites/client-proofing/dashboards/usergroups)
4. [Creating a Dashboard Widget](building-sites/client-proofing/dashboards/creating-a-widget)
5. [Dashboard Widget Types](building-sites/client-proofing/dashboards/widget-types)
1. [Dashboard Widget Type - File](building-sites/client-proofing/dashboards/widget-types/file)
2. [Dashboard Widget Type - HTML](building-sites/client-proofing/dashboards/widget-types/html)
3. [Dashboard Widget Type - Inline PHP](building-sites/client-proofing/dashboards/widget-types/inline-php)
4. [Dashboard Widget Type - Snippet](building-sites/client-proofing/dashboards/widget-types/snippet)
4. [Dashboard Widget Type - Snippet](building-sites/client-proofing/dashboards/widget-types/snippet)
Loading
Loading