Blog

jQuery UI + mojoPortal = happiness

Isaac Hall — Fri, 14 Dec 2012 18:46:00 GMT

What is jQuery UI?

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:

Inside of the "custom-theme" folder, there are two css files and a folder.
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".
Copy the renamed images folder and css file into your skin.
Open the "style.config" file within your skin and add a line that corresponds with the name of the new file.
In example: style-jquery.css — where "style-jquery.css" is the name of the css file you copied from the folder.
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.
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.
Next, open your "layout.master" file, and search for: . 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:

Open the layout.master file in your skin.
Search for the following line: .
Make sure that the ScriptLoader has the following key: AssumejQueryUiIsLoaded="true"
Once that's done, add the following line somewhere under the ScriptLoader:
- [3]
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.

Isaac Hall ...

Mocha Released

Isaac Hall — Wed, 24 Oct 2012 16:01:00 GMT

Announcing the release of Mocha v1

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!

Mocha is an HTML5 mojoPortal skin which was designed by i7MEDIA.

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

Isaac Hall ...

Styling the mojoPortal HTML SlideShow Pager

Joe Davis — Mon, 24 Sep 2012 17:17:00 GMT

Back in March of 2011 we added the "Pager" option to the Slide Show feature of the mojoPortal HTML Module. Since that time, we've seen some requests for styling the pager links so here's a simple style we use on this site. It can be adapted to any design and doesn't use any images. To use this CSS, just copy it to one of your skin's .css files and then apply the "prettycyclenav" class to the "Custom CSS Class" option in the HTML module settings. If you want the slide number to be shown within the navigation, add the "withnumbers" class to the "Custom CSS Class" option.

.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;
}

Joe Davis ...

SwiftBlue v1 Released

Joe Davis — Wed, 15 Aug 2012 14:26:00 GMT

Announcing the release of SwiftBlue v1

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!

SwiftBlue is an HTML5 mojoPortal skin which was designed by i7MEDIA.

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

Joe Davis ...

Hide Module Settings and Edit Links

Joe Davis — Mon, 11 Jun 2012 03:03:00 GMT

One of the things that most of our users like the most about mojoPortal is the easy access they have to module settings and edit screens. Sometimes, people ask if they can hide these links (or icons if the skin uses those) while remaining logged into the 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:

Toggle Edit Links

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!

Joe Davis ...

Link mojoPortal Welcome Message to User's Profile

Joe Davis — Tue, 05 Jun 2012 02:01:00 GMT

The mojoPortal Welcome Message control can be configured to link to the logged-in user's profile. This is useful if you want to have a message like "Signed In As: USER NAME" and have USER NAME link to the user's profile settings. Here's the code for it:

	{0}" />

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

And that's that. Happy mojo-ing!

Joe Davis ...

Optimize your mojoPortal Skin Scripts

Joe Davis — Tue, 31 Jan 2012 16:37:00 GMT

Almost every single skin we develop uses a couple javascripts but even the addition of one script can slow the speed of a website. We use a fairly simple process to combine as many of our scripts into one file and then using a neat mojoPortal control, we add that script the combined site script. The combined site script contains most of the scripts mojoPortal uses for things like site cookies, asp.net css friendly adapters, etc… This process will result in fewer files being delivered to the browser, thus improving performance (somewhat).

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

Create a new js file in your skin directory, I usually name it skinscript.js.
Add your javascript to the new file. Don't use

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:

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!

Joe Davis ...

mojoPortal Online User Group: A Great Value Add

Joe Davis — Tue, 13 Jul 2010 16:47:36 GMT

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.

Joe Davis ...

Lifetime Licensing on mojoPortal Pro Products

Joe Davis — Fri, 09 Jul 2010 21:24:00 GMT

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.

Joe Davis ...

mojoPortal Page Titles

Joe Davis — Tue, 18 May 2010 23:12:17 GMT

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

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 \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" %>

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.

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

Happy mojo-ing.

Joe Davis ...