ShowMe da Money
MojoMotor was made with one idea in mind: simplicity. In achieving this, MojoMotor had to be cut out of what other CMS's call the norm. For example, most CMSs nowadays have 'global' headers and footers that are all linked together, so that when one header/footer is edited all headers/footers are edited. For large sites with many different layouts, not having this feature could prove to be truly annoying if one had to change each of the headers on each of the layouts. In this tutorial, you will learn how to evade this problem using the ShowMe addon.
Headers and footers are really just sections of your templates that repeat on each of your layouts.
Installation
Before we can do anything, we need to install this magical addon first. The first step is to, obviously, download it. Once the download is finished, extract the contents to /system/mojomotor/third_party/ inside of your MojoMotor installation. Your directory should now look something like this:
That's it for installation! Pretty easy, huh?
Using ShowMe
The next step is to actually use ShowMe. For this tutorial we will be using the default MojoMotor 'Green Tea' theme, but keep in mind that the ShowMe addon will work on any theme. Head over to your MojoMotor site, log in, and press on the Layouts tab on the MojoBar. We will be making two new layouts in this tutorial, one for the header and one for the footer.
We will start by looking at the 'main_layout' layout. Usually, the header and the footer consists of everything arround the content that repeats on each of your layouts. Since there's only one layout on the Green Tea theme, finding the header and footer is pretty easy. Here's the header:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>Home</title>
<link type="text/css" rel="stylesheet" href="{mojo:site:site_path}css/green_tea.css" />
<meta name="keywords" content="home, mojomotor, publishing engine that does less" />
<meta name="description" content="MojoMotor is the publishing engine that does less." />
</head>
<body>
<div id="wrapper">
<div id="holder">
<div id="header_outer">
<div id="header">
<h1>{mojo:site:site_name}</h1>
</div>
</div>
<div id="menu">
{mojo:site:page_list}
</div>Let's copy this chunk of HTML and delete it from the 'main_layout' layout. Next, we'll create a new layout and name it 'global_header'. This layout will use the 'webpage' type, and for the content, paste the HTML into the text area. Once all that's done, save the layout.
Next, let's get the footer from the 'main_layout':
<div id="sidebar"><div id="side" class="mojo_global_region">{mojo:page:global_region id="side"}</div></div>
<div id="footer">
<p>Proudly powered by <a href="http://mojomotor.com/">MojoMotor</a><br />{mojo:site:login}</p>
</div>
</div>
</div>
</body>
</html>Once again, let's create a new layout for it, which we will name 'global_footer'. Don't forget to delete the old footer from the 'main_layout' layout!
If you removed the header and footer correctly as you went along the tutorial, your 'main_layout' should now look like this (if it doesn't, make it look like this!):
<div id="content">
<div id="main_content"><div id="page" class="mojo_page_region">{mojo:page:page_region id="page"}</div></div>
</div>{mojo:show:layout name="my_layout_name_here"} So on our 'main_layout', we would then load the header and the footer like this:
{mojo:show:layout name="global_header"}
<div id="content">
<div id="main_content"><div id="page" class="mojo_page_region">{mojo:page:page_region id="page"}</div></div>
</div>
{mojo:show:layout name="global_footer"} And that's it! As you can see, creating a global header and footer is truly not that hard using ShowMe. Unfortunetally, creating a header and footer on Green Tea isn't very helpful as there's the theme only has one layout. However, you should (hopefully) now understand how to use ShowMe on your own themes to increase productivety. Happy Mojo-ing! :)
P.S. ShowMe is not restricted to loading only layouts... it can also load full pages, or just a page's content. I recommend playing around with these features as they could be very useful as well.
Comments
Jesse Schutt
10/27/10
Sorry for the issue! The code samples were not being displayed properly. Take a look at them now and see if it makes a difference in your code.
Jesse
colourtvset
10/27/10
Yupe, the code is same as your sample.
But it seems cannot use editable region inside “show me”. It won’t display and update properly.
Author
Loic Sharma
10/28/10
Hmm, interesting. I didn’t notice global regions didn’t update. I’ll look into this and see if I can find a solution to this.
Author
Loic Sharma
12/09/10
Send me an email at .(JavaScript must be enabled to view this email address) and we’ll talk it over, this sounds interesting!
Leave A Comment
Commenting is not available in this channel entry.Article Info:
Date: 09/09/10
Author: .(JavaScript must be enabled to view this email address)
Latest Add-Ons
- MM Password Protection by Repox
- HelpMe by Jesse Schutt
- MMGists by Josh Kendall
- Formojo by Addict Add-ons
- LanguageSwap - Publish your MM site in Multiple languages by CRYPTON
On Twitter
I'm particularly interested in how the body class is added when the mojobar is opened! That was one that was hard to get around in the past.
Feb 09, 2012 3:20am
colourtvset
10/26/10
Followed your steps, the global region in the footer doesn’t work properly.