Using GreyBox

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!

The mojoPortal Online User Group, started by David Dean of Yamisee, has been going strong for a few months now. A couple different people have led the monthly meetings, each bringing valuable information to those who attend. I believe this group is a great Value Add for the community as the meetings are open to the public and the type of information discussed ranges between installation, skinning and programming. Joe Audette, mojoPortal Founder and Chief Developer, attends the meetings regularly and is even leading the August meeting.

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.

I noticed recently that Joe Audette has changed the licensing on the "Pro" products offered on the mojoPortal website to be lifetime licenses. Previously, the licenses allowed updates for 1 year but Joe never really enforced that.

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.

Update: Joe Audette has decided to implement this in the next version of mojoPortal, due in a couple of weeks. He is updating the <portal:PageTitle control with this functionality.

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.

When Joe Audette released mojoPortal 2.3.3.4 he wrote an article called "Creating An Admin Toolbar" in the mojoPortal Skinning Documentation. The toolbar uses jQuery to easily show and hide itself and is skinned entirely by using CSS. 

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 was browsing through the SVN update log for mojoPortal this afternoon and I am very excited about some of the things Joe Audette is working on for the upcoming release.

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? 

mojoPortal provides a nifty little BreadCrumb control which will show the path to the current page. We have used the control in several of our sites and from time to time, our customer ask us to put the "You Are Here" or some other text in front of the breadcrumbs.

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!

With the release of mojoPortal 2.3.0.4 came the addition of Content Templates for FCKeditor and the examples included with mojoPortal for using the Content Templates were widgets like jQuery Accordian and Tabs. I like the Accordian and Tab widgets quite a bit because they allow me to easily include a very professional looking UI elements with very little work. Examples of the jQuery Accordian and Tabs are below:

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!

The latest release of mojoPortal (v 2.3.1.7) added functionality to use a SilverLight SlideShow with the mojoPortal image gallery and a new feature for a slide show based on your Flickr account. Both of these features are very cool and I was excited to see them added to the mojoPortal core but when Joe Audette told me of another SlideShow feature he is adding to mojoPortal, I was jumping up and down and now I can't wait for the next release!

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!!!!

In a recent article, "Alert: What's Coming for Open Source CMS in September 2009", on CMSWire I noticed that they did not mention mojoPortal (http://www.mojoportal.com).

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.