2.2

Manuals Brands Objectif Lune Manuals Applications PrintShop Web

PrintShop Web

Skinning Guide

Summary of content (45 pages)

PAGE 1

PrintShop Web Skinning Guide
PAGE 2

PrintShop Web Skinning Guide Document version: PSW 2.2 R4300 Date: May, 2008 Objectif Lune - Contact Information Objectif Lune Inc. 2030 Pie IX, Suite 500 Montréal, QC Canada H1V 2C8 Tel.: 514-875-5863 Fax: 514-342-5294 www.objectiflune.com To find an Objectif Lune office near you and for more information on our products and services, visit: www.objectiflune.
PAGE 3

Table of Contents Introduction................................................................................................................................................. 5 Skinning....................................................................................................................................................... 5 Templates and styles.................................................................................................................................. 6 Getting started...
PAGE 4

Overview tables....................................................................................................................................... 30 Head...........................................................................................................................................................31 Subhead.....................................................................................................................................................31 Content..............................
PAGE 5

Introduction With the introduction of version 2.0 the PrintShop Web (PSW) web site is fully skinnable, everything except the actual textual content of the page can - and will - vary from skin to skin. A skin is a series of files that control the presentation of the web site. To allow PSW to be skinnable, style is completely separated from contents. The web page use standard HTML elements, user defined classes and unique IDs.
PAGE 6

PSW can use different skins for each company, allowing your customers to use the system in their own house style or a style that closely matches their house style (depending on the time and effort you have spend to match there corporate site). Users of that company can access the PSW web site via a personalized URL which will invoke their skin. Personalized URL is controlled by the PSW administrators by defining an URL variable for each company. For example: http:/www.yourprintshopweb.
PAGE 7

Getting started Creating a skin for the first time can be a daunting and sometimes a time consuming task. This section gives you an overview of useful tools and sources on the web. Creating your own skin Before creating your own skins you should have some basic knowledge of HTML and CSS. There are fine books on these subjects and you will find a lot of information on the web. The web is probably your best source.
PAGE 8

The style.php file in Notepad++ Browser extensions The toughest part will be to keep your skin compatible with the various browsers and browser versions. You can download and install additional browser extensions that will help you during skin creation. Typically these extensions expose the hierarchical structure of your web page allowing you to identify tag names, ids and CSS classes quickly. These extensions are available for all popular web browsers and can be downloaded for free.
PAGE 9

The ID and class details are exposed by the Web Developer extension PrintShop Web Skinning Guide | 9
PAGE 10

File organization Skins are organized under the Templates folder located in the PSW web site folder. Each skin has its own directory tree. The name of this folder will be visible in the Skin-pull down menu in the Web design section of a company and in the web design page in the Settings-menu. Skin folders stores the items required to render a skin and can contain an unlimited number of files and sub folders. A skin consists of the following elements: • • • • Template.
PAGE 11

Web design parameters By editing the web design settings of a company you can specify company specific colors, fonts and logo. Using special functions a skin can retrieve these parameters and use them in the Style.php file.
PAGE 12

The template file The Template.php file contains HTML code with a few snippets of PHP. These PHP snippets control the rendering of PSW function blocks on apage by page basis. Examples of functions blocks are: the menu bar, sub menus, the user info bar, the main content area. A sample PSW web page showing various function blocks Function blocks The design and positions of these blocks can be changed by altering the Style.php file and changing the code and its position in Template.php.
PAGE 13

0){ ?>

PAGE 14

As you can see the PHP snippets perform a function_exists check. You should not alter these checks but you may add HTML tags and information inside or outside these checks.

User information This function will add the User Info block to your site. This block shows the name of the logged on user, an option that lets the user edits his or her personal information and the Log off option. The Edit user info is optional and depends on the role of the logged on user. In the default the user User Info block is dark blue and placed just above the menu bar In the picture above additional text is added to the user info bar (the text PSW).

PAGE 16

The login page showing a headline and descriptive text Content The generateContent function renders the main area. It holds the overview information, forms, buttons and the main process functionality of the PSW system. At the Login page shown previously the login details and the Login button are part of the information rendered by the generateContent function. Sub menus Sub menus are uses throughout the PSW web site.

PAGE 17

Summary The summary is a special block in the Order Manager that shows summary information regarding the orders in a specific order folder. Preview The generatePreview function renders the sidebar items that hold preview information. This can be the part of the site that hold the thumbnail when previews are requested or hold the thumbnail information and download link in the Order Manager section. Footer This functions lets you render a site wide footer.

PAGE 18

Style.php The style files hold the styling parameters for your skin. It defines the fonts,colors, borders, backgrounds, width and height specifications of the user interface elements.

PAGE 19

CSS Syntax The CSS syntax is made up of the following parts: a selector, a property and a value: selector {property: value} Normally the selector is the HTML element/tag you wish to style, the property is the attribute you wish to change, and each property can take a value. A colon is used to separate the property and its value. They are surrounded by curly braces, see the snippet below: h1 {color: lime} You can specify more than one property, the properties should be separated by a semicolon.

PAGE 20

You can insert comments in CSS to explain your settings. Like HTML comments, CSS comments will be ignored by the browser. A CSS comment begins with "/*", and ends with "*/". /* Submenu and Search items start here */ #search, #submenu, #submenu1, #submenu2, #preview, #summary { width: 100%; } /* multi-line comment here */ Global styles The Style.php file holds the style definitions that apply to all pages in the system. At the beginning of the file the skin_customization.

PAGE 21

Browser exceptions To solve browser specific rendering issues you can create style exceptions for a specific browser or browser version. Below a snippet from the style-moz.php exception file (FireFox). /* ** Mozilla specific style sheet entries */ * { -moz-box-sizing: border-box; } .formLabel, .downloadLineLabel, .formStatic, .fieldComment, .formStaticUnits, .formStaticPrice, .formLink, .formStaticFlex, .formSelect, .formField, .formFieldNoWidth, .progressLabel, .progressBarWrapper, .progressBarItemDone, .

PAGE 22

Operating systems The operations system names use the following abbreviations: • • • • nt = Windows XP nt = Windows 2003 Server nt = Windows NT mac = Mac OS X Note: Exceptions made for FireFox are stored in a moz exception file. When making an exception for a specific version of FireFox the version number should refer to the Mozilla engine, this number differs from the FireFox version number.

PAGE 23

Header The information stated in the header div is used to display the main page header or title. This is the place to show a system wide logo or the logo of your customer. The default skin showing the PSW logo as the header image Replacing content The HTML snippet below shows the header div containing a < h1> tag. Using the Style.php you can replace its contents by a logo uploaded in the Edit Web Design page. This allows the system to show a company specific image or logo.

PAGE 24

User information The User Info block displays the name of the logged on user, an option that lets the user edit his or her personal information and the Log off option. The Edit User Info is optional and depends on the users role. In the default the user User Info block is dark blue and placed just above the Menu bar In the default skin the User Info bar is placed just above the Menu bar. Using styling parameters the two seem to be surrounded by border.

PAGE 25

Adding additional information The User Info bar has additional information. The code in the template file uses generateUserInfo to retrieve the cAdditionalInfo text from the language strings. The value for this string can be changed using the Edit language page in the Settings section. This variable is used for a global language dependent message. In the default setup the value for this string is PSW. Hard coded text and other elements can be added to the HTML code.

PAGE 26

Menu bar The Menu bar provides access to the main sections of PSW. Like the User Info bar the items of the Menu bar are created using HTML lists, which means that you can change its orientation by altering the CSS file. In the default skin the Menu bar is placed directly beneath the User Info bar Styling the menu items The Menu bar is generated using HTML lists, within the list items hyperlinks ( tags) are used to define the target when the user clicks the item.

PAGE 27

Below you'll the menu items in the Style.php file. The following CSS code is used to show a horizontal menu bar. By removing the display: inline attribute of the

tag the orientation is changed from horizontal to vertical.

PAGE 28

Creating a Tabbed menu Below is a sample of the Menu bar where the menu items have a tabbed style. To achieve this a repeating background image is added to the

tag. Space is added between the items by adding a right margin. To complete the design border attributes are set for top, left and right sides of the

tag.

PAGE 29

Background The tag has two attributes to specify backgrounds. The background can be a color and/or an image. These attributes can be added directly in the Template.php file (bgcolor and background) or to the Style.php file. Adding a background image Background-images can be used in most HTML elements - not just for the whole page (body) and can be used for simple but effective results, such as rounded corners. Example: body { background-image: url("images/main-bg.

PAGE 30

Overview tables Overview pages show tabular data (for example the Companies, Users and Publication Types pages). An overview table is build using the table tag and follows the regular HTML

tag structure.

PAGE 31

44p
	Objectif Lune