ManagerManager is a clever plugin that uses the DOM and Javascript to manipulate the resource editing pages in the Manager user's browser. We can use it to change names, help messages and locations of various fields. It can hide fields for certain Manager roles or for all resources using certain templates. The rules are stored in a config file or a chunk. What makes it really nice is that the chunk for MM's rules can contain PHP code. Let's see how this can make a custom resource editing page and avoid the need for multiple templates simply by adding a few rules and some PHP conditionals to a chunk for ManagerManager rules.
The Template
Let's start with a simple template that consists of header, content, and footer. On the home page we want a section above the content with a fancy horizontal accordion, and on all pages the footer will have four blocks that can be edited for each resource. I've ported an HTML 5 template from freehtml5templates.com. You can download the ported template here.
<!doctype html> <html lang="en"> <head> <meta charset="[(modx_charset)]" /> <title>[(site_name)] - [*longtitle*]</title> <link rel="stylesheet" type="text/css" href="assets/templates/flipthru/styles.css" media="screen" /> <link rel="stylesheet" type="text/css" href="assets/templates/flipthru/print.css" media="print" /> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> </head> <body> <div id="wrapper"><!-- #wrapper --> <nav><!-- top nav --> <div class="menu"> [[Wayfinder? &startId=`0` &level=`1`]] </div> </nav><!-- end of top nav --> <header><!-- header --> <h1><a href="[(site_url)]">[(site_name)]</a></h1> <h2>[*longtitle*]</h2> </header><!-- end of header --> <section id="main"><!-- #main content area --> <section id="content"><!-- #content --> [*accordion*] <article> <h2>[*pagetitle*]</h2> [*content*] </article> </section><!-- end of #content --> </section><!-- end of #main content --> <footer> <section id="footer-area"> <section id="footer-outer-block"> [*footer*] </section><!-- end of footer-outer-block --> </section><!-- end of footer-area --> </footer> </div><!-- #wrapper --> <!-- Free template created by http://freehtml5templates.com --> </body> </html>
And here's the css for this template
/* Created by http://freehtml5templates.com */
/* reset */
* {
margin: 0;
padding: 0;
}
/* render html5 elements as block */
header, footer, section, aside, nav, article {
display: block;
}
body {
line-height: 1;
background: #f1f1f1 /*url("images/bg.gif") repeat*/;
font-family: Verdana, Arial, Helvetica, sans-serif;
color: #666;
font-size: 14px;
line-height: 18px;
}
/* layout */
#wrapper {
width: 940px;
margin: 0 auto;
margin-top: 5px;
margin-bottom: 5px;
-webkit-box-shadow: 3px 3px 7px #777;
-moz-box-shadow: 3px 3px 7px #777;
}
nav {
width: 940px;
height: 50px;
margin: 0 auto;
background: #110E0F;
}
header {
width: 940px;
height: 200px;
margin: 0 auto;
background: #4dca00 /*url(images/headerimg.jpg) no-repeat left top*/;
}
#main {
width: 940px;
margin: 0 auto;
background: #FFF;
overflow: hidden;
}
#content {
float: right;
width: 940px;
}
footer {
width: 940px;
margin: 0 auto;
clear: both;
}
/* basics */
h1,h2,h3,h4,h5,h6 {
font-weight: bold;
clear: both;
color: #333;
}
a:link, a:visited {
color:#6DBB0D;
}
a:hover, a:active {
color: #333;
}
p {
margin-bottom: 18px;
}
li {
padding-left: 5px;
}
/* nav */
nav .menu {
font-size: 16px;
font-weight: bold;
}
nav .menu ul {
margin: 0;
padding: 10px 0 0 20px;
list-style: none;
line-height: normal;
}
nav .menu li {
display: block;
float: left;
}
nav .menu a {
display: block;
float: left;
margin-right: 5px;
padding: 1px 15px;
text-decoration: none;
color: #FFF;
}
nav .menu a:hover, nav .menu li.active a {
padding: 0 15px;
border-top: #FFF 1px solid;
border-bottom: #FFF 1px solid;
}
/** HEADER */
header h1, header h2 {
margin: 0;
padding: 0 0 0 30px;
line-height: normal;
}
header h1 {
font-size: 40px;
float: left;
padding-top: 20px;
}
header h1 a:link, header h1 a:visited {
text-decoration: none;
color: #FFF;
}
header h1 a:hover {
text-decoration: underline;
}
header h2 {
padding: 20px 0 0 30px;
font-style: italic;
font-size: 14px;
color: #FFFFFF;
}
/** ARTICLES **/
article {
padding: 0 30px 0 30px;
}
article img {
border: none;
-webkit-box-shadow: 3px 3px 7px #777;
-moz-box-shadow: 3px 3px 7px #777;
}
article h2 {
margin-top: 20px;
}
#content p, ul, ol, hr {
margin-bottom: 24px;
}
#content ul ul, ol ol, ul ol, ol ul {
margin-bottom: 0;
}
#content h1, h2, h3, h4, h5, h6 {
color: #333;
margin: 0 0 20px 0;
line-height: 1.5em;
}
.alignleft, img.alignleft {
display: inline;
float: left;
margin-right: 24px;
margin-top: 4px;
}
.alignright, img.alignright {
display: inline;
float: right;
margin-left: 24px;
margin-top: 4px;
}
.aligncenter, img.aligncenter {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}
img.alignleft, img.alignright, img.aligncenter {
margin-bottom: 12px;
}
/* footer widget blocks */
aside h3 {
font-size: 18px;
}
aside ul {
list-style: none;
margin-bottom: 20px;
margin-top: -15px;
}
aside li a {
display: block;
text-decoration: none;
}
aside li a:hover {
text-decoration: underline;
}
#footer-area {
background: #000;
color: #FFF;
font-size: 90%;
padding: 18px 0;
overflow: hidden;
}
.footer-segment {
float: left;
margin-right: 20px;
margin-left: 20px;
width: 190px;
}
footer aside h4 {
color: #FFF;
font-size: 16px;
line-height: 1.5em;
}
footer a:link, footer a:visited {
color: #FFF;
}
footer p {
margin-top: -15px;
}
/** ACCORDION */
.accordbk {
background: #fff url(images/accordinfo.gif) bottom right no-repeat;
}
.horizontalaccordion>ul {
margin: 0;
padding: 0;
list-style:none;
height: 300px;
}
.horizontalaccordion>ul>li {
display:block;
overflow: hidden;
float:left;
margin: 0;
padding: 0;
list-style:none;
width:40px;
height: 300px;
background:#f0f0f0;
transition: width 0.3s ease-in-out;
-moz-transition: width 0.3s ease-in-out;
-webkit-transition: width 0.3s ease-in-out;
-o-transition: width 0.3s ease-in-out;
}
.horizontalaccordion>ul>li>h3 {
display:block;
float:left;
margin: 0;
padding:10px;
height:19px;
width:280px;
border-left:#f0f0f0 1px solid;
font-family: Arial, Helvetica, sans-serif;
text-decoration:none;
text-transform:uppercase;
color: #000;
background:#cccccc;
white-space:nowrap;
-moz-transform: rotate(90.0deg) translate(-40px,0px);
-moz-transform-origin: 0 100%;
-o-transform: rotate(90.0deg) translate(-40px,0px);
-o-transform-origin: 0 100%;
-webkit-transform: rotate(90.0deg) translate(-40px,0px);
-webkit-transform-origin: 0 100%;
transform: rotate(90.0deg) translate(-40px,0px);
transform-origin: 0 100%;
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)
progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc);
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)"
"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff999999, endColorstr=#ffcccccc)";
background: -moz-linear-gradient( top, #999999, #cccccc);
background: -webkit-gradient(linear, left top, left bottom, from(#999999), to(#cccccc));
}
.horizontalaccordion>ul>li>div {
display:none;
float:left;
overflow: auto;
position:relative;
top:-30px;
left:50px;
*top:0px;
*left:0px;
margin:0;
width:640px;
height:300px;
}
.horizontalaccordion>ul>li>div img {
float: left;
margin-right: 8px;
}
.horizontalaccordion>ul>li:hover {
overflow: hidden;
width: 720px;
}
.horizontalaccordion:hover>ul>li:hover>div {
display:block;
}
.horizontalaccordion:hover>ul>li:hover>h3 {
color:#fff;
background:#000000;
background: -moz-linear-gradient( top, #454545, #000000);
background: -webkit-gradient(linear, left top, left bottom, from(#454545), to(#000000));
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)
progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000);
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1.0)"
"progid:DXImageTransform.Microsoft.gradient(startColorstr=#ff454545, endColorstr=#ff000000)";
}
.horizontalaccordion>ul>li>h3:hover {
cursor:pointer;
}
.horizontalaccordion h4 {
font-size: 16px;
}
Here's what it looks like.
The TVs
There are two main TVs for our purposes here; [*accordion*] and [*footer*]. We'll break each block of the accordion and the footer out into their own TVs. We could use chunks, but then all pages would have the same content, and the site editor would have to go to the chunk editing page to edit the accordion content. With TVs, you can edit the blocks for each resource right on the resource editing page. So we'll need four more TVs for the accordion, and four TVs for the footer. Something to keep in mind if you're using the TinyMCE rich text editor for these TVs is that TinyMCE doesn't recognize HTML 5 tags yet, so you'll need to be clever about exactly where you break out the blocks of content. In this case, we'll leave the two main TVs (accordion and footer) as textarea types and have the block TVs be rich text types.
The footer TV and all its blocks have the following default values:
The footer TV
<aside class="footer-segment"> [*footerblock1*] </aside> <aside class="footer-segment"> [*footerblock2*] </aside> <aside class="footer-segment"> [*footerblock3*] </aside> <aside class="footer-segment"> [*footerblock4*] </aside>
footerblock1
<h4>Friends</h4> <ul> <li><a href="#">one linkylink</a></li> <li><a href="#">two linkylinks</a></li> <li><a href="#">three linkylinks</a></li> <li><a href="#">four linkylinks</a></li> <li><a href="#">five linkylinks</a></li> </ul> <!-- end of #first footer segment -->
footerblock2
<h4>Awesome Stuff</h4> <ul> <li><a href="#">one linkylink</a></li> <li><a href="#">two linkylinks</a></li> <li><a href="#">three linkylinks</a></li> <li><a href="#">four linkylinks</a></li> <li><a href="#">five linkylinks</a></li> </ul> <!-- end of #second footer segment -->
footerblock3
<h4>Coolness</h4> <ul> <li><a href="#">one linkylink</a></li> <li><a href="#">two linkylinks</a></li> <li><a href="#">three linkylinks</a></li> <li><a href="#">four linkylinks</a></li> <li><a href="#">five linkylinks</a></li> </ul> <!-- end of #third footer segment -->
footerblock4
<h4>Blahdyblah</h4> <p>Integer nec odio. Praesent libero. Sed cursus ante dapibus diam. Sed nisi. Nulla quis sem at nibh elementum imperdiet. Duis sagittis ipsum. Praesent mauris. Fusce nec tellus sed augue semper porta.</p> <!-- end of #fourth footer segment -->
The accordion TV and its block TVs should have their default values left empty, as you don't want them to have any content except for the home page, so edit the accordion TV and its block TVs on the home page resource. The demo content for this block looks like this; you'll at least need the secion and article containers and the UL tags for the main TV:
<section class="accordbk"> <article class="horizontalaccordion"> <h4>⇓ Did you Know? Hover your mouse over each vertical panel below to discover more about us ⇓</h4> <ul> [*accordionblock2*] [*accordionblock2*] [*accordionblock2*] [*accordionblock2*] </ul> </article> </section>
Each block is a list item, so you'll want four empty Rich Text type TVs, then on the home page resource edit them to look like this:
<li> <h3>Who We Are</h3> <div><img src="images/acc1.jpg" alt="" /><p><b>Who We Are</b></p> <p>Quis quaerendum pri no, sit ad noster timeam. An pro consul concludaturque, no possim impetus mei.</p> <p>Facer oblique referrentur te qui, ornatus postulant evertitur ius ea. No sed vero aperiri equidem, pri et perpetua erroribus accusamus, doctus menandri ad qui.</p> <p>Idque velit cu eum, adipiscing intellegam vituperatoribus ut eum. An sea corpora lobortis splendide, illum signiferumque quo ut, nam sensibus consetetur definitionem ut. Probo dicat dicant usu eu, ei vim soleat doctus complectitur, eu vim wisi graece scribentur. Novum nostro commune mel no, eam an stet nullam dolorum. Unum idque adipisci mea ut, sit ut nisl nibh maluisset. Audire maluisset est ut, vis te enim esse graecis.</p> </div> </li>
Now all this is going to make a really ugly, long list of TVs on every resource, and you don't even want the accordion and accordion block TVs on any page except the home page. That's where ManagerManager comes in.
ManagerManager Rules
If you have a standard installation of MODx Evolution, you'll have the ManagerManager plugin already installed. Go to Elements, Manage Elements and the Plugins tab. If you don't have ManagerManager, you'll need to install it. Open the plugin and open its Configuration tab. Check the field that specifies the configuration chunk. You can use a configuration file if you prefer; it would be located at assets/plugins/managermanager/mm_rules.inc.php (there are already some sample rules in a file there). We'll use the chunk, so make sure there is something like "mm_rules" in the field for the configuration chunk. Now go to Elements -> Manage Elements and the Chunks tab. You may already have a chunk, named mm_demo_rules or something similar; its name doesn't matter as long as it's the one specified in the plugin configuration.
First, let's get rid of the accordion TVs for all resources except the home page. This set of rules will take care of that:
if($id !=1) {
mm_hideFields('tvaccordion');
mm_hideFields('tvaccordionblock1');
mm_hideFields('tvaccordionblock2');
mm_hideFields('tvaccordionblock3');
mm_hideFields('tvaccordionblock4');
}
MODx supplies the ID of the resource being edited, so the MM plugin can use the $id variable to check for this. Of course, if your home page is not ID #1, you would need to use a different ID in the if conditional. The names of the TVs being hidden must match your TV names exactly, with the tv prefix as shown above.
We've set a default structure for the footer TV, and that shouldn't be meddled with. So we'll hide that TV for everybody:
mm_hideFields('tvfooter');
so far so good, but we've still got an ugly list of TVs, especially for the home page. We'll clean this up by creating a couple of new tabs, and moving the TVs into the appropriate tabs.
// make tab for managing footer content
mm_createTab('Footer Blocks', 'footerblocks');
mm_moveFieldsToTab('tvfooterblock1', 'footerblocks');
mm_moveFieldsToTab('tvfooterblock2', 'footerblocks');
mm_moveFieldsToTab('tvfooterblock3', 'footerblocks');
mm_moveFieldsToTab('tvfooterblock4', 'footerblocks');
When creating a tab, you need the text to use as the title of the tab, and a name for it that you'll use when moving things into the tab, as you can see in the above rules.
We want to do pretty much the same thing for the accordion TV and its block TVs, but only for the home page. So again we'll use a PHP conditional:
// make tab for home page accordion
if($id == 1) {
mm_createTab('Accordion', 'accordion');
mm_moveFieldsToTab('tvaccordion', 'accordion');
mm_moveFieldsToTab('tvaccordionblock1', 'accordion');
mm_moveFieldsToTab('tvaccordionblock2', 'accordion');
mm_moveFieldsToTab('tvaccordionblock3', 'accordion');
mm_moveFieldsToTab('tvaccordionblock4', 'accordion');
}
And now, we have everything nice and tidy, and only displaying the TVs we want for each resource.
Comment On This Article
Do you find something unclear? Did I miss something or get something wrong? What do you like or not like about this chapter? Please do not ask for help here; use the forums if you need help.