Create the Skin Script and call it from the layout.master

1. Create a new js file in your skin directory, I usually name it skinscript.js.
2. Add your javascript to the new file. Don't use <script> tags, you don't need them in javascript files.
3. Add <portal:SkinFolderScript ID="sfs1" runat="server" ScriptFileName="skinscript.js" AddToCombinedScript="true" /> to your layout.master. I usually add this right after the <asp:ScriptManager control.

Copy all the scripts from your layout.master to the Skin Script

This is the part that can be a little bit tricky because not all scripts are going to work properly when combined with other scripts. If you copy the scripts to your new file one at a time and test the result, you'll find those pesky ones that will not cooperate. Just leave them in the layout.master, or if you're feeling froggy, rewrite them so they can be combined.

A note about SuperFish

Most of our skins use a superfish menu but the scripts for the superfish menu come in two parts. One is the static script that is in the ClientScript directory which contains all of the superfish magic. The other is an initialization script that is loaded in the layout.master of the skin. Typically, these are loaded by adding the layout.master a <portal:SiteScript control to load the main superfish script and then a <script> element with a bit of jQuery to initialize the superfish menu. We decided to use the jQuery .getScript method to load the main script from our Skin Script. Using this method allows us to initialize the SuperFish menu only if the main script is loaded properly.

A Sample Skin Script

The script below is what we use for starting our skin scripts. It includes the javascript for the Administration Toolbar Menu, Superfish Menu and a neat bit of jQuery that will give the "Add File" button in the Shared Files module a hover state. The script is written out long-form so you can easily see what it does. I suggest that you minify the script before using it in production.

//  ========== 
//  = This file stores all of the scripts that would normally be placed inside the layout.master
//  = Use the following syntax for referencing this script from the layout.master.
//  = <portal:SkinFolderScript ID="sfs1" runat="server" ScriptFileName="skinscript.js" AddToCombinedScript="true" />
//  ==========
 
/*Standard JavaScript */
 
function HideMenuToolbar(){ $("#toolbar").fadeOut(); $("#toolbarbut").fadeIn("slow");}
function ShowMenuToolbar(){ $("#toolbar").fadeIn(); $("#toolbarbut").fadeOut("slow");}
 
 
/* jQuery Scripts */
$(document).ready(function(){ 
 
/* Admin Toolbar */
	$("span.downarr a").click(function() {HideMenuToolbar(); Set_Cookie('openstate', 'closed')});
	$("span.showbar a").click(function() {ShowMenuToolbar(); Set_Cookie('openstate', 'open') });
	$("span.downarr a, span.showbar a").click(function() { return false; });
	var openState = Get_Cookie('openstate');
	if(openState != null){ if(openState == 'closed'){HideMenuToolbar();} if(openState == 'open'){ShowMenuToolbar();}}
 
/* Superfish Menu */
/* Get Superfish mojoPortal Script */
	$.getScript("/ClientScript/jqmojo/mojosuperfish.js", function(){
	    $("ul.sf-menu").supersubs({ minWidth: 1, maxWidth: 27, extraWidth: .2 }).superfish({
		pathClass: 'current', 
		pathLevels: 0, 
		delay:500,
		animation: {opacity:'show', height:'show'}, 
		speed: 200,
		dropShadows:false,
		autoArrows: true
	    });
	});
/* This will make the Shared Files "Add File" button have a hover state */
	$("div.uploadpanel > div > input + div + div").hover(
		function() {
			$("div.uploadpanel div .jqbutton").addClass("ui-state-hover")
		},
		function() {
			$("div.uploadpanel div .jqbutton").removeClass("ui-state-hover")
	});
});

Further Reading

If you're serious about optimizing the speed of your mojoPortal site, I highly suggest you read the "Improving Your YSlow or Page Speed Score" article in the mojoPortal Documentation.

Happy mojo-ing!

Form Wizard Pro (FWP) is a great tool for creating ad-hoc style forms on the fly in mojoPortal. One feature that makes FWP so great is the ability to import and export Form Definitions and individual Questions.

Exporting a Question

Exporting a Question is very simple, just click the "Export Question" link next to the question in the "Edit Form" screen. The file will be named like "FWP-Instance-NameYYYYMMDDHHMMSS-q.config." This includes the name of the FWP instance, the exact date and time you clicked the export link, and a "-q" to let you know this file is a Question, not an entire form. You can of course change the name of the file without causing any problems for importing the question later.

Exporting a Form

Exporting an entire Form is also very simple, just click the "Export Form Definition" button at the bottom of the "Edit Form" screen. The file will be named like "FWP-Instance-NameYYYMMDDHHMMSS.config." This includes the name of the FWP instance and the exact date and time you clicked the export button. Again, changing the name doesn't harm anything.

Importing a Question or Form

Importing a Question is very straightforward. Simply click the "Browse" button and select a Question definition file from your computer and then click the "Import Question" button. You'll see the question added to the "Edit Form" screen.

You can import a Form Definition the same way you import a Question, except that you will want to select a Form definition file and click the "Import Form Definition" button. One very important thing to keep in mind is that importing a Form will erase all of the questions you already have on your form. Any data that has been submitted to the form will still be intact but the questions corresponding to the data will be gone so the data will be "orphaned" so you may not know what all of the responses mean.

Some Form Definitions For You

Happy mojo-ing!

My attention was initially drawn to SOPA when I read an article on A List Apart by Jeffrey Zeldman titled "Say No to SOPA."² Jeffrey lays out his opposition to SOPA in plain english and his article prompted me to do more research on the topic. I found that in addition to the list of organizations Jeffrey mentioned as being opposed to SOPA, the American Center for Law and Justice (ACLJ) is opposed to it as well. The ACLJ has prepared a legal analysis on SOPA which outlines the first amendment concerns with the legislation.

I highly suggest reading Jeffrey's article and the ACLJ's legal analysis. I've borrowed the following list of actions you can take to make your voice heard regarding the SOPA legislation from Jeffrey's article.

Act now!

American Censorship Day, one of several campaigns to stop SOPA, has come and gone, but you can still take action:

• Americans, Tumblr has created a system that will call you with talking points, and then connect you to your representative.
• You can contact your representatives and your senators.
• Those outside the US can sign this petition. Registration is required. A US zip code is not.

We urge everyone reading this to take action today. Only an overwhelming show of solidarity gives us a chance of defeating this poorly written, dangerous bill.

Citations:

1. "First Amendment Concerns Posed by http://c0391070.cdn2.cloudfiles.rackspacecloud.com/pdf/first-amendment-concerns-posed-sopa.pdfSOPA" - American Center for Law and Justice, November 28, 2011 (http://c0391070.cdn2.cloudfiles.rackspacecloud.com/pdf/first-amendment-concerns-posed-sopa.pdf)
2. "Say No to SOPA" - A List Apart, Jeffrey Zelman, November 29, 2011 (http://www.alistapart.com/articles/say-no-to-sopa)

<asp:LoginView id="lv1" runat="server">
	<AnonymousTemplate>
		<h2 class="moduletitle">Please Sign In:</h2>
		<mp:Login ID="login1" runat="server" SetRedirectUrl="false" />
	</AnonymousTemplate>
	<LoggedInTemplate>
		<h2 class="moduletitle">
			<portal:WelcomeMessage id="WelcomeMessage1" runat="server" 
				RenderAsListItem="false" 
				OverrideFormat="Welcome Back {0}" 
				CssClass=" "
			/>
		</h2>
		<ul>
			<li><asp:HyperLink id="lnk1" runat="server" NavigateUrl="~/members-only-articles.aspx" Text="Articles"/></li>
			<li><asp:HyperLink id="lnk2" runat="server" NavigateUrl="~/members-only-downloads.aspx" Text="Downloads"/></li>
			<li><asp:HyperLink id="lnk3" runat="server" NavigateUrl="~/members-only-forums.aspx" Text="Forums"/></li>
			<portal:LogoutLink id="LogoutLink1" runat="server" RenderAsListItem="true" ListItemCSS=" " CssClass=" "/>
		</ul>
	</LoggedInTemplate>
</asp:LoginView>

The result can be something like this:

Anonymous

Authenticated

Happy mojo-ing!

?Well, if you have mojoPortal 2.3.6.1 or higher, it is quite easy. You can override it in your skin's layout.master file by setting a property on <portal:WelcomeMessage like this:

OverrideFormat="My name is {0}", or if you only want the user name then you could put OverrideFormat="{0}"

The {0} is replaced by the user's display name.

I prefer OverrideFormat="Welcome Back, {0}" which displays "Welcome Back, Joe Davis" very nicely.

Hope this helps you out. If it did, please spread the word through Twitter or Facebook!

Happy mojo-ing,
Joe Davis

1. How to add a domain in WebsitePanel
2. How to add Scheduled Tasks in WebsitePanel
3. How to use the Application Installer in WebsitePanel
4. How to backup and restore your user account in WebsitePanel
5. How to create users for a database in WebsitePanel
6. How to create a mail account in WebsitePanel
7. How to create a MySQL database in WebsitePanel
8. How to create a peer account in WebsitePanel
9. How to create a MS SQL server database in WebsitePanel
10. How to create Web Sites in WebsitePanel
11. How to edit your account details in WebsitePanel
12. How to setup email forwarding in WebsitePanel
13. How to create custom error pages in WebsitePanel
14. How to use File Manager in WebsitePanel
15. How to install FrontPage extensions in WebsitePanel
16. How to create a FTP account in WebsitePanel
17. How to login to WebsitePanel
18. How to create an ODBC DSN (Data Source Name) in WebsitePanel
19. How to view your quotas in WebsitePanel
20. How to view Reports in WebsitePanel
21. How to add a shared SSL folder in WebsitePanel
22. How to create a sub-domain in WebsitePanel

The permanent links for these videos are stored in the Knowledge Base here: http://i7media.net/kb-websitepanel-videos.

Thanks,
Joe D.

Note: This is an advanced topic and use of the items discussed here are not beneficial for most mojoPortal installations. If you have several sites that you update on a regular basis, this document will be very beneficial.

configSource - The Key to Happiness

Okay, so a configuration option isn't really the key to happiness but this one will make your life easier so you can focus on whatever it is that does make you happy. configSource is an attribute that can be applied to a web.config section to instruct the .NET application to find the actual configuration for the section in another file. Use of configSource in a few sections of the mojoPortal web.config file will make updating multiple sites a lot easier. When upgrading a mojoPortal installation, it is best practice to use the web.config file that comes with release. The main reason for this is because new settings can be in the web.config file and other settings could have been changed since you last upgraded. The problem that arises is that there are two sections of the web.config that changes must be made to because those sections contain site specific settings.

The machineKey and the system.net SMTP sections contain site specific settings. If you don't use a custom machineKey for your site, please see this page. When you have a lot of mojoPortal installations to upgrade, you have to modify the web.config for each site which can be very time consuming and the process is prone to user error. You may have a script that copies all of the release files to each of mojoPortal installations; the unique settings in each sites' web.config can defeat much of the purpose of your script. The configSource attribute remedies the dilemma altogether. Using this technique, you can set all of your sites to use external files for these sections, and then when you update the sites, you only need to modify the web.config once and all of your sites unique settings will be retained.

One could use the configSource attribute on other sections of the web.config but we will only focus on the machineKey and system.net SMTP sections. 

machineKey configSource

To use configSource on the machineKey, copy the entire machineKey section to a new file. Name the new file machineKey.config (you can name it whatever you like but you should absolutely use the .config section to keep people from downloading the file). Next change the machineKey section in the web.config to only have the configSource attribute specifying the machineKey.config file. The result should be:

web.config File

...other web.config sections...
<machineKey configSource="machineKey.config" />
...other web.config sections...

machineKey.config File

Please note: you should not use the machineKey below. You should generate your own as described here.

<?xml version="1.0"?>
<machineKey
validationKey="55BA53B475CCAE0992D6BF9FE463A5E97F00C6C16DA3D7DF9202E560078AB501643C15514785FEE30FEF26FC27F5CE594B42FFCA55452EF90E8A056B4DAE9F39"
decryptionKey="939232D527AC4CD3E449441FE887DA110A16C1A36924C424CBAAE3F00282436C"
validation="SHA1"
decryption="AES" />

system.net smtp configSource

To use configSource on the smtp section, copy the entire smtp section to a new file. Name the new file smtp.config (you can name it whatever you like but you should absolutely use the .config section to keep people from downloading the file). Next change the smtp section in the web.config to only have the configSource attribute specifying the smtp.config file. The result should be:

web.config File

...other Web.config sections...
<system.net>
  <mailSettings>
    <smtp configSource="smtp.config"></smtp>
  </mailSettings>
</system.net>
...other web.config sections...

smtp.config File

<?xml version="1.0"?>
<smtp from="noreply@yourdomain.com">
  <network host="localhost" port="25" password="" userName="noreply@yourdomain.com" />
</smtp>

Managed mojoPortal Upgrade Services

i7MEDIA, LLC offers Upgrade Services for mojoPortal. Trusted by the mojoPortal community and owned by mojoPortal Community Manager, Joe Davis, you can rest assured your site will be taken care of by i7MEDIA.

Happy mojo-ing!

-Joe Davis

We're sorry but a server error has occurred while trying to process your request.

The error has been logged and will be reviewed by our staff as soon as possible. It is possible that the error was just a momentary hiccup and you may wish to use the back button and try again or go back to the home page.

This error message is intentionally vague to prevent those who would do your site harm from gaining important information about your site. 

Many first-time adopters of mojoPortal and even some that have been around a while, don't realize that when this error message is displayed, the actual error is written to a log file within the mojoPortal installation. One can easily read the log by browsing to the Administration Menu and selecting the "System Log" option. If the error is not allowing access to that page, the log file can be found in the \Data directory, named currentLog.config. This log contains all of the warning and critical errors mojoPortal encounters. Keep in mind that the .config extension prevents the log from being downloaded by would-be attackers.

So, if you encounter the extremely generic message above, check out the \Data\currentLog.config file for the real error. Also, if you are working with your site skin's layout.master file and things go awry where everything is miss-placed or even a weird skin is shown instead of your own, check out the System Log... chances are you will find a hint as to the cause of the problem.

Need more information on the logs and troubleshooting? Check out the "Basic Troubleshooting" guide on the mojoPortal site.

Happy mojo-ing!

Joe D.
mojoPortal Community Manager

Are there any other topics you would like to see in the documentation? If so, send us an email and we will do our best to take care of it for you.

This upgrade means we can offer our services at lower rates because we no longer have the overhead of Control Panel Licensing. In the near future, we will be offering services for Virtual Server Hosting, SharePoint and SmarterMail. All of these will be managed through the WebsitePanel software, allowing customers easy and familiar access to all of their services.

Good things are approaching i7MEDIA. Stay in touch to benefit!

mojoPortal comes bundled with Greybox which is a great in-site pop-up utility that can be used for displaying images and even other webpages in an in-site pop-up. It is used in the image galleries, help system, skin previewer, and a lot of other areas of mojoPortal

You might be interested to know that you can use GreyBox in your mojoPortal site without utilizing the ImageGallery or other features of mojoPortal that use it. Simply add the rel="gb_image[]" or rel="gb_page[]" property to any link and the the link target will open in a GreyBox pop-up window.

For example, clicking the thumbnail below will open the full-size image in a GreyBox window:

<a href="http://i7media.net/Data/Sites/1/blogdata/lightbox-dsc06798-full.jpg" rel="gb_image[]" title="4th &amp; Broadway, San Diego, CA (C) Joe Davis"><img alt="" src="http://i7media.net/Data/Sites/1/blogdata/lightbox-dsc06798-thumb.jpg" style="width: 133px; height: 100px;" /></a>

The link below will open the mojoPortal website in a fullscreen GreyBox window:

<a href="http://www.mojoportal.com" rel="gb_page_fs[]" title="mojoPortal, The World's Greatest .NET CMS">Open mojoPortal in GreyBox</a>

Open mojoPortal in GreyBox

There are a lot of other neat things you can do with GreyBox that you may not be aware of so I recommend checking out the GreyBox website for more helpful hints.

Using LightBox with MojoPortal

Some people like other utilities like LightBox (the jQuery version), for example. I will demonstrate to you how to use LightBox alongside GreyBox with mojoPortal. 

The Setup

1. The first step to using LightBox is to download the jQuery-LightBox release from http://leandrovieira.com/projects/jquery/lightbox/. Once you have downloaded the release, extract it to your local hard drive.
2. Using your favorite FTP client (mine is FileZilla):
   1. Create a new directory under \ClientScript named lightbox and upload jquery.lightbox-0.5.min.js, jquery.lightbox-0.5.css and the images directory included in the zip to this new directory.
   2. Browse to the directory containing your site's skin (\data\sites\[SiteNumber]\skins\NameOfSkin and download the layout.master file.
3. Using your favorite HTML editor (mine is Notepad++):
   1. Add the following lines to the layout.master directly after the <asp:ScriptManager control
      <link href="http://i7media.net/ClientScript/lightbox/jquery.lightbox-0.5.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://i7media.net/ClientScript/lightbox/jquery.lightbox-0.5.pack.js"></script>
<script type="text/javascript">
$(document).ready(function(){
 $('a.lightbox').lightBox({
    imageLoading: '/ClientScript/lightbox/images/lightbox-ico-loading.gif',
    imageBtnClose: '/ClientScript/lightbox/images/lightbox-btn-close.gif',
    imageBtnPrev: '/ClientScript/lightbox/images/lightbox-btn-prev.gif',
    imageBtnNext: '/ClientScript/lightbox/images/lightbox-btn-next.gif'
  });
});
</script>
4. Back in your FTP client, upload the modified layout.master file.

Using LightBox

Now to use LightBox, all you need to do is add lightbox as a class on any link that you want to open in a LightBox pop-up. For Example:

<a href="images/image-1.jpg" class="lightbox" title="my caption"><img src="images/image-1-thumb.jpg"></a>

You can see more examples on the LightBox website.

See It In Action

Some Friendly Words of Caution

Including additional javascript files in your site will make it run slower. The difference in speed may be negligible when adding just one script but don't get carried away.

Also, you may have noticed that I put the CSS and Images in the ClientScript\lightbox directory. I did this because I couldn't get the LightBox to work properly with those items in the \Data\Style directory like they should be. Also, I couldn't get the script to work with the CSS being loaded from the CSSHandler so I had to put a reference to the CSS file in the layout.master. This should not be done without thoroughly testing your site and making every attempt to put the CSS file where it belongs, in the CSSHandler's style.config.

Conclusion

In the end, I prefer GreyBox primarily because it is already built-in to mojoPortal and it does more than LightBox. If you find that you want to use something along with GreyBox, you can adapt this post to whatever tool you decide to use. It should help get you on your way.

Happy mojo-ing!

Over the past couple of months, the topics and leaders of the meetings have been:

• April 2010: SEO Tools and Tips, David Dean of Yamisee
• May 2010: Creating Custom Page Titles, Joe Davis of i7MEDIA
• June 2010: Log4Net, Steve Land of StrongEye Solutions
• August 2010: ZedGraph, Joe Audette

If you are interested in mojoPortal, I highly suggest you subscribe to the Forum thread on the user community here.

Personally, I want to thank David Dean for his hard work and dedication to the mojoPortal community.

This is really nice for the community as we don't have to worry about renewing our licenses and purchasing upgrades. Pay for it once and forget it. Sounds pretty darn good to me.

I have from time to time needed to show a page's title within the content as a heading. The controls that come with mojoPortal don't really allow for this but I have come up with a handy little control that will show the Page Title on the page and allow you to choose how the text is rendered.

To get started, create two files; PageTitle.ascx and PageTitle.ascx.cs. Place both of these files in the <siteroot>\Controls\Custom directory (Note: You will have to create the "custom" directory). The code for the files is as follows:

PageTitle.ascx 

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="PageTitle.ascx.cs" ClassName="PageTitle.ascx" Inherits="Controls_PageTitle" %>
<asp:literal ID="litPageTitle" runat="server" />

PageTitle.ascx.cs

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using mojoPortal.Web;
using mojoPortal.Web.UI;
using mojoPortal.Web.Framework;
using mojoPortal.Business;
using mojoPortal.Business.WebHelpers;

public partial class Controls_PageTitle : System.Web.UI.UserControl
{
    protected void Page_Load(object sender, EventArgs e)
    {
  PopulateControls();
 }
 private void PopulateControls()
 {
  PageSettings currentPage = CacheHelper.GetCurrentPage();
  if(currentPage == null){ return; }
  if(currentPage.PageTitle == "")
   litPageTitle.Text = currentPage.PageName;  
   else
    litPageTitle.Text = currentPage.PageTitle;
 }
}

To use the control, place the following in your layout.master directly after <%@ Master... 

<%@ Register Src="~/Controls/custom/PageTitle.ascx" TagName="PageTitle" TagPrefix="cc1" %>

Now place the following where you want the Page Title to appear in the layout.master.

<cc1:PageTitle id="PageTitle1" runat="server" />

Come back soon to see a full description of how this all works.
 I have decided not to describe the full functionality of this control as it is fairly self-explanatory and because Joe Audette has implemented this functionality into mojoPortal. You can use the <portal:PageTitle control after the next release.

Happy mojo-ing.

If you follow Joe's directions or you are using a skin that came with 2.3.3.4 with the toolbar enabled, you will have a toolbar that looks like this:

While this serves a perfectly good function, there are a few things about it I don't like. It is gray and there are no icons depicting the links. I happen to like icons and bright colors so, I came up with this:

Skinning the toolbar was very easy because it is all controlled by CSS. This article is meant to help you understand how to skin the toolbar but if you like what I've done, you can just download it here. 

Create a copy of the jqtoolbar UI resources

The CSS and images for the toolbar are located in the \Data\style\jqtoolbar directory. The CSS is in the style.css file so I created a copy of this file and named it style-7.css.

Set site skin to use new CSS file

For the skin to use the new css file (style-7.css), I had to change the line below in my style.config file located inside of my skin directory (\data\sites\1\skins\myskin). Notice I am referencing style-i7.css and not style.css.

  <file cssvpath="/Data/style/jqtoolbar/style-i7.css" imagebasevpath="/Data/style/jqtoolbar/">none</file>

Change the background color of the toolbar 

To change the color of the toolbar, I simply changed the background-image CSS rule on the div#toolbar and div#toolbarbut selectors to a background-color rule and set the color to #FFFF99.

Add icons to the links

To add the icons, I added an attribute to each of the controls for the links in the layout.master. To keep the markup valid, I used the rel attribute. I set the value of the rel attribute to a descriptor of the link itself (e.g.: rel="admin" for the admin link). I then used this new attribute to apply a different background image to each link.

It is important to note that this approach will not work with IE6 as it doesn't understand how to select an element based on it's attributes. The next release of mojo will allow you to use the CssClass attribute on the controls so that you can style them more easily. The value of the CssClass attribute will be added to the classes for the link.

Link Controls in Layout.master file

<portal:AdminMenuLink id="lnkAdminMenu" runat="server" rel="admin"/>
<portal:FileManagerLink id="lnkFileManager" runat="server" rel="filemgr"/>
<portal:NewPageLink id="lnkNewPage" runat="server" rel="addpage" />
<portal:PageEditFeaturesLink id="lnkPageContent" runat="server" rel="pageedit"/>
<portal:PageEditSettingsLink id="lnkPageSettings" runat="server" rel="pagesettings"/>

CSS for icons

div#toolbar a[rel=admin]{
  background: transparent url('administration.png') no-repeat scroll left center;
  padding-left: 32px;
}

div#toolbar a[rel=addpage]{
  background: transparent url('newpage.png') no-repeat scroll left center;
  padding-left: 32px;}

div#toolbar a[rel=filemgr]{
  background: transparent url('filemgr.png') no-repeat scroll left center;
  padding-left: 32px;
}

div#toolbar a[rel=pageedit]{
  background: transparent url('editpage.png') no-repeat scroll left center;
  padding-left: 32px;
}

div#toolbar a[rel=pagesettings]{
  background: transparent url('pagesettings.png') no-repeat scroll left center;
  padding-left: 32px;
}

The icons are from the Crystal Project but you can use any you like.

Hiding the menu by default

Personally, I do not want the toolbar to be displayed all the time. I would rather have a link which opens the toolbar when I need it. To accomplish this, I moved the display:none; rule from the div#toolbarbut selector to the div#toolbar selector.

Conclusion

I hope this gives you a head-start on skinning the new admin toolbar. Keep in mind that all of this was accomplished easily with CSS.

Happy mojo-ing!

I started browsing around the demo site (http://demo.mojoportal.com) so I could see some of the new changes in action. The list below are just the ones I found interesting, there are a lot more changes coming in the next release.

1. A new File Manager has been added and the old one has been re-factored. The new File Manager is very nice and is a big improvement over the old one. It uses Javascript whereas the old one doesn't so Audette decided to keep the old File Manager and allow users to switch back and forth between the old and the new. Usability is very big to mojoPortal and as a matter of fact, mojoPortal can be used entirely without Javascript if one chooses to do so. There is also a new link with the Administration and Edit Page links which opens the File Manager in a graybox. This allows for easy access to the File Manager at all times.
   
2. Adding users to Roles via the Role Administration admin page is a lot easier thanks to a new selector dialog. Previously, users not in a role were listed in a single drop-down list which made it very difficult to use when a site had a lot of users.
   
3. mojoPortal uses a CSSHandler to combine & minimize CSS files. This process makes caching easier and allows sites to load faster. The url to CSSHandler has been http://somedomain.com/data/sites/[sitenumber]/skins/[skinname]/CSSHandler.ashx. This required the Data directory or at least the skin directory to be executable which is not ideal. The CSSHandler URL has been moved to the root of applicaiton in the next release. Problem solved.
4. A new SQL Query tool will allow developers to easily see and modify data in the database from the website. This tool must be enabled by a site administrator in the web.config prior to it being available for use. It will allow developers to save queries which can be used to populate date in a custom module for quick and dirty data access.
   
5. The main administration links (admin, add page, edit page, page settings) used to be just that, links. If a site designer like yours truly wanted to display the links in a drawer or some other type of cool UI, custom code would have to be developed to create the links manually. This next version will include support for controls for each link which means it will be possible to declare them directly in the layout.master and they will show/hide automatically according to internal logic. See number 6 for what this really means.
6. The jQuery Extruder plugin has been included with mojoPortal which allows for an example of using a widget with the admin links.
    
7. The blog is getting some attention this go 'round. Community feedback suggested a preview draft option, paging, option to display only blog titles in the main blog page, and a few other improvements. All of them, that I noticed anyway, made it into the core! Check out the demo, to get a better idea of what has changed with the blog.
8. The Search facility will now provide a link to download items in ShareFiles modules. Previously, just a link to the Shared Files module was provided.

Rather impressive what Joe Audette can get done in just a few weeks, isn't it?

What improvements or features are you waiting to see implemented? Why not buy Joe Audette a Coffee to show him your appreciation? 

So that's simple, right? Well, yes and no. The BreadCrumb control doesn't have the ability to add a message to the crumbs so we have to add the text in the layout.master of our skin. Okay, that's simple too but the difficulty comes with making the message invisible when the page settings have breadcrumbs turned off or there aren't any to display.

The solution is to create a User Control with all of the logic needed to display the Breadcrumb Message when needed.

The User Control

For simplicity of this article, we will create our user control in a folder named CustomControls which we placed inside the Controls folder (\Controls).

The YouAreHere.ascx file

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="YouAreHere.ascx.cs"
    ClassName="YouAreHere.ascx" Inherits="Controls_YouAreHere" %>

<asp:literal ID="lblYouAreHere" Text="You Are Here:" runat="server" Visible="false" />

Not much magic here, just importing the necessary namespaces and creating our Label which will end up being the Message text. Notice the Label has the Text argument assigned and it is set to "You Are Here:". We will discuss this further later in the article.

The YouAreHere.ascx.cs file (code behind)

using System;
using System.Collections.Generic;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

using mojoPortal.Web;
using mojoPortal.Web.UI;
using mojoPortal.Web.Framework;
using mojoPortal.Business;
using mojoPortal.Business.WebHelpers;


public partial class Controls_YouAreHere : System.Web.UI.UserControl
{
    private string sMessage;
    
    public string Message
    {
        get { return sMessage; }
        set { sMessage = value; }
    }

    protected void Page_Load(object sender, EventArgs e)
    {
        if (sMessage != null)
        {
            lblYouAreHere.Text = sMessage;
        }

        PageSettings currentPage = CacheHelper.GetCurrentPage();
        if (currentPage == null) { return; }
        if ((currentPage.ShowBreadcrumbs)
            || (currentPage.ShowChildPageBreadcrumbs)
           )
        {
            lblYouAreHere.Visible = true;
        }
    }
}

Using the User Control (layout.Master file)

<%@ Register Src="~/Controls/CustomControls/YouAreHere.ascx" TagName="YouAreHere" TagPrefix="i7" %>

<i7:YouAreHere id="YouAreHere1" Message="How You Got Here:" runat="server" />

The first line should be placed after the <%@ Register... line. It registers the User Control on the page.

The second line should be placed directly before the <portal:Breadcrumbs... line. This is the User Control Tag which will show the Message. Optionally, you can set a custom message using the Message argument.

Note: i7MEDIA assumes no liability or responsibility for the use of this code. We do however want to help you if you need it so don't hesitate to ask us.

Happy mojo-ing!

The first idea I had for using the widgets was to include a couple different contact forms on one page, each with its own tab. So I set out creating the 3 different Contact Form instances that I needed. I was doing this for my church so I had one for the Pastor, Christian Ed. Director and the Secretary. I then created an HTML Content instance on the Contact Us page and added the Tabs UI widget to the HTML content. Now this is when I ran into a problem; there isn't any way to reference a mojoPortal module from within another module, so I had no way to put the Contact Form instances inside the UI widget.

I looked throught the documentation on the mojoPortal site but couldn't find anything that I thought would lead me in the right direction so I posted a question in the forum asking for help. Joe Audette, mojoPortal's founder and chief developer, responded with a very elegant solution. All I needed to do was create a my own module that included the Tab widget with the Contact Form instances wrapped up inside. Being the great guy he is, Joe provided me with the necessary code to make this work. The process is very simple:

1. Create a text file named whateveryoulike.ascx
2. Paste this code into the text file:

   		<%@ Control Language="C#" ClassName="MultiModuleInTabsModule.ascx" Inherits="mojoPortal.Web.SiteModuleControl" %>
   <%@ register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="portal" %>
   <%@ Import Namespace="mojoPortal.Business" %>
   <%@ Import Namespace="mojoPortal.Business.WebHelpers" %>
   <%@ Import Namespace="mojoPortal.Web.Framework" %>
   <%@ Import Namespace="mojoPortal.Web.Controls" %>
   <%@ Import Namespace="mojoPortal.Web.Editor" %>
   <%@ Import Namespace="mojoPortal.Net" %>
   
   <script runat="server">
       protected void Page_Load(object sender, EventArgs e)
       {
       }    
   </script>
   
   <div class="mojo-tabs">
       <ul>
           <li><a href="#tab1">Tab 1</a></li>
           <li><a href="#tab2">Tab 2</a></li>
           <li><a href="#tab3">Tab 3</a></li>
       </ul>
       <div id="tab1">
           <asp:Panel ID="pnlModuleWrapper1" runat="server">
               <portal:ModuleWrapper ID="ModuleWrapper1" runat="server" ConfigureModuleID="15" />
           </asp:Panel>
       </div>
       <div id="tab2">
           <asp:Panel ID="pnlModuleWrapper2" runat="server">
               <portal:ModuleWrapper ID="ModuleWrapper2" runat="server" ConfigureModuleID="16" />
           </asp:Panel>
       </div>
       <div id="tab3">
           <asp:Panel ID="pnlModuleWrapper3" runat="server">   
               <portal:ModuleWrapper ID="ModuleWrapper3" runat="server" ConfigureModuleID="17" />
           </asp:Panel>
       </div>
   </div>

3. Find the ModuleID for each Contact Form instance and modify the ModuleWrapper controls in the code above to match the correct ModuleIDs. Note: To find the correct ModuleIDs all you need to do is hover over the Edit or Settings link for the Contact Form instances and then look in your browser's status bar. The ModuleID will show as mid=SomeNumber.
4. Save the file you created in the first step to the "~\data\sites\[sitenumber]\Modules" directory. (Note: you can save the file to any directory in the mojoPortal application but I think it is best that you save it to a directory under your actual site in the Data directory because this will prevent it from being overwritten or accidentally deleted during upgrades.
5. Install your newly created module via the Administration > Advanced Tools > Feature Installation/Configuration screen inside of your mojoPortal site.
   1. This is rather straight forward. All you have to do is give your Module a name, and input the correct path in the Control Source field. You may want to create your own GUID to make sure that it is unique.
6. Now you can add your new module to any page you like just as you would add any other module to a page.

Here’s a screenshot of the end result:

Happy mojo-ing!

Joe is adding the ability to the HTML Feature of mojoPortal to display any element in a Slide Show. All the user has to do is type out their text, separating each "slide" with DIV or P elements and mojoPortal handles the rest! You can mix text with images within your SlideShow!

Here is a short video on it so you can see what I mean:

Try doing something like this with the built-in functionality of DNN!!! I can tell you now that you can't!!! This is a prime example of why mojoPortal is so far ahead of everyone else in the OpenSource .NET CMS game. One of the most important purposes of a CMS is supposed to be to allow users without a lot of web knowledge the ability to quickly and efficiently update/manage a website. This simple but very elegant feature will help those users keep their website up to date with a Web 2.0 feel.

I can't wait for the next release of mojo!!!!

mojoPortal is my CMS of choice because of its usability, simple management and skinning. I have used many other CMS projects over the years and I have found mojoPortal the best for doing what a CMS is supposed to do which is save time and effort in the management of a website.

Some key feature of mojoPortal that I like are:

• Multi-site installation allows you to host multiple sites with one installation of mojoPortal.
• Automatic resizing of images upon upload from within the TinyMCE and FCKeditor WYSIWYGs. This feature is new as of 2.3.1.6 and it allows users to upload images for use in content and the image will be resized to a maximum height and width which can be set by the user in the same dialog as the upload. The feature can also be turned off for a single upload or for all uploads (requires an admin).
• Content and Content Style Templates are built-in to both TinyMCE and FCKeditor. A site admin can create custom templates and they will be accessible to site authors and publishers. This feature saves my customers a lot of time because they have specific layouts for certain types of articles, all they have to do is select a template and add their content.
• VERY active forums where questions are answered and no body gets flamed for asking a question, even if the answer is in the documentation.
• Website Chat using Windows Live Messenger enables users to communicate with company staff for support or sales questions.
• Search features galore! mojoPortal's search functionality is very nice. The site search engine indexes all content on the site, regardless of which feature the content resides. Many other CMSs have separate a search for the forum, blog, site content, etc... The search engine also allows the user search by feature so if a user only wants to search the forum, all they have to do is select forum from a drop down menu.
• Core Features are core features. Joe Audette, the founder of mojoPortal, offers a few enhanced modules for sale through his company Source Tree Solutions. What Joe doesn't do is make core enhancements to the core and package them as licensed products. Some CMS projects have started doing this and it is not truly open source.
• Skinning in mojoPortal is very simple and can be learned by any web developer in just a matter of a few hours. I have attempted to create skins for DNN, Joomla, and others but I have never achieved the level of success that I have with mojo!

This is just a short list of the reasons I use mojoPortal and recommend it over any other open source CMS. I hope sites like CMSWire start to take notice of mojoPortal and give it the press it deserves.