Posts in Category: Site Design

mojoPortal and jQueryUI ThemeRoller

I was recently reading the documentation for The jQuery UI CSS Framework, and it got me thinking about making it possible to style mojoPortal content instances using it. Then a user asked in the forums about being able to skin mojoPortal using jQueryUI ThemeRoller, and that got me thinking further, what if I could create a mojoPortal skin where the whole site is a jQuery UI widget and could be styled by jQuery UI themes? That would be kind of cool, wouldn't it? 

It doesn't take much to make a feature instance style as a jQuery Widget, skeleton markup like this will do the trick since the jQuery UI CSS is already included in the page:

<div class="ui-helper-reset ui-widget ">
 <h2 class="ui-widget-header ui-corner-top">Heading goes here</h2>
 <div class="ui-widget-content ui-corner-bottom">
   This is styled with jQuery UI!

So I just needed a way to make mojoPortal features render that kind of skeleton and it wasn't difficult to achieve given that I had already implemented a solution for rendering the special markup needed for Artisteer designs. I just added some more options to the rendering that can be configured from the file in a mojoPortal skin. It took me maybe 10 minutes and I had it working for proof of concept. It was much easier than implementing support for Artisteer because we already had the needed markup structure, all we really needed was an option to render the CSS class names for jQueryUI. So I made a new skin and modified the layout.master to use the same widget skeleton for the site as a whole so that the jQuery UI theme pretty much controls the look of the site. There isn't yet any themeable menu for jQuery UI, so I used the jQuery Superfish menu that we were already using in a few other skins and used neutral colors and color inheritance to make it look reasonably well with all of the jQueryUI themes, though it looks better with some than others. It would be easy for users to copy this skin and change the menu colors to match better with a specific theme. The jQuery UI CSS framework doesn't have style for all purposes and features, though, so additional CSS is needed for some features, and again I tried to make it use neutral colors so it would not clash with any of the jQuery UI themes.

I'm a ThemeRoller baby, bound to roll all over you...

ThemeRoller makes me think of James Taylor singing with a lisp! :-D

Once I had the new skin basically working it begged for a theme switcher so I could see the magic instantly of changing the jQuery UI theme. There are about 25 or so standard jQuery UI themes that can be loaded from the Google CDN (Content Delivery Network) which is where we load jQuery and jQuery UI javascript and CSS from by default. You can also make your own custom jQuery UI themes with ThemeRoller, but if you do that then you need to host the jQuery and jQuery UI files locally as documented here.

You can control the list of available themes in the theme switcher from a config setting, that you can override in user.config, and you can set the default theme in the layout.master file of the skin like this:
<portal:StyleSheetCombiner id="StyleSheetCombiner" runat="server" JQueryUIThemeName="eggplant" UseIconsForAdminLinks="false" />

The theme switcher can be removed from the layout.master or disabled or limited by roles if you don't want a user to be able to change the theme. It is basically setting a cookie based on the dropdown choice, and then setting the jQuery UI theme based on the cookie.

Maybe it is too widgety looking for most sites, but it might be useful for some kinds of sites or web applications built on mojoPortal. You could easily add a div above and/or below the menu to make room for a banner ad or some other additional content.

Anyway, it was easy and fun to implement. It is in the source code repository now but requires a build of the latest source code to work. It will be included in the next release. You can try it now on by going to Administration > Site Settings and choose the jqueryui-1 skin. 

So basically the new skin jqueryui-1 is like many skins in one since there are many jQueryUI themes available and you can roll your own with ThemeRoller.

Here are a few screenshots showing a few of the jQueryUI themes.

mojoportal with jquery ui eggplant theme

mojoportal with jquery ui excite bike theme

mojoportal with jquery ui dark hive theme

mojoportal with jquery ui humanity theme

So, look for this in the next release or if you are a developer you can get the latest code from the repository. I think this gives us one more useful approach to skinning mojoPortal and hope you find it useful.


Follow us on twitter or become a fan on Facebook

follow us on twitter become a fan on facebook

Gravatar Joe Audette is the founder of the mojoPortal project and was the primary developer until February 2017.

New Metro Transit Site Running on mojoPortal

Just a quick post to highlight an impressive new site running on mojoPortal. The Metro Transit site for the Minneapolis/St. Paul area is now running on mojoPortal. The site is very attractive and has a lot of custom features developed to support Metro Transit system needs.

screen shot of

John Sanborn, the developer of the site has done a great job with this site and because of all the existing functionality in the mojoPortal framework, was able to focus on developing his needed custom functionality. Quoting John:

I have to tell you, working with mojoPortal has been a joy. Your work is inspiring and all the documentation on the site and access to the forums have really made this whole project so much easier.

The marketing people that manage all the content and input the news and alerts and maintain all the content are pretty excited about all this.

It is great to hear the success stories from our community. If you've done something really impressive with mojoPortal, let us know and maybe we will feature your site in a blog post too!


Follow us on twitter or become a fan on Facebook

follow us on twitter become a fan on facebook

Gravatar Joe Audette is the founder of the mojoPortal project and was the primary developer until February 2017.

TRIAD Communications - Our Newest Consulting Partner

Just a quick post to welcome our newest consulting partner, TRIAD Comunications. TRIAD has already deployed 16 sites using mojoPortal and all of them are very nicely done.

My favorite is the site for Cuyahoga Valley National Park. I've been watching the Ken Burns DVD box set about the National Parks with my Dad over the last few weeks, so I was very pleased to see a National Park web site using mojoPortal.

I look forward to seeing more mojoPortal sites from TRIAD.

Gravatar Joe Audette is the founder of the mojoPortal project and was the primary developer until February 2017.

mojoPortal Released

I'm happy to announce the release of mojoPortal, available now on our download page.

Feature Improvements

  • Image Gallery now uses friendlier file names and you can optionally move existing Galleries below the /Data/Sites/[SiteID]/media folder to make it easy to browse gallery images from the editor. Just add this setting to your user.config file: <add key="ImageGalleryUseMediaFolder" value="true" />
  • People often don't notice that the forums are integrated into site search, so we added a search box in the forums that redirects to site search and filters for forum content.
  • Added a search feature in the Url Manager to make it easier to find a URL when you have lots of them.
  • Upgraded FCKeditor from 2.6.5 to 2.6.6
  • Updated config setting to use new jQuery 1.4.2
  • Updated Russian resources files from Alexander aka SkySandy
  • Updated Portuguese resources from Leonard Pedrini

Bug Fixes

  • Fixed a bug where re-sorting root pages in a multi-site installation caused root level pages in all sites to be re-sorted and with lots of sites and pages, this could result in it becoming impossible to sort pages in some cases.
  • Fixed a bug where if you tabbed out of the page name in page settings or out of the blog title when updating a blog post, a new URL was being suggested when the name or title did not change which could lead to unintended URL changes.
  • Fixed sitemap so that it uses https URLs if the page requires SSL to avoid an extra redirect
  • Fixed bug in Image Gallery where portrait images were not creating correctly sized thumbnails or web images.
  • Fixed issue where the content rating control did not work well in some cases

Thanks to all community members for providing bug reports and feedback, especially Alexander aka SkySandy for his work in diagnosing bugs and suggesting fixes.

Related Product Updates

Just as we had to make changes in mojoPortal to support Artisteer templates, we also made corresponding changes in our add-on products Event Calendar Pro and Form Wizard Pro. If you are an existing customer who already purchased these products, you should upgrade them at the same time as you upgrade mojoPortal. You can download the latest version by signing into this site as the same user who made the purchase, then visit the "My Account" link at the top of the page and look under the Order History tab where you will see links for your products

Follow us on twitter or become a fan on Facebook

follow us on twitter become a fan on facebook

Gravatar Joe Audette is the founder of the mojoPortal project and was the primary developer until February 2017.

mojoPortal Released

I'm happy to announce the release of mojoPortal, available now on our download page.

More Editor Improvements

The File Browser/Uploader that we implemented previously in TinyMCE is now also working in FCKeditor and CKeditor so that users have a common browse and upload experience in each of these editors. So we now have equivalent functionality in TinyMCE and FCKeditor but in CKeditor we do not yet have integration with our content template system or content style system.

New User Avatar System

We've had a lot of requests for an avatar system that allowed users to upload their own avatar. There is a new setting for Avatar System in Site Settings where you can choose User Upload or Gravatar. If user upload is enabled then an upload button will appear on the user profile page allowing them to upload an image. The image will be resized according settings in the Web.config file for AvatarMaxHeight and AvatarMaxWidth.

Image Gallery Improvements

We now have support for the Vertigo Slideshow which uses Silverlight to create a really nice slide show of images in the gallery. You can enable it from settings in the gallery. Since the Vertigo Slideshow can also consume images from your Flickr account, we also added a new Flickr Gallery  Feature which also uses the Vertigo Slideshow.

silverlight slide show screen shot

Blog Improvements

We've added support for using IntenseDebate or Disqus for the comment system in the blog. For the moment I recommend IntenseDebate because there are some issues I encountered with Disqus. Specifically, I could not get it to work correctly n IE 8 though it works reasonably well in Firefox and Chrome. But even when using Firefox or Chrome it does not work correctly if you try to post a comment as an anonymous guest. The integration steps are trivial so I don't think I've done it wrong but believe the problem can be fixed on their end. I've let them know about it and hope they can resolve it. Give it a try if you like but be aware about these issues since at the time of this writing they are not resolved. I'm now using IntenseDebate in this blog. I implemented it such that if you have existing posts with comments in the internal comment system those posts will continue to use the internal comments but new posts will use the current setting.

Its now also possible to post future posts from Windows Live Writer. Previously it was ignoring the publish date passed in from Live Writer.

Its also now possible to require users to sign in to view the full blog post when using excerpts in the main blog page.

Re-Organized Css In Included Skins and a New Skin

Based on community feedback I've re-organised the css for included skins to make it easier to find what you are looking for. Previously we had things separated a little too cleverly with colors in one css, borders in another and text related settings in another. This made the css a little less approachable and less intuitive. I've combined those files into one style.css file and renamed some other css files so they sort together in the file system and are easier to find. You can of course organize the css files in a custom skin any way you like by listing which file to include in the style.config file. Ultimately they are all combined and minified into one request by our CSSHandler. The style config file for included skins now are including the following files:

<file csswebconfigkey="YUITabCss" imagebasewebconfigkey="YUISkinImagePath">none</file>
<file cssvpath="/ClientScript/oomph/oomph.css" imagebasevpath="/ClientScript/oomph/">none</file>
<file cssvpath="/Data/style/cluetip/jquery.cluetip.css" imagebasevpath="/Data/style/cluetip/">none</file>

so we still have some separation but the main style.css has most of the common css.

We also have a nice new skin with a cool menu style thanks to Joe Davis of i7MEDIA

What Else?

Updated Polish Translation - thanks to Przemyslaw Luniewski.

Updated Italian Translation - thanks to Diego Mora.

A number of bug fixes for things reported in the forums since the last release.

nominate mojoportal for the 2009 cms awards

Gravatar Joe Audette is the founder of the mojoPortal project and was the primary developer until February 2017.