Expect Much More to Come!

Framework was always intended to be a very basic skin which we would then build our designs on top of. With this new project, we're going to have to change that direction a little bit, making improvements for its use by all of you. For instance, because it's been a very long time since any of our clients used the Webstore feature in mojoPortal, the current version of Framework in this release doesn't include styles for it. We will be fixing this, as well as adding styles for all of the Pro modules in the near future, fixing any bugs that arise, and making quality-of-life improvements for the end users where we can.

We want to ensure that everything is as good as possible while also keeping the skins as small as possible, since after all Framework is intended to be a base that you use to build your own design on top of, which is why we are also going to be adjusting mojoPortal's core code to better suit being used with skinning systems like Bootstrap and will adjust the Framework skin as needed to reflect those changes. We believe we can greatly reduce the amount of CSS needed in Framework by doing this (though it is already reasonably small).

While the skins in this first release are primarily targeted at other developers, who we want to provide with a solid foundation for skin creation in mojoPortal, we believe they will work well for anyone, developer or not, who wants to create a very clean mojoPortal site.

How Can I use it?

Using the new skins from this project is incredibly easy, here's the step-by-step:

1. Download the skins from here.
2. Extract the zip file you just downloaded.
3. Each of the skins is included in the root of the zip in their own folder. Choose which skin(s) you'd like to use, and copy those folder(s) into the Data/Sites/1/Skins directory in your mojoPortal installation.*
4. Sign into your mojoPortal site as an administrator.
5. Click "Administration", then "Site Settings", and on that page, scroll down until you find the select input labeled "Skin".
6. Your new skin(s) should be visible in the drop-down, select it and hit save.

That's it, you should now see the skin on your own site!

* Note: If you have a multiple site install, change the /1/ in the path described in step 3 to be /#/, where # is the site number of the mojoPortal site you'd like the skin to appear on.

How can I contribute?

We have already begun tracking issues in the project's GitHub repo, and look forward to community involvement as the project evolves. Please report any issues you notice, and feel free to do a pull request if you've managed to fix an issue yourself.

You can also create your own Bootswatch skins out of Framework, and submit them for inclusion in the project, which would be an awesome help.

Buckeye Veterinary Clinic

Columbiana County Dept of Jobs and Family Services

Towpath Credit Union

Wiremen's Credit Union

Controlled Access Turnstiles

Show us your stuff! We'd love to hear about the sites you are bringing online with mojoPortal. If you have a high profile site or a design that you're particularly proud of, or a site showing custom features you've built on mojoPortal, let us know, maybe we'll feature your site(s) in a blog post.

Next we have Altogether Better, designed by our friends across the pond at DMSQD Creative Marketing Communications.

Show us your stuff! We'd love to hear about the sites you are bringing online with mojoPortal. If you have a high profile site or a design that you're particularly proud of, or a site showing custom features you've built on mojoPortal, let us know, maybe we'll feature your site(s) in a blog post.​

Follow us on twitter or become a fan on Facebook

Boy Scouts of America - Heart of America Council website was designed and implemented by our friends at i7MEDIA. 

Boost Marathon provides a world wide marathon calendar and sells training programs for both half marathon and full marathon. The site is used in 150 countries and in 20 languages. Traffic after only a couple of months is evenly distributed among US, Europe, South America and Asia. A cloud based hosting ensures quick response times everywhere.

Salary Solutions was designed by DMSQD

We'd love to hear about the sites you are bringing online with mojoPortal. If you have a high profile site or a design that you're particularly proud of, or a site showing custom features you've built on mojoPortal, let us know, maybe we'll feature your site(s) in a blog post.​

Follow us on twitter or become a fan on Facebook

 

SpearFysh is another new mojoPortal site recently brought to our attention and designed by  Evolve Creative Group.

 

We'd love to hear about the sites you are bringing online with mojoPortal. If you have a high profile site or a design that you're particularly proud of, or a site showing custom features you've built on mojoPortal, let us know, maybe we'll feature your site(s) in a blog post.

Follow us on twitter or become a fan on Facebook

Check out the Mocha skin demo site which explains some of the features of the skin and has a download link. Its another beautiful design that shows what is possible with mojoPortal. Huge kudos to i7MEDIA for sharing this with the community!

 

You can check it out on their Hi5 demo site and you can download it from the html5mojo download page.

Big thanks to GloriaTech for their contribution! We hope the continued progress with this project will inspire more designers to get involved.

THOMARIOS is a diverse corporation, with comprehensive services in Construction Management, Design Build, General Construction, Commercial and Industrial Painting and Coatings, Powder Coating, Historic Spacecraft, Aircraft, & Building Restoration.

 

For well over a century, Summit County Children Services (SCCS) has improved the lives of abused and neglected children and their families by promoting child safety, permanency and well-being.

 

Take a peek at some of these other sites brought online by TRIAD/Next Level, they all feature great designs and illustrate the flexibility of mojoPortal.

• Cohen & Company Certified Public Accountants
• BCG & Company
• BCG Wealth Advisors
• Glenbeigh Alcohol and Drug Treatment Services
• The Giving Doll
• Valmark Securities
• Ask Gilby
• Community Support Services

We'd love to hear about the sites you are bringing online with mojoPortal. If you have a high profile site or a design that you're particularly proud of, or a site showing custom features you've built on mojoPortal, let us know, maybe we'll feature your site(s) in a blog post.

Follow us on twitter or become a fan on Facebook

Micromo has provided the widest range of high quality rotary and linear custom motion solutions to markets such as medical, defense and robotics. A member of the global FAULHABER Group, MICROMO brings together cutting edge, high performance and energy efficient technologies from around the world, such as brushed, brushless, stepper, thin profile, piezoelectric and linear dc motors, encoders and gearheads.

 

Banking You Can Trust is an advocacy group for credit unions. In addition to the design work, i7MEDIA built a custom feature to help users find credit unions as part of this project.

 

We'd love to hear about the sites you are bringing online with mojoPortal. If you have a high profile site or a design that you're particularly proud of, or a site showing custom features you've built on mojoPortal, let us know, maybe we'll feature your site(s) in a blog post.

Follow us on twitter or become a fan on Facebook

 

I really like the very clean calendar styling of this skin.

Huge thanks to the i7MEDIA team for sharing this nice new skin with the mojoPortal Community! They also have some more skins in their pipeline that they plan to share soon, so stay tuned for more announcements in the near future. I'd like to encourage more designers to contribute and share and hope this gets the ball rolling.

Follow us on twitter or become a fan on Facebook

In mojoPortal CMS design is completely de-coupled from functionality so it can be styled in almost limitless ways by good designers. However, in spite of this, people often judge mojoPortal CMS by the included skins and since the few skins that we have been shipping with mojoPortal are created by developers who are not designers we believe that the included skins have not presented mojoPortal in its best light. Therefore we invite/beg real designers to get involved with this project to help produce some really nice looking modern HTML 5 skins for mojoPortal. We need your help!

Follow us on twitter or become a fan on Facebook

What's New?

Full Support for HTML 5

New example skins based on Twitter bootstrap, and Zurb foundation, including better support for use of newer html 5 structural elements (like article, nav, and aside) configured from theme.skin. In these example skins we are using article and header for HTML Content and blog features and aside for page and blog side columns as well as nav to wrap the menus and paging links. There are some comments about the use of these elements as well as links to advice about their usage contained in the style.config file of the example skins. Studying the theme.skin files for these skins is a good way to learn about a lot of configuration options for layout and rendering that are not yet documented in detail elsewhere. These example skins are not prettied up, they are meant to be used as a starting point for designers who will pretty them up. Stay tuned for an announcement coming up soon about a new project for mojoPortal skins based on HTML 5, we will be looking for designers to participate in this project to help show off the full design potential of mojoPortal. The new example skins are in the extra-skins.zip file on our codeplex download page but later we will be moving them into the new project for HTML 5 Skins for mojoPortal where we hope to expand on the examples and get more designers involved.

We've also added support for LESS by integrating DotLess. .less files can be used in skins and will be combined and converted to CSS using DotLess by our CSS handler. We have one example skin based on Twitter bootstrap that uses raw .less files and one that uses only CSS. See the article Using HTML 5 with mojoPortal for more details.

We've also revamped most of the Administrative pages to make the markup more consistent and easier to style.

Support for Facebook Comments

We've added support for Using Facebook Comment System on pages and in the Blog as an alternative to our support for Disqus and IntenseDebate.
Requires adding this in layout.master file of the skin, just above the <form element:
<portal:FacebookSdk ID="fbsdk" runat="server" />
and a Facebook AppId must be entered either in Site Settings or in user.config

<add key="FacebookAppId" value="xxxxxxxxxxxxxx" /> 

The Blog also now supports showing related posts based on tags/categories.

Forum Improvements

Forum threads are now indexed as one item in the search index where previously each post was a separate item which could produce multiple search results for the same thread. Use of the new indexing approach requires adding this to user.config:
<add key="Forum:AggregateSearchIndexPerThread" value="true" />
and rebuilding the search index. I think this change has helped a lot on this site, it is much easier to find things in the forums now using search.

HTML Content Improvements

New options in Html Content feature to show the created date, created by, last modified date and last modified by.
New option for highlighting the differences in text when comparing a draft to the live version or when comparing to version history

Image Gallery Improvements

Added an option to use Nivo Slider in the image gallery.
Added a config setting to allow automatically deleting images if the image gallery instance is deleted. By default, it does not do that since you may have used image gallery images in other content.
To enable it, add this to user.config:
<add key="ImageGallery:DeleteImagesWhenModuleIsDeleted" value="true" />

Newsletter Improvements

Added button to re-send verification email for unverified addresses
Added functionality to allow opting in all site members to a newsletter if they have not previously opted out of any newsletters

Miscellaneous Improvements

Changed from RewriteUrl to Server.TransferRequest (based on a config setting and only works in Integrated Pipeline mode), this makes IIS log the friendly URL instead of the real URL (ie Default.aspx?pageid=x) making the IIS logs more useful. With the EU cookie law and growing use of Do Not Track, it is becoming more problematic to rely solely on google analytics for traffic analysis, we expect to see more people going back to log analysis.

Upgrade to the latest June 2012 release of AjaxcontrolToolkit. This also required new releases of Form Wizard Pro, Event Calendar Pro, and Web Invoice Pro because they must use the same version of the toolkit controls as mojoPortal. Customers who previously purchased these add-on features can download the latest version from their purchase history under "My Account"

Form Wizard Pro also has some new features including an HTML question type that shows a simple WYSIWYG editor, an Email question type that automatically validates email. A new option to send the submitter a copy of the form submission data, if enabled it will be sent to each email address from an Email question type on the form. There is also a new option to allow redirecting to a different page after the form is submitted instead of just showing the thank you message.

Add support for settings width of google and Bing maps using a percent instead of pixels
New sorting options on the member list page to allow sorting by join date so it is easy to find new members
Updated to the new Bing Search API

New provider plugin system for user profile updated handlers to allow custom code to execute when a user profile is updated (thanks to Huw Reddick).
New provider plugin system for user pre-delete handlers allows custom code to execute when a user is about to be deleted

Upgrade to TinyMCE 3.5.4
Upgrade to a nightly build of CKeditor to resolve a bug where the file browser dialog would not open in Chrome web browser

various minor improvements and bug fixes for things reported in the forums since the last release.

As always, it's a good idea to backup your site and database before upgrading and review the upgrading documentation.

Follow us on twitter or become a fan on Facebook

Here is a full list of new sites they let me know about recently followed by screen shots of a few of them:

• A & C Welding
• The Burton D. Morgan Foundation
• Cardinal Retirement Village
• Cohen & Company Certified Accountants Career Site
• Church of Our Saviour Episcopal - Akron Ohio
• Leadership Akron
• Qylex IT
• Roderick Linton Belfance LLP Attorneys at Law
• Rock and Recovery - Entertaining and Meaningful Music with Positive Messaging
• Summit Education Initiative
• Soprema Liquids - Complete Waterproofing Solutions
• Weathervane Playhouse
• Boys and Girls Club of the Western Reserve

All of these sites have very professional designs and are worth a look, here are screen shots of a few of them:

We'd love to hear about the sites you are bringing online with mojoPortal. If you have a high profile site or a design that you're particularly proud of, or a site showing custom features you've built on mojoPortal, let us know, maybe we'll feature your site(s) in a blog post.

Follow us on twitter or become a fan on Facebook

This month is going by quickly but I wanted to get in our usual monthly post of mojoPortal sightings. DM2 Creative Marketing Communications has been cranking out the mojoPortal sites lately.  They were also the designers of last months sites, and of course we are fans of their work since they also created the design for this site.

Road Tankers Northern Ltd is the UK's leading tanker specialist.

Switch Training and Consultancy Limited provides training and consultancy to help organizations better manage their finances.

We'd love to hear about the sites you are bringing online with mojoPortal. If you have a high profile site or a design that you're particularly proud of, or a site showing custom features you've built on mojoPortal, let us know, maybe we'll feature your site(s) in a blog post.

Follow us on twitter or become a fan on Facebook

and Total Waste Managers Ltd

Both sites were designed by DM2 Creative Marketing Communications in the UK, the same designers who came up with the latest design for this site.

We'd love to hear about the sites you are bringing online with mojoPortal. If you have a high profile site or a design that you're particularly proud of, or a site showing custom features you've built on mojoPortal, let us know, maybe we'll feature your site(s) in a blog post.

Follow us on twitter or become a fan on Facebook

Many of you may already know that I am not a designer myself, though I'm a pretty good mechanic when it comes to CSS and I can implement designs that others come up with, I lack any talent for creating designs from scratch. I'm just a developer, I can make it work well but I can't make it pretty, I need others to help with that.

The previous skin that we've used for the last 4 months or so was really something that Joe Davis had only intended as an example skin we could ship with mojoPortal, he never intended it to be the new design for mojoPortal.com, but I liked it and thought it was time for a change since the design we had before that was just some free design I had found on the internet. But after the change we got lots of complaints and only a few people said they liked it and I began to realize that not only am I not a good designer, I'm not really even a very good judge of design. However, I really did not want to go back to the previous design so I asked Joe and Mark to help, and this new design that we've launched today is the result of their awesome help.

Again huge thanks to Mark Asquith and his associates and to Joe Davis for making this site look great!

Follow us on twitter or become a fan on Facebook

TRIAD Communications, based out of Cuyahoga Falls Ohio, has done quite a lot of really nice designs with mojoPortal and we've featured some of their sites before. 

Also this month we'd like to highlight Aquest IT based out of Greensboro, NC. They also have done quite a few sites with mojoPortal including their own.

They also implemented 99Blocks Magazine, Downtown Greensboro's Magazine.

Greensboro is not far from mojoPortal headquarters here in Charlotte, NC, so it is nice to see designers nearby using mojoPortal, and a good testament to mojoPortal to see design firms that not only use mojoPortal for their customers but also for their own sites.

We'd love to hear about the sites you are bringing online with mojoPortal. If you have a high profile site or a design that you're particularly proud of, or a site showing custom features you've built on mojoPortal, let us know, maybe we'll feature your site(s) in a blog post.

Don't forget if you haven't already, please vote for mojoPortal in the 2011 Open Source CMS Awards. Thanks to your nominations we are a finalist and now we need your vote.   

Follow us on twitter or become a fan on Facebook

Please join me in congratulating these guys on winning 3rd place in the 2011 Imagine Cup in Greece with an application they built on top of mojoPortal.

http://www.youtube.com/watch?v=XClqjmjXw24
Note that the audio portion of the video is in Greek, but if you enable closed captioning it has English captions.

A description of the project from Panos Kakoulidis:

Multimedu is the first complete system that allows students with special needs to have access to the multiple capabilties of the Internet, intergrating them to the academic and the wider community.

System consists of 4 interconnected subsystems that support the significant processes of learning and participation:

1. DICTIONARY
2. MULTIMEDIA LIBRARY
3. PARALLEL PRESENTATIONS
4. SOCIAL NETWORKING

Dictionary is a multilingual catalog of terms which is updated by the active contribution of the users. On each term, multiple descriptions are offered in the form of text, picture and video in sign language. Moreover, there is text-to-speech support.

Multimedia Library is a hosting space for every kind of archives with educational content (video-recorded lectures, notes, presentations etc) which are accessible not only to the students with special needs but to everyone.

Parallel Presentations is an online system which offers the ability to attend on lessons, labs and seminars to all users, including people with sight or hearing problems by supporting them with videos in sign language, text-to-speech, access to Dictionary etc. Furthermore, it supports distance learning with active participation and lesson recording.

Last but not least, Social Networking support promotes mass participation and communication. This is achieved with user's profile and contacts, user groups, multimedia private messages and forum. 

Based on viewing the video, I would describe the system as a learning management system that supports users with special needs by making it possible to have multiple ways of presenting the same material and a social networking aspect that enables crowd sourcing the creation of material in various formats to support the needs of the users.

It is always rewarding to see the things that people build on top of mojoPortal. By not building from scratch they saved a lot of development time and were able to focus much sooner on the functionality they wanted to build. They have plans to bring the system online in the future, so we will post about them again once it is possible to see the site, but for now you can get a pretty good idea of what they have built from the video.

California Commission on Peace Officer Standards and Training (POST)

We've featured this site before, so I'm leaving out the image, but I thought it was worth mentioning again because they let me know about an award they won and an even bigger award that they are in the running for. Quoting Linda Sabella, Information System Analyst with POST:

I just thought you might like an update on our submission of our Mojoportal site for a “Best of California” award.  We did win an award.  We won for custom software that our programmers built on top of Mojoportal that allows peace officers to access records and course catalogs. Awardees listed here http://www.centerdigitalgov.com/survey/2581

After the awards closed, the State of California CIO, impressed by our use of Mojoportal,   recommended our site for a national award.  This submission is specifically for our use of a  content management system.  We have submitted the paperwork and will let you know if we are successful in winning an award. Website http://www.nascio.org/awards/2011awards/

mojoportal has been a great asset to us.  Thank you for all of your efforts.

The Space Needle 50th Anniversary site

For those who don't know, the Space Needle, is a monument in Seattle Washington that opened just in time for the 1962 Seattle Worlds Fair and has become "Seattle's favorite icon".

A few sites were submitted by Bibiana Garcia Zapata of Colombia

I'm the leader of a community in Internet named Avanet, we found mojoPortal and now We are so happy. We help others to mount their sites with mojo in our hosting with the multiple sites feature, :) It allows us to help and promote our slogan "digital altruism", our additional projects are

Our site is www.avanet.org
and these are the projects that we help
http://www.barcampmedellin.org
http://www.anti-depredadores.org
http://senageeks.avanet.org
http://www.nexos.net.co/

Thanks to all the community members who keep us informed of the sites they are building with mojoPortal! If you've done something interesting with mojoPortal we'd love to hear from you, and maybe we will feature your site in a blog post.

Follow us on twitter or become a fan on Facebook

The menu structure is very nice and one of the most striking elements of the design. But the usability improvements are the result of making things stand out more. For example people hardly seemed to notice the forum descriptions and posting guidelines in the old design. It is right there on the page but somehow it often goes un-noticed because it doesn't grab your attention, so the result is that people often post questions in the wrong forum or leave out information that is expected to be included. With the new design, the forum description/instructions really stand out and I anticipate it will be noticed better than with the old design. Notice also the nice attention to detail for the pager link styles.

New Design Forums

Old Design Forums

Similarly, on our search page there has always been a little help link that people could click to learn how to do more advanced searching, but in the old design hardly anyone ever noticed it. Whereas again in the new design it really jumps out and I anticipate more people will click the help link and will have better luck searching once they know the tips from the help.

New Design Search

Old Design Search

A huge thanks goes out to Joe Davis for his hard work on this design! Joe is also working on a variation on this design but with a different color scheme that we will ship with a future release of mojoPortal.

What do you think? Do you like the new design better than the old one?

Please also let us know if you notice any pages on this site that don't look right with the new design, we are still tweaking a few things here and there.

Follow us on twitter or become a fan on Facebook

The City of Escondido California went live with their main site using mojoPortal back in December of 2010, but more recently they went live with a new site for their Police Department and for Recreation, and work is under way for a new site for their Fire Department.

Quoting Jamie Eubanks, a developer in the IT Department for the city:

"the PD site was pretty straightforward this time around (nothing custom). I can say that it's the great out-of-the-box flexibility of mojoPortal that allowed us to create a large and comprehensive site like this with no programming on our part. This is also our first site which was developed end-to-end by our webmaster with minimal technical support needed. She developed the site skin from scratch in Artisteer, and reused some of the layout.master tweaks we developed for the main site (like the Google Translate widget at the top of each page)."

Another recent site is the Solar Europa site designed by The Design Loft, one of our partners in the UK. They have done over 20 projects so far using mojoPortal.

We are continually adding new sites to our mojo Sites list. If you've designed a mojoPortal site that you are particularly proud of, let us know, we'd love to hear about it and maybe we will feature your site in a blog post.

Follow us on twitter or become a fan on Facebook

This is not a major update but it does have some things to make it worth upgrading.

Editor Updates

Both CKeditor and TinyMCE put out new releases with bug fixes and updates, many of which are related to IE 9 and Firefox 4.
Upgrade to CKEditor 3.5.3
Upgrade to TinyMCE 3.4.2

There was an error happening under .NET 4 Medium Trust hosting related to our older FCKeditor. Nothing had changed in this editor for a long time so I'm surprised that we had never seen this error until recently. It makes me wonder if there was some behavior change that came with a recent Windows Update. In any case, the error is fixed in this release.

jQuery Updates

We had a bug report about our jQueryUI Date Picker where it was not formatting dates correctly for en-NZ. It turned out that support for en-NZ was only added to the jQueryUI Date Picker as of version 1.8.9, so the solution was to upgrade to a newer version. However, we had been holding off on upgrading jQueryUI because we knew there was an issue in the Time Picker extension that we were using where it did not work with newer versions of jQueryUI than 1.8.6. Fortunately, we found another Time Picker extension for the jQueryUI date picker and it seems to work with any version of jQueryUI.

So we updated to jQuery 1.5.2 and jQueryUI 1.8.11. Note that upgrading is really just changing 2 config settings since we load jQuery and jQueryUI from the google CDN. So if you are using any custom jQuery plugins and they don't work with the newer versions of jQuery or jQueryUI, you could override the version from user.config to keep using an older compatible version of jQuery or jQueryUI.

Support for Newsletter Throttling

It had been requested a while back to have a way to throttle the sending of the newsletter. Blasting out an email to a lot of users in a short time can make it look like spam to some receiving mail servers, especially if you are using a consumer email account or you don't have a well known reputable mail server. So it can be beneficial to limit the rate at which you send the email messages to your list. The mojoPortal newsletter subscriber list is getting pretty large and we had some trouble with our February newsletter due to sending the emails too fast. I got a few non-delivery notifications from @msn.com and others saying that we sent too many in a short period of time. So it was a priority to implement this before we sent the March newsletter. It really helped as we had no non-deliveries related to sending them too fast. 

There is a new setting that you can override in user.config:

<!-- you can throttle the sending of the newsletter 0 = unlimited/no throttling -->

<add key="NewsletterMaxToSendPerMinute" value="0" />

If you enter a number greater than zero it will sleep for one minute after each round of sending that many. So if you set it to 10, it will blast out 10 in a row and then sleep for a minute and the repeat until it sends to each subscriber in the list. I set it to 10 before sending the March mojoPortal newsletter. Of course the larger the list the longer it will take but you can calculate approximately how long it will take at any given rate and you can use a higher setting to send them faster if you need to. 

Miscellaneous

Support for custom regex and error message for email validation on the registration page, you can override our defaults with these settings:

 <add key="CustomEmailRegex" value=""/>

 <add key="CustomEmailRegexWarning" value=""/>

Support for more page settings when creating initial content from config files

Support for configuring the Thread UICulture separately from the Culture. The UICulture is only used for choosing the resource files, whereas the Culture is used for formatting numbers, currency, and dates.

This example uses German for the numbers and date formats and uses English for the resource files.

<add key="UseCultureOverride" value="true" />

<add key="site1culture" value="de-CH" />

<add key="site1uiculture" value="en-US" />

Fixed bug in the SQL CE data layer that prevented the Newsletter feature from working in our package for SQL CE.

Lots of updated translations thanks to our Translation Team

Other miscellaneous little tweaks and fixes for things reported in the forums since the last release.

Follow us on twitter or become a fan on Facebook

Improved Usability for Multi Site Administration

There is a new site list page, that provides a link for creating new sites and a pageable list of existing sites. If you want to show the site id in the list you can add this to user.config
<add key="ShowSiteIdInSiteList" value="true" />

Improved Usability for Managing Large Site Hierarchies

When creating or editing pages there has always been a dropdown list for selecting the parent page or you could set it to root for a root level page. When sites have a large number of pages this dropdown list would become unwieldy, so we implemented a new dialog page for selecting the parent page, the dialog pages uses a treeview with populate on demand to drill down to the page you want to use as the parent page so it can better handle large numbers of pages.
The dropdown list is easier to use for sites that don't have a huge amount of pages so we made it continue to use the dropdown if the number of pages in the site is less than 150. You can configure the setting if needed or desired. For example if you prefer to always use the dialog page then you could set it to 0.
<add key="TooManyPagesForDropdownList" value="150" />

New Child Pages Site Map Module

Pages have had a setting for a long time allowing you to show the child pages site map as a menu. This can be very useful especially for pages that are just used for grouping of child pages.
But the child page site map built into the page has some limitations, for example if you want to have content on the page in addition to the child page site map, it could either go above or below the child page site map depending on the position of the control in layout.master


<portal:ChildPageMenu ID="ChildPageMenu" runat="server"></portal:ChildPageMenu>

so it was an either or kind of thing you could not do it differently on differnet pages unless you used a different skin.

So, Joe Davis implemented a new Feature Module for Child Page Site Map that you can put on a page just like any other content feature and this allows you to position it any way you like, even in side columns

Support for Slide Show Pager in Html Content Feature

Again, thanks to Joe Davis who implemented some default css and other changes needed to support the pager for the jQuery Cycle plugin that can be used in the Html Content feature for making slide shows out of html elements.

Image Gallery Improvement

Changed to use colorbox, a nicer lightbox effect instead of the previously used greybox thanks to Jamie Eubanks.

List/Links Improvement

It is now possible to browse in order to link to pages or files within the site, similar to the link browser that was already implemented in the wysiwyg editor, the new link browser populates the url textbox in the List/Links feature.

Support for Roles That Can Manage Users

allows delegating user management to users without making them full administrators.

Registration Page Improvements

Previously we could make custom user profile properties that were required for registration to appear on the registration page, but there was not a way to show optional custom profile properties on the registration page. It is now possible.

The registration agreement is now per site and has an edit page, previously it came from config files and was global to all sites in an installation.

Improvements to the Initial Content System

The Initial Content System is used to populate the first site during installation and to populate new sites when they are created. We've made changes for better support for configuration of nested pages and also created an interface that can be implemented for populating custom features. I will be updating the documentation for the Initial Content System in the next few days and will update this post with a link once it is completed.

UPDATE 2011-03-31 I've updated the article Configuring Initial Content, and added another article Populating Feature Content.

Improvements for Design/Skinning

It is now possible to import and export skins as .zip files and there is a new permission in Site Settings for "Roles That Can Manage Skins". It is also now possible to edit css files in the browser. While it is probably better to do the main skin development on your local machine, it is possible to edit css files in the browser and it is useful for small css tweaks.

You can disable the ability to upload skins and edit CSS by adding this to user.config:
<add key="AllowEditingSkins" value="false" />

I have it disabled for example on the demo site.

There is a new Page Setting that allows page specific css classes on the body tag as well as a setting for page specific menu css classes.

There is a new class on editor body making it easier when you need to override some of the styles in the editor, you can do it with body.wysiwygeditor {} in CSS.

All of the skins that ship with mojoPortal use h1 for the site name and h2 for headings of feature instances. Some designers prefer for SEO (Search Engine Optimization) reasons to not use a heading at all for the site title and use h1 for the feature instance headings. In the past we had a global config setting that could be used to override the heading:

<add key="ModuleTitleTag" value="h2" />

In the new version, it is possible to edit the setting used for feature instances right from the Feature Instance Settings page (ModuleSettings.aspx). The heading is now stored in the database so it is possible to use different headings on different instances. When new instances are created it defaults to whatever you have for this setting: <add key="ModuleTitleTag" value="h2" />

This is an advanced feature and it is possible to put something incorrect for the heading element, so it is disabled completely by default and even when it is enabled it is limited to users in "Roles That Can Manage Skins". You can enable it by adding this to your user.config:

<add key="EnableEditingModuleTitleElement" value="true" />

Since this is a new data filed used for the heading element, existing data will be updated to have h2 which is the default. However if you were previously using the config setting to force a different heading, for example if you were forcing it to use h1 by using this setting:

<add key="ModuleTitleTag" value="h1" />

then you will need to manually update the existing data by running a sql query like this:

UPDATE mp_Modules
SET HeadElement = 'h1'

Then going forward it will use the config setting for the default on new instances.

We also did a lot of work to make menu and treeview rendering more flexible. It is now possible to control which CSS classes are rendered on the menu ul, li and a elements. In the coming days I will be writing documentation about the new settings available and how to use them. I will update this post with links as I progress with the documentation.

The extra-skins.zip available on the download page also has updated skins for Artisteer 3.0 beta, as well as a number of skins contributed by community member Hennadiy of CMS-Web e-Business Solutions.

As always you should review the sticky thread about important skin changes that you will need to apply to your custom skins after upgrading.

Other Stuff

The friendly urls used in mojoPortal can be problematic for some non-ascii languages, we've had a config setting for a while that could disable it for CMS pages, but it has been requested to also be able to disable it for blog posts. It is now possible to do this from user.config
This setting disables it globally in the blog feature.

<add key="Blog:UseFriendlyUrls" value="false" />

You can also disable it for specific module ids using this pattern, where th number is the module id.

<add key="Blog:UseFriendlyUrls-3" value="false" />

As many of you probably know, javascript wysiwyg (What You See is What You Get) editors don't work in devices such as iPad, iPhone, Android, etc. Historically we have degraded to a plain text area for these devices so at least it is still possible to edit or post in the forums. In this release we integrated MarkItUp textarea editor for use with iPad and smart phones for a little better editing experience than a plain textarea. It is not a wysiwyg editor, it is an editor for html editing, the content in the editor is still raw html but there are convenient toolbar items to help you write the html.

Upgrade to TinyMCE 3.4.1
Upgrade to CKeditor 3.5.2

Many translation updates, thanks to all our translation team members and to the Amanuens service!

Various bug fixes for things reported in the forums since last release.

Corresponding Updates for Add On Products

An Update for NeatUpload is also included and this required us to make corresponding compatibility updates for Form Wizard Pro and Web Invoice Pro. Customer who have purchased these products can get the update from their purchase history under the "My Account" link.

Follow us on twitter or become a fan on Facebook

This is a compatibility update for the changes in ASP.NET that resulted from the security patch recently released by Microsoft and now available from Windows Update. I blogged about this issue previously and provided a workaround for the compatibility issue, this new release eliminates the need for the workaround.

Before the security update, there was a possibility for a System.Security.Cryptography.CryptographicException when decrypting the role cookie if the machine key had changed and the user was already authenticated. We already had error handling for this error, but after the security update the behavior changed and it would throw a more generic HttpException there which we were not handling, and this would cause users who were previously authenticated to experience an error until they cleared the cookie. Even without a machine key change, the same error could happen if a user was authenticated before the windows update was applied, the error could happen for that user after the update was applied (because there were also changes to how cookies are encrypted in the security update) In this release we have added handling for the new more generic exception so the cookie will be reset if this error occurs and the user will not experience an error on your site.

We've also removed the previous workaround for the ASP.NET security issue since it is not needed after the update is applied.

Other Changes

Thanks to Steve Railsback of Colorado State University we have some new CSS that can be used to add images to the Administration menu. It uses some Crystal Icons which are licensed under LGPL. I've updated many of the included skins that ship with mojoPortal to use the new icons, you can easily add them to your skin by adding this to your style.config file:

<file cssvpath="/Data/style/adminmenu/style.css" imagebasevpath="/Data/style/adminmenu/">none</file>

It will transform the admin menu from a plain looking vertical list to a list of images with hover effects like this:

This release also has:

• upgrade to CKeditor 3.4.1
• upgrade to TinyMCE 3.3.9.2
• updated Italian resource files thanks to Diego Mora
• fixed a bug where menu items that were configured as unclickable were still clickable in the breadcrumbs

I'd also like to point out a new article in the skinning documentation written by Steve Land, Using Wireframe Skins. Steve has shared a skin he designed to solve the problem of how to keep your discussions with clients focused on functionality when you need to. It is a very common issue that the customer can easily get side tracked onto colors and other visual aspects which is fine if you are trying to discuss the design but distracting if you are trying to focus the discussion on functionality or other non-design aspects of the site. The wireframe skin can help with this because it is designed to not be distracting and to clearly represent that the design is not what is being shown. Please let Steve know if you find his wireframe skin useful if there is interest he might make more variations.

Follow us on twitter or become a fan on Facebook

What's New?

jQuery UI Skin

This release includes a new skin based on jQuery UI, as described in my previous post, there is also a theme picker for choosing the jQuery UI theme. There are a bunch of pre-defined themes and you can roll your own with the jQueryUI theme roller, so this skin is like many skins in one.

A number of people have been asking in the forums about how to make menu items not clickable. Typically people want this when they are using a flyout menu like the jQuery Superfish menu or the horizontal menus used in Artisteer skins. Usually there is a parent page that is just a container for child pages that have the actual articles, and you may wish to make the parent menu item not clickable. If the user clicks it, it is the same as if they mouse over it, it just shows the child items and does not navigate to the page. This is now supported as described in the documentation article Un-clickable Menu Items.

Feature Setting Groups

This is something I've been meaning to do for a long time, when a feature has a lot of settings (like the blog for example), the settings page could become very daunting just because there are so many settings. By adding groups, we can organize the settings into logical groups that make it much easier for the user to digest because they can view one group at a time.

A Few Blog Improvements

As the screen shot shows, there are some new settings for the blog. You can now add extra content into the blog side bar in 2 locations. This is suitable for adding a blog roll or an advertisement or other content you would like to add to the sidebar of the blog.

There is also a new Tweet This link available in the blog, located in the Social Settings.

Limiting Available Features by Roles

This is another popular request in the forums, many users have asked about being able to filter the list of available features by roles. This is now possible from Administration > Advanced Tools > Feature Configuration, you will see a new link for permissions next to each feature and you can set roles allowed to use the feature. Note that it only controls what is available in the list when creating new content, it does not change a user's permissions on existing instances of a feature.

Other Stuff

• Upgraded from TinyMCE 3.3.7 to 3.3.8
• Upgraded from CKeditor 3.3.1 to 3.3.2
• Upgraded to the latest MySql Connector
• Updated Italian resources thanks to Diego Mora
• Updated German resources thanks to Jan Aengenvort
• the Extra Skins download file has a new skin contributed by Nitin Sharma

Bug Fixes

• fixed a redirect bug when using the MyPage feature in folder based child sites
• fixed an issue where the tabs did not work correctly on the user profile and manage users pages in folder based child sites
• fixed a bug where consuming the aggregate feed from on feed manager into another instance of Feed Manager caused the page to hang
• fixed a bug where the download link in shared files did not always work correctly in IE 8
• a few other bug fixes and enhancements based on feedback in the forums and by email

Upgrade Notes

After the previous release, 2 people reported errors upgrading and were not able to upgrade. I believe this issue happens only with SQL 2005 if it does not have all the service paks installed. This is related to changes we made to consolidate the MS SQL layer so it could support SqlAzure. In making the needed changes we made a conscious decision to drop support for SQL 2000, so our MS SQL Data layer is designed to support SQL 2005/2008/SqlAzure, but it turns out that SQL 2005 only works if you have the service paks installed. I was already running SQL 2005 Express with all service paks, so I did not anticipate any issues with SQL 2005, but apparently there are problems if you are not up to date on service paks. As always, you should backup your site and database before upgrading, and if you are using SQL 2005 you should check whether you have the service paks installed before upgrading.

 

Follow us on twitter or become a fan on Facebook

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">
  <p>
   This is styled with jQuery UI!
  </p>
 </div>
</div>

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 theme.skin 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 demo.mojoportal.com 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.

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

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

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.

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

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.

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>
<file>style.css</file>
<file>stylemenu.css</file>
<file>styletreeview.css</file>
<file>styleblog.css</file>
<file>styleforum.css</file>
<file>stylefeedmanager.css</file>
<file>styleformwizard.css</file>
<file>stylewebstore.css</file>
<file>styleaspcalendar.css</file>
<file>styledatacalendar.css</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.

12th Street Sports Bar - Tim Cartwright of US Interactive did a great job with this site for the show on Fox College Sports TV Channel.

b square, a site designed by TEAK. Notice that they implemented multiple languages and a cool language switcher and this was done with no changes to the core of mojoPortal.

Yamisee.com designed by David Dean, as David describes the site, "Yamisee.com is a new concept that allows anyone who is an expert in a field to easily post course descriptions, and deliver live content in unique virtual rooms. The site is not even at an alpha stage, but early adopters can register and launch instant meetings or schedule online meetings for free. It's a webex like experience (that part is not mojo), with enhanced meeting rooms that allow for visual, non-verbal feedback coming soon."

Antioch Community Church designed by Joe Davis of i7 Media. I really like the menu design with 2 levels of horizontal menus. Joe has even made a free skin available to the community with a menu design like this.

Adamson UAE, submitted to our Success Stories Forum just this morning has a very nice design.

cmstream.net is a site brought to my attention recently. The most interesting thing is that the site is running on Linux using Mono.

If you're doing cool things with mojoPortal let us know, we'd love to hear from you.

On a side note, this site is running the latest code testing new features for the coming release. As you'll notice for this blog post I'm now using IntenseDebate for the comments. I've also implemented support for Disqus so you will have a choice to use that as well though I'm currently finding some issues with Disqus that I'm hoping they can fix on their end or advise me on what I can do. I've added a new setting in the blog where you can choose the comment system with options Internal, IntenseDebate, and Disqus. I also implemented it such that if you have existing posts with comments already made using the internal comment system, those posts will continue to use the internal comment system but new posts will use the currently selected comment system. So this is my first post using IntenseDebate. I look forward to seeing if this increases the amount of comments or not. 

There has been a lot of buzz in the blogosphere about HTML 5 lately, from google endorsing it as the future to the W3c dropping efforts on XHTML 2 to focus on HTML 5. The consensus seems to be that HTML 5 is the future and we should start planning on using it in the future and can even use it now. It should be noted however that HTML 5 is not a standard yet, but only a draft and is subject to change before it becomes a standard and current browser support is a mixed bag.

Some useful links:

23 Essential Resources for Html 5

Misunderstanding Markup - comic that explains HTML 5 vs XHTML.

Real World Issues for a Content Management Systems To Switch to Html 5

So from reading the above linked articles and others it seems like we can easily change to the HTML 5 DocType and things will be pretty much compatible at least as long as we don't use any of the new HTML 5 elements that might not be supported in all browsers yet. In mojoPortal the doctype is declared in the layout.master file of a skin so it can be a personal choice wheether to change to the Html 5 doctype now or not. Currently the doctype in our skins is XHTML 1.0 Transitional, so to switch to HTML 5 we would just change this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >

to this:

<!DOCTYPE html>
<html>

In fact I've done that here on mojoPortal.com, though I'm running a newer build than the current release (dogfooding for the coming release), so you should probably wait for the next release to do this if you want to. One of the things I've added is an option on our validator link to configure it for HTML 5 instead of XHTML like this in layout.master:

<portal:XhtmlValidatorLink id="lnkw3cValidator" runat="server" UseImage="false" Html5="true" />

This Html5=true merely changes the label and/or image on the validator link to HTML 5. I've also added a property IncludeHtml5Script to our IEStyleIncludes control

<portal:IEStyleIncludes id="IEStyleIncludes1" runat="server" IncludeHtml5Script="true" />

if set to true we inject the javscript as mentioned in this article inside IE browser comments to make it possible to use some of the new HTML 5 elements in IE 8 (though I'm not actually using them yet to avoid compatibility issues you could use them in custom features). So it renders in the page like this:

<!--[if IE]>
<script type="text/javascript">
document.createElement("header");
document.createElement("footer");
document.createElement("nav");
document.createElement("article");
document.createElement("section");
</script>
<![endif]-->

Ok But Aren't There Any Gotchas?

I got kind of excited about changing the doctype to Html 5 just in preparation for the future even though we can't use the new Html 5 elements yet without breaking some browser compatibility, especially for IE 6. I'm sick of caring about IE 6 myself and admittedly some of our skins are a little funky in IE 6 today and I don't care enough to fix them though some of them work pretty well too. Its long overdue for users of IE 6 to upgrade. But its still in wide enough use that many web site owners do care and you can make skins that work well in IE 6 using mojoPortal its just more work tweaking the IESpecific.css file and testing in IE 6. Anyway after changing to HTML 5 doctype on mojoportal.com and testing in IE 6 and not seeing any major problems I thought I would change the included skins to HTML 5 for the next release. I did this yesterday but reverted it today. I had been testing using the wc3 validator using the direct input method, viewing the source of the page and pasting it into the validator and was happy because it was reporting it as valid HTML 5. However after testing some pages on mojoportal.com using the validator link or using the url input method I got different results. It seems there is a bug in the w3c validator where if you use direct input it passes things that should not pass but when you use the url it finds problems on the same page it validated as direct input.

Specifically what I ran into was border is not a valid attribute on img and frameborder and scrolling are not valid attributes on iframe, however the presence of these attributes does not seem to be detected correctly with the direct input validation but it is detected using url validation. I reported this bug to the w3c public mailing list tis morning. Fixing the border on img was fairly easy so I did that, you can easily set the border on img using css so its really not needed to use border="0" to remove a border for example. However the iframe issue is a lot more of a problem. If you remove frameborder="0" from an iframe there is no way to remove the 3d border that is rendered in current browsers using CSS. I don't think there is a working CSS alternative to scrolling="no" either. So for the moment I choose to just live with it that a few pages on mojoportal.com won't validate but for the skins included in mojoPortal I decided it was pre-mature for me to change the doctype to HTML 5 and changed it back and leave it up to users if they want to do that. 

As previously mentioned, HTML 5 is currently just a draft so I don't want to get too concerned with validation against it while its still draft. Who knows since current browsers don't work well look right with iframes that don't use frameborder=0 and scrolling=no, maybe they will change their minds about dropping these attributes or give us an HTML 5 Transitional to validate against that will allow these for backward compatibility.

So where does that leave us?

Well I think we have to proceed cautiously and very slowly toward HTML 5 but we are very limited in what we can do in mojoPortal without breaking compatibility especially for public facing features. If I were to start using new elements and attributes of HTML 5 it will break validation for those who choose to continue using the XHTML 1.0 Transitional doctype in their skins and it would probably break functionaility and visual layout in some browsers. Potentially we could move forward in the admin pages and other non public facing pages but the benefits would be minimal. The real value of HTML 5 will be when we can use it for public facing pages, the improved semantics available using the new elements like header, footer, section, nav, article, aside etc will be of most value in public facing pages, but we really can't move there yet because of the mixed browser support. Once HTML 5 graduates to a Standard instead of a draft and browser support for the new elements is more widespread it will be tempting but we will still be faced with that fact that many people use old browsers, perhaps even we will be waiting for the end of life of the current crop of browsers anxiously like we are waiting for IE 6 to go away today. The benefits of changing to HTML 5 doctype today are minimal and there is the minor downside of losing validation on some pages where we are using iframes and maybe other issues that I have not bumped into yet. HTML 5 does indeed look like the future but the future is not here yet unless you are willing to give up support for IE 6 and possibly even IE 7 as I'm not sure if the javascript trick for lighting up the new elements in IE works in IE 7 as it does in IE 8. (update it does work) I for one don't see the merit in building browser specific applications, the huge benefit of the web has been the ability to write apps that work in all browsers though of course there have been bumps along the way like supporting Netscape 4 was back in the day and like supporting IE 6 is today, it takes some extra work. I don't want to try and move forward too fast and find myself battling to get things working in all browsers. I'm tempted to change my doctype on this site back to Xhtml 1.0 Transitional since I'm not really getting any benefit from changing to HTML 5 doctype though I have not had any major problems other than some validation issues everything seems to work the same and nothing is visually different in any of the browsers I tested.

UPDATE 2009-08-03

I actually tried this javascript create element technique with IE 6 and it seems to work! So even though the article says IE 8, it seems it should also work for IE 6 and 7. So maybe it is possible to switch to Html 5 and use the new elements. So the remaining issues would be that there will be some things that don't validate like framborder=0 and scrolling=no that we would still need to use. And the problem still remains that if I were to start using the new html5 elements that would mean that all users of mojoPortal would need to change to the Html 5 doctype because the new html 5 elements are not valid for Xhtml.

I was very honored when one of the teams chose to use mojoPortal.

Todd Stone, Tim Mitchell, Nathan Woodward, Jay Smith, Andrew Dalgleish

You can read the full details and see before an after screenshots in this blog post by Microsoft MVP Jay Smith "We Are Microsoft: Developers Rally Around Charities"

"After checking out Telerick’s SiteFinity and Telligent’s Graffiti CMS, both very powerful and capable Content Management Systems, we elected to go with mojoPortal."

These guys really did an impressive job accomplishing so much in a very limited time frame. I congratulate them and thank them for their good work for a good cause and for giving mojoPortal the oportunity to participate in this exciting event.

How To Filter Out Un-Wanted Content From Feed Manager

by Walter Ferrari of Abertech. Big thanks to Walter! He not only helped with major improvements to the Feed Manager recently but also is willing to help with documentation which is much appreciated.

CSS - Its All About Understanding Selectors

an article I wrote today to demystify CSS a little for those trying to learn how to skin mojoPortal. Once you master CSS Selectors it becomes much easier.

Enjoy!

In the past this wasn't possible. I had written a .NET wrapper control around the ExtJs tabs, but only developers could use that, there was no simple way to create tabs right in your content. The integration with YUI tabs is a little looser, I have not implemented a .NET control for it yet though I may do so in the future. But the main scripts for YUI tabs are included by default, so you can paste a simple chunk of markup into the source view of the editor to get the start of your tabs, and then you can edit it from there to add more tabs or change the labels and contents of the tab.

Now you won't see the tabs in the editor, but when you save it you will see the tabs.

To try it out, add an Html Content instance to a page in your mojoPortal site or on our demo site. Click the edit link to edit the content, then click the source button to see the raw markup view. Now paste in this:

<script type="text/javascript">
var myTabs = new YAHOO.widget.TabView("demo");
</script>
<div class="yui-skin-sam">
<div id="demo" class="yui-navset">
<ul class="yui-nav">
<li class="selected"><a href="#tab1"><em>Tab One Label</em></a></li>
<li><a href="#tab2"><em>Tab Two Label</em></a></li>
<li><a href="#tab3"><em>Tab Three Label</em></a></li>
</ul>
<div class="yui-content">
<div><p>Tab One Content</p></div>
<div><p>Tab Two Content</p></div>
<div><p>Tab Three Content</p></div>
</div>
</div>
</div>

Save, and you will see something like this:

At some point when I implement content templates I will make it easy to do this by selecting a content template, but thought I would mention it for the more html savvy users.

Shaun Geisert, Webmaster, Division of Student Affairs, Colorado State University, recently let me know about a number of their sites already using mojoPortal as well as plans to use mojoPortal in another 20+ sites going forward.

• http://www.studentaffairs.colostate.edu/
• http://www.ascsu.colostate.edu/
  
• http://csugreeks.colostate.edu/
  
• http://wellness.colostate.edu/

Quoting Shaun: "Before discovering Mojo (I used CMS Matrix, btw), I had researched and/or used a number of other open source .NET CMSs in order to find one whose core framework best meets the needs of our numerous departments.  Since then, I’ve found it to be above and beyond anything else I’ve seen in the open source .NET realm."

When I look at all these sites I'm very impressed with the design work Shaun and his team did with all the different skins, they all look really great and it makes me proud to point them out as mojoPortal sites. They also produced a nice user guide document for their users that looks very professional and helpful and they've offered this document back to us as a contribution to the project. I probably need to de-brand it before sharing it so I'm not making it available right away, but will use it as a basis for producing a more generic user guide. To me, willingness to share is a clear sign that these guys "get" open source, and I'm really glad to have them in the mojoPortal community.

Another example of mojoPortal in use at Universities is the School of Health and Social Care at University of West England, Bristol.
http://hsc.uwe.ac.uk/school/
They supported our efforts last year to implement multiple sites on a single installation using folder names, so anyone using that feature today can thank them for their good participation in the community. Quoting Matt Cownie: "we've had a tremendous amount of utility from mojo and its saved us an awful lot of donkey work." Matt is a great guy, I really enjoyed working with him on the multi sites feature last year.

A third example is the site for the Glasgow Clinical Trials Unit.
http://www.glasgowctu.org/

Its really great to see mojoPortal catching on in Universities and other large organizations. We've got a lot of plans for continued improvements in mojoPortal and we hope to see more and more adoption.

Hey Joe,

 

Hope all is well at your end.

 

just a small thank you and whoever has worked on the development of mojoportal.

 

It is a true success story.

 

Well, just wanted to list two successful websites made using mojo.

 

https://www.lillahusetcpd.com

 

and www.rajasthanroyals.com heard of the recent success of the IPL league, cricket in India. This is the winning teams website. Both of these have been designed and developed by my team.

 

my corporate intranet is also developed around mojo completely and is awesome.

 

Thanks once again for time and dedication that has been put into this outstanding open source application.

 

Aaron Cardoz

Thanks Aaron! You made my day. You did a great job yourself with the design of these sites. Its very nice to know that mojoPortal is being used for the site of the winning cricket team!

Its available now on the download page.

The main focus of this release is making mojoPortal more attractive, with the addition of 21 good looking new skins for a total of 34 skins now included with mojoPortal. There were also a few minor bug fixes for things reported in the Forums since the last release.

Those of you upgrading should do a full upgrade, don't try to just upload the new skins as there were code changes needed to support some of these new designs. You should upload all the new files and restore your customizations to Web.config or user.config.

My goals in producing all these skins was to make mojoPortal more popular and also to prove just how skinnable mojoPortal is. You can have a site fully populated with content and dramatically change the look of it with one click by changing the skin. This shows that we really have achieved good separation of presentation from content in mojoPortal. Those of you following this blog have surely seen the screen shots over the last 20 days as I implemented these new skins. 21 skins in 20 days is not bad if I do say so myself. It says a lot about the quality of the rendered markup produced by mojoPortal that one can go and find nice standards based designs and create mojoPortal skins from them relatively easy at least if you have an understanding of html and css. All these included skins can be used as a starting point for further customization to make your own custom skins as well.

I'd like to extend a huge thanks to the great designers who have made their work available. All the new skins in this release are the work of only 7 designers, Andreas Viklund, FreeCssTemplates, Graformix, Denise Mitchinson, snop, styleshout, and arcsin.

As always, be sure and backup your site and database before upgrading and if you have any trouble let us know in the forums.

This one is based on freecsstemplates-level2.

One more to go and I'm finished with skinning for a while!

Coming up next,

styleshout-coolwater

.

There are 2 more skins coming, styleshout-coolwater, and styleshout-envision, but they are really just variations on the same design.

This will be in svn trunk later today for developers and will be in the next release of mojoPortal for everyone else.

This will be in svn trunk later today for developers and will be in the next release of mojoPortal for everyone else, hopefully available sometime this weekend.

A few of the designs I've made alternate versions of which accounts for 11 skins so far. I really only need 2 more designs to meet my original goal but I've decided to do 1 extra design. The 3 remaining designs will actually result in 6 more skins. These are the designs I've chosen to complete this skinning campaign:

styleshout-brightsideoflife
styleshout-citrusisland and  styleshout-stylevantage (which I consider as variations on the same design)
styleshout-refresh, styleshout-envision, and styleshout-coolwater, which are all variations on the same design in my opinion.

Hopefully, I can complete all of these by sometime this weekend and then ship a new release with all these new skins.

Actually I made 2 skins from this design and named the second one andreasviklund-02-alt1. The interesting thing about this skin is that it has 2 levels of tabbed menus and then a vertical menu for any pages deeper than that. In my alt1 version I took it a step further and used 3 levels of tabs and then a vertical menu to show anything deeper. This screen shot shows the alt version with 3 levels of tabs and a vertical menu for pages below that.

This will be available in svn trunk later today for developers and will be in the next release of mojoPortal for everyone else.

This will be available in svn trunk later today for developers and will be in the next release of mojoPortal for everyone else.

In my previous post I said was going to work on the styleshout skins next but I saw this one and decided to do it first.

You can see these on demo.mojoportal.com, currently its showing viktorpersson-thehobbit which I made a little wider than the original design and also improvised on a workable menu design.

Of course since its a public demo site, someone may come along and change it, but you can change it back or checkout the different skins, by (key icon) Administration Menu > Site Settings.

This will be available in svn trunk later today for developers and will be in the next release of mojoPortal for everyone else.

So I'm halfway finished with my campaign to make 10 new good looking skins!

I think next I will implement skins using styleshout-stylevantage, and styleshout-citrusisland.

This will be available in svn trunk later today for developers and will be in the next release of mojoPortal for everyone else.

I actually created 2 variations of this skin, one with the dynamic submenus hanging from the horizontal menu (which is more true to the original design), and one with a vertical sub menu for child pages instead of dynamic sub menus, named mitchinson-earthy-alt1. I like the alt1 version better myself. The flyout sub menu just makes it less user friendly and less able to support larger sites with deep page hierarchies.

I also varied a little from the design by making it 100 pixels wider and adding rounded corners on left and right side content.

So anyway we got 2 skins from this design, but it only counts as 1 of the 10 planned skins because I really want 10 new designs.

Next on my hit list is mitchinson-business3, which looks pretty straightforward to implement and should go quickly.

This will be available in svn trunk later today for developers and will be in the next release of mojoPortal for everyone else.

I've also renamed the existing skins to reference the name of the designer in the format desingername-designname. This makes it clearer as the skins are sorted by designer name. So for example, ticktockpro is now dcarter-ticktockpro, and others by dcarter have also been renamed like dcarter-orangesunset, dcarter-bluespring, dcarter-businessone, dcarter-sq2, and so on. techmania is now styleshout-techmania, and I plan to implement styleshout-citrusisland and styleshout-stylevantage as part of the 10 skins I'm making.

I'm not doing the styleshout skins next though, the next design I'm going to work with is mitchinson-earthy. My main reason for choosing this one is the horizontal menu with flyout sub menus. We have very few skins with this kind of menu and many it seems with tabs. Since my goal is to have skins that form a good starting point for customization, I think its important to get as much diversity as we can. I'm also planning to do mitchinson-business3, just because it seems a simple yet professional design and even the stock photo in the header looks good enough to be usable for a real site.

This design took me 3 full days to fiinish, it was more challenging than some I've done. It required me to implement a few things to provide options in the rendering to make it possible, so it only works with the very latest svn code of mojoPortal. Specifically the tabs in the menu required 3 span elements inside the menu links to provide the hooks for hanging the background images that make up the tabs so I had to implement a custom menu rendering option to provide this. There are several different ways of implementing tab designs using marklup and css so this just adds one more method to our options which may prove helpful for other skins. This will be in svn trunk by tonight for eager developers and will be in the next release of mojoPortal for everyone else.

I am starting on the next skin now, its another one from Graformix, named graformix-orange.

In other news, a new custom News Feature by Asad Samarian is also available on the community download page. I have not tested it myself yet and it only supports MS SQL, but for any developers who would like to try it out and give Asad some feedback in the forums, please do. The .zip appears to contain the source code, so its not really packaged for non-developers.

Thanks for all the great suggestions!

I'm still deciding which will be the 10 that I implement as skins in the coming weeks. I have some favorites among the current suggestions already but there is still time to suggest more. Even if you have no new suggestions I'm interested in your comments on these and which are your favorites. There seems to be a lot of fixed width tab menu designs. I wish I could find more diversity in the menu designs, though tabs are very cool and popular. Only the Earthy skin below has a flyout dynamic sub menu so it is likely to be one of my picks just because of this difference.

Earthy is a fixed width design with horizotal menu with flyout sub menu and earthy color scheme.

Stylevantage is a fixed width layout with horizontal menu from the same designer as the techmania skin.

Citrus Island is a fixed width design with tabbed menu also from the same designer as the techmania skin.

Rambling Soul 2 is a fixed width design with tabbed menu.

Rambling Soul 3 is a full width fluid layout design with horizontal menu.

The Daily Read is a fixed width design in the style of a newspaper. It has an interesting single level submenu that blends with the main tab menu.

Business 3 is a full width fluid layout design with horizontal menu.

Level 2 is a full width fluid layout design with an interesting horizontal menu and curved corners.

Light and Living is a fixed width design with tabbed menu.

Orange is a full width fluid layout design with horizontal menu and interesting header iimages and rounded corners.

Graformix Company is a full width fluid layout design with tabbed menu and interesting vertical sub menu.

Maeioska is a fixed width design with tab style menu.

Underground is a fixed width design with tab style menu.

Internet Broadcast is a fixed width design with tabbed menu.

Outdoor is a fixed width (rather narrow design) with horizontal menu and an interesting background image.

http://andreasviklund.com/templates/ has several nice designs. Unfortunately there aren't demos I can link to.

Cosmopolitan a narrow fixed width design, with interesting curves and tabbed menu.

Bright Side of Life a narrow fixed width design with tabbed menu.

New Horizon fixed width with expanding background and horizontal menu. Rather large top image area.

Terra Firma narrow fixed width horizontal menu.

Nautica 2.2 Liquid has fixed width borders, a fluid center section, and tabbed menu.

Small Studio is a fixed width rather plain design with vertical menu.

Cool Water is a fixed width design with horizontal menu and curved edges.

08 Gulona is a narrow fixed width design the color of split pea soup with horizontal menu.

The Hobbit is a narrow fixed width design with horizontal menu and interesting corner graphics. Not sure how well this lends itself to a CMS as there is nothning included for styling sub menus so it really is just designed for small sites with shallow menu.

Mother Earth is a fixed width design with horizontal main menu.

Refresh is a fixed width design with horizontal tabbed menu and curved corners.

Nature is a dark colored fixed with design with vertical menu.

Cold Day is a fixed width design with tabbed menu.

Dark Olive is a very narrow fixed width design with a large horse image at the top and tabbed menu with somewhat interesting sub menu.

Autumn is a very narrow fixed with design.

Pink Winter is a fixed with design.

Apple Core is a fluid layout with tabbed menu and rather small fonts.

Seasons Greetings is a fluid layout with translucent tabbed menu and a Christmas theme.

Red City is fixed width with expanding background and tabbed menu.

Aircraft Company is a fixed width design with horizontal menu using orange gradient.

Wordpress Premium is a fixed width design with a lot of rounded corner detail.

Thanks to the great work of Dean Brettle for implementing this in Mono! Dean has been involved with mojoPortal from the beginning and is also the author of 2 great projects, NeatUpload and NeatHtml, both of which are used in mojoPortal.

The need for Css Control Adapters arises from the fact that the original ASP.NET implementation of some important .NET controls like Menu and Treeview was less than ideal when first released by Microsoft. The problem was that these controls rendered as nested html tables instead of the more semantically correct nesting of ul and li elements. To solve this problem, Microsoft subesquently released the CSS Control Adapters. Since the Mono implementation of Menu and Treeview mirrored the original Microsoft implementation it also rendered as nested tables. Some plumbing was needed in Mono to support the control adapters and Dean stepped up and took on the task.

Because the mojoPortal css was designed to style nested ul and li elements and not html tables, up until now the menu in mojoPortal did not render or style correctly when running on Mono as shown in this screen shot of mojoPortal running on the current Mono 1.9 release:

and now with the latest Mono built from svn:

So I think the next release of Mono will be very exciting for anyone using mojoPortal on Mono.

Again, huge thanks to Dean Brettle, Marek Habersack, and anyone else who may have had a hand in getting this done!

Update 2008-04-10 1:46PM EST - Dean mentioned that: "Owen Brady (aka Ocean) deserves a lot of the credit.  I used his code to parse and process the *.browser files."

New this release:

AddThis.com button added to blog and to skins to make it easy for others to bookmark and share your site pages using popular bookmarking services. See my previous post for more info.

Contact Form Improvements

The contact form now persists messages to the database so messages are not lost if smtp is not configured. A cool new UI for reviewing messages has been added. It uses ExtJs Window for which I implemented a new .NET WebControl.

The window and the panes are re-sizable by dragging. I also added a Web.config option that should help users who have been reporting problems with contact form messages not being encoded correctly for Russian and other languages.

<!-- leave this blank for ascii encoding -->
<add key="SmtpPreferredEncoding" value="" />
<!-- example for Russian encoding
<add key="SmtpPreferredEncoding" value="koi8-r" />
-->

New Skin - extjsViewport1

I also implemented a new skin based on the ExtJs complex layout example, its named extjsViewport1.

I'm really just scratching the surface so far, I think it will be possible to have feature instances collapse accordian style and the possiblity to drag and drop feature instances to re-arrange content on the page. So far just some foundation work is done, but it is usable.

As always, be sure and backup your site and database before upgrading and if you have any troubles post in the forums and I will try to help.

Since releasing those 10 good looking skins the popularity of mojoPortal seemed to spike upwards fairly dramatically so I concluded that the time spent implementing those skins was well spent and the lack of good looking skins prior to that probably really was holding us back in terms of popularity. Those skins have since formed a nice starting point for others to make their own custom skins as I have seen in the wild on various mojoPortal sites.

Currently we ship about 30 skins with mojoPortal, 10 of which are good looking and 20 that are just ok or mediocre, or just outdated looking. So I'm thinking its time to drop out most of the boring ones and do another round of 10 skin implementations to bring us up to 20 good looking skins. I figure we can move the less good looking ones to the community download page so people can still get them if they want them but we will just package the 20 or so good looking ones with new versions of mojoPortal.

So I invite you to help pick out the designs for the next 10 skins that I will implement. Please post links in the comments to this post pointing to the designs you like the best. They have to be free, open source, and Xhtml compliant. Preferably with no tables used for layout and with ul and li elements used for the menu. Extra points for designs with interesting menu styling that is different than anything we have now. When I look at the designs I also consider whether they will make a good starting point for users to make custom skins.

Some places where you can browse good designs:

http://www.opendesigns.org/
http://www.openwebdesign.org/
http://www.opensourcetemplates.org/
http://www.oswd.org/

Let me know of others and I will update this post.

Now is your chance, if you know of a good looking design but not sure how to implement it as a skin yourself, post a link. If I agree its a good looking design I will probably implement it, it just depends on how many good suggestions I get. The 10 that I like best I will implement.

My goal is that when people try out mojoPortal they find it has a lot of good looking designs included so they have a lot to work with in customizing them for their own sites. So please, help me pick some really good looking ones!

I was fortunate enough to work on the project with the good folks at DDB Seattle. They did all the design work and my job was achieving their design in mojoPortal and building a couple of custom features like the Take The Pledge and Pass on The Pledge pages. Its nice to be involved in such a good cause. Recycling is something where each of us can make a difference with just a little effort and America Recycles Day is a good time to take a moment and commit to stepping up our efforts to recycle on an individual basis.

A.Samarian submitted this nice site: http://yaldasazeh.com/ , I can't read it because its in Persian but it looks nice and is a good example of a site using Right To Left layout. Persian text is very beautiful.

Summit IT Solutions also did a great job with the custom skin they made for their site: http://summititsolutions.com/

Know of any more mojoPortal based sites not already listed on the mojo Sites page? Let me know and I'll add them.

I was going to wait and try to get finished with the Newsletter feature I'm working on for this release but since I'm getting side tracked with some customer work (which is a good thing) I thought I should go ahead and make a release to get the new skins out there.

This release contains a few bug fixes and 7 new skins as mentioned in my previous post.

You can see these on the demo site:

http://demo.mojoportal.com/?skin=bluespring

http://demo.mojoportal.com/?skin=orangesunset

http://demo.mojoportal.com/?skin=turnitup

http://demo.mojoportal.com/?skin=businessone

The first 3 are in svn trunk and the 4th one will be in there in a few hours.

I'm still working on even more skins. I want mojoPortal to have a lot of great looking skins included. Any of them can be used as a starting point for further customization.

UPDATE 2007-09-15: added another new skin today:

http://demo.mojoportal.com/?skin=sq2

 UPDATE 2007-09-16 added another new skin today:

http://demo.mojoportal.com/?skin=colorpencils

 UPDATE 2007-09-17 added another new skin today, this one was suggested by Brian Nicol:

http://demo.mojoportal.com/?skin=uncreativesuite

This release contains bug fixes since the last release, and the 3 new skins I implemented recently. Since these skins are much better looking than most of our existing skins I wanted to go ahead and make a release so people can use them.

I still plan to implement more new skins in the coming weeks.

As always be sure and back everything up before upgrading, read the upgrading tips, and post in the forums if you have any difficulties and I will try to help.

We did not release a new build for Mono, and probably won't do that until Mono 1.2.6 is released.

You can see it now on the mojoPortal demo site, and I'll have it in svn trunk later this evening.

That makes 3 new good looking skins this week, and I plan to do more of them in between my other work.

Did you know that you can preview skins with a query string param? So you can see each of the 3 skins I made this week using urls that specify the skin like this:

http://demo.mojoportal.com/?skin=tabular1

http://demo.mojoportal.com/?skin=techmania

http://demo.mojoportal.com/?skin=ticktockpro

I'm on a roll with implementing new skins now that I've found so many good free designs. This one took a bit longer than the first one. I spent at least 10 hours tweaking things until I was satisfied, but things I learned doing this one may make it go better for other ones.

I'm moving on to do another skin now, it is my mission to have a lot of great looking skins included in mojoPortal. If its bling the people want then the people shall have bling!

I also got started on another skin using this design, but its not finished yet. Since there are so many good free designs on sites like OpenDesigns.org, OpenWebDesign.org, and OpenSourceTemplates.org, I plan to spend the next week implementing new skins to include in mojoPortal. I'm not a good designer myself but I do have a good understanding of CSS and can usually implement a skin using someone else's design. I've downloaded quite a few designs and am picking ones that I think will show a lot of variety. If anyone wants to suggest designs from one of these sites that they would like to see implented as a mojoPortal skin I'm open to suggestions.

Let me know what you think of the new skin on the demo site, do you like it? Do you think its better looking than the other mojoPortal skins. I do ;-)

A lot of people like tab style menus and they do look nice though you are limited to how many items you can have in a horizontal menu. I implemented this skin so that only top level pages are in the top horizontal tab menu and cild pages beneath those are in a vertical tree menu.

I'm not much of a designer myself but I can usually make a skin pretty easily from existing designs.

Some of you may be scratching your head and wondering what are markup semantics so I'll explain a little. Historically most web developers and designers have just done whatever it takes to make a web page look a certain way in the browser, we haven't really considered what should the html itself look like very much. The w3c standards and recommendations have been evolving all the while in the background and they have quite a bit to say about how html documents should be structured.

It starts with simple things like the most important heading on the page should use an h1 element and other things on the page should use h2 then h3 and so on for headings in order of importance and containment. Raise your hand if you've ever put a title in an h1 tag then changed it to an h4 or h5 because it was too big. Hasn't everyone done that at some time or another or perhaps we just don't use any h elements at all we just use css to assign a large font that looks like a heading in the browser. By making the most important heading on the page h1 and the next level down h2 and so on we are adding meaning to the markup without regard to its presentation and that meaning will be there even if there is no css. It gives meaning that is helpful for search indexes, screen readers and other devices or web clients so that they can better understand your content. If the default font size for h1 looks too big that can easily be changed with css. The idea is the html should convey a lot of information about the structure of your content and presentation can be handled by css.

Another important example is with lists, I know plenty of times in the past I've made lists of links by just using a br after each link in the list. It looked the way I wanted it to in the browser but it doesn't convey the idea that this is a list. Its much more meaningful to use a ul with li elements to convey a list but when we tried that it indented and put bullets we didn't like so we went back to the br approach. The smart way is to use the ul and li but style it the way we want with css. If we don't like the bullet we use list-style:none;. If we don't like the indent we can use a margins or padding negative amounts if needed. Now the search indexes know this is a list and it still looks the way we wanted.

A good book for those who would like to learn more:

Another important thing is to reduce as much unsemantic markup as possible. That is avoid extra divs and spans as much as possible. Sometimes you really need them to achieve a visual design goal but keep it to a minimum is a worthy goal both in terms of semantics and in terms of performance.  Less markup means faster page loads. The book above and some others have shown me that often when I thought I needed a div to style it was possible to achieve the same result without it, css is very powerful. There is a lot more to it so I recommend the above book as a starting point to learn more but these are some of the core goals and benefits.

I mention this because I've done a lot of work in mojoPortal recently to improve the semantics of the markup including better use of headins and lists. I've also gone through each of the included skins and painstakingly split the css into separate files:

• style.css which ties the others together
• stylelayout.css which has css rules for position, margins, padding, etc
• stylecolors.css
• styleborders.css
• styleimages.css
• styletext.css

These changes are in svn and will be in the next release which should be pretty soon. It was a lot of tedious work cutting and pasting the css to organize it this way in all the skins included with mojoPortal but I think it makes it easier to manage and to understand.

• better CSS organisation and 2 great looking new skins by Jasmin Savard
• improvements to forum administration and menu system by Dean Brettle
• improvements for blog category management
• Dutch Culture file by Jan Hussaarts
• a number of bug fixes