Skin System Revamp in SN7

If you have been working with Sense/Net in the past, either built websites, intranet sites or document handling systems, it’s most likely you wanted to customize the user interface to give a unique and individual appearance for your solution. Although this has always been possible with Sense/Net, you had to look up all related files and controls that needed to be customized, at dozens of places in the Content Repository.

Now we are working to make the structure much more adherent. We want to create easy-to-use, responsive, customizable skins, and deliver you a structure, where all necessary resources can be found easily in one place. This way, no unnecessary searches and investigations will be needed across the Content Repository to find all related contents.

The new concept

The new skin-system will include more controls than ever: besides the custom script files and style sheets, a bundle of customizable content is included here:

Tree Structure under Skin

From now on you will be able to create, store and find additional files here for skin-related:

  • Content and List Views
  • Field Control Templates
  • Page-and other templates
  • UI module-plugins (built-in controls)

As modular plugins, there are a bundle of customization files for custom-walls for displaying collaborational content, the config file to the RichTextEditor’s toolbar, the editor files for CommandButtons, notifications and also for pagers and other toolbars -- all adjustable by the skin.

As the very first step, we included two additional skins in SN7, besides the customary sensenet-, and default-skin. With these we provide the opportunity to apply the most popular frontend- frameworks: Bootstrap and Foundation.
In these skins -named snbootstrap and snfoundation- we placed predefined Page Templates, built up by the Foundation-or Bootstrap framework, and the custom style-sheets, font-faces, and javascript files. Our primary goal was to prepare the Sense/Net UI framework for you to easily paste your predefined, individually generated Foundation 5 (soon Foundation 6) or Bootstrap 3 skin.

First steps: Page Templates

Skin-related Page Templates:
To make use of skinnable Page Templates, you have to follow consistent naming through all the skins you want to apply. All pagetemplates with the same Portlet-Zones must have the same name.

The Structure of Page Template

If you want to use the same layout in another skin as well, just create a similar one, but customize the class names as your style-sheets and javascript files use them. This way you will be able to re-use totally responsive templates to your Portlet Pages.

Responsive Page Template

As we are aiming to shape the new architecture of SN7, not only Page Templates, but all other contents in relation with the User Interface is going to be replaced here. The next step is replacing all built-in controls, like ActionLinkButtons, ActionLists, ActionMenus.

Finally, we are committed to rebuild the Portal Remote Control as well, so it will be skinnable too in the near future!

Comments are closed

Welcome to the blog!

Sense/Net ECM is ever evolving. Community means the world to us so we want to keep you apprised on what’s happening on our side of the woods. Want to make us happy? Add a comment and tell us what you think!

Month List