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!