Creating a Sandbox in MojoPortal

Oftentimes when editing your web site you might be concerned with how a proposed change is going to look before you make it live.  Usually this occurs when you are doing something more complex that just editing text. For example, at I’ve created a little rotating tabs feature that appears at the top of the page.

Without knowing HTML well, it would be difficult to successfully edit each of the individual “panes” when in the Editor view of your content management system.  One trick to give yourself some room for error is to create a sandbox (ie, a test page) on your site.  This sandbox ideally should reside on a non-public test-server, but, if set up correctly, could also be on a live server.  The sandbox would allow you to practice editing your web site without risking that the public sees your experiments.

So, let’s create a sandbox page:

  1. First, create a page naming it something like “Sandbox” or “Test”, per these instructions.  However, make sure that “Include in Menu” and “Include in Site Map” are NOT checked, since we don’t want this page to be available to the public.  Alternatively, you may already have a test page set up on your site, in which case, you can skip this step.
  2. Next, let’s configure the security settings for the page so that a passerby (or search engine) can’t see the content of the page.   Simply follow these directions, being sure to check “Admins” and uncheck “All Users” for “Roles that can view a page”.  This is simply ensuring that someone must be logged in as an admin of the CMS before they can see the page.
  3. Once you have a defined test page, add the HTML Content feature to the page, per these instructions.
  4. Now, let’s experiment with changing difficult content on your page, by taking my moving tabs example above.  Since I don’t want to screw up a live page, I’m going to copy the content from the live page over to my test page.
  5. Once you are logged in as an admin on your site, navigate to the page that contains the troublesome content.
  6. Click “Edit” to edit this content area:
    Troublesome Content
  7. Now, once in the HTML Editor, click the “Source” button (usually in the upper-left-hand corner of the editor): Source View
  8. Now you should be seeing some HTML code.  Select all the content therein, then copy the text.
  9. Next navigate to your test page, click “Edit”, then “Source” to see the source view of your test page (likely the editor will be blank if you just created the content). If there’s already text within your sandbox’s editor, I’d recommend doing a select all and deleting the old text before copying your new text over.
  10. Paste the HTML code into the editor and click “Update”.  You should now see the exact same content on your test page as what you have on your live page.  If not, then you probably didn’t do something correctly above , in which case, I’d recommend repeating steps 4 and above again.
  11. Now, you can fiddle with the content on your test page, publish it, and no one will be able to see your experiments.  If you mess up the test page content, you can always navigate back to the original page, copy the original code, and paste it into your test page again (or recover your initial version of the test page).  Once you are satisfied with how your test page appears, you can then click “Source” (from within the editor of the test page), copy this HTML code, and then paste it into your live page and hit “Update”.  This is a much safer way to make a change to your site when you are nervous about possibly messing up a live page.



Developers – Creating a Sandbox For Skin/MasterPage Edits

As a mojoportal developer wanting to make edits to your layout.master file (eg, to change how your site appears), you can do so on a live site per the directions below:

  1. First, create a test or sandbox page on your site, per the directions above.
  2. Next, navigate to your skin folder for your site within Windows Explorer.  Eg, the typical path at CSU would be \wsnetcwisYOUR_CWIS_ACCOUNT_NUMBERwwwrootmojoDataSites1skins . In a multi-site installation, the 1 in the aforementioned path could be some other number (eg 2 for the 2nd site, 3 for the 3rd, etc etc.)
  3. Now copy the skin folder and paste it back into the same folder under a different name (eg, “yoursite-test”)
  4. Next we are going to make our test page use that new skin folder.  Go to Admin –> Site Settings and tick the box for “Allow Setting Skin for Page” and click “Save”
  5. Finally, navigate back to your test page and click “Page Settings”.
  6. Under “Skin”, you should see your test skin folder.  Select the skin folder and hit Save.

Now, you can safely make edits to the layout.master page and other files within your test skin folder without risking exploding your live site.  The worst thing that can happen now is, if you break your skin file/css, it will only affect the pages that are depending upon the skin (which hopefully should just be your sandbox page).