Posts in Category: Site Design

Second Skin of 10 Implemented - Graformix Orange

I've completed the second skin of my 10 skin campaign, graformix-orange, which can be seen on demo.mojoportal.com. 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.

graformix-orange skin screen shot

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.

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

First New Skin of 10 Completed - Graformix Company

I just completed the first of ten new skins I plan to create for mojoPortal. This one is called graformix-company, you can see it now on demo.mojoportal.com, of course since this is a public demo site someone may come along and change it to a different skin, but you can always change it back by going into (key icon) Administration > Site Settings on the demo site.

garformix-company skin screen shot

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.

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

Skin Design Suggestions from The Community

Here are some of the designs suggested by the community from my previous post where I requested suggestions for designs to implement as mojoPortal skins along with my analysis of them.

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.

Gravatar

Support For Css Control Adapters Has Landed in Mono svn

Those of you who have been using mojoPortal on Mono will be excited to hear of an important milestone reached in the Mono project. Recently in Mono's svn repository (r100264 or newer) has landed support for ASP.NET CSS Control Adapters.

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:

menu style without css adapters

and now with the latest Mono built from svn:

menu with css control adapters

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."

 

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

mojoPortal 2.2.5.2 Released

I'm happy to announce the release of mojoPortal 2.2.5.2.

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.

screen shot of message list

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.

screen shot of extjsViewport1 skin

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.

 

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