jQuery is a JavaScript library, mostly used for expediting script writing. jQuery UI is a user interface built with jQuery. In the words of jQueryUI.com:

jQuery UI is a curated set of user interface interactions, effects, widgets, and themes built on top of the jQuery JavaScript Library. Whether you're building highly interactive web applications or you just need to add a date picker to a form control, jQuery UI is the perfect choice.

Now you might think "hey, that sounds nice!", and "how do I use it on my website?". You can find instructions on how to use jQuery UI on their website, here.

But, lucky for those of us using mojoPortal, jQuery is already built in — and so is jQuery UI. This post will explain how to use it with mojoPortal.

Creation

The first thing you need before you can integrate a new UI style into mojoPortal, is a new UI style. I highly suggest using the jQuery UI Themeroller, as it is much easier than manually changing the CSS and images for an old UI theme.

Before you start, you might find it helpful to click the "gallery" tab on the left and look through the native themes to see if they have something a little closer to what you want. Once you've found one that you like, click the "edit" button under it in the gallery, and you're ready to begin making changes.

When I do this, I usually go to my mojoPortal site design and use a color-picker to pick out the primary colors from the skin, then add them to my UI theme until it matches the skin pretty well. Hint: The parts of mojoPortal that use the UI tend to use it very heavily, so you'll want to go easy on the bright colors.

Once you have the theme the way you like it, click the "download theme" button. This will bring you to a page that lets you pick what UI features you need. You can disable these as you like, but if you don't care about the file size just leave it all on the defaults and scroll to the bottom of the page, where you can name your theme and then click download again.

Encouragement

The next part can be a little confusing the first time you do it (which is why I wrote instructions), but after you get through it once you'll realize it's actually quite easy. Working for i7MEDIA, I do it on a regular basis and now the whole process only takes me 5 minutes.

I've written detailed instructions below, if you follow them it shouldn't take you too long either. Have fun!

Installation

Once you've gotten your theme downloaded, you'll need to extract the zip file into some folder on your computer. Next, navigate within that folder to the "css" folder, and then to the folder named whatever you named the theme (default is "custom-theme"). Now just follow these instructions:

1. Inside of the "custom-theme" folder, there are two css files and a folder.
2. Before putting them in your skin, you'll want to rename "jquery-ui-#.#.#.custom.css" to "style-jquery.css", and rename the "images" folder to "jquery-images".
3. Copy the renamed images folder and css file into your skin.
4. Open the "style.config" file within your skin and add a line that corresponds with the name of the new file.
   In example: <file>style-jquery.css</file> — where "style-jquery.css" is the name of the css file you copied from the folder.
5. Now there's some slight editing you need to do within the jquery css file. Open it and do a "find-and-replace" (usually ctrl+f or ctrl+h) for the following keys:
   • Find: (images/ — Replace with: ('jquery-images/ [1].
   • Find: .png) — Replace with: .png') [2].
   • Find: (opacity — Replace with: ('opacity.
6. Now for the next one, you can't automate the find and replace because the numbers at the end of the "opacity" rule are always different. You'll need to look for any rules like this: filter:Alpha('Opacity=#), and replace them with this: filter:Alpha('Opacity=#') — The only difference being the new apostrophe before the last parenthesis.
7. Next, open your "layout.master" file, and search for: <portal:StyleSheetCombiner. Once you've found it, check for the following key inside of it: IncludeJQueryUI="false". If this is set for "false", you'll be okay — if it is "true", change it to "false".

Hopefully, now your new UI theme works. However, if you have a really old version of mojoPortal, or are using a really old skin, you might need to read the next section, too.

Changing mojoPortal's native jQuery version

As of this writing, the latest version of jQuery UI is 1.9.2. The latest version of mojoPortal (2.3.9.4) ships with UI version 1.9.0 — as you can imagine, this could be a problem.

Usually, your particular skin will be configured to use the version of the UI that its theme was built to use when it was created. However, if you try to upload a new UI theme as per the instructions above, but find that it is not displaying properly or certain features of the UI are buggy/broken, you might need to force the mojoPortal installation you have to use a new version of the UI.

To do this, simply follow these instructions:

1. Open the layout.master file in your skin.
2. Search for the following line: <portal:ScriptLoader.
3. Make sure that the ScriptLoader has the following key: AssumejQueryUiIsLoaded="true"
4. Once that's done, add the following line somewhere under the ScriptLoader:
   <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js" type="text/javascript"></script> - [3]
5. The numbers in that link can be changed from "1.9.2", to whatever is the latest version of jQuery UI. You can find what the latest version is and easily find the google CDN link at the bottom of this page, under "quick access".

You might also find this article helpful: http://www.mojoportal.com/self-hosting-jquery-jquery-ui-files

Help

If you've read this article, followed the instructions, and ripped out your hair trying to figure out why something is still broken… Well, you might need a psychiatrist — but you can also just try asking us for help in the comments section below!

[1] In this case, "jquery-images" is the name of the "images" folder that you renamed before putting it in your skin.
[2] The apostrophes are necessary to stop the StyleSheetCombiner from failing to combine the CSS properly.
[3] If your site has SSL, or if you just prefer not to call the script this way, you can call call it via the web.config.

Earlier this year we released a free skin called SwiftBlue. Now we're happy to announce that we've just released another HTML5 mojoPortal skin called Mocha. Mocha is SwiftBlue's Sister skin, and more are to come. It was designed as a contribution to the mojoPortal community and the html5mojo project. Like SwiftBlue, Mocha was created with semantics-friendly HTML5 Markup.

Check out the live demo website to see what your mojoPortal website could look like today!

Features

As with all i7MEDIA Skins, Mocha has detailed style for every feature found in mojoPortal, most notably for the Event Calendar, Event Calendar Pro, Blog, Forums, Feed manager, and jPlayer Media Players.

Other features include:

• Mocha includes support for a few basic content templates, including a fancy content slider. Making use of these templates will help you to create easy and professional content formats, so that you can spend less time worrying about layout and more time perfecting the content that your viewers came to see.
• We've created a custom design for the dedicated Sign in and Register pages on Mocha. This way it is easier for your users to interact with the site, without having to sort through other page content.
• Mocha utilizes a fancy User Bar based on Twitter Bootstrap. The bar includes a lot of features, links to mojoPortal, member profiles, and the ability for administrators to toggle the settings and edit links - this way you can see your site the way your users do. But mostly it's just beautiful.
• HTML5 is an important new language that is of high interest to website owners, this is because of the implications for SEO, among other things. Mocha is HTML5 Friendly. Not sure what this means? We explain more on the live demo site.

Support

The Mocha help center is built to ensure that your time working with Mocha is successful.
The skin help center covers topics like:

• Installation of Mocha
• A basic introduction to CSS Classes and how they effect you in mojoPortal
• An explanation of how to use the Mocha Content Templates
• A FAQ to answer common questions about Mocha
• A form so that you can request help, and get answers to questions that weren't answered on the FAQ.
• Another form so that you can report any bugs you find. This is important because we'll be trying to keep the skin up to date. We feel that getting input from the users of the skin is the best way to make sure the skin is maintained well over the course of mojoPortal updates.

Check out the Mocha Skin-Help center now.

Mocha and SwiftBlue are just another way you can make your mojoPortal site shine with a little help from i7MEDIA. Keep your eyes out, we'll be releasing more free skins soon!
Interested? Check out the Mocha live demo site

.prettycyclenav .cyclenav {
	margin: 5px 0;
	text-align: center;
}
	
.prettycyclenav .cyclenav a {
	text-indent: -9999px;
	line-height: 40px;
	background-color: #A5A5A5;
	width: 14px;
	height: 14px;
	overflow: hidden;
	display: inline-block;
	margin: 0 5px;
	text-decoration: none;
}
	
.prettycyclenav.withnumbers .cyclenav a {
	padding: 3px;
	font: 14px/1 'Rationale', Charcoal, serif;
	text-indent: 0;
	color: #fff;
}
	
.prettycyclenav .cyclenav a:focus,
.prettycyclenav .cyclenav a.activeSlide {
	background-color: #e26917;
}	

.prettycyclenav .cyclenav a:hover {
	background: #636363;
}

SwiftBlue is the first in a series of template skins developed by i7MEDIA for mojoPortal. It was designed as a contribution to the mojoPortal community and the html5mojo project. SwiftBlue has been created with semantics-friendly HTML5 Markup.

Check out the live demo website to see what your mojoPortal website could look like today!

Features

As with all i7MEDIA Skins, SwiftBlue has detailed style for every feature found in mojoPortal, most notably for the Event Calendar, Event Calendar Pro, Blog, Forums, Feed manager, and jPlayer Media Players.

Other features include:

• Support for a number of content templates is included in SwiftBlue. Using these templates makes it easy to make your data appear on the page in a nice professional format. It doesn't cover everything, but it will help you with the basics so you can spend more time perfecting your content and less time worrying about basic layout.
• SwiftBlue is HTML5 friendly. Not sure what this means? We explain more on the live demo site.
• Custom styled dedicated Sign in and Register pages, this way potential users don't have to sort through the regular page content to find what they need to interact with the site.
• A fancy User Bar based on Twitter Bootstrap. The bar includes a lot of features, links to mojoPortal, member profiles, and the ability for administrators to toggle the settings and edit links - this way you can see your site the way your users do. But mostly it's just beautiful.

Support

The SwiftBlue help center is built to ensure that your time working with SwiftBlue is successful.
The skin help center covers topics like:

• Installation of SwiftBlue
• A basic introduction to CSS Classes and how they effect you in mojoPortal
• An explanation of how to use the SwiftBlue Content Templates
• A FAQ to answer common questions about SwiftBlue

And if that's not enough, we've set up an easy way for you to request help or report a bug. Check out the SwiftBlue Skin-Help center now.

SwiftBlue is just another way you can make your mojoPortal site shine with a little help from i7MEDIA.
Interested? Check out the SwiftBlue live demo site

Well, here's an extremely easy way to hide the links without sacrificing the usability of mojoPortal. This solution is completely skin based so it doesn't require any additions to the mojoPortal core.

First, we add the following to our skin script (see "Optimize Your mojoPortal Skin Scripts" for more info):

function HideEditLinks() {
	$(".modulelinks").hide();
	$(".ModuleEditLink").hide();
}

function ShowEditLinks() {
	$(".modulelinks").show();
	$(".ModuleEditLink").show();
}

$(document).ready(function() {
	var editLinksState = Get_Cookie('editLinksState');
	if (editLinksState != null) {
		if (editLinksState == 'hidden') {
			HideEditLinks();
		}
		if (editLinksState == 'visible') {
			ShowEditLinks();
		}
	}

	$("a#togglemodulelinks").click(function() {
		editLinksState = Get_Cookie('editLinksState');
		if (editLinksState == null || editLinksState == 'visible') {
			HideEditLinks();
			Set_Cookie('editLinksState', 'hidden')
		} else if (editLinksState == 'hidden') {
			ShowEditLinks();
			Set_Cookie('editLinksState', 'visible')
		}
	});
});

Second, we add the following inside the AutoHidePanel in the layout.master:

<a href="#" rel="nofollow" id="togglemodulelinks">Toggle Edit Links</a>

The code above simply hides the links if they're shown and displays them if they're hidden.

Placement of the "Toggle Edit Links" link can be done with CSS but it should definitely be inside of the AutoHidePanel. The AutoHidePanel will ensure that the link isn't shown unless one of the Admin Toolbar items is shown. You could add another AutoHidePanel to the layout.master but there's no point in increasing page load if you don't have to.

Happy mojo-ing!

Here's the code for it:

<portal:WelcomeMessage id="WelcomeMessage" runat="server"
	CssClass="greetinglink"
	RenderAsListItem="true"
	OverrideFormat="Welcome, <a id='lnkMyAccount' href='https://i7media.com/Secure/UserProfile.aspx' title='Manage your User Account'>{0}</a>" />

The {0} is where the user name will be placed.

And that's that. Happy mojo-ing!

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 the following to your layout.master. I usually add this right after the <asp:ScriptManager control.

   <portal:SkinFolderScript ID="sfs1" runat="server" ScriptFileName="skinscript.js" AddToCombinedScript="true" />

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 SuperFishmenu 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.
//  = 
//  ==========

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

For introductory information on the LoginView control, please review the MSDN Documentation for it.

An example scenario is: The client wants to display a Login control on every page and when the user is logged in, some links should be present in place of the login control. A title should be present above the control with the text "Please Sign In: " for Anonymous Users and the text "Welcome Back" for Authenticated Users.

For this scenario, the solution would be to place a LoginView control in the layout.master with the mp:Login control and "Returning Visitors ..." title inside the AnonymousTemplate. The links and the "Welcome Back" title will be placed in the LoggedInTemplate. You may recognize that the Portal:WelcomeMessage control uses the OverrideFormat property as discussed in our Customizing mojoPortal's Welcome Message for Logged In Users article.

<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

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.

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="https://i7media.com/Data/Sites/1/blogdata/lightbox-dsc06798-full.jpg" rel="gb_image[]" title="4th &amp; Broadway, San Diego, CA (C) Joe Davis">
	<img alt="" src="https://i7media.com/Data/Sites/1/blogdata/lightbox-dsc06798-thumb.jpg" width="133" height="100" />
</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="https://i7media.com/ClientScript/lightbox/jquery.lightbox-0.5.css" type="text/css" rel="stylesheet" />
      <script type="text/javascript" src="https://i7media.com/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!

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!

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.

I am currently working on my church's website (http://acckc.org/mojo) and it uses this menu style.

To achieve this style of menu, you must add a few controls to your layout.master file.

Place this code under the HTML <form> tag with the other SiteMapDataSource controls.

<asp:SiteMapDataSource ID="level3datasource" runat="server" ShowStartingNode="true" />

Change the PageMenu control to the following and then move it to the desired location within the layout.master file. This control will show 2nd tier pages.

<portal:PageMenu id="PageMenu1" runat="server" TopLevelOnly="true"
	UseTreeView="false" HideMenuOnSiteMap="false" UseSpanInLinks="true"
	Direction="Horizontal" DynamicDisplayLevels="0" />

Finally, add a second PageMenu control. This control will show 3rd tier and lower pages.

<portal:PageMenu id="PageMenu2" runat="server"
	UseTreeView="true" TreeViewShowExpandCollapse="true"
	StartingNodeOffset="2"  SiteMapDataSource="level3datasource" />

For skinning of the menu, please refer to the stylemenu.css file in the i7MEDIA-2horizontalmenus skin.