I continue to use the customized Config page for many of my projects and just thought I would share a few additional tips that we have been using in combination with this approach.

Using A Context

One of the annoying little issues with having a config page inside of the document tree was that there was no way to visually differentiate the configuration document from any other site document. One approach I have been taking is to create a “Configuration” context and I then place my “Settings” document within the new context. This allows for it to be visually separated from the other site documents and you can still retrieve the TVs with the getResourceField extra.

Adding Manager Menu Link*

In addition to using a second context I have been creating a new menu link in the manager navigation called “Settings” that takes the user directly to their settings document.

To do this create a directory called “settings” inside /core/components and place an index.php file in it with the code below. I am sure there is a more correct “MODx” statement for generating this url, so please share it in the comments section below. Note that you will need the correct document ID, mine is 1.

<?php
header( 'Location: index.php?a=30&id=1' ) ;
?>

Next, create a Namespace called “settings” and enter the pathway to the document(s) above.

/var/www/vhosts/yourdomain/httpdocs/core/components/settings/

Finally to create the link in the menu go to System->Actions, you should see “settings”. Right click on it and choose “Create Action Here”. Enter “index” beside Controller and click save. Now, right click on the “Top Menu” and select “Create Menu”. I enter the Lexicon Key as “Settings”, Description as “Site Settings” and Action as “settings – index”.

For more detailed instructions on customizing the MODx manager I suggest going to Custom Manager Pages.

Login Redirect

I have also found it useful to redirect the user, on login, directly to the Settings document. To do this create a new plugin. I call mine, “loginRedirect” and paste the code below. Note that you will need the correct document ID, again mine is 1.

<?php
$modx->sendRedirect('manager/index.php?a=30&id=1');
return;

I then select the OnManagerLogin System Event and click save.

*NOTE: See the comment below from Zaigham that greatly simplifies the creation of this manager menu link.

1. Gone are the days of navigating to a static file in File Browser. To edit CSS – just select it in the Resource Tree!
2. Control access to CSS, or certain parts of it, with Permissions and Template Variables.
3. Make changes quickly & easily within MODX Manager.

Let me show you an example…

Client wants to change the colors on his site, which consists of an About Section and five distinct Divisions – each with a different color scheme and CSS file. Some of the Division colors show up in “about.css” because we see them in the menus. To update a color for one Division, I would need to edit property values in 12 declarations spread over 2 or 3 static stylesheets!

6 colors x 12 locations x 6 files x Client changing his mind = A LOT of manual editing. The site was developed in MODX, but the original developer didn’t have to change CSS property values at the Client’s whim, apparently.

Content Types and Template Variables To The Rescue

This works equally well in MODX Evo or Revo, but I’ll refer to Revo workflow here. I’m also assuming you know how to make MODX templates.

1. Make a Template for “CSS Only”.

@charset "UTF-8";
/* Title: [[++site_name]] [[*pagetitle]] CSS document */
[[*content]]

Break it down:
@charset » character set encoding. See: http://www.w3.org/International/questions/qa-css-charset.en.php Title…» Writes a title for the document with the site name and pagetitle placeholders (optional).
[[*content]] » We’re going to write our style declarations in the Resource Content area.

2. Create Resources using the CSS Template.
3. !Important: in Page Settings » Content Type drop-down menu, choose “CSS”.
4. Copy & Paste existing stylesheets (if any) into the new Resources’ Content area.
5. Change links in HTML header to reference Resource IDs. For example:

<link href="[[~aboutID]]" rel="stylesheet" type="text/css">
<link href="[[~divisionID]]" rel="stylesheet" type="text/css">

Now the site should work as it did before with static CSS docs. If you have FURLs turned on, you can add semantic aliases for each CSS Resource. The next step is to Find & Replace all hex values in the Resources with Template Variables, for example: [[*color1]] or [[*blue]]. This is the most tedious part, but I would’ve had to do this for each revision – which, as it happened was over 10 times! Now I only have to do it once.

Result: change hex values once in the TVs and all instances of that color in the stylesheet changes as well.

To take it a step further, add @CHUNK binding to the TVs so editing at the Chunk level propagates to ALL stylesheets. You could do this for any CSS property – border-radius for example.

One more step: Client wants to play with colors. No problem! A dash of Form Customization and Client gets to edit TVs in the CSS Resources but nothing else. I’ve been toying around with the idea of adding a color picker in the Manager somewhere, but that’s another post.

Author

Sepia River uses MODX to make custom web solutions accessible to small business. He also gets wrestled into doing Marketing stuff, Photography and other Content Creation. He wears pajamas and slippers a lot, and likes talking in funny voices. » Blog » Twitter

I have been developing a site in which I was needing to control which template a child inherited and which template the subsequent grandchildren of a given document inherited. I realize that there may be more direct methods for accomplishing this (please share them if there are), but I haven’t yet come across them.

Form Customization: Child

I am going to outline how to control template inheritance of a child document.

First, under Security->Form Customization select Create New Profile. Give it a Name, Description and Activate it. Once created, right click the Profile and select Edit.

To create the 1st set, select Create New Set and fill out the following fields accordingly:

• Action – select Create Resource. This is just the timing for this set, it will run when a new resource is created.
• Description – fill in your description
• Template – in this example you can leave this field blank. At this level we will use the Constraint Field to determine which document this is applied to.
• Constraint Field – You can use any resource field here. In this example we are using ‘parent’.
• Constraint – fill in the document ID which will house the children and grandchildren. Let’s say it has an ID of 2.
• Click Save
• Right click your new set and select Edit
• Scroll down. Under modx-resource-settings find template and click in the DEFAULT VALUE column. You can now enter text into this field. Enter the Template ID of the template you want the document to inherit. Let’s say it has an ID of 3.
• Hit Enter and click Save

So, we have built a Set that, at the point of document creation, will asses the Parent field and if it has an ID of 2 it will reassign it’s template field to an ID of 3. Without this Set, the document would have instead inherited the Template ID of it’s parent.

Form Customization: Grandchild

For this step to work I am making a couple of assumptions:

• That this process is only occurring within the document tree below the document with an ID of 2. This is the ‘Ultimate Parent’ in this example.
• That these children are the only documents that will be using the template with an ID of 3.

Now, to create the 2nd set, again select Create New Set and fill out the following fields accordingly:

• Action – select Create Resource.
• Description – fill in your description
• Template – select the template with an ID of 3 from above.
• Constraint Field – in this example you can leave this field blank.
• Constraint – in this example you can leave this field blank.
• Click Save
• Right click your new set and select Edit
• Scroll down. Under modx-resource-settings find template and click in the DEFAULT VALUE column. You can now enter text into this field. Enter the Template ID of the template you want the document to inherit. Let’s say it has an ID of 4.
• Hit Enter and click Save

Now, to summarize the entire process: any children of Document ID 2, at the point of creation will be assigned a Template ID of 3 (1st set). Since this template is not being used elsewhere, it is exclusive to this portion of the document tree. With that being the case, using the 2nd Set of the Profile, any grandchild document created will, at the point of document creation, have it’s Template ID assessed and since was inherited from it’s parent as an ID of 3 it will be changed to an ID of 4.

Using this approach you can control which templates are inherited to at least the grandchild level. I suppose it would be possible to continue this approach as long as each new level is set to inherit a unique Template ID.

What has me really excited about this is that it successfully addresses a fundamental issue of developing MODx sites. I am a big fan of the MODx document tree. I believe that it gives the developer and the end user common ground, a shared perspective of how a site is organized. But, when a set of documents grows too large, as with a Calendar or News section, the document tree can become unwieldy. MODx developers need an alternative like UncosNews. I have also been following MxCalendar, which takes a similar approach but do not believe that it is available yet for Revo.

New Forums

The MODx team has been working on new forums with lots of improvements. They have started a thread asking for anyone wanting to help test the new system. You can find that thread here.

MODx Security Diagram

@mark_hamstra has proven very helpful lately. I recommend any MODxer follow him on Twitter. He created the MODx, Revo security diagram to the right (click on it for the full size image). It is a good starting point as you try to tackle the Revo permissions system. You can find the full thread here.

Adding Table Line to TinyMCE

I was needing to add a line for managing tables in TinyMCE in one of my sites and had a really hard time tracking down this information. As you can see, the solution (from dannyL) is straightforward enough. Just finding it is the trick, you can find that thread here.

The solution came out of a March 2011 forum post.

Create a Plugin

Under the Elements tab locate Plugins, right click on it and select New Plugin. In the Plugin code (php) text area paste the code in the .txt file below:

• Encryption Plugin

Once the code is pasted in go to the System Events tab of the plugin and check OnLoadWebDocument and then save the plugin.

Create a Template Variable

Next you will need to create a Template Variable (TV) called encryption with a Check Box Input Type, Input Option Values On==1 and Default Value of 0. You will also need to go to the Template Access tab and check the Template you would like to have access to this TV.

This step will essentially create a ‘toggle on’ that will allow you to assign any document to be redirected to a https page.

So finally, just navigate to the document you want secured, find the TV and turn the encryption feature on.

Addendum: An potential issue and an alternative approach was suggested in this forum post. This approach utilizes a snippet that is placed above the HTML of your template, I have not tested this approach. Thank you cyclissmo.

The above links are tied to my affiliate account at Packt Publishing.

This book will get web developers up-and-running with MODx. With step-by-step examples and illustrative screenshots, you will be guided through installation, configuration, and customization. By the end of the book, you will have created a powerful, dynamic website by using the individual elements of MODx, without the need for programming know-how.

The Need

Our Creative Director, @steventrotter was looking for a system that would provide members of our development team a means to quickly and easily upload design proofs as images and then provide clients with easy URL access to preview the proofs in a web-centric manner.

Admin Side

What we ultimately decided upon was a template that only displayed the Document Title Field and Resource Alias along with 3 Template Variable (TV) fields, repeated 5 times within a single document. This included an Image Title (Text TV input type), an Image (Image TV input type) and a Description (Textarea TV input type).

I was able to use the MODx Form Customization process to place/hide the appropriate fields/TVs into a single document tab for quick and easy access. Now, a new project proof would require only creating a single, new document, uploading some images and filling in a few fields.

Front Facing

Now that I had all of my fields in place I needed to move my attention to the front-end design. The design was to use the Image Title TVs to create a navigation point for from 1 to 5 proofs. We then used jQuery to fade in each design proof as each navigation point is activated.

To create the navigation I used the If Snippet (see below):

<span id="nav">
Currently Displaying: <!-- Title 1 --><a href="#one" title="[[*title1]]">[[*title1]]</a>
<!-- Title 2 -->[[!If? &subject=`[[*title2]]` &operator=`!empty` &then=` | <a href="#two" title="[[*title2]]">[[*title2]]</a>`]]
<!-- Title 3 -->[[!If? &subject=`[[*title3]]` &operator=`!empty` &then=` | <a href="#three" title="[[*title3]]">[[*title3]]</a>`]]
<!-- Title 4 -->[[!If? &subject=`[[*title4]]` &operator=`!empty` &then=` | <a href="#four" title="[[*title4]]">[[*title4]]</a>`]]
<!-- Title 5 -->[[!If? &subject=`[[*title5]]` &operator=`!empty` &then=` | <a href="#five" title="[[*title5]]">[[*title5]]</a>`]]
 </div>

To create the associated page divs I had to use a combination of the above If Snippet and this getSize Snippet that our programmer, @captcodemonkey, put together. This allows us to retrieve the height or width of any Image TV. With this value it can then be inserted inline (in this case) or into a Dynamic CSS document.

<div id="content_wrapper">
<!-- Image 1 --><div id="one" style="z-index:5;height:[[!getSize? &type=`height`&tv=`image1`]]px;background: url([[++site_url]]assets/images/[[*image1]]) top center no-repeat #111;width: 100%;" ></div>
<!-- Image 2 -->[[!If? &subject=`[[*image2]]` &operator=`!empty` &then=`<div id="two" style="z-index:3;height:[[!getSize? &type=`height`&tv=`image2`]]px;background: url([[++site_url]]assets/images/[[*image2]]) top center no-repeat #111;width: 100%;"></div>`]]
<!-- Image 3 -->[[!If? &subject=`[[*image3]]` &operator=`!empty` &then=`<div id="three" style="z-index:3;height:[[!getSize? &type=`height`&tv=`image3`]]px;background: url([[++site_url]]assets/images/[[*image3]]) top center no-repeat #111;width: 100%;"></div>`]]
<!-- Image 4 -->[[!If? &subject=`[[*image4]]` &operator=`!empty` &then=`<div id="four" style="z-index:3;height:[[!getSize? &type=`height`&tv=`image4`]]px;background: url([[++site_url]]assets/images/[[*image4]]) top center no-repeat #111;width: 100%;"></div>`]]
<!-- Image 5 -->[[!If? &subject=`[[*image5]]` &operator=`!empty` &then=`<div id="five" style="z-index:3;height:[[!getSize? &type=`height`&tv=`image5`]]px;background: url([[++site_url]]assets/images/[[*image5]]) top center no-repeat #111;width: 100%;"></div>`]]         
</div>

The design also called for a method for displaying a set of design notes with each proof. To create this a jQuery modal was used to display the notes for each proof as the client navigated to it.

<div id="description_wrapper">
<!-- Description 1 -->[[!If? &subject=`[[*description1]]` &operator=`!empty` &then=`<div id="one_description">[[*description1]]</div>`]]
<!-- Description 2 -->[[!If? &subject=`[[*description2]]` &operator=`!empty` &then=`<div id="two_description">[[*description2]]</div>`]]
<!-- Description 3 -->[[!If? &subject=`[[*description3]]` &operator=`!empty` &then=`<div id="three_description">[[*description3]]</div>`]]
<!-- Description 4 -->[[!If? &subject=`[[*description4]]` &operator=`!empty` &then=`<div id="four_description">[[*description4]]</div>`]]
<!-- Description 5 -->[[!If? &subject=`[[*description5]]` &operator=`!empty` &then=`<div id="five_description">[[*description5]]</div>`]]         
</div>

This post is a great example of why I am such a fan of MODx. With a couple of hours of development we were able to take a simple design and quickly put together a system that will improve our development process and have an immediate impact on our workflow.

• Create a User Config Page in MODx
• Using the Config Page with eForm
• MODx Config Page, A Practical Example
• Creating a User Config Page in Revo

What I normally do on TVs that are accessible to my end users is place an image tag in the caption field, rather than plain text. Nothing too major, but when you stack up quite a few TVs on a Config page it really makes the page more visually appealing to the end user.