|
Customization
#PowerWindows allow you to customize the look and feel of your Portal. IntroductionBy customizing you can influence the layout and the look of the windows of your website. Details
By unzipping your PowerWindows installation you will get a folder 'config'. Herein you find two configuration files: For frontend customization you will make use of the portalSettings.js file. Please note that the portalSettings file really is a Javascript source file that will be loaded into the Web page in the first place. Therefore be very careful editing this file. (There is also a verification programm that can be used to evaluate the integrity of the config - have a look at /veris/veriSettings.html). The second file (bootconfig.js.cfg) is for determination of module loading at boot time (boot refers to any time when a clients browser downloads and executes the portal) . LayoutThe layout consists of four elements that can be set individually: "LAYOUT" : //sizes for your portal {"TOP" : "22", "LEFT" : "400", "CENTER" : "center is auto - do not set", "RIGHT" : "0" } The TOP element spans the whole clientwidth and can be used to host a menu or anything else that has a large width. Please note that the top element (currently) does stack its child windows (snapIns) in a vertical order, so you won't be able to host many snapIns here - but this is about to change and horizontal layout elements may then stack their elements horizontally in the future. The LEFT element is the most determined element of the layout, since CENTER and RIGHT are calculated out of this setting. The CENTER element is never set but depends on the LEFT and RIGHT element. In a three column layout for example you would set the LEFT to 250 and the right to 200. On any resize event (including the first output of the layout) the width of the CENTER Element would be calculated by subtracting the LEFT and RIGHT settings from the current clientwidth. You guessed it: there is no FOOTER element, since by design the layout is about to grow downwards and therefore no footer would be of much sense. Windows"WINDOWS" : {"HEADER_HEIGHT" : "36", "FOOTER_HEIGHT" : "10", "EXTX" : "650", "EXTY" : "500", "ORGX" : "100", "ORGY" : "250", "CENTER": "true", "HIDEONDRAG" : "false", "DRAGSHIM" : "dragShim_12" //the drag shim div for drag optimizing.
} HEADER_HEIGHT The Height of the Titlebar of your windows. Please note that usually the titlebar is also determined by CSS (see /assets/window12.css) which means that if you make your titlebar bigger the background images may need to be adjusted also. FOOTER_HEIGHT The height of the footer of a window. DRAG_SHIM Names an element that is used to speed up dragging. The name you provide here will just be a name, the system creates a DIV dynamically in any case for you.EXTX/EXTY The initial size of content windows. When you load content by using the method requestContent the Framework is displaying a window of this size (in px). ORGX/ORGY Not used. CENTER Not used.HIDE_ON_DRAG Not used. Custom SkinsYou can skin your portal in different ways. One is to provide a custom css file where you override the definitions that are made in window12.css. You actually can provide your own HTML Code that will be merged into the Window titlebar on load. Current Version 1.3 supports HTML merging of titlebars only. But future releases will also allow HTML Code for the footers also. Please note: by design the HTML merging is currently applied to all windows. Future releases will allow customization of each named window differently. "CUSTOMCONTENT" : {"HEADER" : "/2112PowerWindows/templates/bgcc/header.html", "FOOTER" : "", "STYLE" : "/2112PowerWindows/templates/bgcc/bgcc.css" } HEADER Provide a URI to your html Code here. Note that the code MAY NOT CONTAIN HTML, BODY and HEADER Tags. |
Sign in to add a comment
